diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts index 9a59397126cc5..9ca478b742d4c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts @@ -281,7 +281,7 @@ const EnvironmentConfigSchema = z.object({ * Enable instruction reordering. See InstructionReordering.ts for the details * of the approach. */ - enableInstructionReordering: z.boolean().default(false), + enableInstructionReordering: z.boolean().default(true), /* * Enables instrumentation codegen. This emits a dev-mode only call to an diff --git a/compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts b/compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts index d94cfbbf1801c..fdae8392d60bb 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts @@ -243,67 +243,131 @@ function reorderBlock( DEBUG && console.log(`bb${block.id}`); - // First emit everything that can't be reordered - if (previous !== null) { - DEBUG && console.log(`(last non-reorderable instruction)`); - DEBUG && print(env, locals, shared, seen, previous); - emit(env, locals, shared, nextInstructions, previous); - } - /* - * For "value" blocks the final instruction represents its value, so we have to be - * careful to not change the ordering. Emit the last instruction explicitly. - * Any non-reorderable instructions will get emitted first, and any unused - * reorderable instructions can be deferred to the shared node list. + /** + * The ideal order for emitting instructions may change the final instruction, + * but value blocks have special semantics for the final instruction of a block - + * that's the expression's value!. So we choose between a less optimal strategy + * for value blocks which preserves the final instruction order OR a more optimal + * ordering for statement-y blocks. */ - if (isExpressionBlockKind(block.kind) && block.instructions.length !== 0) { - DEBUG && console.log(`(block value)`); - DEBUG && - print( + if (isExpressionBlockKind(block.kind)) { + // First emit everything that can't be reordered + if (previous !== null) { + DEBUG && console.log(`(last non-reorderable instruction)`); + DEBUG && print(env, locals, shared, seen, previous); + emit(env, locals, shared, nextInstructions, previous); + } + /* + * For "value" blocks the final instruction represents its value, so we have to be + * careful to not change the ordering. Emit the last instruction explicitly. + * Any non-reorderable instructions will get emitted first, and any unused + * reorderable instructions can be deferred to the shared node list. + */ + if (block.instructions.length !== 0) { + DEBUG && console.log(`(block value)`); + DEBUG && + print( + env, + locals, + shared, + seen, + block.instructions.at(-1)!.lvalue.identifier.id + ); + emit( env, locals, shared, - seen, + nextInstructions, block.instructions.at(-1)!.lvalue.identifier.id ); - emit( - env, - locals, - shared, - nextInstructions, - block.instructions.at(-1)!.lvalue.identifier.id - ); - } - /* - * Then emit the dependencies of the terminal operand. In many cases they will have - * already been emitted in the previous step and this is a no-op. - * TODO: sort the dependencies based on weight, like we do for other nodes. Not a big - * deal though since most terminals have a single operand - */ - for (const operand of eachTerminalOperand(block.terminal)) { - DEBUG && console.log(`(terminal operand)`); - DEBUG && print(env, locals, shared, seen, operand.identifier.id); - emit(env, locals, shared, nextInstructions, operand.identifier.id); - } - // Anything not emitted yet is globally reorderable - for (const [id, node] of locals) { - if (node.instruction == null) { - continue; } - CompilerError.invariant( - node.instruction != null && + /* + * Then emit the dependencies of the terminal operand. In many cases they will have + * already been emitted in the previous step and this is a no-op. + * TODO: sort the dependencies based on weight, like we do for other nodes. Not a big + * deal though since most terminals have a single operand + */ + for (const operand of eachTerminalOperand(block.terminal)) { + DEBUG && console.log(`(terminal operand)`); + DEBUG && print(env, locals, shared, seen, operand.identifier.id); + emit(env, locals, shared, nextInstructions, operand.identifier.id); + } + // Anything not emitted yet is globally reorderable + for (const [id, node] of locals) { + if (node.instruction == null) { + continue; + } + CompilerError.invariant( + node.instruction != null && + getReoderability(node.instruction, references) === + Reorderability.Reorderable, + { + reason: `Expected all remaining instructions to be reorderable`, + loc: node.instruction?.loc ?? block.terminal.loc, + description: + node.instruction != null + ? `Instruction [${node.instruction.id}] was not emitted yet but is not reorderable` + : `Lvalue $${id} was not emitted yet but is not reorderable`, + } + ); + + DEBUG && console.log(`save shared: $${id}`); + shared.set(id, node); + } + } else { + /** + * If this is not a value block, then the order within the block doesn't matter + * and we can optimize more. The observation is that blocks often have instructions + * such as: + * + * ``` + * t$0 = nonreorderable + * t$1 = nonreorderable <-- this gets in the way of merging t$0 and t$2 + * t$2 = reorderable deps[ t$0 ] + * return t$2 + * ``` + * + * Ie where there is some pair of nonreorderable+reorderable values, with some intervening + * also non-reorderable instruction. If we emit all non-reorderable instructions first, + * then we'll keep the original order. But reordering instructions don't just mean moving + * them later: we can also move then _earlier_. By starting from terminal operands, we + * end up emitting: + * + * ``` + * t$0 = nonreorderable // dep of t$2 + * t$2 = reorderable deps[ t$0 ] + * t$1 = nonreorderable <-- not in the way of merging anymore! + * return t$2 + * ``` + * + * Ie all nonreorderable transitive deps of the terminal operands will get emitted first, + * but we'll be able to intersperse the depending reorderable instructions in between + * them in a way that works better with scope merging. + */ + for (const operand of eachTerminalOperand(block.terminal)) { + DEBUG && console.log(`(terminal operand)`); + DEBUG && print(env, locals, shared, seen, operand.identifier.id); + emit(env, locals, shared, nextInstructions, operand.identifier.id); + } + // Anything not emitted yet is globally reorderable + for (const id of Array.from(locals.keys()).reverse()) { + const node = locals.get(id); + if (node === undefined) { + continue; + } + if ( + node.instruction !== null && getReoderability(node.instruction, references) === - Reorderability.Reorderable, - { - reason: `Expected all remaining instructions to be reorderable`, - loc: node.instruction?.loc ?? block.terminal.loc, - description: - node.instruction != null - ? `Instruction [${node.instruction.id}] was not emitted yet but is not reorderable` - : `Lvalue $${id} was not emitted yet but is not reorderable`, + Reorderability.Reorderable + ) { + DEBUG && console.log(`save shared: $${id}`); + shared.set(id, node); + } else { + DEBUG && console.log("leftover"); + DEBUG && print(env, locals, shared, seen, id); + emit(env, locals, shared, nextInstructions, id); } - ); - DEBUG && console.log(`save shared: $${id}`); - shared.set(id, node); + } } block.instructions = nextInstructions; @@ -432,7 +496,6 @@ function getReoderability( range !== undefined && range.end === range.start // this LoadLocal is used exactly once ) { - console.log(`reorderable: ${name.value}`); return Reorderability.Reorderable; } } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-computed-load.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-computed-load.expect.md index f76e98b6c3e32..aecb50b8432f6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-computed-load.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-computed-load.expect.md @@ -19,19 +19,20 @@ function component(a) { import { c as _c } from "react/compiler-runtime"; function component(a) { const $ = _c(2); - let x; + let t0; if ($[0] !== a) { - x = { a }; + const x = { a }; const y = {}; + t0 = x; y.x = x.a; mutate(y); $[0] = a; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path-mutate.expect.md index f320d630713ec..6a4392ab93587 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path-mutate.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path-mutate.expect.md @@ -20,19 +20,21 @@ function component() { import { c as _c } from "react/compiler-runtime"; function component() { const $ = _c(1); - let x; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { const z = []; const y = {}; y.z = z; - x = {}; + const x = {}; x.y = y; + + t0 = x; mutate(x.y.z); - $[0] = x; + $[0] = t0; } else { - x = $[0]; + t0 = $[0]; } - return x; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path.expect.md index 100567a338500..d7a1d0c7aab93 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-nested-member-path.expect.md @@ -25,18 +25,20 @@ export const FIXTURE_ENTRYPOINT = { import { c as _c } from "react/compiler-runtime"; function component() { const $ = _c(1); - let x; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { const z = []; const y = {}; y.z = z; - x = {}; + const x = {}; + + t0 = x; x.y = y; - $[0] = x; + $[0] = t0; } else { - x = $[0]; + t0 = $[0]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-within-nested-valueblock-in-array.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-within-nested-valueblock-in-array.expect.md index 0d1a54af35f40..62be10a822baa 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-within-nested-valueblock-in-array.expect.md +++ b/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 ? ( <>
{identity("foo")}
@@ -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; } 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 43503170c20ff..b79635c84088f 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 @@ -39,57 +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; - let t4; - if ($[3] === Symbol.for("react.memo_cache_sentinel")) { - t3 = () => { + if ($[2] === Symbol.for("react.memo_cache_sentinel")) { + t2 = () => { setState(someGlobal.value); }; - t4 = [someGlobal]; + t3 = [someGlobal]; + $[2] = t2; $[3] = t3; - $[4] = t4; } else { + t2 = $[2]; t3 = $[3]; - t4 = $[4]; } - useEffect(t3, t4); + useEffect(t2, t3); - const t5 = String(state); - let t6; - if ($[5] !== t5) { - t6 =
{t5}
; + const t4 = String(state); + let t5; + if ($[4] !== t4) { + t5 =
{t4}
; + $[4] = t4; $[5] = t5; - $[6] = t6; } else { - t6 = $[6]; + t5 = $[5]; } - return t6; + return t5; } export const FIXTURE_ENTRYPOINT = { 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 fec286b265aa9..0a4527a0a4706 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 @@ -39,57 +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; - let t4; - if ($[3] === Symbol.for("react.memo_cache_sentinel")) { - t3 = () => { + if ($[2] === Symbol.for("react.memo_cache_sentinel")) { + t2 = () => { setState(someGlobal); }; - t4 = [someGlobal]; + t3 = [someGlobal]; + $[2] = t2; $[3] = t3; - $[4] = t4; } else { + t2 = $[2]; t3 = $[3]; - t4 = $[4]; } - useEffect(t3, t4); + useEffect(t2, t3); - const t5 = String(state); - let t6; - if ($[5] !== t5) { - t6 =
{t5}
; + const t4 = String(state); + let t5; + if ($[4] !== t4) { + t5 =
{t4}
; + $[4] = t4; $[5] = t5; - $[6] = t6; } else { - t6 = $[6]; + t5 = $[5]; } - return t6; + return t5; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md index 539c9e71ec828..a7efcbe0e52d1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md @@ -66,31 +66,31 @@ function Component() { } const onClick = t1; let t2; - if ($[3] !== ref) { - t2 = ; - $[3] = ref; + if ($[3] !== onClick) { + t2 = + ); + t1 = {state}; $[0] = state; $[1] = t0; - } else { - t0 = $[1]; - } - let t1; - if ($[2] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ; $[2] = t1; } else { + t0 = $[1]; t1 = $[2]; } let t2; - if ($[3] !== state) { - t2 = {state}; - $[3] = state; - $[4] = t2; + if ($[3] === Symbol.for("react.memo_cache_sentinel")) { + t2 = ; + $[3] = t2; } else { - t2 = $[4]; + t2 = $[3]; } let t3; - if ($[5] !== t0) { + if ($[4] !== t1 || $[5] !== t0) { t3 = ( - - ); - $[5] = t0; - $[6] = t3; - } else { - t3 = $[6]; - } - let t4; - if ($[7] !== t2 || $[8] !== t3) { - t4 = (
- {t1} {t2} - {t3} + {t1} + {t0}
); - $[7] = t2; - $[8] = t3; - $[9] = t4; + $[4] = t1; + $[5] = t0; + $[6] = t3; } else { - t4 = $[9]; + t3 = $[6]; } - return t4; + return t3; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes.expect.md index c893ac645734b..e0acb4ed1439b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-consecutive-scopes.expect.md @@ -33,49 +33,45 @@ import { useState } from "react"; import { Stringify } from "shared-runtime"; function Component() { - const $ = _c(8); + const $ = _c(7); const [state, setState] = useState(0); let t0; - if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = ; - $[0] = t0; - } else { - t0 = $[0]; - } let t1; - if ($[1] !== state) { + if ($[0] !== state) { + t0 = ( + + ); t1 = {state}; - $[1] = state; + $[0] = state; + $[1] = t0; $[2] = t1; } else { + t0 = $[1]; t1 = $[2]; } let t2; - if ($[3] !== state) { - t2 = ( - - ); - $[3] = state; - $[4] = t2; + if ($[3] === Symbol.for("react.memo_cache_sentinel")) { + t2 = ; + $[3] = t2; } else { - t2 = $[4]; + t2 = $[3]; } let t3; - if ($[5] !== t1 || $[6] !== t2) { + if ($[4] !== t1 || $[5] !== t0) { t3 = (
- {t0} - {t1} {t2} + {t1} + {t0}
); - $[5] = t1; - $[6] = t2; - $[7] = t3; + $[4] = t1; + $[5] = t0; + $[6] = t3; } else { - t3 = $[7]; + t3 = $[6]; } return t3; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-nested-scopes-with-same-inputs.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-nested-scopes-with-same-inputs.expect.md index 6a7c8a5a28aeb..a9e4dc1435b02 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-nested-scopes-with-same-inputs.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-nested-scopes-with-same-inputs.expect.md @@ -35,21 +35,23 @@ import { setProperty } from "shared-runtime"; function Component(props) { const $ = _c(2); - let y; + let t0; if ($[0] !== props.a) { - y = {}; + const y = {}; const x = {}; setProperty(x, props.a); y.a = props.a; + + t0 = y; y.x = x; $[0] = props.a; - $[1] = y; + $[1] = t0; } else { - y = $[1]; + t0 = $[1]; } - return y; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.expect.md index a2e79ad67f095..49558eb0e4353 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merge-scopes-callback.expect.md @@ -27,7 +27,7 @@ import { c as _c } from "react/compiler-runtime"; // @enableInstructionReorderin import { useState } from "react"; function Component() { - const $ = _c(6); + const $ = _c(4); const [state, setState] = useState(0); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { @@ -40,34 +40,26 @@ function Component() { } const onClick = t0; let t1; - if ($[1] !== state) { - t1 = Count: {state}; - $[1] = state; - $[2] = t1; + if ($[1] === Symbol.for("react.memo_cache_sentinel")) { + t1 = ; + $[1] = t1; } else { - t1 = $[2]; + t1 = $[1]; } let t2; - if ($[3] === Symbol.for("react.memo_cache_sentinel")) { - t2 = ; - $[3] = t2; - } else { - t2 = $[3]; - } - let t3; - if ($[4] !== t1) { - t3 = ( + if ($[2] !== state) { + t2 = ( <> + Count: {state} {t1} - {t2} ); - $[4] = t1; - $[5] = t3; + $[2] = state; + $[3] = t2; } else { - t3 = $[5]; + t2 = $[3]; } - return t3; + return t2; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merged-scopes-are-valid-effect-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merged-scopes-are-valid-effect-deps.expect.md index a699e901500cb..b1d693288b2ee 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merged-scopes-are-valid-effect-deps.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/merged-scopes-are-valid-effect-deps.expect.md @@ -32,7 +32,7 @@ import { c as _c } from "react/compiler-runtime"; // @validateMemoizedEffectDepe import { useEffect } from "react"; function Component(props) { - const $ = _c(5); + const $ = _c(6); let t0; if ($[0] !== props.value) { t0 = [[props.value]]; @@ -43,18 +43,22 @@ function Component(props) { } const y = t0; let t1; - let t2; if ($[2] !== y) { t1 = () => { console.log(y); }; - t2 = [y]; $[2] = y; $[3] = t1; - $[4] = t2; } else { t1 = $[3]; - t2 = $[4]; + } + let t2; + if ($[4] !== y) { + t2 = [y]; + $[4] = y; + $[5] = t2; + } else { + t2 = $[5]; } useEffect(t1, t2); return y; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-assigned-to-temporary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-assigned-to-temporary.expect.md index 8a75ac8a14516..edca42ac3cd95 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-assigned-to-temporary.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/meta-isms/repro-cx-assigned-to-temporary.expect.md @@ -53,22 +53,27 @@ import { identity } from "shared-runtime"; const DARK = "dark"; function Component() { - const $ = _c(2); + const $ = _c(4); const theme = useTheme(); - const t0 = cx({ - "styles/light": true, - "styles/dark": theme.getTheme() === DARK, - }); + const t0 = theme.getTheme(); let t1; if ($[0] !== t0) { - t1 =
; + t1 = cx({ "styles/light": true, "styles/dark": t0 === DARK }); $[0] = t0; $[1] = t1; } else { t1 = $[1]; } - return t1; + let t2; + if ($[2] !== t1) { + t2 =
; + $[2] = t1; + $[3] = t2; + } else { + t2 = $[3]; + } + return t2; } function cx(obj) { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-lifetime-with-aliasing.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-lifetime-with-aliasing.expect.md index 0fd482ea4d040..3aab273f8e3df 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-lifetime-with-aliasing.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutable-lifetime-with-aliasing.expect.md @@ -68,14 +68,14 @@ function mutate(x, y) { function Component(props) { const $ = _c(1); - let x; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { const a = {}; const b = [a]; const c = {}; const d = { c }; - x = {}; + const x = {}; x.b = b; const y = mutate(x, d); if (a) { @@ -89,12 +89,13 @@ function Component(props) { if (y) { } + t0 = x; mutate(x, null); - $[0] = x; + $[0] = t0; } else { - x = $[0]; + t0 = $[0]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-during-jsx-construction.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-during-jsx-construction.expect.md index d1f8165d61b92..d29bebd1c1f5b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-during-jsx-construction.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-during-jsx-construction.expect.md @@ -29,19 +29,20 @@ import { identity, mutate, mutateAndReturnNewValue } from "shared-runtime"; function Component(props) { const $ = _c(2); - let element; + let t0; if ($[0] !== props.value) { const key = {}; - element =
{props.value}
; + const element =
{props.value}
; + t0 = element; mutate(key); $[0] = props.value; - $[1] = element; + $[1] = t0; } else { - element = $[1]; + t0 = $[1]; } - return element; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-capture-and-mutablerange.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-capture-and-mutablerange.expect.md index 79370f8713504..1972d9a9d1760 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-capture-and-mutablerange.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/mutation-within-capture-and-mutablerange.expect.md @@ -53,22 +53,23 @@ import { mutate } from "shared-runtime"; function useFoo(t0) { const $ = _c(3); const { a, b } = t0; - let z; + let t1; if ($[0] !== a || $[1] !== b) { const x = { a }; const y = [b]; mutate(x); - z = [mutate(y)]; + const z = [mutate(y)]; + t1 = z; mutate(y); $[0] = a; $[1] = b; - $[2] = z; + $[2] = t1; } else { - z = $[2]; + t1 = $[2]; } - return z; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-begin-same-instr-valueblock.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-begin-same-instr-valueblock.expect.md index b962759ef3477..4dccaf3a9e290 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-begin-same-instr-valueblock.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/nested-scopes-begin-same-instr-valueblock.expect.md @@ -33,17 +33,18 @@ import { identity, mutate } from "shared-runtime"; function Foo(t0) { const $ = _c(2); const { cond } = t0; - let x; + let t1; if ($[0] !== cond) { - x = identity(identity(cond)) ? { a: 2 } : { b: 2 }; + const x = identity(identity(cond)) ? { a: 2 } : { b: 2 }; + t1 = x; mutate(x); $[0] = cond; - $[1] = x; + $[1] = t1; } else { - x = $[1]; + t1 = $[1]; } - return x; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-literal-mutated-after-if-else.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-literal-mutated-after-if-else.expect.md index a3bf0e5ee8adf..b62d7517ad6b8 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-literal-mutated-after-if-else.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-literal-mutated-after-if-else.expect.md @@ -22,22 +22,24 @@ function foo(a, b, c, d) { import { c as _c } from "react/compiler-runtime"; function foo(a, b, c, d) { const $ = _c(3); - let x; + let t0; if ($[0] !== b || $[1] !== c) { + let x; if (someVal) { x = { b }; } else { x = { c }; } + t0 = x; x.f = 1; $[0] = b; $[1] = c; - $[2] = x; + $[2] = t0; } else { - x = $[2]; + t0 = $[2]; } - return x; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else-with-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else-with-alias.expect.md index 52077b6b894c1..47c22c1694d5f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else-with-alias.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else-with-alias.expect.md @@ -25,8 +25,9 @@ import { c as _c } from "react/compiler-runtime"; function foo(a, b, c, d) { const $ = _c(2); someObj(); - let x; + let t0; if ($[0] !== a) { + let x; if (a) { const y = someObj(); const z = y; @@ -35,13 +36,14 @@ function foo(a, b, c, d) { x = someObj(); } + t0 = x; x.f = 1; $[0] = a; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else.expect.md index 933e05d1554ca..db1ea1b788aa9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-if-else.expect.md @@ -23,21 +23,23 @@ import { c as _c } from "react/compiler-runtime"; function foo(a, b, c, d) { const $ = _c(2); someObj(); - let x; + let t0; if ($[0] !== a) { + let x; if (a) { x = someObj(); } else { x = someObj(); } + t0 = x; x.f = 1; $[0] = a; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-nested-if-else-with-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-nested-if-else-with-alias.expect.md index 8c4a8b1a3cca0..0c1c88cd40aed 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-nested-if-else-with-alias.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/obj-mutated-after-nested-if-else-with-alias.expect.md @@ -31,8 +31,9 @@ import { c as _c } from "react/compiler-runtime"; function foo(a, b, c, d) { const $ = _c(3); someObj(); - let x; + let t0; if ($[0] !== a || $[1] !== b) { + let x; if (a) { let z; if (b) { @@ -47,14 +48,15 @@ function foo(a, b, c, d) { x = someObj(); } + t0 = x; x.f = 1; $[0] = a; $[1] = b; - $[2] = x; + $[2] = t0; } else { - x = $[2]; + t0 = $[2]; } - return x; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-aliased-mutate-after.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-aliased-mutate-after.expect.md index 3ad02df03054c..c9dbcf057b944 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-aliased-mutate-after.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-aliased-mutate-after.expect.md @@ -29,22 +29,23 @@ import { createHookWrapper, mutate, mutateAndReturn } from "shared-runtime"; function useHook(t0) { const $ = _c(2); const { value } = t0; - let obj; + let t1; if ($[0] !== value) { const x = mutateAndReturn({ value }); - obj = { + const obj = { getValue() { return value; }, }; + t1 = obj; mutate(x); $[0] = value; - $[1] = obj; + $[1] = t1; } else { - obj = $[1]; + t1 = $[1]; } - return obj; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-mutated-after.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-mutated-after.expect.md index 46d532308bb37..89ce380c589f4 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-mutated-after.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-mutated-after.expect.md @@ -29,22 +29,23 @@ import { createHookWrapper, mutate, mutateAndReturn } from "shared-runtime"; function useHook(t0) { const $ = _c(2); const { value } = t0; - let obj; + let t1; if ($[0] !== value) { const x = mutateAndReturn({ value }); - obj = { + const obj = { getValue() { return x; }, }; + t1 = obj; mutate(obj); $[0] = value; - $[1] = obj; + $[1] = t1; } else { - obj = $[1]; + t1 = $[1]; } - return obj; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/invalid-align-scopes-within-nested-valueblock-in-array.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/invalid-align-scopes-within-nested-valueblock-in-array.expect.md index 0d1a54af35f40..62be10a822baa 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/invalid-align-scopes-within-nested-valueblock-in-array.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/invalid-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 ? ( <>
{identity("foo")}
@@ -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; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/mutation-within-capture-and-mutablerange.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/mutation-within-capture-and-mutablerange.expect.md index f3278e91bad90..e0de2ea29ab5d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/mutation-within-capture-and-mutablerange.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/original-reactive-scopes-fork/mutation-within-capture-and-mutablerange.expect.md @@ -54,31 +54,32 @@ import { mutate } from "shared-runtime"; function useFoo(t0) { const $ = _c(5); const { a, b } = t0; - let z; + let t1; if ($[0] !== a || $[1] !== b) { const x = { a }; const y = [b]; mutate(x); - const t1 = mutate(y); - let t2; - if ($[3] !== t1) { - t2 = [t1]; - $[3] = t1; - $[4] = t2; + const t2 = mutate(y); + let t3; + if ($[3] !== t2) { + t3 = [t2]; + $[3] = t2; + $[4] = t3; } else { - t2 = $[4]; + t3 = $[4]; } - z = t2; + const z = t3; + t1 = z; mutate(y); $[0] = a; $[1] = b; - $[2] = z; + $[2] = t1; } else { - z = $[2]; + t1 = $[2]; } - return z; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-reference-effects.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-reference-effects.expect.md index bef1d7b8368a3..68665870e2287 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-reference-effects.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/phi-reference-effects.expect.md @@ -32,20 +32,21 @@ import { arrayPush } from "shared-runtime"; function Foo(cond) { const $ = _c(2); - let x; + let t0; if ($[0] !== cond) { - x = null; + let x = null; if (cond) { x = []; } + t0 = x; arrayPush(x, 2); $[0] = cond; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-call-evaluation-order.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-call-evaluation-order.expect.md index d097ee0fad007..0f0a336c4ee70 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-call-evaluation-order.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-call-evaluation-order.expect.md @@ -41,16 +41,17 @@ function Component() { t0 = $[0]; } const changeF = t0; - let x; + let t1; if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - x = { f: () => console.log("original") }; + const x = { f: () => console.log("original") }; + t1 = x; (console.log("A"), x).f((changeF(x), console.log("arg"), 1)); - $[1] = x; + $[1] = t1; } else { - x = $[1]; + t1 = $[1]; } - return x; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scope-grouping.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scope-grouping.expect.md index 71cd4e526a2fb..8c82efef52c2b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scope-grouping.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reactive-scope-grouping.expect.md @@ -26,18 +26,20 @@ export const FIXTURE_ENTRYPOINT = { import { c as _c } from "react/compiler-runtime"; function foo() { const $ = _c(1); - let x; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - x = {}; + const x = {}; const y = []; const z = {}; y.push(z); + + t0 = x; x.y = y; - $[0] = x; + $[0] = t0; } else { - x = $[0]; + t0 = $[0]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-return-in-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-return-in-scope.expect.md index 59fea6bcd0f5d..106598b36bff9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-return-in-scope.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-cond-deps-return-in-scope.expect.md @@ -31,33 +31,34 @@ import { c as _c } from "react/compiler-runtime"; function useFoo(t0) { const $ = _c(4); const { obj, objIsNull } = t0; - let x; let t1; + let t2; if ($[0] !== objIsNull || $[1] !== obj) { - t1 = Symbol.for("react.early_return_sentinel"); + t2 = Symbol.for("react.early_return_sentinel"); bb0: { - x = []; + const x = []; if (objIsNull) { - t1 = undefined; + t2 = undefined; break bb0; } else { x.push(obj.a); } + t1 = x; x.push(obj.b); } $[0] = objIsNull; $[1] = obj; - $[2] = x; - $[3] = t1; + $[2] = t1; + $[3] = t2; } else { - x = $[2]; - t1 = $[3]; + t1 = $[2]; + t2 = $[3]; } - if (t1 !== Symbol.for("react.early_return_sentinel")) { - return t1; + if (t2 !== Symbol.for("react.early_return_sentinel")) { + return t2; } - return x; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/conditional-member-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/conditional-member-expr.expect.md index be2c1c49cb0a1..9b99d254ee462 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/conditional-member-expr.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/conditional-member-expr.expect.md @@ -28,16 +28,18 @@ import { c as _c } from "react/compiler-runtime"; // To preserve the nullthrows function Component(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props.a) { - x = []; + const x = []; + + t0 = x; x.push(props.a?.b); $[0] = props.a; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-in-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-in-scope.expect.md index 258155e11c9bc..29feb0e40c752 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-in-scope.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-in-scope.expect.md @@ -33,31 +33,32 @@ import { c as _c } from "react/compiler-runtime"; function useFoo(t0) { const $ = _c(4); const { obj, objIsNull } = t0; - let x; let t1; + let t2; if ($[0] !== objIsNull || $[1] !== obj) { - t1 = Symbol.for("react.early_return_sentinel"); + t2 = Symbol.for("react.early_return_sentinel"); bb0: { - x = []; + const x = []; if (objIsNull) { - t1 = undefined; + t2 = undefined; break bb0; } + t1 = x; x.push(obj.b); } $[0] = objIsNull; $[1] = obj; - $[2] = x; - $[3] = t1; + $[2] = t1; + $[3] = t2; } else { - x = $[2]; - t1 = $[3]; + t1 = $[2]; + t2 = $[3]; } - if (t1 !== Symbol.for("react.early_return_sentinel")) { - return t1; + if (t2 !== Symbol.for("react.early_return_sentinel")) { + return t2; } - return x; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-poisons-outer-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-poisons-outer-scope.expect.md index 5c41853c5dbea..39e776ca87e5e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-poisons-outer-scope.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-poisoned/return-poisons-outer-scope.expect.md @@ -39,38 +39,40 @@ import { identity } from "shared-runtime"; function useFoo(t0) { const $ = _c(6); const { input, cond } = t0; - let x; let t1; + let t2; if ($[0] !== cond || $[1] !== input) { - t1 = Symbol.for("react.early_return_sentinel"); + t2 = Symbol.for("react.early_return_sentinel"); bb0: { - x = []; + const x = []; if (cond) { - t1 = null; + t2 = null; break bb0; } - let t2; + + t1 = x; + let t3; if ($[4] !== input.a.b) { - t2 = identity(input.a.b); + t3 = identity(input.a.b); $[4] = input.a.b; - $[5] = t2; + $[5] = t3; } else { - t2 = $[5]; + t3 = $[5]; } - x.push(t2); + x.push(t3); } $[0] = cond; $[1] = input; - $[2] = x; - $[3] = t1; + $[2] = t1; + $[3] = t2; } else { - x = $[2]; - t1 = $[3]; + t1 = $[2]; + t2 = $[3]; } - if (t1 !== Symbol.for("react.early_return_sentinel")) { - return t1; + if (t2 !== Symbol.for("react.early_return_sentinel")) { + return t2; } - return x; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-label.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-label.expect.md index 65fd8710ed092..f9fd27f1d49d7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-label.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-label.expect.md @@ -37,21 +37,22 @@ import { c as _c } from "react/compiler-runtime"; function useFoo(t0) { const $ = _c(3); const { input, cond } = t0; - let x; + let t1; if ($[0] !== cond || $[1] !== input.a.b) { - x = []; + const x = []; bb0: if (cond) { break bb0; } + t1 = x; x.push(input.a.b); $[0] = cond; $[1] = input.a.b; - $[2] = x; + $[2] = t1; } else { - x = $[2]; + t1 = $[2]; } - return x; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-loop-break.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-loop-break.expect.md index 97142a36f49ac..6babca961b267 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-loop-break.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/jump-target-within-scope-loop-break.expect.md @@ -39,9 +39,9 @@ import { c as _c } from "react/compiler-runtime"; function useFoo(t0) { const $ = _c(3); const { input, max } = t0; - let x; + let t1; if ($[0] !== max || $[1] !== input.a.b) { - x = []; + const x = []; let i = 0; while (true) { i = i + 1; @@ -51,14 +51,16 @@ function useFoo(t0) { } x.push(i); + + t1 = x; x.push(input.a.b); $[0] = max; $[1] = input.a.b; - $[2] = x; + $[2] = t1; } else { - x = $[2]; + t1 = $[2]; } - return x; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/return-before-scope-starts.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/return-before-scope-starts.expect.md index 5edc13dead328..c95da73e8f6c8 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/return-before-scope-starts.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/return-before-scope-starts.expect.md @@ -51,16 +51,18 @@ function useFoo(t0) { } return t1; } - let x; + let t1; if ($[1] !== input.a.b) { - x = []; + const x = []; + + t1 = x; arrayPush(x, input.a.b); $[1] = input.a.b; - $[2] = x; + $[2] = t1; } else { - x = $[2]; + t1 = $[2]; } - return x; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/throw-before-scope-starts.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/throw-before-scope-starts.expect.md index 5751d26c941aa..8f638ac9fa37c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/throw-before-scope-starts.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/jump-unpoisoned/throw-before-scope-starts.expect.md @@ -44,16 +44,18 @@ function useFoo(t0) { if (cond) { throw new Error("throw with error!"); } - let x; + let t1; if ($[0] !== input.a.b) { - x = []; + const x = []; + + t1 = x; arrayPush(x, input.a.b); $[0] = input.a.b; - $[1] = x; + $[1] = t1; } else { - x = $[1]; + t1 = $[1]; } - return x; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain.expect.md index fcb9926c22f04..dc70682f703db 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain.expect.md @@ -43,17 +43,19 @@ import { c as _c } from "react/compiler-runtime"; // To preserve the nullthrows function Component(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props.a) { - x = []; + const x = []; x.push(props.a?.b); + + t0 = x; x.push(props.a.b.c); $[0] = props.a; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain2.expect.md index ad5dc911af5a2..1247ef1ac7857 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain2.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/memberexpr-join-optional-chain2.expect.md @@ -22,17 +22,19 @@ export const FIXTURE_ENTRYPOINT = { import { c as _c } from "react/compiler-runtime"; function Component(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props.items) { - x = []; + const x = []; x.push(props.items?.length); + + t0 = x; x.push(props.items?.edges?.map?.(render)?.filter?.(Boolean) ?? []); $[0] = props.items; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order2.expect.md index 66239c1c56cb7..a5bf4d3af9be2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order2.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/subpath-order2.expect.md @@ -39,21 +39,22 @@ import { identity } from "shared-runtime"; // ordering of accesses should not matter function useConditionalSubpath2(props, other) { const $ = _c(3); - let x; + let t0; if ($[0] !== other || $[1] !== props.a) { - x = {}; + const x = {}; if (identity(other)) { x.a = props.a; } + t0 = x; x.b = props.a.b; $[0] = other; $[1] = props.a; - $[2] = x; + $[2] = t0; } else { - x = $[2]; + t0 = $[2]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order2.expect.md index 86d435d4cccdb..21ec0568dac74 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order2.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/superpath-order2.expect.md @@ -47,21 +47,22 @@ import { identity } from "shared-runtime"; function useConditionalSuperpath2(t0) { const $ = _c(3); const { props, cond } = t0; - let x; + let t1; if ($[0] !== cond || $[1] !== props.a) { - x = {}; + const x = {}; if (identity(cond)) { x.b = props.a.b; } + t1 = x; x.a = props.a; $[0] = cond; $[1] = props.a; - $[2] = x; + $[2] = t1; } else { - x = $[2]; + t1 = $[2]; } - return x; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-descendant.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-descendant.expect.md index ffdc707d1f21c..ed0d6b859a3b9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-descendant.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-descendant.expect.md @@ -26,20 +26,22 @@ import { c as _c } from "react/compiler-runtime"; // Test that we can track non- // (not needed for correctness but for dependency granularity) function TestNonOverlappingDescendantTracked(props) { const $ = _c(4); - let x; + let t0; if ($[0] !== props.a.x.y || $[1] !== props.a.c.x.y.z || $[2] !== props.b) { - x = {}; + const x = {}; x.a = props.a.x.y; x.b = props.b; + + t0 = x; x.c = props.a.c.x.y.z; $[0] = props.a.x.y; $[1] = props.a.c.x.y.z; $[2] = props.b; - $[3] = x; + $[3] = t0; } else { - x = $[3]; + t0 = $[3]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-direct.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-direct.expect.md index 21db959c98a58..683a579604004 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-direct.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-nonoverlap-direct.expect.md @@ -25,18 +25,20 @@ import { c as _c } from "react/compiler-runtime"; // Test that we can track non- // (not needed for correctness but for dependency granularity) function TestNonOverlappingTracked(props) { const $ = _c(3); - let x; + let t0; if ($[0] !== props.a.b || $[1] !== props.a.c) { - x = {}; + const x = {}; x.b = props.a.b; + + t0 = x; x.c = props.a.c; $[0] = props.a.b; $[1] = props.a.c; - $[2] = x; + $[2] = t0; } else { - x = $[2]; + t0 = $[2]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-descendant.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-descendant.expect.md index 13fa6d680eb35..d325a2021ab12 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-descendant.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-descendant.expect.md @@ -26,18 +26,20 @@ import { c as _c } from "react/compiler-runtime"; // Test that we correctly trac // a dependency function TestOverlappingDescendantTracked(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props.a) { - x = {}; + const x = {}; x.b = props.a.b.c; x.c = props.a.b.c.x.y; + + t0 = x; x.a = props.a; $[0] = props.a; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-direct.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-direct.expect.md index d0f9d45fa7967..375443080d5ee 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-direct.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-overlap-direct.expect.md @@ -26,18 +26,20 @@ import { c as _c } from "react/compiler-runtime"; // Test that we correctly trac // a dependency function TestOverlappingTracked(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props.a) { - x = {}; + const x = {}; x.b = props.a.b; x.c = props.a.c; + + t0 = x; x.a = props.a; $[0] = props.a; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order1.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order1.expect.md index a2855ad305b7f..f7dc9fa2506af 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order1.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order1.expect.md @@ -26,18 +26,20 @@ import { c as _c } from "react/compiler-runtime"; // Determine that we only need // Ordering of access should not matter function TestDepsSubpathOrder1(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props.a) { - x = {}; + const x = {}; x.b = props.a.b; x.a = props.a; + + t0 = x; x.c = props.a.b.c; $[0] = props.a; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order2.expect.md index c731aeb9075a6..50ca47d18e265 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order2.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order2.expect.md @@ -26,18 +26,20 @@ import { c as _c } from "react/compiler-runtime"; // Determine that we only need // Ordering of access should not matter function TestDepsSubpathOrder2(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props.a) { - x = {}; + const x = {}; x.a = props.a; x.b = props.a.b; + + t0 = x; x.c = props.a.b.c; $[0] = props.a; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order3.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order3.expect.md index bd9df044ec5e7..ca06c200aae40 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order3.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reduce-reactive-deps/uncond-subpath-order3.expect.md @@ -26,18 +26,20 @@ import { c as _c } from "react/compiler-runtime"; // Determine that we only need // Ordering of access should not matter function TestDepsSubpathOrder3(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props.a) { - x = {}; + const x = {}; x.c = props.a.b.c; x.a = props.a; + + t0 = x; x.b = props.a.b; $[0] = props.a; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-instruction-from-merge-consecutive-scopes.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-instruction-from-merge-consecutive-scopes.expect.md index 75627f01a7035..0c731395e2a4e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-instruction-from-merge-consecutive-scopes.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-duplicate-instruction-from-merge-consecutive-scopes.expect.md @@ -29,30 +29,39 @@ import { c as _c } from "react/compiler-runtime"; import { Stringify } from "shared-runtime"; function Component(t0) { - const $ = _c(3); + const $ = _c(5); const { id } = t0; - let t1; - if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ; + + const t1 = id ? true : false; + let t2; + if ($[0] !== t1) { + t2 = ; $[0] = t1; + $[1] = t2; } else { - t1 = $[0]; + t2 = $[1]; } - const t2 = id ? true : false; let t3; - if ($[1] !== t2) { - t3 = ( + if ($[2] === Symbol.for("react.memo_cache_sentinel")) { + t3 = ; + $[2] = t3; + } else { + t3 = $[2]; + } + let t4; + if ($[3] !== t2) { + t4 = ( <> - {t1} - + {t3} + {t2} ); - $[1] = t2; - $[2] = t3; + $[3] = t2; + $[4] = t4; } else { - t3 = $[2]; + t4 = $[4]; } - return t3; + return t4; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-instruction-part-of-already-closed-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-instruction-part-of-already-closed-scope.expect.md index f1fc418d92c33..7465af20323e7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-instruction-part-of-already-closed-scope.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-instruction-part-of-already-closed-scope.expect.md @@ -35,10 +35,9 @@ import { c as _c } from "react/compiler-runtime"; // @enableAssumeHooksFollowRul import { Stringify, identity, useHook } from "shared-runtime"; function Component(t0) { - const $ = _c(17); + const $ = _c(15); const { index } = t0; const data = useHook(); - let T0; let t1; let t2; let t3; @@ -47,62 +46,60 @@ function Component(t0) { const b = identity(data, index); const c = identity(data, index); - const t4 = identity(b); - if ($[6] !== t4) { - t2 = ; - $[6] = t4; - $[7] = t2; - } else { - t2 = $[7]; - } - const t5 = identity(a); - if ($[8] !== t5) { - t3 = ; - $[8] = t5; - $[9] = t3; - } else { - t3 = $[9]; - } - T0 = Stringify; + t3 = identity(b); + t2 = identity(a); t1 = identity(c); $[0] = data; $[1] = index; - $[2] = T0; - $[3] = t1; - $[4] = t2; - $[5] = t3; + $[2] = t1; + $[3] = t2; + $[4] = t3; } else { - T0 = $[2]; - t1 = $[3]; - t2 = $[4]; - t3 = $[5]; + t1 = $[2]; + t2 = $[3]; + t3 = $[4]; } let t4; - if ($[10] !== T0 || $[11] !== t1) { - t4 = ; - $[10] = T0; - $[11] = t1; - $[12] = t4; + if ($[5] !== t1) { + t4 = ; + $[5] = t1; + $[6] = t4; } else { - t4 = $[12]; + t4 = $[6]; } let t5; - if ($[13] !== t2 || $[14] !== t3 || $[15] !== t4) { - t5 = ( + if ($[7] !== t2) { + t5 = ; + $[7] = t2; + $[8] = t5; + } else { + t5 = $[8]; + } + let t6; + if ($[9] !== t3) { + t6 = ; + $[9] = t3; + $[10] = t6; + } else { + t6 = $[10]; + } + let t7; + if ($[11] !== t6 || $[12] !== t5 || $[13] !== t4) { + t7 = (
- {t2} - {t3} + {t6} + {t5} {t4}
); - $[13] = t2; - $[14] = t3; - $[15] = t4; - $[16] = t5; + $[11] = t6; + $[12] = t5; + $[13] = t4; + $[14] = t7; } else { - t5 = $[16]; + t7 = $[14]; } - return t5; + return t7; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary.expect.md index 5eff1aa0fe5e2..8c6eae7b8454e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-no-value-for-temporary.expect.md @@ -17,34 +17,30 @@ function Component(listItem, thread) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(listItem, thread) { - const $ = _c(7); + const $ = _c(6); let t0; let t1; - let t2; if ($[0] !== thread.threadType || $[1] !== listItem) { const isFoo = isFooThread(thread.threadType); - t1 = useBar; - t2 = listItem; + t1 = listItem; t0 = getBadgeText(listItem, isFoo); $[0] = thread.threadType; $[1] = listItem; $[2] = t0; $[3] = t1; - $[4] = t2; } else { t0 = $[2]; t1 = $[3]; - t2 = $[4]; } - let t3; - if ($[5] !== t0) { - t3 = [t0]; - $[5] = t0; - $[6] = t3; + let t2; + if ($[4] !== t0) { + t2 = [t0]; + $[4] = t0; + $[5] = t2; } else { - t3 = $[6]; + t2 = $[5]; } - const body = t1(t2, t3); + const body = useBar(t1, t2); return body; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-separate-scopes-for-divs.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-separate-scopes-for-divs.expect.md index 0a38e47b34ea7..19d5fbdf8c3ec 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-separate-scopes-for-divs.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-separate-scopes-for-divs.expect.md @@ -56,33 +56,33 @@ function Component(t0) { t2 = $[1]; } let t3; - if ($[2] !== t2) { - t3 =
; - $[2] = t2; + if ($[2] !== cond) { + t3 = cond === false && ( +
+ ); + $[2] = cond; $[3] = t3; } else { t3 = $[3]; } let t4; - if ($[4] !== cond) { - t4 = cond === false && ( -
- ); - $[4] = cond; + if ($[4] !== t2) { + t4 =
; + $[4] = t2; $[5] = t4; } else { t4 = $[5]; } let t5; - if ($[6] !== t3 || $[7] !== t4) { + if ($[6] !== t4 || $[7] !== t3) { t5 = ( <> - {t3} {t4} + {t3} ); - $[6] = t3; - $[7] = t4; + $[6] = t4; + $[7] = t3; $[8] = t5; } else { t5 = $[8]; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-alias.expect.md index 8e4e6a61e6299..dee6ee9a40ac5 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-alias.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/simple-alias.expect.md @@ -24,21 +24,23 @@ function mutate() {} function foo() { const $ = _c(2); let a; - let c; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { let b = {}; - c = {}; + let c = {}; a = b; b = c; c = a; + + t0 = c; mutate(a, b); - $[0] = c; + $[0] = t0; $[1] = a; } else { - c = $[0]; + t0 = $[0]; a = $[1]; } - return c; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-cascading-eliminated-phis.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-cascading-eliminated-phis.expect.md index 061aa03c0856d..533ca70732e50 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-cascading-eliminated-phis.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-cascading-eliminated-phis.expect.md @@ -33,9 +33,9 @@ import { c as _c } from "react/compiler-runtime"; function Component(props) { const $ = _c(4); let x = 0; - let values; + let t0; if ($[0] !== props || $[1] !== x) { - values = []; + const values = []; const y = props.a || props.b; values.push(y); if (props.c) { @@ -47,16 +47,17 @@ function Component(props) { x = 2; } + t0 = values; values.push(x); $[0] = props; $[1] = x; - $[2] = values; + $[2] = t0; $[3] = x; } else { - values = $[2]; + t0 = $[2]; x = $[3]; } - return values; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-alias-mutate-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-alias-mutate-if.expect.md index 7e6f28953c372..df57d4a6ea0e6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-alias-mutate-if.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-alias-mutate-if.expect.md @@ -24,10 +24,10 @@ function foo(a) { import { c as _c } from "react/compiler-runtime"; function foo(a) { const $ = _c(2); - let x; + let t0; if ($[0] !== a) { const b = {}; - x = b; + const x = b; if (a) { const y = {}; x.y = y; @@ -36,13 +36,14 @@ function foo(a) { x.z = z; } + t0 = x; mutate(b); $[0] = a; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate-if.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate-if.expect.md index d303dedec28eb..691ef9283a585 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate-if.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate-if.expect.md @@ -23,9 +23,9 @@ function foo(a) { import { c as _c } from "react/compiler-runtime"; function foo(a) { const $ = _c(2); - let x; + let t0; if ($[0] !== a) { - x = {}; + const x = {}; if (a) { const y = {}; x.y = y; @@ -34,13 +34,14 @@ function foo(a) { x.z = z; } + t0 = x; mutate(x); $[0] = a; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate.expect.md index ae0daf1213de6..dfc5f11976f25 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-alias-mutate.expect.md @@ -21,20 +21,21 @@ function foo() { import { c as _c } from "react/compiler-runtime"; function foo() { const $ = _c(1); - let y; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { const a = {}; const x = a; - y = {}; - y.x = x; + const y = {}; + t0 = y; + y.x = x; mutate(a); - $[0] = y; + $[0] = t0; } else { - y = $[0]; + t0 = $[0]; } - return y; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-call.expect.md index b4bab7cfb9a45..29732b6f67a9a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-call.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-call.expect.md @@ -23,16 +23,18 @@ export const FIXTURE_ENTRYPOINT = { import { c as _c } from "react/compiler-runtime"; function foo() { const $ = _c(1); - let y; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { const x = []; - y = { x }; + const y = { x }; + + t0 = y; y.x.push([]); - $[0] = y; + $[0] = t0; } else { - y = $[0]; + t0 = $[0]; } - return y; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-2.expect.md index 3709a298cb60c..e1ae7b6d26aaf 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-2.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-2.expect.md @@ -18,17 +18,19 @@ function foo() { import { c as _c } from "react/compiler-runtime"; function foo() { const $ = _c(1); - let y; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { const x = []; - y = {}; + const y = {}; + + t0 = y; y.x = x; mutate(x); - $[0] = y; + $[0] = t0; } else { - y = $[0]; + t0 = $[0]; } - return y; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-alias.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-alias.expect.md index f01d01f63bf0e..a26a542f78477 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-alias.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate-alias.expect.md @@ -21,20 +21,20 @@ function foo() { import { c as _c } from "react/compiler-runtime"; function foo() { const $ = _c(1); - let y; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { const a = {}; - y = a; + const y = a; const x = []; + t0 = y; y.x = x; - mutate(a); - $[0] = y; + $[0] = t0; } else { - y = $[0]; + t0 = $[0]; } - return y; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate.expect.md index 46f974ef42961..6af912dbcf2ec 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property-mutate.expect.md @@ -18,17 +18,19 @@ function foo() { import { c as _c } from "react/compiler-runtime"; function foo() { const $ = _c(1); - let y; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { const x = []; - y = {}; + const y = {}; y.x = x; + + t0 = y; mutate(y); - $[0] = y; + $[0] = t0; } else { - y = $[0]; + t0 = $[0]; } - return y; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property.expect.md index 565313fc0d9ac..1ca3d8c72f77f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-property.expect.md @@ -23,16 +23,18 @@ export const FIXTURE_ENTRYPOINT = { import { c as _c } from "react/compiler-runtime"; function foo() { const $ = _c(1); - let y; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { const x = []; - y = {}; + const y = {}; + + t0 = y; y.x = x; - $[0] = y; + $[0] = t0; } else { - y = $[0]; + t0 = $[0]; } - return y; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction-with-mutation.expect.md index 11d328201eac7..0250927df978b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction-with-mutation.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-destruction-with-mutation.expect.md @@ -18,18 +18,20 @@ function foo(props) { import { c as _c } from "react/compiler-runtime"; function foo(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props) { - x = []; + let x = []; x.push(props.bar); props.cond ? (([x] = [[]]), x.push(props.foo)) : null; + + t0 = x; mut(x); $[0] = props; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-with-mutation.expect.md index 3ec90ca8879bc..263e3428aa1f2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-with-mutation.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-ternary-with-mutation.expect.md @@ -18,18 +18,20 @@ function foo(props) { import { c as _c } from "react/compiler-runtime"; function foo(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props) { - x = []; + let x = []; x.push(props.bar); props.cond ? ((x = []), x.push(props.foo)) : null; + + t0 = x; mut(x); $[0] = props; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-ternary-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-ternary-with-mutation.expect.md index 598d9677aae1d..a56211b41c738 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-ternary-with-mutation.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-ternary-with-mutation.expect.md @@ -32,18 +32,20 @@ import { c as _c } from "react/compiler-runtime"; import { arrayPush } from "shared-runtime"; function foo(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props) { - x = []; + let x = []; x.push(props.bar); props.cond ? ((x = []), x.push(props.foo)) : ((x = []), x.push(props.bar)); + + t0 = x; arrayPush(x, 4); $[0] = props; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-with-mutation.expect.md index e27e00db70f05..cf4ddc6e05735 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-with-mutation.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-unconditional-with-mutation.expect.md @@ -26,9 +26,9 @@ function foo(props) { import { c as _c } from "react/compiler-runtime"; function foo(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props) { - x = []; + let x = []; x.push(props.bar); if (props.cond) { x = []; @@ -38,13 +38,14 @@ function foo(props) { x.push(props.bar); } + t0 = x; mut(x); $[0] = props; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-via-destructuring-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-via-destructuring-with-mutation.expect.md index b202302d65aba..1b1d3cd76b695 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-via-destructuring-with-mutation.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-via-destructuring-with-mutation.expect.md @@ -22,22 +22,23 @@ function foo(props) { import { c as _c } from "react/compiler-runtime"; function foo(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props) { - ({ x } = { x: [] }); + let { x } = { x: [] }; x.push(props.bar); if (props.cond) { ({ x } = { x: [] }); x.push(props.foo); } + t0 = x; mut(x); $[0] = props; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-with-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-with-mutation.expect.md index 76ccbae06a937..4687acb6108d9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-with-mutation.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-renaming-with-mutation.expect.md @@ -22,22 +22,23 @@ function foo(props) { import { c as _c } from "react/compiler-runtime"; function foo(props) { const $ = _c(2); - let x; + let t0; if ($[0] !== props) { - x = []; + let x = []; x.push(props.bar); if (props.cond) { x = []; x.push(props.foo); } + t0 = x; mut(x); $[0] = props; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-call.expect.md index 31bb71ca029eb..af9f891777a54 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-call.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-call.expect.md @@ -17,16 +17,18 @@ function foo() { import { c as _c } from "react/compiler-runtime"; function foo() { const $ = _c(1); - let x; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - x = {}; + const x = {}; + + t0 = x; const y = foo(x); y.mutate(); - $[0] = x; + $[0] = t0; } else { - x = $[0]; + t0 = $[0]; } - return x; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-new.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-new.expect.md index 2d7b0d455ed11..d1e81cc22f274 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-new.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/store-via-new.expect.md @@ -17,16 +17,18 @@ function Foo() { import { c as _c } from "react/compiler-runtime"; function Foo() { const $ = _c(1); - let x; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - x = {}; + const x = {}; + + t0 = x; const y = new Foo(x); y.mutate(); - $[0] = x; + $[0] = t0; } else { - x = $[0]; + t0 = $[0]; } - return x; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-alias-try-values.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-alias-try-values.expect.md index afae9ba9d7c49..5eb1804d16817 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-alias-try-values.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-alias-try-values.expect.md @@ -33,24 +33,25 @@ const { throwInput } = require("shared-runtime"); function Component(props) { const $ = _c(1); - let x; + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { let y; - x = []; + const x = []; try { throwInput(x); - } catch (t0) { - const e = t0; + } catch (t1) { + const e = t1; y = e; } + t0 = x; y.push(null); - $[0] = x; + $[0] = t0; } else { - x = $[0]; + t0 = $[0]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-in-nested-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-in-nested-scope.expect.md index ccbcae1636f52..d504a478567b6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-in-nested-scope.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-in-nested-scope.expect.md @@ -42,12 +42,12 @@ import { mutate, setProperty, throwErrorWithMessageIf } from "shared-runtime"; function useFoo(t0) { const $ = _c(6); const { value, cond } = t0; - let y; let t1; + let t2; if ($[0] !== value || $[1] !== cond) { - t1 = Symbol.for("react.early_return_sentinel"); + t2 = Symbol.for("react.early_return_sentinel"); bb0: { - y = [value]; + const y = [value]; let x; if ($[4] !== cond) { x = { cond }; @@ -56,7 +56,7 @@ function useFoo(t0) { throwErrorWithMessageIf(x.cond, "error"); } catch { setProperty(x, "henderson"); - t1 = x; + t2 = x; break bb0; } @@ -66,20 +66,22 @@ function useFoo(t0) { } else { x = $[5]; } + + t1 = y; y.push(x); } $[0] = value; $[1] = cond; - $[2] = y; - $[3] = t1; + $[2] = t1; + $[3] = t2; } else { - y = $[2]; - t1 = $[3]; + t1 = $[2]; + t2 = $[3]; } - if (t1 !== Symbol.for("react.early_return_sentinel")) { - return t1; + if (t2 !== Symbol.for("react.early_return_sentinel")) { + return t2; } - return y; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-mutable-range.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-mutable-range.expect.md index 1a1b048ab7682..5aa81d1829f4b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-mutable-range.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-mutable-range.expect.md @@ -30,36 +30,37 @@ const { throwErrorWithMessage, shallowCopy } = require("shared-runtime"); function Component(props) { const $ = _c(4); - let x; + let t0; if ($[0] !== props.value) { - x = []; + const x = []; try { - let t0; + let t1; if ($[2] === Symbol.for("react.memo_cache_sentinel")) { - t0 = throwErrorWithMessage("oops"); - $[2] = t0; + t1 = throwErrorWithMessage("oops"); + $[2] = t1; } else { - t0 = $[2]; + t1 = $[2]; } - x.push(t0); + x.push(t1); } catch { - let t0; + let t1; if ($[3] === Symbol.for("react.memo_cache_sentinel")) { - t0 = shallowCopy({}); - $[3] = t0; + t1 = shallowCopy({}); + $[3] = t1; } else { - t0 = $[3]; + t1 = $[3]; } - x.push(t0); + x.push(t1); } + t0 = x; x.push(props.value); $[0] = props.value; - $[1] = x; + $[1] = t0; } else { - x = $[1]; + t0 = $[1]; } - return x; + return t0; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-arg-memoized.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-arg-memoized.expect.md index eadd8b7de8b7c..af4bab363b258 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-arg-memoized.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-arg-memoized.expect.md @@ -27,42 +27,42 @@ function Component(props) { import { c as _c } from "react/compiler-runtime"; function Component(props) { const $ = _c(6); + let t0; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + t0 =
; + $[0] = t0; + } else { + t0 = $[0]; + } const dispatch = useDispatch(); useFreeze(dispatch); - let t0; - if ($[0] !== dispatch) { - t0 = () => { + let t1; + if ($[1] !== dispatch) { + t1 = () => { dispatch({ kind: "update" }); }; - $[0] = dispatch; - $[1] = t0; + $[1] = dispatch; + $[2] = t1; } else { - t0 = $[1]; + t1 = $[2]; } - const onUpdate = t0; - let t1; + const onUpdate = t1; let t2; - if ($[2] !== onUpdate) { - t1 = () => { + let t3; + if ($[3] !== onUpdate) { + t2 = () => { onUpdate(); }; - t2 = [onUpdate]; - $[2] = onUpdate; - $[3] = t1; + t3 = [onUpdate]; + $[3] = onUpdate; $[4] = t2; - } else { - t1 = $[3]; - t2 = $[4]; - } - useEffect(t1, t2); - let t3; - if ($[5] === Symbol.for("react.memo_cache_sentinel")) { - t3 =
; $[5] = t3; } else { + t2 = $[4]; t3 = $[5]; } - return t3; + useEffect(t2, t3); + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-nested-lambdas.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-nested-lambdas.expect.md index 90847235ffd07..fe99e2ddb6be8 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-nested-lambdas.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useEffect-nested-lambdas.expect.md @@ -36,23 +36,30 @@ import { c as _c } from "react/compiler-runtime"; // @enableTransitivelyFreezeFu function Component(props) { const $ = _c(9); + let t0; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + t0 =
; + $[0] = t0; + } else { + t0 = $[0]; + } const item = useMutable(props.itemId); const dispatch = useDispatch(); useFreeze(dispatch); - let t0; - if ($[0] !== dispatch) { - t0 = () => { + let t1; + if ($[1] !== dispatch) { + t1 = () => { dispatch(createExitAction()); }; - $[0] = dispatch; - $[1] = t0; + $[1] = dispatch; + $[2] = t1; } else { - t0 = $[1]; + t1 = $[2]; } - const exit = t0; - let t1; - if ($[2] !== item.value || $[3] !== exit) { - t1 = () => { + const exit = t1; + let t2; + if ($[3] !== item.value || $[4] !== exit) { + t2 = () => { const cleanup = GlobalEventEmitter.addListener("onInput", () => { if (item.value) { exit(); @@ -60,32 +67,24 @@ function Component(props) { }); return () => cleanup.remove(); }; - $[2] = item.value; - $[3] = exit; - $[4] = t1; - } else { - t1 = $[4]; - } - let t2; - if ($[5] !== exit || $[6] !== item) { - t2 = [exit, item]; - $[5] = exit; - $[6] = item; - $[7] = t2; + $[3] = item.value; + $[4] = exit; + $[5] = t2; } else { - t2 = $[7]; + t2 = $[5]; } - useEffect(t1, t2); - - maybeMutate(item); let t3; - if ($[8] === Symbol.for("react.memo_cache_sentinel")) { - t3 =
; + if ($[6] !== exit || $[7] !== item) { + t3 = [exit, item]; + $[6] = exit; + $[7] = item; $[8] = t3; } else { t3 = $[8]; } - return t3; + useEffect(t2, t3); + maybeMutate(item); + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-maybe-modified-later-dont-preserve-memoization-guarantees.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-maybe-modified-later-dont-preserve-memoization-guarantees.expect.md index c033932b31a17..03814217820f7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-maybe-modified-later-dont-preserve-memoization-guarantees.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/useMemo-maybe-modified-later-dont-preserve-memoization-guarantees.expect.md @@ -29,18 +29,20 @@ import { identity, makeObject_Primitives, mutate } from "shared-runtime"; function Component(props) { const $ = _c(2); let t0; - let object; + let t1; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { t0 = makeObject_Primitives(); - object = t0; + const object = t0; + + t1 = object; identity(object); - $[0] = object; + $[0] = t1; $[1] = t0; } else { - object = $[0]; + t1 = $[0]; t0 = $[1]; } - return object; + return t1; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-uncalled-function-with-mutable-range-is-valid.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-uncalled-function-with-mutable-range-is-valid.expect.md index 017b282205d68..3405bd8cf6da2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-uncalled-function-with-mutable-range-is-valid.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-no-set-state-in-render-uncalled-function-with-mutable-range-is-valid.expect.md @@ -80,7 +80,6 @@ function Component(props) { return t2; } default: { - logEvent("Invalid step"); let t1; if ($[6] === Symbol.for("react.memo_cache_sentinel")) { t1 = ; @@ -88,6 +87,7 @@ function Component(props) { } else { t1 = $[6]; } + logEvent("Invalid step"); return t1; } }