From 0f178f07c16b3a7b988b79a65e921b7ad2bdf234 Mon Sep 17 00:00:00 2001 From: Joe Savona Date: Thu, 20 Jun 2024 18:58:07 -0700 Subject: [PATCH] [compiler] Optimize emission in normal (non-value) blocks MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In #29863 I tried to find a clean way to share code for emitting instructions between value blocks and regular blocks. The catch is that value blocks have special meaning for their final instruction — that's the value of the block — so reordering can't change the last instruction. However, in finding a clean way to share code for these two categories of code, i also inadvertently reduced the effectiveness of the optimization. This PR updates to use different strategies for these two kinds of blocks: value blocks use the code from #29863 where we first emit all non-reorderable instructions in their original order, _then_ try to emit reorderable values. The reason this is suboptimal, though, is that we want to move instructions closer to their dependencies so that they can invalidate (merge) together. Emitting the reorderable values last prevents this. So for normal blocks, we now emit terminal operands first. This will invariably cause _some_ of the non-reorderable instructions to be emitted, but it will intersperse reoderable instructions in between, right after their dependencies. This maximizes our ability to merge scopes. I think the complexity cost of two strategies is worth the benefit, though i still need to double-check all the output changes. ghstack-source-id: 98824627b66f7a43aeaf141c21efddc60c3cc0b3 Pull Request resolved: https://github.com/facebook/react/pull/29883 --- .../src/HIR/Environment.ts | 2 +- .../src/Optimization/InstructionReordering.ts | 178 ++++++++++++------ .../InferReactiveScopeVariables.ts | 5 +- .../compiler/alias-computed-load.expect.md | 11 +- .../alias-nested-member-path-mutate.expect.md | 12 +- .../alias-nested-member-path.expect.md | 12 +- ...ithin-nested-valueblock-in-array.expect.md | 12 +- ...obal-mutation-in-effect-indirect.expect.md | 52 +++-- ...-reassignment-in-effect-indirect.expect.md | 52 +++-- ...-callback-passed-to-jsx-indirect.expect.md | 20 +- ...ng-ref-in-callback-passed-to-jsx.expect.md | 20 +- ...-callback-passed-to-jsx-indirect.expect.md | 20 +- ...operty-in-callback-passed-to-jsx.expect.md | 20 +- .../array-at-mutate-after-capture.expect.md | 12 +- .../compiler/array-push-effect.expect.md | 22 ++- .../assignment-expression-computed.expect.md | 12 +- ...ssignment-expression-nested-path.expect.md | 12 +- ...-variations-complex-lvalue-array.expect.md | 12 +- ...gnment-variations-complex-lvalue.expect.md | 12 +- .../await-side-effecting-promise.expect.md | 12 +- .../compiler/call-args-assignment.expect.md | 12 +- ...ll-args-destructuring-assignment.expect.md | 12 +- .../capture-indirect-mutate-alias.expect.md | 14 +- .../capture_mutate-across-fns.expect.md | 14 +- ...fun-alias-captured-mutate-2-iife.expect.md | 11 +- ...ring-fun-alias-captured-mutate-2.expect.md | 13 +- ...alias-captured-mutate-arr-2-iife.expect.md | 11 +- ...-fun-alias-captured-mutate-arr-2.expect.md | 13 +- ...c-alias-captured-mutate-arr-iife.expect.md | 11 +- ...g-func-alias-captured-mutate-arr.expect.md | 12 +- ...-func-alias-captured-mutate-iife.expect.md | 11 +- ...uring-func-alias-captured-mutate.expect.md | 12 +- ...-func-alias-computed-mutate-iife.expect.md | 11 +- ...uring-func-alias-computed-mutate.expect.md | 12 +- ...capturing-func-alias-mutate-iife.expect.md | 11 +- .../capturing-func-alias-mutate.expect.md | 12 +- ...as-receiver-computed-mutate-iife.expect.md | 11 +- ...c-alias-receiver-computed-mutate.expect.md | 12 +- ...-func-alias-receiver-mutate-iife.expect.md | 11 +- ...uring-func-alias-receiver-mutate.expect.md | 12 +- .../capturing-func-mutate-2.expect.md | 13 +- .../capturing-func-mutate-nested.expect.md | 13 +- .../compiler/capturing-func-mutate.expect.md | 13 +- .../capturing-function-decl.expect.md | 11 +- .../chained-assignment-expressions.expect.md | 12 +- .../codegen-emit-make-read-only.expect.md | 12 +- .../computed-call-evaluation-order.expect.md | 11 +- .../compiler/computed-store-alias.expect.md | 12 +- .../conditional-break-labeled.expect.md | 11 +- .../conditional-early-return.expect.md | 80 ++++---- .../compiler/constant-computed.expect.md | 12 +- .../compiler/debugger-memoized.expect.md | 11 +- .../delete-computed-property.expect.md | 12 +- .../compiler/delete-property.expect.md | 12 +- ...-while-early-unconditional-break.expect.md | 11 +- ...er-declaration-of-previous-scope.expect.md | 32 ++-- ...rycatch-nested-overlapping-range.expect.md | 2 +- ...rror.repro-bug-ref-mutable-range.expect.md | 2 +- ...fe-return-modified-later-logical.expect.md | 2 +- ...do-reactive-scope-overlaps-label.expect.md | 2 +- ...todo-reactive-scope-overlaps-try.expect.md | 2 +- ...nterleaved-allocating-dependency.expect.md | 12 +- ...ved-allocating-nested-dependency.expect.md | 12 +- ...interleaved-primitive-dependency.expect.md | 12 +- ...btparam-with-jsx-element-content.expect.md | 6 +- .../compiler/fbt/lambda-with-fbt.expect.md | 20 +- ...onmutating-loop-local-collection.expect.md | 32 ++-- .../function-declaration-simple.expect.md | 21 ++- ...pression-with-store-to-parameter.expect.md | 12 +- .../iife-return-modified-later.expect.md | 11 +- ...rtent-mutability-readonly-lambda.expect.md | 12 +- ...endently-memoize-object-property.expect.md | 22 ++- ...-promoted-to-outer-scope-dynamic.expect.md | 65 +++---- ...ue933-disjoint-set-infinite-loop.expect.md | 12 +- .../fixtures/compiler/jsx-freeze.expect.md | 12 +- .../jsx-preserve-whitespace.expect.md | 32 ++-- .../jsx-string-attribute-non-ascii.expect.md | 20 +- .../lambda-capture-returned-alias.expect.md | 12 +- ...merge-consecutive-scopes-objects.expect.md | 39 ++-- ...ge-consecutive-scopes-reordering.expect.md | 54 +++--- .../merge-consecutive-scopes.expect.md | 46 +++-- ...e-nested-scopes-with-same-inputs.expect.md | 12 +- .../compiler/merge-scopes-callback.expect.md | 32 ++-- ...ged-scopes-are-valid-effect-deps.expect.md | 14 +- .../repro-cx-assigned-to-temporary.expect.md | 19 +- .../mutable-lifetime-with-aliasing.expect.md | 11 +- ...mutation-during-jsx-construction.expect.md | 11 +- ...-within-capture-and-mutablerange.expect.md | 11 +- ...opes-begin-same-instr-valueblock.expect.md | 11 +- ...bj-literal-mutated-after-if-else.expect.md | 10 +- ...mutated-after-if-else-with-alias.expect.md | 10 +- .../obj-mutated-after-if-else.expect.md | 10 +- ...-after-nested-if-else-with-alias.expect.md | 10 +- ...d-shorthand-aliased-mutate-after.expect.md | 11 +- ...t-method-shorthand-mutated-after.expect.md | 11 +- ...ithin-nested-valueblock-in-array.expect.md | 12 +- ...-within-capture-and-mutablerange.expect.md | 25 +-- .../compiler/phi-reference-effects.expect.md | 11 +- ...invoked-callback-escaping-return.expect.md | 20 +- .../property-call-evaluation-order.expect.md | 11 +- .../reactive-scope-grouping.expect.md | 12 +- ...active-cond-deps-return-in-scope.expect.md | 23 +-- .../conditional-member-expr.expect.md | 12 +- .../jump-poisoned/return-in-scope.expect.md | 23 +-- .../return-poisons-outer-scope.expect.md | 34 ++-- .../jump-target-within-scope-label.expect.md | 11 +- ...p-target-within-scope-loop-break.expect.md | 12 +- .../return-before-scope-starts.expect.md | 12 +- .../throw-before-scope-starts.expect.md | 12 +- .../memberexpr-join-optional-chain.expect.md | 12 +- .../memberexpr-join-optional-chain2.expect.md | 12 +- .../subpath-order2.expect.md | 11 +- .../superpath-order2.expect.md | 11 +- .../uncond-nonoverlap-descendant.expect.md | 12 +- .../uncond-nonoverlap-direct.expect.md | 12 +- .../uncond-overlap-descendant.expect.md | 12 +- .../uncond-overlap-direct.expect.md | 12 +- .../uncond-subpath-order1.expect.md | 12 +- .../uncond-subpath-order2.expect.md | 12 +- .../uncond-subpath-order3.expect.md | 12 +- ...on-from-merge-consecutive-scopes.expect.md | 37 ++-- ...ion-part-of-already-closed-scope.expect.md | 83 ++++---- .../repro-no-value-for-temporary.expect.md | 22 +-- .../repro-separate-scopes-for-divs.expect.md | 24 +-- .../fixtures/compiler/simple-alias.expect.md | 12 +- .../ssa-cascading-eliminated-phis.expect.md | 11 +- ...a-property-alias-alias-mutate-if.expect.md | 11 +- .../ssa-property-alias-mutate-if.expect.md | 11 +- .../ssa-property-alias-mutate.expect.md | 13 +- .../compiler/ssa-property-call.expect.md | 12 +- .../compiler/ssa-property-mutate-2.expect.md | 12 +- .../ssa-property-mutate-alias.expect.md | 12 +- .../compiler/ssa-property-mutate.expect.md | 12 +- .../fixtures/compiler/ssa-property.expect.md | 12 +- ...ernary-destruction-with-mutation.expect.md | 12 +- ...a-renaming-ternary-with-mutation.expect.md | 12 +- ...onditional-ternary-with-mutation.expect.md | 12 +- ...ming-unconditional-with-mutation.expect.md | 11 +- ...-via-destructuring-with-mutation.expect.md | 11 +- .../ssa-renaming-with-mutation.expect.md | 11 +- .../compiler/store-via-call.expect.md | 12 +- .../fixtures/compiler/store-via-new.expect.md | 12 +- .../try-catch-alias-try-values.expect.md | 15 +- .../try-catch-in-nested-scope.expect.md | 24 +-- .../try-catch-within-mutable-range.expect.md | 31 +-- .../compiler/useEffect-arg-memoized.expect.md | 44 ++--- .../useEffect-nested-lambdas.expect.md | 57 +++--- ...-preserve-memoization-guarantees.expect.md | 12 +- ...tion-with-mutable-range-is-valid.expect.md | 2 +- 149 files changed, 1386 insertions(+), 1219 deletions(-) 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..1808c02196c40 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts @@ -26,7 +26,6 @@ import { eachInstructionValueOperand, eachTerminalOperand, } from "../HIR/visitors"; -import { mayAllocate } from "../ReactiveScopes/InferReactiveScopeVariables"; import { getOrInsertWith } from "../Utils/utils"; /** @@ -93,6 +92,7 @@ type Nodes = Map; type Node = { instruction: Instruction | null; dependencies: Set; + reorderability: Reorderability; depth: number | null; }; @@ -173,6 +173,7 @@ function reorderBlock( for (const instr of block.instructions) { const { lvalue, value } = instr; // Get or create a node for this lvalue + const reorderability = getReorderability(instr, references); const node = getOrInsertWith( locals, lvalue.identifier.id, @@ -180,6 +181,7 @@ function reorderBlock( ({ instruction: instr, dependencies: new Set(), + reorderability, depth: null, }) as Node ); @@ -187,7 +189,7 @@ function reorderBlock( * Ensure non-reoderable instructions have their order retained by * adding explicit dependencies to the previous such instruction. */ - if (getReoderability(instr, references) === Reorderability.Nonreorderable) { + if (reorderability === Reorderability.Nonreorderable) { if (previous !== null) { node.dependencies.add(previous); } @@ -243,67 +245,125 @@ 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 && - 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`, + /* + * 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; } - ); - DEBUG && console.log(`save shared: $${id}`); - shared.set(id, node); + CompilerError.invariant( + node.reorderability === 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.reorderability === 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); + } + } } block.instructions = nextInstructions; @@ -319,8 +379,7 @@ function getDepth(env: Environment, nodes: Nodes, id: IdentifierId): number { return node.depth; } node.depth = 0; // in case of cycles - let depth = - node.instruction != null && mayAllocate(env, node.instruction) ? 1 : 0; + let depth = node.reorderability === Reorderability.Reorderable ? 1 : 10; for (const dep of node.dependencies) { depth += getDepth(env, nodes, dep); } @@ -355,7 +414,7 @@ function print( print(env, locals, shared, seen, dep, depth + 1); } console.log( - `${"| ".repeat(depth)}$${id} ${printNode(node)} deps=[${deps.map((x) => `$${x}`).join(", ")}]` + `${"| ".repeat(depth)}$${id} ${printNode(node)} deps=[${deps.map((x) => `$${x}`).join(", ")}] depth=${node.depth}` ); } @@ -406,7 +465,7 @@ enum Reorderability { Reorderable, Nonreorderable, } -function getReoderability( +function getReorderability( instr: Instruction, references: References ): Reorderability { @@ -432,7 +491,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/ReactiveScopes/InferReactiveScopeVariables.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/InferReactiveScopeVariables.ts index 23a0a839ea4b1..2c9e67646b155 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/InferReactiveScopeVariables.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/InferReactiveScopeVariables.ts @@ -186,10 +186,7 @@ export function isMutable({ id }: Instruction, place: Place): boolean { return id >= range.start && id < range.end; } -export function mayAllocate( - env: Environment, - instruction: Instruction -): boolean { +function mayAllocate(env: Environment, instruction: Instruction): boolean { const { value } = instruction; switch (value.kind) { case "Destructure": { 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/preserve-memo-validation/useCallback-nonescaping-invoked-callback-escaping-return.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-nonescaping-invoked-callback-escaping-return.expect.md index 1291ccdfa9453..13569512abaff 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-nonescaping-invoked-callback-escaping-return.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-nonescaping-invoked-callback-escaping-return.expect.md @@ -61,31 +61,31 @@ function Component(t0) { } const shouldShowMessage = t2; let t3; - if ($[4] !== shouldShowMessage) { - t3 =
{shouldShowMessage}
; - $[4] = shouldShowMessage; + if ($[4] !== children) { + t3 =
{children}
; + $[4] = children; $[5] = t3; } else { t3 = $[5]; } let t4; - if ($[6] !== children) { - t4 =
{children}
; - $[6] = children; + if ($[6] !== shouldShowMessage) { + t4 =
{shouldShowMessage}
; + $[6] = shouldShowMessage; $[7] = t4; } else { t4 = $[7]; } let t5; - if ($[8] !== t3 || $[9] !== t4) { + if ($[8] !== t4 || $[9] !== t3) { t5 = (
- {t3} {t4} + {t3}
); - $[8] = t3; - $[9] = t4; + $[8] = t4; + $[9] = t3; $[10] = t5; } else { t5 = $[10]; 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; } }