Update on "[compiler] Instruction reordering"

Adds a pass just after DCE to reorder safely reorderable instructions (jsx, primitives, globals) closer to where they are used, to allow other optimization passes to be more effective. Notably, the reordering allows scope merging to be more effective, since that pass relies on two scopes not having intervening instructions — in many cases we can now reorder such instructions out of the way and unlock merging, as demonstrated in the changed fixtures.

The algorithm itself is described in the docblock.

note: This is a cleaned up version of #29579 that is ready for review.

[ghstack-poisoned]

Author: josephsavona

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-within-nested-valueblock-in-array.expect.md

@@ -52,11 +52,12 @@ import { Stringify, identity, makeArray, mutate } from "shared-runtime";
  * handles this correctly.
  */
 function Foo(t0) {
-  const $ = _c(4);
+  const $ = _c(3);
   const { cond1, cond2 } = t0;
-  const arr = makeArray({ a: 2 }, 2, []);
   let t1;
-  if ($[0] !== cond1 || $[1] !== cond2 || $[2] !== arr) {
+  if ($[0] !== cond1 || $[1] !== cond2) {
+    const arr = makeArray({ a: 2 }, 2, []);
+
     t1 = cond1 ? (
       <>
         <div>{identity("foo")}</div>
@@ -65,10 +66,9 @@ function Foo(t0) {
     ) : null;
     $[0] = cond1;
     $[1] = cond2;
-    $[2] = arr;
-    $[3] = t1;
+    $[2] = t1;
   } else {
-    t1 = $[3];
+    t1 = $[2];
   }
   return t1;
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect-usecallback.expect.md

@@ -67,19 +67,16 @@ function Component() {
   }
   useEffect(t1, t2);
   let t3;
+  let t4;
   if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
     t3 = () => {
       setState(someGlobal.value);
     };
-    $[3] = t3;
-  } else {
-    t3 = $[3];
-  }
-  let t4;
-  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
     t4 = [someGlobal];
+    $[3] = t3;
     $[4] = t4;
   } else {
+    t3 = $[3];
     t4 = $[4];
   }
   useEffect(t3, t4);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.expect.md

@@ -39,60 +39,51 @@ import { useEffect, useState } from "react";
 let someGlobal = {};
 
 function Component() {
-  const $ = _c(7);
+  const $ = _c(6);
   const [state, setState] = useState(someGlobal);
   let t0;
+  let t1;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = () => {
+    const setGlobal = () => {
       someGlobal.value = true;
     };
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  const setGlobal = t0;
-  let t1;
-  let t2;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = () => {
+
+    t0 = () => {
       setGlobal();
     };
-    t2 = [];
+    t1 = [];
+    $[0] = t0;
     $[1] = t1;
-    $[2] = t2;
   } else {
+    t0 = $[0];
     t1 = $[1];
-    t2 = $[2];
   }
-  useEffect(t1, t2);
+  useEffect(t0, t1);
+  let t2;
   let t3;
-  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = () => {
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
       setState(someGlobal.value);
     };
+    t3 = [someGlobal];
+    $[2] = t2;
     $[3] = t3;
   } else {
+    t2 = $[2];
     t3 = $[3];
   }
-  let t4;
-  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-    t4 = [someGlobal];
-    $[4] = t4;
-  } else {
-    t4 = $[4];
-  }
-  useEffect(t3, t4);
+  useEffect(t2, t3);
 
-  const t5 = String(state);
-  let t6;
-  if ($[5] !== t5) {
-    t6 = <div>{t5}</div>;
+  const t4 = String(state);
+  let t5;
+  if ($[4] !== t4) {
+    t5 = <div>{t4}</div>;
+    $[4] = t4;
     $[5] = t5;
-    $[6] = t6;
   } else {
-    t6 = $[6];
+    t5 = $[5];
   }
-  return t6;
+  return t5;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.expect.md

@@ -39,60 +39,51 @@ import { useEffect, useState } from "react";
 let someGlobal = false;
 
 function Component() {
-  const $ = _c(7);
+  const $ = _c(6);
   const [state, setState] = useState(someGlobal);
   let t0;
+  let t1;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = () => {
+    const setGlobal = () => {
       someGlobal = true;
     };
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  const setGlobal = t0;
-  let t1;
-  let t2;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = () => {
+
+    t0 = () => {
       setGlobal();
     };
-    t2 = [];
+    t1 = [];
+    $[0] = t0;
     $[1] = t1;
-    $[2] = t2;
   } else {
+    t0 = $[0];
     t1 = $[1];
-    t2 = $[2];
   }
-  useEffect(t1, t2);
+  useEffect(t0, t1);
+  let t2;
   let t3;
-  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = () => {
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
       setState(someGlobal);
     };
+    t3 = [someGlobal];
+    $[2] = t2;
     $[3] = t3;
   } else {
+    t2 = $[2];
     t3 = $[3];
   }
-  let t4;
-  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-    t4 = [someGlobal];
-    $[4] = t4;
-  } else {
-    t4 = $[4];
-  }
-  useEffect(t3, t4);
+  useEffect(t2, t3);
 
-  const t5 = String(state);
-  let t6;
-  if ($[5] !== t5) {
-    t6 = <div>{t5}</div>;
+  const t4 = String(state);
+  let t5;
+  if ($[4] !== t4) {
+    t5 = <div>{t4}</div>;
+    $[4] = t4;
     $[5] = t5;
-    $[6] = t6;
   } else {
-    t6 = $[6];
+    t5 = $[5];
   }
-  return t6;
+  return t5;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.expect.md

@@ -54,19 +54,16 @@ function Component() {
   }
   useEffect(t0, t1);
   let t2;
+  let t3;
   if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
     t2 = () => {
       setState(someGlobal);
     };
-    $[2] = t2;
-  } else {
-    t2 = $[2];
-  }
-  let t3;
-  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
     t3 = [someGlobal];
+    $[2] = t2;
     $[3] = t3;
   } else {
+    t2 = $[2];
     t3 = $[3];
   }
   useEffect(t2, t3);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutate-global-in-effect-fixpoint.expect.md

@@ -70,19 +70,16 @@ function Component() {
   }
   useEffect(t0, t1);
   let t2;
+  let t3;
   if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
     t2 = () => {
       setState(someGlobal.value);
     };
-    $[2] = t2;
-  } else {
-    t2 = $[2];
-  }
-  let t3;
-  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
     t3 = [someGlobal];
