From 0aa642af4ea372d8ad6fcaccccc410f2f97521b7 Mon Sep 17 00:00:00 2001
From: Sami Jaber <jabersami@gmail.com>
Date: Wed, 16 Oct 2024 23:39:17 -0300
Subject: [PATCH] Fix: useTarget + useState (#1596)

* f

* f
---
 .changeset/pretty-pears-do.md                 |  5 +++
 .github/workflows/checks.yml                  |  8 ++---
 .../__snapshots__/alpine.test.ts.snap         | 12 +++++--
 .../__snapshots__/angular.import.test.ts.snap |  6 ++++
 .../__snapshots__/angular.mapper.test.ts.snap |  6 ++++
 .../__snapshots__/angular.state.test.ts.snap  |  6 ++++
 .../__snapshots__/angular.styles.test.ts.snap |  6 ++++
 .../__snapshots__/angular.test.ts.snap        | 12 +++++++
 .../__tests__/__snapshots__/html.test.ts.snap |  8 +++++
 .../__tests__/__snapshots__/lit.test.ts.snap  | 12 +++++--
 .../__snapshots__/marko.test.ts.snap          | 14 +++++---
 .../__snapshots__/mitosis.test.ts.snap        | 32 ++++++++++++++++---
 .../__snapshots__/parse-jsx.test.ts.snap      | 30 +++++++++++++----
 .../__snapshots__/preact.test.ts.snap         | 14 ++++++--
 .../__tests__/__snapshots__/qwik.test.ts.snap | 12 +++++--
 .../__snapshots__/react-native.test.ts.snap   | 14 ++++++--
 .../__snapshots__/react.test.ts.snap          | 12 +++++++
 .../__tests__/__snapshots__/rsc.test.ts.snap  | 14 ++++++--
 .../__snapshots__/solid.test.ts.snap          | 28 +++++++++++++---
 .../__snapshots__/stencil.test.ts.snap        | 12 +++++--
 .../__snapshots__/svelte.test.ts.snap         | 12 +++++--
 .../__tests__/__snapshots__/taro.test.ts.snap | 14 ++++++--
 .../vue-composition.test.ts.snap              | 12 +++++--
 .../__tests__/__snapshots__/vue.test.ts.snap  | 14 +++++---
 .../__snapshots__/webcomponent.test.ts.snap   |  8 +++++
 .../src/__tests__/data/use-target.raw.tsx     | 11 ++++++-
 packages/core/src/parsers/jsx/state.ts        | 17 +++++++++-
 27 files changed, 303 insertions(+), 48 deletions(-)
 create mode 100644 .changeset/pretty-pears-do.md

diff --git a/.changeset/pretty-pears-do.md b/.changeset/pretty-pears-do.md
new file mode 100644
index 0000000000..fd913fe3c1
--- /dev/null
+++ b/.changeset/pretty-pears-do.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[All]: Fix: accessing `useState()` getter/setter within `useTarget()`
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
index 3e193598b4..ff9faae617 100644
--- a/.github/workflows/checks.yml
+++ b/.github/workflows/checks.yml
@@ -51,7 +51,7 @@ jobs:
           cache-install-state: true
 
       - name: Build
-        run: yarn ci:build --verbose
+        run: yarn ci:build
 
   test:
     runs-on: ubuntu-latest
@@ -71,7 +71,7 @@ jobs:
           cache-install-state: true
 
       - name: Run tests
-        run: yarn ci:test --verbose
+        run: yarn ci:test
 
   site:
     runs-on: ubuntu-latest
@@ -111,7 +111,7 @@ jobs:
           cache-install-state: true
 
       - name: Build
-        run: yarn ci:build --verbose
+        run: yarn ci:build
 
       - name: Run E2E tests
-        run: yarn ci:e2e --verbose
+        run: yarn ci:e2e
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index b02d191998..a3439ba0fb 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -2771,8 +2771,12 @@ exports[`Alpine.js > jsx > Javascript Test > useTarget 1`] = `
       },
 
       lastName: \\"bar\\",
+      foo: \\"bar\\",
 
-      init() {},
+      init() {
+        console.log(this.foo);
+        this.foo = \\"bar\\";
+      },
     }));
   });
 </script>
@@ -5577,8 +5581,12 @@ exports[`Alpine.js > jsx > Typescript Test > useTarget 1`] = `
       },
 
       lastName: \\"bar\\",
