From ed8dd2036bfd228638e40f0559f652d062ce0689 Mon Sep 17 00:00:00 2001 From: Joe Savona Date: Wed, 12 Jun 2024 15:40:49 -0700 Subject: [PATCH] [compiler] Allow more instruction kinds btw merged scopes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Updates our scope merging pass to allow more types of instructions to intervene btw scopes. This includes all the non-allocating kinds of nodes that are considered reorderable in #29863. It's already safe to merge scopes with these instructions — we only merge if the lvalue is not used past the next scope. Additionally, without changing this pass reordering isn't very effective, since we would reorder to add these types of intervening instructions and then not be able to merge scopes. Sequencing this first helps to see the win just from reordering alone. ghstack-source-id: 79263576d8eaeb45ef4d1ec4951478459853a287 Pull Request resolved: https://github.com/facebook/react/pull/29881 --- ...rgeReactiveScopesThatInvalidateTogether.ts | 6 +- ...n-in-effect-indirect-usecallback.expect.md | 9 +-- ...obal-mutation-in-effect-indirect.expect.md | 9 +-- ...-reassignment-in-effect-indirect.expect.md | 9 +-- ...ow-global-reassignment-in-effect.expect.md | 9 +-- ...mutate-global-in-effect-fixpoint.expect.md | 9 +-- .../compiler/concise-arrow-expr.expect.md | 15 ++-- .../compiler/conditional-on-mutable.expect.md | 52 +++++--------- ...gation-into-function-expressions.expect.md | 16 ++--- ...ble-reassigned-outside-of-lambda.expect.md | 16 ++--- ...variable-in-function-declaration.expect.md | 15 ++-- ...and-local-variables-with-default.expect.md | 71 ++++++++----------- ...ed-scope-declarations-and-locals.expect.md | 34 +++------ ...sting-computed-member-expression.expect.md | 22 ++---- .../hoisting-member-expression.expect.md | 17 ++--- ...-expr-export-default-gating-test.expect.md | 19 ++--- ...ti-arrow-expr-export-gating-test.expect.md | 19 ++--- .../multi-arrow-expr-gating-test.expect.md | 19 ++--- .../compiler/property-assignment.expect.md | 25 ++----- .../reassignment-conditional.expect.md | 38 ++++------ .../fixtures/compiler/reassignment.expect.md | 38 ++++------ .../fixtures/compiler/repro.expect.md | 26 +++---- .../compiler/ssa-leave-case.expect.md | 25 +++---- .../switch-non-final-default.expect.md | 44 +++++------- .../fixtures/compiler/switch.expect.md | 34 ++++----- ...sion-captures-value-later-frozen.expect.md | 19 ++--- .../type-test-field-load-binary-op.expect.md | 13 +--- 27 files changed, 217 insertions(+), 411 deletions(-) diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts index 0509a3c65bead..e26fca1353885 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts @@ -186,11 +186,15 @@ class Transform extends ReactiveFunctionTransform { 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); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.expect.md index 44813be9f180a..43503170c20ff 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.expect.md @@ -66,19 +66,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); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.expect.md index 27e2d3b3a45a4..fec286b265aa9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect-indirect.expect.md @@ -66,19 +66,16 @@ function Component() { } useEffect(t1, t2); let t3; + let t4; if ($[3] === Symbol.for("react.memo_cache_sentinel")) { t3 = () => { setState(someGlobal); }; - $[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); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.expect.md index 293e32f4a191d..e4cd0e22c12f8 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.expect.md +++ b/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); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutate-global-in-effect-fixpoint.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutate-global-in-effect-fixpoint.expect.md index 3f212a4add872..d5f8643d5b1c1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutate-global-in-effect-fixpoint.expect.md +++ b/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); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md index b993630ce98d0..5b88a40644927 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md +++ b/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 = ; $[0] = t0; } else { t0 = $[0]; } - const handler = t0; - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ; - $[1] = t1; - } else { - t1 = $[1]; - } - return t1; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md index cd2fbc1011a4a..ad638cf28d871 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md +++ b/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 = ; - $[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 = ; - $[3] = a; - $[4] = b; - $[5] = t0; + $[0] = props; + $[1] = t0; } else { - t0 = $[5]; + t0 = $[1]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md index 7be6b15a887dd..8ea2190480003 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md @@ -17,25 +17,19 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(2); + const $ = _c(1); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = () => { + const onEvent = () => { console.log(42); }; + + t0 = ; $[0] = t0; } else { t0 = $[0]; } - const onEvent = t0; - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ; - $[1] = t1; - } else { - t1 = $[1]; - } - return t1; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-outside-of-lambda.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-outside-of-lambda.expect.md index 9b70b18c24b6a..8d53b0cc42d60 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-outside-of-lambda.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-outside-of-lambda.expect.md @@ -27,26 +27,20 @@ import { c as _c } from "react/compiler-runtime"; import { Stringify } from "shared-runtime"; function Component(props) { - const $ = _c(2); - let callback; + const $ = _c(1); + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { let x; x = null; - callback = () => { + const callback = () => { console.log(x); }; x = {}; - $[0] = callback; - } else { - callback = $[0]; - } - let t0; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { t0 = ; - $[1] = t0; + $[0] = t0; } else { - t0 = $[1]; + t0 = $[0]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-function-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-function-declaration.expect.md index 4c6faaaad25f4..b9fc15ea0a7be 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-function-declaration.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-function-declaration.expect.md @@ -18,7 +18,7 @@ function Component() { ```javascript import { c as _c } from "react/compiler-runtime"; function Component() { - const $ = _c(2); + const $ = _c(1); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { let x; @@ -27,20 +27,13 @@ function Component() { x = 9; }; - t0 = bar(foo); + const y = bar(foo); + t0 = ; $[0] = t0; } else { t0 = $[0]; } - const y = t0; - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ; - $[1] = t1; - } else { - t1 = $[1]; - } - return t1; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.expect.md index e93fbb3b45fcf..d8be3af6cbd34 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.expect.md @@ -56,7 +56,7 @@ function useFragment(_arg1, _arg2) { } function Component(props) { - const $ = _c(15); + const $ = _c(9); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { t0 = graphql`...`; @@ -65,67 +65,52 @@ function Component(props) { t0 = $[0]; } const post = useFragment(t0, props.post); - let media; - let allUrls; - let onClick; + let t1; if ($[1] !== post) { - allUrls = []; + const allUrls = []; - const { media: t1, comments: t2, urls: t3 } = post; - media = t1 === undefined ? null : t1; - let t4; - if ($[5] !== t2) { - t4 = t2 === undefined ? [] : t2; - $[5] = t2; - $[6] = t4; - } else { - t4 = $[6]; - } - const comments = t4; + const { media: t2, comments: t3, urls: t4 } = post; + const media = t2 === undefined ? null : t2; let t5; - if ($[7] !== t3) { + if ($[3] !== t3) { t5 = t3 === undefined ? [] : t3; - $[7] = t3; - $[8] = t5; + $[3] = t3; + $[4] = t5; } else { - t5 = $[8]; + t5 = $[4]; } - const urls = t5; + const comments = t5; let t6; - if ($[9] !== comments.length) { - t6 = (e) => { + if ($[5] !== t4) { + t6 = t4 === undefined ? [] : t4; + $[5] = t4; + $[6] = t6; + } else { + t6 = $[6]; + } + const urls = t6; + let t7; + if ($[7] !== comments.length) { + t7 = (e) => { if (!comments.length) { return; } console.log(comments.length); }; - $[9] = comments.length; - $[10] = t6; + $[7] = comments.length; + $[8] = t7; } else { - t6 = $[10]; + t7 = $[8]; } - onClick = t6; + const onClick = t7; allUrls.push(...urls); - $[1] = post; - $[2] = media; - $[3] = allUrls; - $[4] = onClick; - } else { - media = $[2]; - allUrls = $[3]; - onClick = $[4]; - } - let t1; - if ($[11] !== media || $[12] !== allUrls || $[13] !== onClick) { t1 = ; - $[11] = media; - $[12] = allUrls; - $[13] = onClick; - $[14] = t1; + $[1] = post; + $[2] = t1; } else { - t1 = $[14]; + t1 = $[2]; } return t1; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md index 665b4a65fd063..69e0f07088e0b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md @@ -30,17 +30,15 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(8); + const $ = _c(4); const post = useFragment(graphql`...`, props.post); - let media; - let onClick; + let t0; if ($[0] !== post) { const allUrls = []; - const { media: t0, comments, urls } = post; - media = t0; + const { media, comments, urls } = post; let t1; - if ($[3] !== comments.length) { + if ($[2] !== comments.length) { t1 = (e) => { if (!comments.length) { return; @@ -48,29 +46,19 @@ function Component(props) { console.log(comments.length); }; - $[3] = comments.length; - $[4] = t1; + $[2] = comments.length; + $[3] = t1; } else { - t1 = $[4]; + t1 = $[3]; } - onClick = t1; + const onClick = t1; allUrls.push(...urls); - $[0] = post; - $[1] = media; - $[2] = onClick; - } else { - media = $[1]; - onClick = $[2]; - } - let t0; - if ($[5] !== media || $[6] !== onClick) { t0 = ; - $[5] = media; - $[6] = onClick; - $[7] = t0; + $[0] = post; + $[1] = t0; } else { - t0 = $[7]; + t0 = $[1]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-computed-member-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-computed-member-expression.expect.md index 305ff6539d85b..081a10e967259 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-computed-member-expression.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-computed-member-expression.expect.md @@ -33,34 +33,26 @@ import { c as _c } from "react/compiler-runtime"; import { Stringify } from "shared-runtime"; function hoisting() { - const $ = _c(3); - let onClick; - let onClick2; + const $ = _c(1); + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - onClick = function onClick() { + const onClick = function onClick() { return bar.baz; }; - onClick2 = function onClick2() { + const onClick2 = function onClick2() { return bar[baz]; }; const baz = "baz"; const bar = { baz: 1 }; - $[0] = onClick; - $[1] = onClick2; - } else { - onClick = $[0]; - onClick2 = $[1]; - } - let t0; - if ($[2] === Symbol.for("react.memo_cache_sentinel")) { + t0 = ( ); - $[2] = t0; + $[0] = t0; } else { - t0 = $[2]; + t0 = $[0]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-member-expression.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-member-expression.expect.md index 3410a1c119b87..54c3cf3a24297 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-member-expression.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/hoisting-member-expression.expect.md @@ -28,24 +28,19 @@ import { c as _c } from "react/compiler-runtime"; import { Stringify } from "shared-runtime"; function hoisting() { - const $ = _c(2); - let onClick; + const $ = _c(1); + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - onClick = function onClick(x) { + const onClick = function onClick(x) { return x + bar.baz; }; const bar = { baz: 1 }; - $[0] = onClick; - } else { - onClick = $[0]; - } - let t0; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { + t0 = ; - $[1] = t0; + $[0] = t0; } else { - t0 = $[1]; + t0 = $[0]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-default-gating-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-default-gating-test.expect.md index b7685a3d40fc6..4bbc85df89d87 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-default-gating-test.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-default-gating-test.expect.md @@ -36,27 +36,20 @@ const ErrorView = isForgetEnabled_Fixtures() export default Renderer = isForgetEnabled_Fixtures() ? (props) => { - const $ = _c(2); + const $ = _c(1); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = ; - $[0] = t0; - } else { - t0 = $[0]; - } - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ( + t0 = ( - {t0} + ); - $[1] = t1; + $[0] = t0; } else { - t1 = $[1]; + t0 = $[0]; } - return t1; + return t0; } : (props) => ( diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-gating-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-gating-test.expect.md index 6056b8f378f0e..e7bf6b327e95b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-gating-test.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-gating-test.expect.md @@ -36,27 +36,20 @@ const ErrorView = isForgetEnabled_Fixtures() export const Renderer = isForgetEnabled_Fixtures() ? (props) => { - const $ = _c(2); + const $ = _c(1); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = ; - $[0] = t0; - } else { - t0 = $[0]; - } - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ( + t0 = ( - {t0} + ); - $[1] = t1; + $[0] = t0; } else { - t1 = $[1]; + t0 = $[0]; } - return t1; + return t0; } : (props) => ( diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-gating-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-gating-test.expect.md index e830d72ed94c5..4ce7ec0fc4061 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-gating-test.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-gating-test.expect.md @@ -38,27 +38,20 @@ const ErrorView = isForgetEnabled_Fixtures() const Renderer = isForgetEnabled_Fixtures() ? (props) => { - const $ = _c(2); + const $ = _c(1); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = ; - $[0] = t0; - } else { - t0 = $[0]; - } - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ( + t0 = ( - {t0} + ); - $[1] = t1; + $[0] = t0; } else { - t1 = $[1]; + t0 = $[0]; } - return t1; + return t0; } : (props) => ( diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-assignment.expect.md index 65b2c46abf5bb..523b5b29bd8c6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-assignment.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-assignment.expect.md @@ -18,30 +18,19 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(6); - let x; - let child; + const $ = _c(2); + let t0; if ($[0] !== props.p0) { - x = {}; + const x = {}; const y = []; x.y = y; - child = ; + const child = ; x.y.push(props.p0); - $[0] = props.p0; - $[1] = x; - $[2] = child; - } else { - x = $[1]; - child = $[2]; - } - let t0; - if ($[3] !== x || $[4] !== child) { t0 = {child}; - $[3] = x; - $[4] = child; - $[5] = t0; + $[0] = props.p0; + $[1] = t0; } else { - t0 = $[5]; + t0 = $[1]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-conditional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-conditional.expect.md index 0cda46f5a05e0..9358d39cf448a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-conditional.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-conditional.expect.md @@ -23,42 +23,32 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(9); - let x; - let y; + const $ = _c(5); + let t0; if ($[0] !== props.p0 || $[1] !== props.p1 || $[2] !== props.p2) { - x = []; + let x = []; x.push(props.p0); - y = x; + const y = x; if (props.p1) { - let t0; - if ($[5] === Symbol.for("react.memo_cache_sentinel")) { - t0 = []; - $[5] = t0; + let t1; + if ($[4] === Symbol.for("react.memo_cache_sentinel")) { + t1 = []; + $[4] = t1; } else { - t0 = $[5]; + t1 = $[4]; } - x = t0; + x = t1; } y.push(props.p2); + + t0 = ; $[0] = props.p0; $[1] = props.p1; $[2] = props.p2; - $[3] = x; - $[4] = y; - } else { - x = $[3]; - y = $[4]; - } - let t0; - if ($[6] !== x || $[7] !== y) { - t0 = ; - $[6] = x; - $[7] = y; - $[8] = t0; + $[3] = t0; } else { - t0 = $[8]; + t0 = $[3]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment.expect.md index 82cb494c9e4ee..3804326553c93 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment.expect.md @@ -22,39 +22,29 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(8); - let x; - let y; + const $ = _c(4); + let t0; if ($[0] !== props.p0 || $[1] !== props.p1) { - x = []; + let x = []; x.push(props.p0); - y = x; - let t0; - if ($[4] === Symbol.for("react.memo_cache_sentinel")) { - t0 = []; - $[4] = t0; + const y = x; + let t1; + if ($[3] === Symbol.for("react.memo_cache_sentinel")) { + t1 = []; + $[3] = t1; } else { - t0 = $[4]; + t1 = $[3]; } - x = t0; + x = t1; y.push(props.p1); + + t0 = ; $[0] = props.p0; $[1] = props.p1; - $[2] = x; - $[3] = y; - } else { - x = $[2]; - y = $[3]; - } - let t0; - if ($[5] !== x || $[6] !== y) { - t0 = ; - $[5] = x; - $[6] = y; - $[7] = t0; + $[2] = t0; } else { - t0 = $[7]; + t0 = $[2]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md index 07e508b259365..6ca1483fad1da 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md @@ -24,13 +24,12 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(6); + const $ = _c(2); const item = props.item; - let baseVideos; - let thumbnails; + let t0; if ($[0] !== item) { - thumbnails = []; - baseVideos = getBaseVideos(item); + const thumbnails = []; + const baseVideos = getBaseVideos(item); baseVideos.forEach((video) => { const baseVideo = video.hasBaseVideo; @@ -38,21 +37,12 @@ function Component(props) { thumbnails.push({ extraVideo: true }); } }); - $[0] = item; - $[1] = baseVideos; - $[2] = thumbnails; - } else { - baseVideos = $[1]; - thumbnails = $[2]; - } - let t0; - if ($[3] !== baseVideos || $[4] !== thumbnails) { + t0 = ; - $[3] = baseVideos; - $[4] = thumbnails; - $[5] = t0; + $[0] = item; + $[1] = t0; } else { - t0 = $[5]; + t0 = $[1]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-leave-case.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-leave-case.expect.md index 0dbe08c710523..a7389041bb12d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-leave-case.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-leave-case.expect.md @@ -24,35 +24,26 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(6); - let x; - let y; + const $ = _c(2); + let t0; if ($[0] !== props) { - x = []; + const x = []; + let y; if (props.p0) { x.push(props.p1); y = x; } - $[0] = props; - $[1] = x; - $[2] = y; - } else { - x = $[1]; - y = $[2]; - } - let t0; - if ($[3] !== x || $[4] !== y) { + t0 = ( {x} {y} ); - $[3] = x; - $[4] = y; - $[5] = t0; + $[0] = props; + $[1] = t0; } else { - t0 = $[5]; + t0 = $[1]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-non-final-default.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-non-final-default.expect.md index a3e6dfeb8572a..915218fcfa467 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-non-final-default.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-non-final-default.expect.md @@ -33,25 +33,25 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(9); - let x; + const $ = _c(7); let y; + let t0; if ($[0] !== props) { - x = []; + const x = []; bb0: switch (props.p0) { case 1: { break bb0; } case true: { x.push(props.p2); - let t0; + let t1; if ($[3] === Symbol.for("react.memo_cache_sentinel")) { - t0 = []; - $[3] = t0; + t1 = []; + $[3] = t1; } else { - t0 = $[3]; + t1 = $[3]; } - y = t0; + y = t1; } default: { break bb0; @@ -60,31 +60,25 @@ function Component(props) { y = x; } } - $[0] = props; - $[1] = x; - $[2] = y; - } else { - x = $[1]; - y = $[2]; - } - let t0; - if ($[4] !== x) { + t0 = ; - $[4] = x; - $[5] = t0; + $[0] = props; + $[1] = y; + $[2] = t0; } else { - t0 = $[5]; + y = $[1]; + t0 = $[2]; } const child = t0; y.push(props.p4); let t1; - if ($[6] !== y || $[7] !== child) { + if ($[4] !== y || $[5] !== child) { t1 = {child}; - $[6] = y; - $[7] = child; - $[8] = t1; + $[4] = y; + $[5] = child; + $[6] = t1; } else { - t1 = $[8]; + t1 = $[6]; } return t1; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch.expect.md index 14ac820af7c55..0c5aea9c7da9c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch.expect.md @@ -28,11 +28,11 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(8); - let x; + const $ = _c(6); let y; + let t0; if ($[0] !== props) { - x = []; + const x = []; switch (props.p0) { case true: { x.push(props.p2); @@ -42,31 +42,25 @@ function Component(props) { y = x; } } - $[0] = props; - $[1] = x; - $[2] = y; - } else { - x = $[1]; - y = $[2]; - } - let t0; - if ($[3] !== x) { + t0 = ; - $[3] = x; - $[4] = t0; + $[0] = props; + $[1] = y; + $[2] = t0; } else { - t0 = $[4]; + y = $[1]; + t0 = $[2]; } const child = t0; y.push(props.p4); let t1; - if ($[5] !== y || $[6] !== child) { + if ($[3] !== y || $[4] !== child) { t1 = {child}; - $[5] = y; - $[6] = child; - $[7] = t1; + $[3] = y; + $[4] = child; + $[5] = t1; } else { - t1 = $[7]; + t1 = $[5]; } return t1; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-function-expression-captures-value-later-frozen.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-function-expression-captures-value-later-frozen.expect.md index 2fdb888230e40..9f8fed44f0a02 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-function-expression-captures-value-later-frozen.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-function-expression-captures-value-later-frozen.expect.md @@ -24,10 +24,10 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(4); - let x; + const $ = _c(2); + let t0; if ($[0] !== props.cond) { - x = {}; + const x = {}; const onChange = (e) => { maybeMutate(x, e.target.value); @@ -36,18 +36,11 @@ function Component(props) { } onChange(); - $[0] = props.cond; - $[1] = x; - } else { - x = $[1]; - } - let t0; - if ($[2] !== x) { t0 = ; - $[2] = x; - $[3] = t0; + $[0] = props.cond; + $[1] = t0; } else { - t0 = $[3]; + t0 = $[1]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-load-binary-op.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-load-binary-op.expect.md index 6f6ab2e3a119c..3bb448d26d070 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-load-binary-op.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-load-binary-op.expect.md @@ -21,22 +21,15 @@ function component() { ```javascript import { c as _c } from "react/compiler-runtime"; function component() { - const $ = _c(2); + const $ = _c(1); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = makeSomePrimitive(); + t0 = { u: makeSomePrimitive(), v: makeSomePrimitive() }; $[0] = t0; } else { t0 = $[0]; } - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = { u: t0, v: makeSomePrimitive() }; - $[1] = t1; - } else { - t1 = $[1]; - } - const x = t1; + const x = t0; const u = x.u; const v = x.v; if (u > v) {