+    $[2] = t2;
     $[3] = t3;
   } else {
+    t2 = $[2];
     t3 = $[3];
   }
   useEffect(t2, t3);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md

@@ -15,24 +15,17 @@ function component() {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function component() {
-  const $ = _c(2);
+  const $ = _c(1);
   const [x, setX] = useState(0);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = (v) => setX(v);
+    const handler = (v) => setX(v);
+    t0 = <Foo handler={handler} />;
     $[0] = t0;
   } else {
     t0 = $[0];
   }
-  const handler = t0;
-  let t1;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = <Foo handler={handler} />;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  return t1;
+  return t0;
 }
 
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md

@@ -36,65 +36,45 @@ function mayMutate() {}
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function ComponentA(props) {
-  const $ = _c(6);
-  let a;
-  let b;
+  const $ = _c(2);
+  let t0;
   if ($[0] !== props) {
-    a = [];
-    b = [];
+    const a = [];
+    const b = [];
     if (b) {
       a.push(props.p0);
     }
     if (props.p1) {
       b.push(props.p2);
     }
-    $[0] = props;
-    $[1] = a;
-    $[2] = b;
-  } else {
-    a = $[1];
-    b = $[2];
-  }
-  let t0;
-  if ($[3] !== a || $[4] !== b) {
+
     t0 = <Foo a={a} b={b} />;
-    $[3] = a;
-    $[4] = b;
-    $[5] = t0;
+    $[0] = props;
+    $[1] = t0;
   } else {
-    t0 = $[5];
+    t0 = $[1];
   }
   return t0;
 }
 
 function ComponentB(props) {
-  const $ = _c(6);
-  let a;
-  let b;
+  const $ = _c(2);
+  let t0;
   if ($[0] !== props) {
-    a = [];
-    b = [];
+    const a = [];
+    const b = [];
     if (mayMutate(b)) {
       a.push(props.p0);
     }
     if (props.p1) {
       b.push(props.p2);
     }
-    $[0] = props;
-    $[1] = a;
-    $[2] = b;
-  } else {
-    a = $[1];
-    b = $[2];
-  }
-  let t0;
-  if ($[3] !== a || $[4] !== b) {
+
     t0 = <Foo a={a} b={b} />;
-    $[3] = a;
-    $[4] = b;
-    $[5] = t0;
+    $[0] = props;
+    $[1] = t0;
   } else {
-    t0 = $[5];
+    t0 = $[1];
   }
   return t0;
 }