+      foo: \\"bar\\",
 
-      init() {},
+      init() {
+        console.log(this.foo);
+        this.foo = \\"bar\\";
+      },
     }));
   });
 </script>
diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
index dd65efd0b0..c4d5af9540 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -6858,9 +6858,12 @@ export default class UseTargetComponent {
     return prefix + \\"foo\\";
   }
   lastName = \\"bar\\";
+  foo = \\"bar\\";
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
+      console.log(this.foo);
+      this.foo = \\"bar\\";
     }
   }
 }
@@ -14273,9 +14276,12 @@ export default class UseTargetComponent {
     return prefix + \\"foo\\";
   }
   lastName = \\"bar\\";
+  foo = \\"bar\\";
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
+      console.log(this.foo);
+      this.foo = \\"bar\\";
     }
   }
 }
diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
index f4aeba006b..35b832b7f9 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -6971,9 +6971,12 @@ export default class UseTargetComponent {
     return prefix + \\"foo\\";
   }
   lastName = \\"bar\\";
+  foo = \\"bar\\";
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
+      console.log(this.foo);
+      this.foo = \\"bar\\";
     }
   }
 }
@@ -14504,9 +14507,12 @@ export default class UseTargetComponent {
     return prefix + \\"foo\\";
   }
   lastName = \\"bar\\";
+  foo = \\"bar\\";
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
+      console.log(this.foo);
+      this.foo = \\"bar\\";
     }
   }
 }
diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
index eecc77004f..4f14d330c2 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -7076,9 +7076,12 @@ export default class UseTargetComponent {
     return prefix + \\"foo\\";
   }
   lastName = \\"bar\\";
+  foo = \\"bar\\";
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
+      console.log(this.foo);
+      this.foo = \\"bar\\";
     }
   }
 }
@@ -14734,9 +14737,12 @@ export default class UseTargetComponent {
     return prefix + \\"foo\\";
   }
   lastName = \\"bar\\";
+  foo = \\"bar\\";
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
+      console.log(this.foo);
+      this.foo = \\"bar\\";
     }
   }
 }
diff --git a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
index 7162b96608..b2ffcbbd8c 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -6132,9 +6132,12 @@ export default class UseTargetComponent {
     return prefix + \\"foo\\";
   }
   lastName = \\"bar\\";
+  foo = \\"bar\\";
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
+      console.log(this.foo);
+      this.foo = \\"bar\\";
     }
   }
 }
@@ -12805,9 +12808,12 @@ export default class UseTargetComponent {
     return prefix + \\"foo\\";
   }
   lastName = \\"bar\\";
+  foo = \\"bar\\";
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
+      console.log(this.foo);
+      this.foo = \\"bar\\";
     }
   }
 }
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index 370380078a..f760ac8438 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -12868,9 +12868,12 @@ export default class UseTargetComponent {
     return prefix + \\"foo\\";
   }
   lastName = \\"bar\\";
+  foo = \\"bar\\";
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
+      console.log(this.foo);
+      this.foo = \\"bar\\";
     }
   }
 }
@@ -12909,9 +12912,12 @@ export default class UseTargetComponent {
     return prefix + \\"foo\\";
   }
   lastName = \\"bar\\";
+  foo = \\"bar\\";
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
+      console.log(this.foo);
+      this.foo = \\"bar\\";
     }
   }
 }
@@ -26852,9 +26858,12 @@ export default class UseTargetComponent {
     return prefix + \\"foo\\";
   }
   lastName = \\"bar\\";
+  foo = \\"bar\\";
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
+      console.log(this.foo);
+      this.foo = \\"bar\\";
     }
   }
 }
@@ -26893,9 +26902,12 @@ export default class UseTargetComponent {
     return prefix + \\"foo\\";
   }
   lastName = \\"bar\\";
+  foo = \\"bar\\";
 
   ngOnInit() {
     if (typeof window !== \\"undefined\\") {
+      console.log(this.foo);
+      this.foo = \\"bar\\";
     }
   }
 }
diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
index 772c745a2e..d5bf914daa 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -6831,6 +6831,7 @@ exports[`Html > jsx > Javascript Test > useTarget 1`] = `
         return prefix + \\"foo\\";
       },
       lastName: \\"bar\\",
+      foo: \\"bar\\",
     };
 
     let context = null;
@@ -6865,6 +6866,9 @@ exports[`Html > jsx > Javascript Test > useTarget 1`] = `
     update();
 
     // onMount
+    console.log(state.foo);
+    state.foo = \\"bar\\";
+    update();
 
     // Helper text DOM nodes
     function renderTextNode(el, text) {
@@ -13784,6 +13788,7 @@ exports[`Html > jsx > Typescript Test > useTarget 1`] = `
         return prefix + \\"foo\\";
       },
       lastName: \\"bar\\",
+      foo: \\"bar\\",
     };
 
     let context = null;
@@ -13818,6 +13823,9 @@ exports[`Html > jsx > Typescript Test > useTarget 1`] = `
     update();
 
     // onMount
+    console.log(state.foo);
+    state.foo = \\"bar\\";
+    update();
 
     // Helper text DOM nodes
     function renderTextNode(el, text) {
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index 1be58093e5..ed58ebf9da 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -4172,13 +4172,17 @@ export default class UseTargetComponent extends LitElement {
   }
 
   @state() lastName = \\"bar\\";
+  @state() foo = \\"bar\\";
 
   get name() {
     const prefix = \\"li\\";
     return prefix + \\"foo\\";
   }
 
-  connectedCallback() {}
+  connectedCallback() {
+    console.log(this.foo);
+    this.foo = \\"bar\\";
+  }
 
   render() {
     return html\`
@@ -8849,13 +8853,17 @@ export default class UseTargetComponent extends LitElement {
   }
 
   @state() lastName = \\"bar\\";
+  @state() foo = \\"bar\\";
 
   get name() {
     const prefix = \\"li\\";
     return prefix + \\"foo\\";
   }
 
-  connectedCallback() {}
+  connectedCallback() {
+    console.log(this.foo);
+    this.foo = \\"bar\\";
+  }
 
   render() {
     return html\`
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index b85808e5ad..4c8506deab 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -2509,10 +2509,13 @@ exports[`Marko > jsx > Javascript Test > useTarget 1`] = `
   }
 
   onCreate() {
-    this.state = { lastName: \\"bar\\" };
+    this.state = { lastName: \\"bar\\", foo: \\"bar\\" };
   }
 
-  onMount() {}
+  onMount() {
+    console.log(this.state.foo);
+    this.state.foo = \\"bar\\";
+  }
 }
 
 <div>\${component.name}</div>"
@@ -5017,10 +5020,13 @@ exports[`Marko > jsx > Typescript Test > useTarget 1`] = `
   }
 
   onCreate() {
-    this.state = { lastName: \\"bar\\" };
+    this.state = { lastName: \\"bar\\", foo: \\"bar\\" };
   }
 
-  onMount() {}
+  onMount() {
+    console.log(this.state.foo);
+    this.state.foo = \\"bar\\";
+  }
 }
 
 <div>\${component.name}</div>"
diff --git a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
index f99972960f..b47e8c80c6 100644
--- a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
@@ -2708,10 +2708,13 @@ export default function UseTargetComponent(props) {
       return prefix + \\"foo\\";
     },
     lastName: \\"bar\\",
+    foo: \\"bar\\",
   });
 
   onMount(() => {
-    \\"USE_TARGET_BLOCK_2\\";
+    console.log(state.foo);
+    state.foo = \\"bar\\";
+    (\\"USE_TARGET_BLOCK_2\\");
   });
 
   return <div>{state.name}</div>;
@@ -5839,10 +5842,13 @@ export default function UseTargetComponent(props) {
       return prefix + \\"foo\\";
     },
     lastName: \\"bar\\",
+    foo: \\"bar\\",
   });
 
   onMount(() => {
-    \\"USE_TARGET_BLOCK_2\\";
+    console.log(state.foo);
+    state.foo = \\"bar\\";
+    (\\"USE_TARGET_BLOCK_2\\");
   });
 
   return <div>{state.name}</div>;
@@ -9283,10 +9289,13 @@ export default function UseTargetComponent(props) {
       return prefix + \\"foo\\";
     },
     lastName: \\"bar\\",
+    foo: \\"bar\\",
   });
 
   onMount(() => {
-    \\"USE_TARGET_BLOCK_2\\";
+    console.log(state.foo);
+    state.foo = \\"bar\\";
+    (\\"USE_TARGET_BLOCK_2\\");
   });
 
   return <div>{state.name}</div>;
@@ -12466,10 +12475,13 @@ export default function UseTargetComponent(props) {
       return prefix + \\"foo\\";
     },
     lastName: \\"bar\\",
+    foo: \\"bar\\",
   });
 
   onMount(() => {
-    \\"USE_TARGET_BLOCK_2\\";
+    console.log(state.foo);
+    state.foo = \\"bar\\";
+    (\\"USE_TARGET_BLOCK_2\\");
   });
 
   return <div>{state.name}</div>;
@@ -16483,9 +16495,15 @@ function UseTargetComponent(props) {
 
   const [lastName, setLastName] = useState(() => \\"bar\\");
 
+  const [foo, setFoo] = useState(() => \\"bar\\");
+
   useEffect(() => {
+    console.log(foo);
+    setFoo(\\"bar\\");
     console.log(\\"react\\");
     setLastName(\\"baz\\");
+    console.log(foo);
+    setFoo(\\"baz\\");
   }, []);
 
   return <div>{name()}</div>;
@@ -19882,9 +19900,15 @@ function UseTargetComponent(props) {
 
   const [lastName, setLastName] = useState(() => \\"bar\\");
 
+  const [foo, setFoo] = useState(() => \\"bar\\");
+
   useEffect(() => {
+    console.log(foo);
+    setFoo(\\"bar\\");
     console.log(\\"react\\");
     setLastName(\\"baz\\");
+    console.log(foo);
+    setFoo(\\"baz\\");
   }, []);
 
   return <div>{name()}</div>;
diff --git a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
index 411e74f3e3..3c9d76fd77 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -10786,7 +10786,9 @@ exports[`Parse JSX > Javascript > useTarget 1`] = `
     "onEvent": [],
     "onMount": [
       {
-        "code": "\\"USE_TARGET_BLOCK_2\\"",
+        "code": "console.log(state.foo);
+state.foo = 'bar';
+\\"USE_TARGET_BLOCK_2\\"",
         "onSSR": false,
       },
     ],
@@ -10797,6 +10799,11 @@ exports[`Parse JSX > Javascript > useTarget 1`] = `
   "name": "UseTargetComponent",
   "refs": {},
   "state": {
+    "foo": {
+      "code": "'bar'",
+      "propertyType": "normal",
+      "type": "property",
+    },
     "lastName": {
       "code": "'bar'",
       "propertyType": "normal",
@@ -10887,12 +10894,14 @@ exports[`Parse JSX > Javascript > useTarget 1`] = `
       "qwik": {
         "code": "console.log('qwik');
 state.lastName = 'baz';
-",
+console.log(state.foo);
+state.foo = 'baz'",
       },
       "react": {
         "code": "console.log('react');
 state.lastName = 'baz';
-",
+console.log(state.foo);
+state.foo = 'baz'",
       },
       "settings": {
         "requiresDefault": false,
@@ -22503,7 +22512,9 @@ exports[`Parse JSX > Typescript > useTarget 1`] = `
     "onEvent": [],
     "onMount": [
       {
-        "code": "\\"USE_TARGET_BLOCK_2\\"",
+        "code": "console.log(state.foo);
+state.foo = 'bar';
+\\"USE_TARGET_BLOCK_2\\"",
         "onSSR": false,
       },
     ],
@@ -22514,6 +22525,11 @@ exports[`Parse JSX > Typescript > useTarget 1`] = `
   "name": "UseTargetComponent",
   "refs": {},
   "state": {
+    "foo": {
+      "code": "'bar'",
+      "propertyType": "normal",
+      "type": "property",
+    },
     "lastName": {
       "code": "'bar'",
       "propertyType": "normal",
@@ -22604,12 +22620,14 @@ exports[`Parse JSX > Typescript > useTarget 1`] = `
       "qwik": {
         "code": "console.log('qwik');
 state.lastName = 'baz';
-",
+console.log(state.foo);
+state.foo = 'baz'",
       },
       "react": {
         "code": "console.log('react');
 state.lastName = 'baz';
-",
+console.log(state.foo);
+state.foo = 'baz'",
       },
       "settings": {
         "requiresDefault": false,
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index 393d98baaa..5353a5d9e8 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -3416,7 +3416,12 @@ function UseTargetComponent(props) {
 
   const [lastName, setLastName] = useState(() => \\"bar\\");
 
-  useEffect(() => {}, []);
+  const [foo, setFoo] = useState(() => \\"bar\\");
+
+  useEffect(() => {
+    console.log(foo);
+    setFoo(\\"bar\\");
+  }, []);
 
   return <div>{name()}</div>;
 }
@@ -7312,7 +7317,12 @@ function UseTargetComponent(props: any) {
 
   const [lastName, setLastName] = useState(() => \\"bar\\");
 
-  useEffect(() => {}, []);
+  const [foo, setFoo] = useState(() => \\"bar\\");
+
+  useEffect(() => {
+    console.log(foo);
+    setFoo(\\"bar\\");
+  }, []);
 
   return <div>{name()}</div>;
 }
diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
index b91cfedc60..ef4cdfabd6 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -5048,10 +5048,14 @@ export const UseTargetComponent = component$((props) => {
     const prefix = \\"q\\";
     return prefix + \\"foo\\";
   });
-  const state = useStore({ lastName: \\"bar\\" });
+  const state = useStore({ foo: \\"bar\\", lastName: \\"bar\\" });
   useVisibleTask$(() => {
+    console.log(state.foo);
+    state.foo = \\"bar\\";
     console.log(\\"qwik\\");
     state.lastName = \\"baz\\";
+    console.log(state.foo);
+    state.foo = \\"baz\\";
   });
 
   return <div>{name.value}</div>;
@@ -8802,10 +8806,14 @@ export const UseTargetComponent = component$((props: any) => {
     const prefix = \\"q\\";
     return prefix + \\"foo\\";
   });
-  const state = useStore<any>({ lastName: \\"bar\\" });
+  const state = useStore<any>({ foo: \\"bar\\", lastName: \\"bar\\" });
   useVisibleTask$(() => {
+    console.log(state.foo);
+    state.foo = \\"bar\\";
     console.log(\\"qwik\\");
     state.lastName = \\"baz\\";
+    console.log(state.foo);
+    state.foo = \\"baz\\";
   });
 
   return <div>{name.value}</div>;
diff --git a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
index d0d034da53..e6b72842c8 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -4823,7 +4823,12 @@ function UseTargetComponent(props) {
 
   const [lastName, setLastName] = useState(() => \\"bar\\");
 
-  useEffect(() => {}, []);
+  const [foo, setFoo] = useState(() => \\"bar\\");
+
+  useEffect(() => {
+    console.log(foo);
+    setFoo(\\"bar\\");
+  }, []);
 
   return (
     <View>
@@ -10093,7 +10098,12 @@ function UseTargetComponent(props: any) {
 
   const [lastName, setLastName] = useState(() => \\"bar\\");
 
-  useEffect(() => {}, []);
+  const [foo, setFoo] = useState(() => \\"bar\\");
+
+  useEffect(() => {
+    console.log(foo);
+    setFoo(\\"bar\\");
+  }, []);
 
   return (
     <View>
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 0999ad8c6c..42bdf3c69d 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -3317,9 +3317,15 @@ function UseTargetComponent(props) {
 
   const [lastName, setLastName] = useState(() => \\"bar\\");
 
+  const [foo, setFoo] = useState(() => \\"bar\\");
+
   useEffect(() => {
+    console.log(foo);
+    setFoo(\\"bar\\");
     console.log(\\"react\\");
     setLastName(\\"baz\\");
+    console.log(foo);
+    setFoo(\\"baz\\");
   }, []);
 
   return <div>{name()}</div>;
@@ -7116,9 +7122,15 @@ function UseTargetComponent(props: any) {
 
   const [lastName, setLastName] = useState(() => \\"bar\\");
 
+  const [foo, setFoo] = useState(() => \\"bar\\");
+
   useEffect(() => {
+    console.log(foo);
+    setFoo(\\"bar\\");
     console.log(\\"react\\");
     setLastName(\\"baz\\");
+    console.log(foo);
+    setFoo(\\"baz\\");
   }, []);
 
   return <div>{name()}</div>;
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index ad1b5a7ae2..b123221f91 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -3057,7 +3057,12 @@ function UseTargetComponent(props) {
 
   const [lastName, setLastName] = useState(() => \\"bar\\");
 
-  useEffect(() => {}, []);
+  const [foo, setFoo] = useState(() => \\"bar\\");
+
+  useEffect(() => {
+    console.log(foo);
+    setFoo(\\"bar\\");
+  }, []);
 
   return <div>{name()}</div>;
 }
@@ -6575,7 +6580,12 @@ function UseTargetComponent(props: any) {
 
   const [lastName, setLastName] = useState(() => \\"bar\\");
 
-  useEffect(() => {}, []);
+  const [foo, setFoo] = useState(() => \\"bar\\");
+
+  useEffect(() => {
+    console.log(foo);
+    setFoo(\\"bar\\");
+  }, []);
 
   return <div>{name()}</div>;
 }
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index a47a642b15..e1bff1b4b4 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -6888,12 +6888,17 @@ exports[`Solid > jsx > Javascript Test > useTarget 1`] = `
 function UseTargetComponent(props) {
   const [lastName, setLastName] = createSignal(\\"bar\\");
 
+  const [foo, setFoo] = createSignal(\\"bar\\");
+
   const name = createMemo(() => {
     const prefix = \\"so\\";
     return prefix + \\"foo\\";
   });
 
-  onMount(() => {});
+  onMount(() => {
+    console.log(foo());
+    setFoo(\\"bar\\");
+  });
 
   return (
     <>
@@ -6912,12 +6917,17 @@ exports[`Solid > jsx > Javascript Test > useTarget 2`] = `
 function UseTargetComponent(props) {
   const [lastName, setLastName] = createSignal(\\"bar\\");
 
+  const [foo, setFoo] = createSignal(\\"bar\\");
+
   const name = createMemo(() => {
     const prefix = \\"so\\";
     return prefix + \\"foo\\";
   });
 
-  onMount(() => {});
+  onMount(() => {
+    console.log(foo());
+    setFoo(\\"bar\\");
+  });
 
   return (
     <>
@@ -14752,12 +14762,17 @@ exports[`Solid > jsx > Typescript Test > useTarget 1`] = `
 function UseTargetComponent(props: any) {
   const [lastName, setLastName] = createSignal(\\"bar\\");
 
+  const [foo, setFoo] = createSignal(\\"bar\\");
+
   const name = createMemo(() => {
     const prefix = \\"so\\";
     return prefix + \\"foo\\";
   });
 
-  onMount(() => {});
+  onMount(() => {
+    console.log(foo());
+    setFoo(\\"bar\\");
+  });
 
   return (
     <>
@@ -14776,12 +14791,17 @@ exports[`Solid > jsx > Typescript Test > useTarget 2`] = `
 function UseTargetComponent(props: any) {
   const [lastName, setLastName] = createSignal(\\"bar\\");
 
+  const [foo, setFoo] = createSignal(\\"bar\\");
+
   const name = createMemo(() => {
     const prefix = \\"so\\";
     return prefix + \\"foo\\";
   });
 
-  onMount(() => {});
+  onMount(() => {
+    console.log(foo());
+    setFoo(\\"bar\\");
+  });
 
   return (
     <>
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index 2a20cd5a6a..7e3b6adbc0 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -3505,13 +3505,17 @@ exports[`Stencil > jsx > Javascript Test > useTarget 1`] = `
 })
 export class UseTargetComponent {
   @State() lastName = \\"bar\\";
+  @State() foo = \\"bar\\";
 
   get name() {
     const prefix = \\"st\\";
     return prefix + \\"foo\\";
   }
 
-  componentDidLoad() {}
+  componentDidLoad() {
+    console.log(this.foo);
+    this.foo = \\"bar\\";
+  }
 
   render() {
     return <div>{this.name}</div>;
@@ -7474,13 +7478,17 @@ exports[`Stencil > jsx > Typescript Test > useTarget 1`] = `
 })
 export class UseTargetComponent {
   @State() lastName = \\"bar\\";
+  @State() foo = \\"bar\\";
 
   get name() {
     const prefix = \\"st\\";
     return prefix + \\"foo\\";
   }
 
-  componentDidLoad() {}
+  componentDidLoad() {
+    console.log(this.foo);
+    this.foo = \\"bar\\";
+  }
 
   render() {
     return <div>{this.name}</div>;
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index 2d181c014e..065cbb1437 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -2823,8 +2823,12 @@ exports[`Svelte > jsx > Javascript Test > useTarget 1`] = `
   };
 
   let lastName = \\"bar\\";
+  let foo = \\"bar\\";
 
-  onMount(() => {});
+  onMount(() => {
+    console.log(foo);
+    foo = \\"bar\\";
+  });
 </script>
 
 <div>{name()}</div>"
@@ -6293,8 +6297,12 @@ exports[`Svelte > jsx > Typescript Test > useTarget 1`] = `
   };
 
   let lastName = \\"bar\\";
+  let foo = \\"bar\\";
 
-  onMount(() => {});
+  onMount(() => {
+    console.log(foo);
+    foo = \\"bar\\";
+  });
 </script>
 
 <div>{name()}</div>"
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 31dcef141b..ed8672b5cb 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -3379,7 +3379,12 @@ function UseTargetComponent(props) {
 
   const [lastName, setLastName] = useState(() => \\"bar\\");
 
-  useEffect(() => {}, []);
+  const [foo, setFoo] = useState(() => \\"bar\\");
+
+  useEffect(() => {
+    console.log(foo);
+    setFoo(\\"bar\\");
+  }, []);
 
   return <View>{name()}</View>;
 }
@@ -7270,7 +7275,12 @@ function UseTargetComponent(props: any) {
 
   const [lastName, setLastName] = useState(() => \\"bar\\");
 
-  useEffect(() => {}, []);
+  const [foo, setFoo] = useState(() => \\"bar\\");
+
+  useEffect(() => {
+    console.log(foo);
+    setFoo(\\"bar\\");
+  }, []);
 
   return <View>{name()}</View>;
 }
diff --git a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
index 674a97f37e..3c5d6eec1d 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -3028,8 +3028,12 @@ exports[`Vue > jsx > Javascript Test > useTarget 1`] = `
 import { computed, onMounted, ref } from \\"vue\\";
 
 const lastName = ref(\\"bar\\");
+const foo = ref(\\"bar\\");
 
-onMounted(() => {});
+onMounted(() => {
+  console.log(foo);
+  foo.value = \\"bar\\";
+});
 
 const name = computed(() => {
   const prefix = \\"v\\";
@@ -6466,8 +6470,12 @@ exports[`Vue > jsx > Typescript Test > useTarget 1`] = `
 import { computed, onMounted, ref } from \\"vue\\";
 
 const lastName = ref(\\"bar\\");
+const foo = ref(\\"bar\\");
 
-onMounted(() => {});
+onMounted(() => {
+  console.log(foo);
+  foo.value = \\"bar\\";
+});
 
 const name = computed(() => {
   const prefix = \\"v\\";
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 68808ff35e..05ecc98941 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -3815,10 +3815,13 @@ export default defineComponent({
   name: \\"use-target-component\\",
 
   data() {
-    return { lastName: \\"bar\\" };
+    return { lastName: \\"bar\\", foo: \\"bar\\" };
   },
 
-  mounted() {},
+  mounted() {
+    console.log(this.foo);
+    this.foo = \\"bar\\";
+  },
 
   computed: {
     name() {
@@ -8119,10 +8122,13 @@ export default defineComponent({
   name: \\"use-target-component\\",
 
   data() {
-    return { lastName: \\"bar\\" };
+    return { lastName: \\"bar\\", foo: \\"bar\\" };
   },
 
-  mounted() {},
+  mounted() {
+    console.log(this.foo);
+    this.foo = \\"bar\\";
+  },
 
   computed: {
     name() {
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index 240a9e8c82..e052e363cd 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -15075,6 +15075,7 @@ class UseTargetComponent extends HTMLElement {
         return prefix + \\"foo\\";
       },
       lastName: \\"bar\\",
+      foo: \\"bar\\",
     };
     if (!this.props) {
       this.props = {};
@@ -15111,6 +15112,9 @@ class UseTargetComponent extends HTMLElement {
 
   onMount() {
     // onMount
+    console.log(this.state.foo);
+    this.state.foo = \\"bar\\";
+    this.update();
   }
 
   onUpdate() {}
@@ -30448,6 +30452,7 @@ class UseTargetComponent extends HTMLElement {
         return prefix + \\"foo\\";
       },
       lastName: \\"bar\\",
+      foo: \\"bar\\",
     };
     if (!this.props) {
       this.props = {};
@@ -30484,6 +30489,9 @@ class UseTargetComponent extends HTMLElement {
 
   onMount() {
     // onMount
+    console.log(this.state.foo);
+    this.state.foo = \\"bar\\";
+    this.update();
   }
 
   onUpdate() {}
diff --git a/packages/core/src/__tests__/data/use-target.raw.tsx b/packages/core/src/__tests__/data/use-target.raw.tsx
index cc9365e7fb..334e8d55c0 100644
--- a/packages/core/src/__tests__/data/use-target.raw.tsx
+++ b/packages/core/src/__tests__/data/use-target.raw.tsx
@@ -1,4 +1,4 @@
-import { onMount, useStore, useTarget } from '@builder.io/mitosis';
+import { onMount, useState, useStore, useTarget } from '@builder.io/mitosis';
 
 export default function UseTargetComponent() {
   const state = useStore({
@@ -33,15 +33,24 @@ export default function UseTargetComponent() {
     lastName: 'bar',
   });
 
+  const [foo, setFoo] = useState('bar');
+
   onMount(() => {
+    console.log(foo);
+    setFoo('bar');
+
     useTarget({
       react: () => {
         console.log('react');
         state.lastName = 'baz';
+        console.log(foo);
+        setFoo('baz');
       },
       qwik: () => {
         console.log('qwik');
         state.lastName = 'baz';
+        console.log(foo);
+        setFoo('baz');
       },
     });
   });
diff --git a/packages/core/src/parsers/jsx/state.ts b/packages/core/src/parsers/jsx/state.ts
index 19d91f01aa..c92dcfb722 100644
--- a/packages/core/src/parsers/jsx/state.ts
+++ b/packages/core/src/parsers/jsx/state.ts
@@ -2,7 +2,12 @@ import { babelTransformExpression } from '@/helpers/babel-transform';
 import { capitalize } from '@/helpers/capitalize';
 import { isMitosisNode } from '@/helpers/is-mitosis-node';
 import { createCodeProcessorPlugin } from '@/helpers/plugins/process-code';
-import { MitosisComponent, MitosisState, StateValue } from '@/types/mitosis-component';
+import {
+  MitosisComponent,
+  MitosisState,
+  StateValue,
+  TargetBlockDefinition,
+} from '@/types/mitosis-component';
 import { NodePath } from '@babel/core';
 import {
   BlockStatement,
@@ -145,6 +150,16 @@ export function mapStateIdentifiers(json: MitosisComponent) {
 
   plugin(json);
 
+  for (const key in json.targetBlocks) {
+    const targetBlock = json.targetBlocks[key];
+    for (const targetBlockKey of Object.keys(targetBlock)) {
+      const block = targetBlock[targetBlockKey as keyof TargetBlockDefinition];
+      if (block && 'code' in block) {
+        block.code = mapStateIdentifiersInExpression(block.code, stateProperties);
+      }
+    }
+  }
+
   traverse(json).forEach(function (item) {
     // only consolidate bindings for HTML tags, not custom components
     // custom components are always PascalCase, e.g. MyComponent