[compiler] Improve merging of scopes that invalidate together (#34049)

We try to merge consecutive reactive scopes that will always invalidate
together, but there's one common case that isn't handled.

```js
const y = [[x]];
```

Here we'll create two consecutive scopes for the inner and outer array
expressions. Because the input to the second scope is a temporary,
they'll merge into one scope.

But if we name the inner array, the merging stops:

```js
const array = [x];
const y = [array];
```

This is because the merging logic checks if all the dependencies of the
second scope are outputs of the first scope, but doesn't account for
renaming due to LoadLocal/StoreLocal. The fix is to track these
temporaries.

---
[//]: # (BEGIN SAPLING FOOTER)
Stack created with [Sapling](https://sapling-scm.com). Best reviewed
with [ReviewStack](https://reviewstack.dev/facebook/react/pull/34049).
* __->__ #34049
* #34047
* #34044

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts

@@ -119,6 +119,7 @@ class FindLastUsageVisitor extends ReactiveFunctionVisitor<void> {
 
 class Transform extends ReactiveFunctionTransform<ReactiveScopeDependencies | null> {
   lastUsage: Map<DeclarationId, InstructionId>;
+  temporaries: Map<DeclarationId, DeclarationId> = new Map();
 
   constructor(lastUsage: Map<DeclarationId, InstructionId>) {
     super();
@@ -215,6 +216,12 @@ class Transform extends ReactiveFunctionTransform<ReactiveScopeDependencies | nu
                 current.lvalues.add(
                   instr.instruction.lvalue.identifier.declarationId,
                 );
+                if (instr.instruction.value.kind === 'LoadLocal') {
+                  this.temporaries.set(
+                    instr.instruction.lvalue.identifier.declarationId,
+                    instr.instruction.value.place.identifier.declarationId,
+                  );
+                }
               }
               break;
             }
@@ -236,6 +243,13 @@ class Transform extends ReactiveFunctionTransform<ReactiveScopeDependencies | nu
                   )) {
                     current.lvalues.add(lvalue.identifier.declarationId);
                   }
+                  this.temporaries.set(
+                    instr.instruction.value.lvalue.place.identifier
+                      .declarationId,
+                    this.temporaries.get(
+                      instr.instruction.value.value.identifier.declarationId,
+                    ) ?? instr.instruction.value.value.identifier.declarationId,
+                  );
                 } else {
                   log(
                     `Reset scope @${current.block.scope.id} from StoreLocal in [${instr.instruction.id}]`,
@@ -260,7 +274,7 @@ class Transform extends ReactiveFunctionTransform<ReactiveScopeDependencies | nu
         case 'scope': {
           if (
             current !== null &&
-            canMergeScopes(current.block, instr) &&
+            canMergeScopes(current.block, instr, this.temporaries) &&
             areLValuesLastUsedByScope(
               instr.scope,
               current.lvalues,
@@ -426,6 +440,7 @@ function areLValuesLastUsedByScope(
 function canMergeScopes(
   current: ReactiveScopeBlock,
   next: ReactiveScopeBlock,
+  temporaries: Map<DeclarationId, DeclarationId>,
 ): boolean {
   // Don't merge scopes with reassignments
   if (
@@ -465,11 +480,14 @@ function canMergeScopes(
     (next.scope.dependencies.size !== 0 &&
       [...next.scope.dependencies].every(
         dep =>
+          dep.path.length === 0 &&
           isAlwaysInvalidatingType(dep.identifier.type) &&
           Iterable_some(
             current.scope.declarations.values(),
             decl =>
-              decl.identifier.declarationId === dep.identifier.declarationId,
+              decl.identifier.declarationId === dep.identifier.declarationId ||
+              decl.identifier.declarationId ===
+                temporaries.get(dep.identifier.declarationId),
           ),
       ))
   ) {
@@ -477,8 +495,12 @@ function canMergeScopes(
     return true;
   }
   log(`  cannot merge scopes:`);
-  log(`  ${printReactiveScopeSummary(current.scope)}`);
+  log(
-  log(`  ${printReactiveScopeSummary(next.scope)}`);
+    `  ${printReactiveScopeSummary(current.scope)} ${[...current.scope.declarations.values()].map(decl => decl.identifier.declarationId)}`,
+  );
+  log(
+    `  ${printReactiveScopeSummary(next.scope)} ${[...next.scope.dependencies].map(dep => `${dep.identifier.declarationId} ${temporaries.get(dep.identifier.declarationId) ?? dep.identifier.declarationId}`)}`,
+  );
   return false;
 }
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-closure.expect.md

@@ -19,7 +19,7 @@ function Component(props) {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function Component(props) {
-  const $ = _c(7);
+  const $ = _c(5);
   let t0;
   if ($[0] !== props.x) {
     t0 = foo(props.x);
@@ -31,26 +31,19 @@ function Component(props) {
   const x = t0;
   let t1;
   if ($[2] !== props || $[3] !== x) {
-    t1 = function () {
+    const fn = function () {
       const arr = [...bar(props)];
       return arr.at(x);
     };
+
+    t1 = fn();
     $[2] = props;
     $[3] = x;
     $[4] = t1;
   } else {
     t1 = $[4];
   }
-  const fn = t1;
+  const fnResult = t1;
-  let t2;
-  if ($[5] !== fn) {
-    t2 = fn();
-    $[5] = fn;
-    $[6] = t2;
-  } else {
-    t2 = $[6];
-  }
-  const fnResult = t2;
   return fnResult;
 }
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-captures-receiver-noAlias.expect.md

@@ -23,34 +23,18 @@ export const FIXTURE_ENTRYPOINT = {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function Component(props) {
-  const $ = _c(6);
+  const $ = _c(2);
   let t0;
   if ($[0] !== props.a) {
-    t0 = { a: props.a };
+    const item = { a: props.a };
+    const items = [item];
+    t0 = items.map(_temp);
     $[0] = props.a;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const item = t0;
+  const mapped = t0;
-  let t1;
-  if ($[2] !== item) {
-    t1 = [item];
-    $[2] = item;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  const items = t1;
-  let t2;
-  if ($[4] !== items) {
-    t2 = items.map(_temp);
-    $[4] = items;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  const mapped = t2;
   return mapped;
 }
 function _temp(item_0) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-map-noAlias-escaping-function.expect.md

@@ -21,26 +21,18 @@ export const FIXTURE_ENTRYPOINT = {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function Component(props) {
-  const $ = _c(4);
+  const $ = _c(2);
   const f = _temp;
   let t0;
   if ($[0] !== props.items) {
-    t0 = [...props.items].map(f);
+    const x = [...props.items].map(f);
+    t0 = [x, f];
     $[0] = props.items;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const x = t0;
+  return t0;
-  let t1;
-  if ($[2] !== x) {
-    t1 = [x, f];
-    $[2] = x;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  return t1;
 }
 function _temp(item) {
   return item;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-arrow-function-1.expect.md

@@ -23,27 +23,19 @@ export const FIXTURE_ENTRYPOINT = {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function component(a) {
-  const $ = _c(4);
+  const $ = _c(2);
   let t0;
   if ($[0] !== a) {
-    t0 = { a };
+    const z = { a };
+    t0 = () => {
+      console.log(z);
+    };
     $[0] = a;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const z = t0;
+  const x = t0;
-  let t1;
-  if ($[2] !== z) {
-    t1 = () => {
-      console.log(z);
-    };
-    $[2] = z;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  const x = t1;
   return x;
 }
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-1.expect.md

@@ -23,27 +23,19 @@ export const FIXTURE_ENTRYPOINT = {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function component(a) {
-  const $ = _c(4);
+  const $ = _c(2);
   let t0;
   if ($[0] !== a) {
-    t0 = { a };
+    const z = { a };
+    t0 = function () {
+      console.log(z);
+    };
     $[0] = a;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const z = t0;
+  const x = t0;
-  let t1;
-  if ($[2] !== z) {
-    t1 = function () {
-      console.log(z);
-    };
-    $[2] = z;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  const x = t1;
   return x;
 }
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-runs-inference.expect.md

@@ -22,35 +22,19 @@ export const FIXTURE_ENTRYPOINT = {
 import { c as _c } from "react/compiler-runtime";
 import { Stringify } from "shared-runtime";
 function Component(t0) {
-  const $ = _c(6);
+  const $ = _c(2);
   const { a } = t0;
   let t1;
   if ($[0] !== a) {
-    t1 = { a };
+    const z = { a };
+    const p = () => <Stringify>{z}</Stringify>;
+    t1 = p();
     $[0] = a;
     $[1] = t1;
   } else {
     t1 = $[1];
   }
-  const z = t1;
+  return t1;
-  let t2;
-  if ($[2] !== z) {
-    t2 = () => <Stringify>{z}</Stringify>;
-    $[2] = z;
-    $[3] = t2;
-  } else {
-    t2 = $[3];
-  }
-  const p = t2;
-  let t3;
-  if ($[4] !== p) {
-    t3 = p();
-    $[4] = p;
-    $[5] = t3;
-  } else {
-    t3 = $[5];
-  }
-  return t3;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-variable-in-nested-block.expect.md

@@ -25,27 +25,19 @@ export const FIXTURE_ENTRYPOINT = {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function component(a) {
-  const $ = _c(4);
+  const $ = _c(2);
   let t0;
   if ($[0] !== a) {
-    t0 = { a };
+    const z = { a };
+    t0 = function () {
+      console.log(z);
+    };
     $[0] = a;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const z = t0;
+  const x = t0;
-  let t1;
-  if ($[2] !== z) {
-    t1 = function () {
-      console.log(z);
-    };
-    $[2] = z;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  const x = t1;
   return x;
 }
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-variable-in-nested-function.expect.md

@@ -25,29 +25,21 @@ export const FIXTURE_ENTRYPOINT = {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function component(a) {
-  const $ = _c(4);
+  const $ = _c(2);
   let t0;
   if ($[0] !== a) {
-    t0 = { a };
+    const z = { a };
+    t0 = function () {
+      (function () {
+        console.log(z);
+      })();
+    };
     $[0] = a;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const z = t0;
+  const x = t0;
-  let t1;
-  if ($[2] !== z) {
-    t1 = function () {
-      (function () {
-        console.log(z);
-      })();
-    };
-    $[2] = z;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  const x = t1;
   return x;
 }
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/escape-analysis-non-escaping-interleaved-allocating-nested-dependency.expect.md

@@ -40,36 +40,29 @@ export const FIXTURE_ENTRYPOINT = {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function Component(props) {
-  const $ = _c(7);
+  const $ = _c(5);
   let t0;
   if ($[0] !== props.a) {
-    t0 = [props.a];
+    const a = [props.a];
+
+    t0 = [a];
     $[0] = props.a;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const a = t0;
+  const b = t0;
-  let t1;
-  if ($[2] !== a) {
-    t1 = [a];
-    $[2] = a;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  const b = t1;
   let c;
-  if ($[4] !== b || $[5] !== props.b) {
+  if ($[2] !== b || $[3] !== props.b) {
     c = [];
     const d = {};
     d.b = b;
     c.push(props.b);
-    $[4] = b;
+    $[2] = b;
-    $[5] = props.b;
+    $[3] = props.b;
-    $[6] = c;
+    $[4] = c;
   } else {
-    c = $[6];
+    c = $[4];
   }
   return c;
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-newline.expect.md

@@ -32,10 +32,10 @@ import { c as _c } from "react/compiler-runtime";
 import fbt from "fbt";
 
 function Component(props) {
-  const $ = _c(4);
+  const $ = _c(2);
   let t0;
   if ($[0] !== props.name) {
-    t0 = fbt._(
+    const element = fbt._(
       "Hello {a really long description that got split into multiple lines}",
       [
         fbt._param(
@@ -46,21 +46,14 @@ function Component(props) {
       ],
       { hk: "1euPUp" },
     );
+
+    t0 = element.toString();
     $[0] = props.name;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const element = t0;
+  return t0;
-  let t1;
-  if ($[2] !== element) {
-    t1 = element.toString();
-    $[2] = element;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  return t1;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-quotes.expect.md

@@ -27,27 +27,28 @@ import { c as _c } from "react/compiler-runtime";
 import fbt from "fbt";
 
 function Component(props) {
-  const $ = _c(4);
+  const $ = _c(2);
   let t0;
   if ($[0] !== props.name) {
-    t0 = fbt._('Hello {"user" name}', [fbt._param('"user" name', props.name)], {
+    const element = fbt._(
-      hk: "S0vMe",
+      'Hello {"user" name}',
-    });
+      [
+        fbt._param(
+          '"user" name',
+
+          props.name,
+        ),
+      ],
+      { hk: "S0vMe" },
+    );
+
+    t0 = element.toString();
     $[0] = props.name;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const element = t0;
+  return t0;
-  let t1;
-  if ($[2] !== element) {
-    t1 = element.toString();
-    $[2] = element;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  return t1;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-unicode.expect.md

@@ -27,29 +27,28 @@ import { c as _c } from "react/compiler-runtime";
 import fbt from "fbt";
 
 function Component(props) {
-  const $ = _c(4);
+  const $ = _c(2);
   let t0;
   if ($[0] !== props.name) {
-    t0 = fbt._(
+    const element = fbt._(
       "Hello {user name ☺}",
-      [fbt._param("user name \u263A", props.name)],
+      [
+        fbt._param(
+          "user name \u263A",
+
+          props.name,
+        ),
+      ],
       { hk: "1En1lp" },
     );
+
+    t0 = element.toString();
     $[0] = props.name;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const element = t0;
+  return t0;
-  let t1;
-  if ($[2] !== element) {
-    t1 = element.toString();
-    $[2] = element;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  return t1;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-to-string.expect.md

@@ -27,27 +27,28 @@ import { c as _c } from "react/compiler-runtime";
 import fbt from "fbt";
 
 function Component(props) {
-  const $ = _c(4);
+  const $ = _c(2);
   let t0;
   if ($[0] !== props.name) {
-    t0 = fbt._("Hello {user name}", [fbt._param("user name", props.name)], {
+    const element = fbt._(
-      hk: "2zEDKF",
+      "Hello {user name}",
-    });
+      [
+        fbt._param(
+          "user name",
+
+          props.name,
+        ),
+      ],
+      { hk: "2zEDKF" },
+    );
+
+    t0 = element.toString();
     $[0] = props.name;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const element = t0;
+  return t0;
-  let t1;
-  if ($[2] !== element) {
-    t1 = element.toString();
-    $[2] = element;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  return t1;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-maybe-mutates-hook-return-value.expect.md

@@ -22,28 +22,21 @@ function Component(props) {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function Component(props) {
-  const $ = _c(4);
+  const $ = _c(2);
   const id = useSelectedEntitytId();
   let t0;
   if ($[0] !== id) {
-    t0 = () => {
+    const onLoad = () => {
       log(id);
     };
+
+    t0 = <Foo onLoad={onLoad} />;
     $[0] = id;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const onLoad = t0;
+  return t0;
-  let t1;
-  if ($[2] !== onLoad) {
-    t1 = <Foo onLoad={onLoad} />;
-    $[2] = onLoad;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  return t1;
 }
 
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/function-expression-prototype-call.expect.md

@@ -21,27 +21,20 @@ export const FIXTURE_ENTRYPOINT = {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function Component(props) {
-  const $ = _c(4);
+  const $ = _c(2);
   let t0;
   if ($[0] !== props) {
-    t0 = function () {
+    const f = function () {
       return <div>{props.name}</div>;
     };
+
+    t0 = f.call();
     $[0] = props;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const f = t0;
+  return t0;
-  let t1;
-  if ($[2] !== f) {
-    t1 = f.call();
-    $[2] = f;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  return t1;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-functionexpr-conditional-dep.expect.md

@@ -55,33 +55,26 @@ import { Stringify } from "shared-runtime";
  *  (kind: exception) Cannot read properties of null (reading 'prop')
  */
 function Component(t0) {
-  const $ = _c(5);
+  const $ = _c(3);
   const { obj, isObjNull } = t0;
   let t1;
   if ($[0] !== isObjNull || $[1] !== obj) {
-    t1 = () => {
+    const callback = () => {
       if (!isObjNull) {
         return obj.prop;
       } else {
         return null;
       }
     };
+
+    t1 = <Stringify shouldInvokeFns={true} callback={callback} />;
     $[0] = isObjNull;
     $[1] = obj;
     $[2] = t1;
   } else {
     t1 = $[2];
   }
-  const callback = t1;
+  return t1;
-  let t2;
-  if ($[3] !== callback) {
-    t2 = <Stringify shouldInvokeFns={true} callback={callback} />;
-    $[3] = callback;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  return t2;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-setstate-captured-indirectly-jsx.expect.md

@@ -27,7 +27,7 @@ function useFoo() {
 ```javascript
 import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees
 function useFoo() {
-  const $ = _c(9);
+  const $ = _c(7);
   const onClick = (response) => {
     setState(DISABLED_FORM);
   };
@@ -48,31 +48,24 @@ function useFoo() {
   const handleLogout = t1;
   let t2;
   if ($[2] !== handleLogout) {
-    t2 = () => <ColumnItem onPress={() => handleLogout()} />;
+    const getComponent = () => <ColumnItem onPress={() => handleLogout()} />;
+
+    t2 = getComponent();
     $[2] = handleLogout;
     $[3] = t2;
   } else {
     t2 = $[3];
   }
-  const getComponent = t2;
   let t3;
-  if ($[4] !== getComponent) {
+  if ($[4] !== onClick || $[5] !== t2) {
-    t3 = getComponent();
+    t3 = [t2, onClick];
-    $[4] = getComponent;
+    $[4] = onClick;
-    $[5] = t3;
+    $[5] = t2;
+    $[6] = t3;
   } else {
-    t3 = $[5];
+    t3 = $[6];
   }
-  let t4;
+  return t3;
-  if ($[6] !== onClick || $[7] !== t3) {
-    t4 = [t3, onClick];
-    $[6] = onClick;
-    $[7] = t3;
-    $[8] = t4;
-  } else {
-    t4 = $[8];
-  }
-  return t4;
 }
 
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/array-map-named-chained-callbacks.expect.md

@@ -42,74 +42,58 @@ import { c as _c } from "react/compiler-runtime"; /**
  * conservative and assume that all named lambdas are conditionally called.
  */
 function useFoo(t0) {
-  const $ = _c(17);
+  const $ = _c(13);
   const { arr1, arr2 } = t0;
   let t1;
   if ($[0] !== arr1[0]) {
-    t1 = () => arr1[0].value;
+    const getVal1 = () => arr1[0].value;
+    t1 = (e) => getVal1() + e.value;
     $[0] = arr1[0];
     $[1] = t1;
   } else {
     t1 = $[1];
   }
-  const getVal1 = t1;
+  const cb1 = t1;
   let t2;
-  if ($[2] !== getVal1) {
+  if ($[2] !== arr1 || $[3] !== cb1) {
-    t2 = (e) => getVal1() + e.value;
+    t2 = arr1.map(cb1);
-    $[2] = getVal1;
+    $[2] = arr1;
-    $[3] = t2;
+    $[3] = cb1;
+    $[4] = t2;
   } else {
-    t2 = $[3];
+    t2 = $[4];
   }
-  const cb1 = t2;
+  const x = t2;
   let t3;
-  if ($[4] !== arr1 || $[5] !== cb1) {
+  if ($[5] !== arr2) {
-    t3 = arr1.map(cb1);
+    const getVal2 = () => arr2[0].value;
-    $[4] = arr1;
+    t3 = (e_0) => getVal2() + e_0.value;
-    $[5] = cb1;
+    $[5] = arr2;
     $[6] = t3;
   } else {
     t3 = $[6];
   }
-  const x = t3;
+  const cb2 = t3;
   let t4;
-  if ($[7] !== arr2) {
+  if ($[7] !== arr1 || $[8] !== cb2) {
-    t4 = () => arr2[0].value;
+    t4 = arr1.map(cb2);
-    $[7] = arr2;
+    $[7] = arr1;
-    $[8] = t4;
+    $[8] = cb2;
+    $[9] = t4;
   } else {
-    t4 = $[8];
+    t4 = $[9];
   }
-  const getVal2 = t4;
+  const y = t4;
   let t5;
-  if ($[9] !== getVal2) {
+  if ($[10] !== x || $[11] !== y) {
-    t5 = (e_0) => getVal2() + e_0.value;
+    t5 = [x, y];
-    $[9] = getVal2;
+    $[10] = x;
-    $[10] = t5;
+    $[11] = y;
+    $[12] = t5;
   } else {
-    t5 = $[10];
+    t5 = $[12];
   }
-  const cb2 = t5;
+  return t5;
-  let t6;
-  if ($[11] !== arr1 || $[12] !== cb2) {
-    t6 = arr1.map(cb2);
-    $[11] = arr1;
-    $[12] = cb2;
-    $[13] = t6;
-  } else {
-    t6 = $[13];
-  }
-  const y = t6;
-  let t7;
-  if ($[14] !== x || $[15] !== y) {
-    t7 = [x, y];
-    $[14] = x;
-    $[15] = y;
-    $[16] = t7;
-  } else {
-    t7 = $[16];
-  }
-  return t7;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inner-function/nullable-objects/assume-invoked/conditional-call-chain.expect.md

@@ -42,7 +42,7 @@ import { useRef } from "react";
 import { Stringify } from "shared-runtime";
 
 function Component(t0) {
-  const $ = _c(9);
+  const $ = _c(7);
   const { a, b } = t0;
   let t1;
   if ($[0] !== a.value) {
@@ -70,29 +70,22 @@ function Component(t0) {
   const hasLogged = useRef(false);
   let t3;
   if ($[4] !== logA || $[5] !== logB) {
-    t3 = () => {
+    const log = () => {
       if (!hasLogged.current) {
         logA();
         logB();
         hasLogged.current = true;
       }
     };
+
+    t3 = <Stringify log={log} shouldInvokeFns={true} />;
     $[4] = logA;
     $[5] = logB;
     $[6] = t3;
   } else {
     t3 = $[6];
   }
-  const log = t3;
+  return t3;
-  let t4;
-  if ($[7] !== log) {
-    t4 = <Stringify log={log} shouldInvokeFns={true} />;
-    $[7] = log;
-    $[8] = t4;
-  } else {
-    t4 = $[8];
-  }
-  return t4;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-lowercase-localvar-memberexpr-in-lambda.expect.md

@@ -24,28 +24,20 @@ import { c as _c } from "react/compiler-runtime";
 import * as SharedRuntime from "shared-runtime";
 import { invoke } from "shared-runtime";
 function useComponentFactory(t0) {
-  const $ = _c(4);
+  const $ = _c(2);
   const { name } = t0;
   let t1;
   if ($[0] !== name) {
-    t1 = () => (
+    const cb = () => (
       <SharedRuntime.Stringify>hello world {name}</SharedRuntime.Stringify>
     );
+    t1 = invoke(cb);
     $[0] = name;
     $[1] = t1;
   } else {
     t1 = $[1];
   }
-  const cb = t1;
+  return t1;
-  let t2;
-  if ($[2] !== cb) {
-    t2 = invoke(cb);
-    $[2] = cb;
-    $[3] = t2;
-  } else {
-    t2 = $[3];
-  }
-  return t2;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/array-map-captures-receiver-noAlias.expect.md

@@ -25,34 +25,18 @@ export const FIXTURE_ENTRYPOINT = {
 ```javascript
 import { c as _c } from "react/compiler-runtime"; // @enableNewMutationAliasingModel
 function Component(props) {
-  const $ = _c(6);
+  const $ = _c(2);
   let t0;
   if ($[0] !== props.a) {
-    t0 = { a: props.a };
+    const item = { a: props.a };
+    const items = [item];
+    t0 = items.map(_temp);
     $[0] = props.a;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const item = t0;
+  const mapped = t0;
-  let t1;
-  if ($[2] !== item) {
-    t1 = [item];
-    $[2] = item;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  const items = t1;
-  let t2;
-  if ($[4] !== items) {
-    t2 = items.map(_temp);
-    $[4] = items;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  const mapped = t2;
   return mapped;
 }
 function _temp(item_0) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prop-capturing-function-1.expect.md

@@ -23,28 +23,20 @@ export const FIXTURE_ENTRYPOINT = {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function component(a, b) {
-  const $ = _c(5);
+  const $ = _c(3);
   let t0;
   if ($[0] !== a || $[1] !== b) {
-    t0 = { a, b };
+    const z = { a, b };
+    t0 = function () {
+      console.log(z);
+    };
     $[0] = a;
     $[1] = b;
     $[2] = t0;
   } else {
     t0 = $[2];
   }
-  const z = t0;
+  const x = t0;
-  let t1;
-  if ($[3] !== z) {
-    t1 = function () {
-      console.log(z);
-    };
-    $[3] = z;
-    $[4] = t1;
-  } else {
-    t1 = $[4];
-  }
-  const x = t1;
   return x;
 }
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-function-uncond-access-local-var.expect.md

@@ -29,7 +29,7 @@ import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
 import { mutate, shallowCopy, Stringify } from "shared-runtime";
 
 function useFoo(t0) {
-  const $ = _c(6);
+  const $ = _c(4);
   const { a } = t0;
   let local;
   if ($[0] !== a) {
@@ -42,22 +42,14 @@ function useFoo(t0) {
   }
   let t1;
   if ($[2] !== local.b.c) {
-    t1 = () => local.b.c;
+    const fn = () => local.b.c;
+    t1 = <Stringify fn={fn} shouldInvokeFns={true} />;
     $[2] = local.b.c;
     $[3] = t1;
   } else {
     t1 = $[3];
   }
-  const fn = t1;
+  return t1;
-  let t2;
-  if ($[4] !== fn) {
-    t2 = <Stringify fn={fn} shouldInvokeFns={true} />;
-    $[4] = fn;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  return t2;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-nested-function-uncond-access-local-var.expect.md

@@ -29,7 +29,7 @@ import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
 import { shallowCopy, Stringify, mutate } from "shared-runtime";
 
 function useFoo(t0) {
-  const $ = _c(6);
+  const $ = _c(4);
   const { a } = t0;
   let local;
   if ($[0] !== a) {
@@ -42,22 +42,14 @@ function useFoo(t0) {
   }
   let t1;
   if ($[2] !== local) {
-    t1 = () => [() => local.b.c];
+    const fn = () => [() => local.b.c];
+    t1 = <Stringify fn={fn} shouldInvokeFns={true} />;
     $[2] = local;
     $[3] = t1;
   } else {
     t1 = $[3];
   }
-  const fn = t1;
+  return t1;
-  let t2;
-  if ($[4] !== fn) {
-    t2 = <Stringify fn={fn} shouldInvokeFns={true} />;
-    $[4] = fn;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  return t2;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-nested-function-uncond-access.expect.md

@@ -31,26 +31,19 @@ import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
 import { Stringify } from "shared-runtime";
 
 function useFoo(t0) {
-  const $ = _c(4);
+  const $ = _c(2);
   const { a } = t0;
   let t1;
   if ($[0] !== a.b.c) {
-    t1 = () => () => ({ value: a.b.c });
+    const fn = () => () => ({ value: a.b.c });
+
+    t1 = <Stringify fn={fn} shouldInvokeFns={true} />;
     $[0] = a.b.c;
     $[1] = t1;
   } else {
     t1 = $[1];
   }
-  const fn = t1;
+  return t1;
-  let t2;
-  if ($[2] !== fn) {
-    t2 = <Stringify fn={fn} shouldInvokeFns={true} />;
-    $[2] = fn;
-    $[3] = t2;
-  } else {
-    t2 = $[3];
-  }
-  return t2;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/reduce-reactive-deps/infer-object-method-uncond-access.expect.md

@@ -31,30 +31,23 @@ import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
 import { identity, Stringify } from "shared-runtime";
 
 function useFoo(t0) {
-  const $ = _c(4);
+  const $ = _c(2);
   const { a } = t0;
   let t1;
   if ($[0] !== a) {
-    t1 = {
+    const x = {
       fn() {
         return identity(a.b.c);
       },
     };
+
+    t1 = <Stringify x={x} shouldInvokeFns={true} />;
     $[0] = a;
     $[1] = t1;
   } else {
     t1 = $[1];
   }
-  const x = t1;
+  return t1;
-  let t2;
-  if ($[2] !== x) {
-    t2 = <Stringify x={x} shouldInvokeFns={true} />;
-    $[2] = x;
-    $[3] = t2;
-  } else {
-    t2 = $[3];
-  }
-  return t2;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-invalidate-jsx.expect.md

@@ -29,7 +29,7 @@ import { c as _c } from "react/compiler-runtime";
 import { useHook } from "shared-runtime";
 
 function Component(props) {
-  const $ = _c(6);
+  const $ = _c(4);
   const o = {};
   let t0;
   if ($[0] !== props.value) {
@@ -44,22 +44,15 @@ function Component(props) {
   o.value = props.value;
   let t1;
   if ($[2] !== x) {
-    t1 = <div>{x}</div>;
+    const y = <div>{x}</div>;
+
+    t1 = <div>{y}</div>;
     $[2] = x;
     $[3] = t1;
   } else {
     t1 = $[3];
   }
-  const y = t1;
+  return t1;
-  let t2;
-  if ($[4] !== y) {
-    t2 = <div>{y}</div>;
-    $[4] = y;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  return t2;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/prune-scopes-whose-deps-may-invalidate-array.expect.md

@@ -31,7 +31,7 @@ import { c as _c } from "react/compiler-runtime";
 import { useHook, identity } from "shared-runtime";
 
 function Component(props) {
-  const $ = _c(4);
+  const $ = _c(2);
   let x = 42;
   if (props.cond) {
     x = [];
@@ -41,22 +41,15 @@ function Component(props) {
   identity(x);
   let t0;
   if ($[0] !== x) {
-    t0 = [x];
+    const y = [x];
+
+    t0 = [y];
     $[0] = x;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const y = t0;
+  return t0;
-  let t1;
-  if ($[2] !== y) {
-    t1 = [y];
-    $[2] = y;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  return t1;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-ref-param.expect.md

@@ -66,25 +66,17 @@ function Parent(t0) {
 }
 
 function ChildImpl(_props, ref) {
-  const $ = _c(4);
+  const $ = _c(2);
   let t0;
   if ($[0] !== ref) {
-    t0 = () => ref.current;
+    const cb = () => ref.current;
+    t0 = <Stringify cb={cb} shouldInvokeFns={true} />;
     $[0] = ref;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const cb = t0;
+  return t0;
-  let t1;
-  if ($[2] !== cb) {
-    t1 = <Stringify cb={cb} shouldInvokeFns={true} />;
-    $[2] = cb;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  return t1;
 }
 
 const Child = forwardRef(ChildImpl);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-ref.expect.md

@@ -41,29 +41,21 @@ import { Stringify } from "shared-runtime";
  * `pruneNonReactiveDependencies`
  */
 function Component(t0) {
-  const $ = _c(4);
+  const $ = _c(2);
   const { cond } = t0;
   const ref1 = useRef(1);
   const ref2 = useRef(2);
   const ref = cond ? ref1 : ref2;
   let t1;
   if ($[0] !== ref) {
-    t1 = () => ref.current;
+    const cb = () => ref.current;
+    t1 = <Stringify cb={cb} shouldInvokeFns={true} />;
     $[0] = ref;
     $[1] = t1;
   } else {
     t1 = $[1];
   }
-  const cb = t1;
+  return t1;
-  let t2;
-  if ($[2] !== cb) {
-    t2 = <Stringify cb={cb} shouldInvokeFns={true} />;
-    $[2] = cb;
-    $[3] = t2;
-  } else {
-    t2 = $[3];
-  }
-  return t2;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-analysis-interleaved-reactivity.expect.md

@@ -35,34 +35,23 @@ export const FIXTURE_ENTRYPOINT = {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function Component(props) {
-  const $ = _c(6);
+  const $ = _c(2);
-  let a;
   let t0;
   if ($[0] !== props.b) {
-    a = {};
+    const a = {};
     const b = [];
     b.push(props.b);
     a.a = null;
 
-    t0 = [a];
+    const c = [a];
+
+    t0 = [c, a];
     $[0] = props.b;
-    $[1] = a;
+    $[1] = t0;
-    $[2] = t0;
   } else {
-    a = $[1];
+    t0 = $[1];
-    t0 = $[2];
   }
-  const c = t0;
+  return t0;
-  let t1;
-  if ($[3] !== a || $[4] !== c) {
-    t1 = [c, a];
-    $[3] = a;
-    $[4] = c;
-    $[5] = t1;
-  } else {
-    t1 = $[5];
-  }
-  return t1;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-aliased-mutation-array.expect.md

@@ -32,18 +32,24 @@ export const FIXTURE_ENTRYPOINT = {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function Component(props) {
-  const $ = _c(2);
+  const $ = _c(4);
-  let t0;
+  let x;
   if ($[0] !== props.input) {
-    const x = [];
+    x = [];
     const y = x;
     y.push(props.input);
-
-    t0 = [x[0]];
     $[0] = props.input;
-    $[1] = t0;
+    $[1] = x;
   } else {
-    t0 = $[1];
+    x = $[1];
+  }
+  let t0;
+  if ($[2] !== x[0]) {
+    t0 = [x[0]];
+    $[2] = x[0];
+    $[3] = t0;
+  } else {
+    t0 = $[3];
   }
   return t0;
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactivity-via-aliased-mutation-lambda.expect.md

@@ -35,22 +35,28 @@ export const FIXTURE_ENTRYPOINT = {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function Component(props) {
-  const $ = _c(2);
+  const $ = _c(4);
-  let t0;
+  let x;
   if ($[0] !== props.input) {
-    const x = [];
+    x = [];
     const f = (arg) => {
       const y = x;
       y.push(arg);
     };
 
     f(props.input);
-
-    t0 = [x[0]];
     $[0] = props.input;
-    $[1] = t0;
+    $[1] = x;
   } else {
-    t0 = $[1];
+    x = $[1];
+  }
+  let t0;
+  if ($[2] !== x[0]) {
+    t0 = [x[0]];
+    $[2] = x[0];
+    $[3] = t0;
+  } else {
+    t0 = $[3];
   }
   return t0;
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-aliased-not-added-to-dep-2.expect.md

@@ -18,28 +18,21 @@ function Foo({a}) {
 ```javascript
 import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender:false
 function Foo(t0) {
-  const $ = _c(4);
+  const $ = _c(2);
   const { a } = t0;
   const ref = useRef();
   const val = ref.current;
   let t1;
   if ($[0] !== a) {
-    t1 = { a, val };
+    const x = { a, val };
+
+    t1 = <VideoList videos={x} />;
     $[0] = a;
     $[1] = t1;
   } else {
     t1 = $[1];
   }
-  const x = t1;
+  return t1;
-  let t2;
-  if ($[2] !== x) {
-    t2 = <VideoList videos={x} />;
-    $[2] = x;
-    $[3] = t2;
-  } else {
-    t2 = $[3];
-  }
-  return t2;
 }
 
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-current-not-added-to-dep-2.expect.md

@@ -17,27 +17,20 @@ function Foo({a}) {
 ```javascript
 import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender:false
 function Foo(t0) {
-  const $ = _c(4);
+  const $ = _c(2);
   const { a } = t0;
   const ref = useRef();
   let t1;
   if ($[0] !== a) {
-    t1 = { a, val: ref.current };
+    const x = { a, val: ref.current };
+
+    t1 = <VideoList videos={x} />;
     $[0] = a;
     $[1] = t1;
   } else {
     t1 = $[1];
   }
-  const x = t1;
+  return t1;
-  let t2;
-  if ($[2] !== x) {
-    t2 = <VideoList videos={x} />;
-    $[2] = x;
-    $[3] = t2;
-  } else {
-    t2 = $[3];
-  }
-  return t2;
 }
 
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rename-source-variables-nested-function.expect.md

@@ -41,11 +41,11 @@ const $ = "module_$";
 const t0 = "module_t0";
 const c_0 = "module_c_0";
 function useFoo(props) {
-  const $0 = _c(4);
+  const $0 = _c(2);
   const c_00 = $0[0] !== props.value;
   let t1;
   if (c_00) {
-    t1 = () => {
+    const a = () => {
       const b = () => {
         const c = () => {
           console.log($);
@@ -57,22 +57,14 @@ function useFoo(props) {
       };
       return b;
     };
+
+    t1 = a()()();
     $0[0] = props.value;
     $0[1] = t1;
   } else {
     t1 = $0[1];
   }
-  const a = t1;
+  return t1;
-  const c_2 = $0[2] !== a;
-  let t2;
-  if (c_2) {
-    t2 = a()()();
-    $0[2] = a;
-    $0[3] = t2;
-  } else {
-    t2 = $0[3];
-  }
-  return t2;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types-explicit-types.expect.md

@@ -35,60 +35,44 @@ import { useMemo } from "react";
 import { useFragment } from "shared-runtime";
 
 function Component() {
-  const $ = _c(11);
+  const $ = _c(7);
   const data = useFragment();
   let t0;
   if ($[0] !== data.nodes) {
-    t0 = data.nodes ?? [];
+    const nodes = data.nodes ?? [];
+    const flatMap = nodes.flatMap(_temp);
+    t0 = flatMap.filter(_temp2);
     $[0] = data.nodes;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const nodes = t0;
+  const filtered = t0;
   let t1;
-  if ($[2] !== nodes) {
+  if ($[2] !== filtered) {
-    t1 = nodes.flatMap(_temp);
+    t1 = filtered.map();
-    $[2] = nodes;
+    $[2] = filtered;
     $[3] = t1;
   } else {
     t1 = $[3];
   }
-  const flatMap = t1;
+  const map = t1;
-  let t2;
-  if ($[4] !== flatMap) {
-    t2 = flatMap.filter(_temp2);
-    $[4] = flatMap;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  const filtered = t2;
-  let t3;
-  if ($[6] !== filtered) {
-    t3 = filtered.map();
-    $[6] = filtered;
-    $[7] = t3;
-  } else {
-    t3 = $[7];
-  }
-  const map = t3;
   const index = filtered.findIndex(_temp3);
-  let t4;
+  let t2;
-  if ($[8] !== index || $[9] !== map) {
+  if ($[4] !== index || $[5] !== map) {
-    t4 = (
+    t2 = (
       <div>
         {map}
         {index}
       </div>
     );
-    $[8] = index;
+    $[4] = index;
-    $[9] = map;
+    $[5] = map;
-    $[10] = t4;
+    $[6] = t2;
   } else {
-    t4 = $[10];
+    t2 = $[6];
   }
-  return t4;
+  return t2;
 }
 function _temp3(x) {
   return x === null;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-missing-memoization-lack-of-phi-types.expect.md

@@ -32,60 +32,44 @@ import { useMemo } from "react";
 import { useFragment } from "shared-runtime";
 
 function Component() {
-  const $ = _c(11);
+  const $ = _c(7);
   const data = useFragment();
   let t0;
   if ($[0] !== data.nodes) {
-    t0 = data.nodes ?? [];
+    const nodes = data.nodes ?? [];
+    const flatMap = nodes.flatMap(_temp);
+    t0 = flatMap.filter(_temp2);
     $[0] = data.nodes;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const nodes = t0;
+  const filtered = t0;
   let t1;
-  if ($[2] !== nodes) {
+  if ($[2] !== filtered) {
-    t1 = nodes.flatMap(_temp);
+    t1 = filtered.map();
-    $[2] = nodes;
+    $[2] = filtered;
     $[3] = t1;
   } else {
     t1 = $[3];
   }
-  const flatMap = t1;
+  const map = t1;
-  let t2;
-  if ($[4] !== flatMap) {
-    t2 = flatMap.filter(_temp2);
-    $[4] = flatMap;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  const filtered = t2;
-  let t3;
-  if ($[6] !== filtered) {
-    t3 = filtered.map();
-    $[6] = filtered;
-    $[7] = t3;
-  } else {
-    t3 = $[7];
-  }
-  const map = t3;
   const index = filtered.findIndex(_temp3);
-  let t4;
+  let t2;
-  if ($[8] !== index || $[9] !== map) {
+  if ($[4] !== index || $[5] !== map) {
-    t4 = (
+    t2 = (
       <div>
         {map}
         {index}
       </div>
     );
-    $[8] = index;
+    $[4] = index;
-    $[9] = map;
+    $[5] = map;
-    $[10] = t4;
+    $[6] = t2;
   } else {
-    t4 = $[10];
+    t2 = $[6];
   }
-  return t4;
+  return t2;
 }
 function _temp3(x) {
   return x === null;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-function-call-with-frozen-argument-in-function-expression.expect.md

@@ -30,40 +30,33 @@ import { c as _c } from "react/compiler-runtime";
 import { identity, makeObject_Primitives, Stringify } from "shared-runtime";
 
 function Example(props) {
-  const $ = _c(7);
+  const $ = _c(5);
   const object = props.object;
   let t0;
   if ($[0] !== object || $[1] !== props.value) {
-    t0 = () => {
+    const f = () => {
       const obj = identity(object);
       obj.property = props.value;
       return obj;
     };
+
+    t0 = f();
     $[0] = object;
     $[1] = props.value;
     $[2] = t0;
   } else {
     t0 = $[2];
   }
-  const f = t0;
+  const obj_0 = t0;
   let t1;
-  if ($[3] !== f) {
+  if ($[3] !== obj_0) {
-    t1 = f();
+    t1 = <Stringify obj={obj_0} />;
-    $[3] = f;
+    $[3] = obj_0;
     $[4] = t1;
   } else {
     t1 = $[4];
   }
-  const obj_0 = t1;
+  return t1;
-  let t2;
-  if ($[5] !== obj_0) {
-    t2 = <Stringify obj={obj_0} />;
-    $[5] = obj_0;
-    $[6] = t2;
-  } else {
-    t2 = $[6];
-  }
-  return t2;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-method-call-on-frozen-value-in-function-expression.expect.md

@@ -30,40 +30,33 @@ import { c as _c } from "react/compiler-runtime";
 import { makeObject_Primitives, Stringify } from "shared-runtime";
 
 function Example(props) {
-  const $ = _c(7);
+  const $ = _c(5);
   const object = props.object;
   let t0;
   if ($[0] !== object || $[1] !== props.value) {
-    t0 = () => {
+    const f = () => {
       const obj = object.makeObject();
       obj.property = props.value;
       return obj;
     };
+
+    t0 = f();
     $[0] = object;
     $[1] = props.value;
     $[2] = t0;
   } else {
     t0 = $[2];
   }
-  const f = t0;
+  const obj_0 = t0;
   let t1;
-  if ($[3] !== f) {
+  if ($[3] !== obj_0) {
-    t1 = f();
+    t1 = <Stringify obj={obj_0} />;
-    $[3] = f;
+    $[3] = obj_0;
     $[4] = t1;
   } else {
     t1 = $[4];
   }
-  const obj_0 = t1;
+  return t1;
-  let t2;
-  if ($[5] !== obj_0) {
-    t2 = <Stringify obj={obj_0} />;
-    $[5] = obj_0;
-    $[6] = t2;
-  } else {
-    t2 = $[6];
-  }
-  return t2;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-renaming-conflicting-decls.expect.md

@@ -45,7 +45,7 @@ import { Stringify, identity, makeArray, toJSON } from "shared-runtime";
 import { useMemo } from "react";
 
 function Component(props) {
-  const $ = _c(12);
+  const $ = _c(10);
   let t0;
   let t1;
   if ($[0] !== props) {
@@ -71,57 +71,50 @@ function Component(props) {
   }
   let t2;
   if ($[3] !== t0) {
-    t2 = { url: t0 };
+    const linkProps = { url: t0 };
+
+    const x = {};
+    let t3;
+    let t4;
+    let t5;
+    let t6;
+    let t7;
+    if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = [1];
+      t4 = [2];
+      t5 = [3];
+      t6 = [4];
+      t7 = [5];
+      $[5] = t3;
+      $[6] = t4;
+      $[7] = t5;
+      $[8] = t6;
+      $[9] = t7;
+    } else {
+      t3 = $[5];
+      t4 = $[6];
+      t5 = $[7];
+      t6 = $[8];
+      t7 = $[9];
+    }
+    t2 = (
+      <Stringify
+        link={linkProps}
+        val1={t3}
+        val2={t4}
+        val3={t5}
+        val4={t6}
+        val5={t7}
+      >
+        {makeArray(x, 2)}
+      </Stringify>
+    );
     $[3] = t0;
     $[4] = t2;
   } else {
     t2 = $[4];
   }
-  const linkProps = t2;
+  return t2;
-  let t3;
-  if ($[5] !== linkProps) {
-    const x = {};
-    let t4;
-    let t5;
-    let t6;
-    let t7;
-    let t8;
-    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-      t4 = [1];
-      t5 = [2];
-      t6 = [3];
-      t7 = [4];
-      t8 = [5];
-      $[7] = t4;
-      $[8] = t5;
-      $[9] = t6;
-      $[10] = t7;
-      $[11] = t8;
-    } else {
-      t4 = $[7];
-      t5 = $[8];
-      t6 = $[9];
-      t7 = $[10];
-      t8 = $[11];
-    }
-    t3 = (
-      <Stringify
-        link={linkProps}
-        val1={t4}
-        val2={t5}
-        val3={t6}
-        val4={t7}
-        val5={t8}
-      >
-        {makeArray(x, 2)}
-      </Stringify>
-    );
-    $[5] = linkProps;
-    $[6] = t3;
-  } else {
-    t3 = $[6];
-  }
-  return t3;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-undefined-expression-of-jsxexpressioncontainer.expect.md

@@ -48,28 +48,21 @@ import { c as _c } from "react/compiler-runtime";
 import { StaticText1, Stringify, Text } from "shared-runtime";
 
 function Component(props) {
-  const $ = _c(4);
+  const $ = _c(2);
   const { buttons } = props;
   let t0;
   if ($[0] !== buttons) {
     const [, ...nonPrimaryButtons] = buttons;
 
-    t0 = nonPrimaryButtons.map(_temp);
+    const renderedNonPrimaryButtons = nonPrimaryButtons.map(_temp);
+
+    t0 = <StaticText1>{renderedNonPrimaryButtons}</StaticText1>;
     $[0] = buttons;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const renderedNonPrimaryButtons = t0;
+  return t0;
-  let t1;
-  if ($[2] !== renderedNonPrimaryButtons) {
-    t1 = <StaticText1>{renderedNonPrimaryButtons}</StaticText1>;
-    $[2] = renderedNonPrimaryButtons;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  return t1;
 }
 function _temp(buttonProps, i) {
   return (

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-function-expression-returns-caught-value.expect.md

@@ -29,10 +29,10 @@ import { c as _c } from "react/compiler-runtime";
 import { throwInput } from "shared-runtime";
 
 function Component(props) {
-  const $ = _c(4);
+  const $ = _c(2);
   let t0;
   if ($[0] !== props) {
-    t0 = () => {
+    const callback = () => {
       try {
         throwInput([props.value]);
       } catch (t1) {
@@ -40,21 +40,14 @@ function Component(props) {
         return e;
       }
     };
+
+    t0 = callback();
     $[0] = props;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const callback = t0;
+  return t0;
-  let t1;
-  if ($[2] !== callback) {
-    t1 = callback();
-    $[2] = callback;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  return t1;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-var-array.expect.md

@@ -25,25 +25,17 @@ export const FIXTURE_ENTRYPOINT = {
 ```javascript
 import { c as _c } from "react/compiler-runtime"; // @enableUseTypeAnnotations
 function Component(props) {
-  const $ = _c(4);
+  const $ = _c(2);
   let t0;
   if ($[0] !== props.id) {
-    t0 = makeArray(props.id);
+    const x = makeArray(props.id);
+    t0 = x.at(0);
     $[0] = props.id;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const x = t0;
+  const y = t0;
-  let t1;
-  if ($[2] !== x) {
-    t1 = x.at(0);
-    $[2] = x;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  const y = t1;
   return y;
 }
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-annotations/type-annotation-var-array_.flow.expect.md

@@ -29,25 +29,17 @@ import { c as _c } from "react/compiler-runtime";
 import { identity } from "shared-runtime";
 
 function Component(props) {
-  const $ = _c(4);
+  const $ = _c(2);
   let t0;
   if ($[0] !== props.id) {
-    t0 = makeArray(props.id);
+    const x = makeArray(props.id);
+    t0 = x.at(0);
     $[0] = props.id;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const x = t0;
+  const y = t0;
-  let t1;
-  if ($[2] !== x) {
-    t1 = x.at(0);
-    $[2] = x;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  const y = t1;
   return y;
 }
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-memo-simple.expect.md

@@ -22,25 +22,17 @@ export const FIXTURE_ENTRYPOINT = {
 import { c as _c } from "react/compiler-runtime";
 function Component(props) {
   "use memo";
-  const $ = _c(4);
+  const $ = _c(2);
   let t0;
   if ($[0] !== props.foo) {
-    t0 = [props.foo];
+    const x = [props.foo];
+    t0 = <div x={x}>"foo"</div>;
     $[0] = props.foo;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const x = t0;
+  return t0;
-  let t1;
-  if ($[2] !== x) {
-    t1 = <div x={x}>"foo"</div>;
-    $[2] = x;
-    $[3] = t1;
-  } else {
-    t1 = $[3];
-  }
-  return t1;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useContext-read-context-in-callback-if-condition.expect.md

@@ -39,41 +39,34 @@ import { Stringify } from "shared-runtime";
 const FooContext = createContext({ current: true });
 
 function Component(props) {
-  const $ = _c(6);
+  const $ = _c(4);
   const foo = useContext(FooContext);
   let t0;
   if ($[0] !== foo.current) {
-    t0 = () => {
+    const getValue = () => {
       if (foo.current) {
         return {};
       } else {
         return null;
       }
     };
+
+    t0 = getValue();
     $[0] = foo.current;
     $[1] = t0;
   } else {
     t0 = $[1];
   }
-  const getValue = t0;
+  const value = t0;
   let t1;
-  if ($[2] !== getValue) {
+  if ($[2] !== value) {
-    t1 = getValue();
+    t1 = <Stringify value={value} />;
-    $[2] = getValue;
+    $[2] = value;
     $[3] = t1;
   } else {
     t1 = $[3];
   }
-  const value = t1;
+  return t1;
-  let t2;
-  if ($[4] !== value) {
-    t2 = <Stringify value={value} />;
-    $[4] = value;
-    $[5] = t2;
-  } else {
-    t2 = $[5];
-  }
-  return t2;
 }
 
 export const FIXTURE_ENTRYPOINT = {