From 84446a886568d73e44554a5bc001590b02f82520 Mon Sep 17 00:00:00 2001 From: Joe Savona Date: Tue, 11 Jun 2024 12:48:48 -0700 Subject: [PATCH] [compiler] Instruction reordering MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds a pass just after DCE to reorder safely reorderable instructions (jsx, primitives, globals) closer to where they are used, to allow other optimization passes to be more effective. Notably, the reordering allows scope merging to be more effective, since that pass relies on two scopes not having intervening instructions — in many cases we can now reorder such instructions out of the way and unlock merging, as demonstrated in the changed fixtures. The algorithm itself is described in the docblock. note: This is a cleaned up version of #29579 that is ready for review. ghstack-source-id: 69e3f0f60d3471e9d2dc973a494533cc38667bcb Pull Request resolved: https://github.com/facebook/react/pull/29863 --- .../src/Entrypoint/Pipeline.ts | 6 +- .../src/Optimization/InstructionReordering.ts | 370 ++++++++++++++++++ .../InferReactiveScopeVariables.ts | 5 +- .../MemoizeFbtOperandsInSameScope.ts | 25 ++ ...rgeReactiveScopesThatInvalidateTogether.ts | 3 +- ...ithin-nested-valueblock-in-array.expect.md | 12 +- ...n-in-effect-indirect-usecallback.expect.md | 9 +- ...obal-mutation-in-effect-indirect.expect.md | 55 ++- ...-reassignment-in-effect-indirect.expect.md | 55 ++- ...ow-global-reassignment-in-effect.expect.md | 9 +- ...mutate-global-in-effect-fixpoint.expect.md | 9 +- .../compiler/concise-arrow-expr.expect.md | 15 +- .../compiler/conditional-on-mutable.expect.md | 52 +-- ...gation-into-function-expressions.expect.md | 16 +- ...ble-reassigned-outside-of-lambda.expect.md | 16 +- ...variable-in-function-declaration.expect.md | 15 +- ...and-local-variables-with-default.expect.md | 71 ++-- ...ed-scope-declarations-and-locals.expect.md | 34 +- ...er-declaration-of-previous-scope.expect.md | 28 +- ...rycatch-nested-overlapping-range.expect.md | 2 +- ...rror.repro-bug-ref-mutable-range.expect.md | 2 +- ...todo-reactive-scope-overlaps-try.expect.md | 2 +- ...btparam-with-jsx-element-content.expect.md | 6 +- .../compiler/fbt/lambda-with-fbt.expect.md | 20 +- ...onmutating-loop-local-collection.expect.md | 28 +- ...sting-computed-member-expression.expect.md | 22 +- .../hoisting-member-expression.expect.md | 17 +- ...-promoted-to-outer-scope-dynamic.expect.md | 65 +-- .../jsx-preserve-whitespace.expect.md | 32 +- ...merge-consecutive-scopes-objects.expect.md | 39 +- .../merge-consecutive-scopes.expect.md | 48 ++- ...-expr-export-default-gating-test.expect.md | 19 +- ...ti-arrow-expr-export-gating-test.expect.md | 19 +- .../multi-arrow-expr-gating-test.expect.md | 19 +- ...ithin-nested-valueblock-in-array.expect.md | 12 +- .../compiler/property-assignment.expect.md | 25 +- .../reassignment-conditional.expect.md | 38 +- .../fixtures/compiler/reassignment.expect.md | 38 +- ...on-from-merge-consecutive-scopes.expect.md | 37 +- ...ion-part-of-already-closed-scope.expect.md | 85 ++-- .../repro-no-value-for-temporary.expect.md | 22 +- .../repro-separate-scopes-for-divs.expect.md | 24 +- .../fixtures/compiler/repro.expect.md | 26 +- .../compiler/ssa-leave-case.expect.md | 25 +- .../switch-non-final-default.expect.md | 44 +-- .../fixtures/compiler/switch.expect.md | 34 +- ...sion-captures-value-later-frozen.expect.md | 19 +- .../type-test-field-load-binary-op.expect.md | 13 +- 48 files changed, 872 insertions(+), 715 deletions(-) create mode 100644 compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts index 6d231919a6693..09c7f9459cb56 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts @@ -41,6 +41,7 @@ import { deadCodeElimination, pruneMaybeThrows, } from "../Optimization"; +import { instructionReordering } from "../Optimization/InstructionReordering"; import { CodegenFunction, alignObjectMethodScopes, @@ -71,6 +72,7 @@ import { import { alignMethodCallScopes } from "../ReactiveScopes/AlignMethodCallScopes"; import { alignReactiveScopesToBlockScopesHIR } from "../ReactiveScopes/AlignReactiveScopesToBlockScopesHIR"; import { pruneAlwaysInvalidatingScopes } from "../ReactiveScopes/PruneAlwaysInvalidatingScopes"; +import pruneInitializationDependencies from "../ReactiveScopes/PruneInitializationDependencies"; import { stabilizeBlockIds } from "../ReactiveScopes/StabilizeBlockIds"; import { eliminateRedundantPhi, enterSSA, leaveSSA } from "../SSA"; import { inferTypes } from "../TypeInference"; @@ -91,7 +93,6 @@ import { validatePreservedManualMemoization, validateUseMemo, } from "../Validation"; -import pruneInitializationDependencies from "../ReactiveScopes/PruneInitializationDependencies"; export type CompilerPipelineValue = | { kind: "ast"; name: string; value: CodegenFunction } @@ -202,6 +203,9 @@ function* runWithEnvironment( deadCodeElimination(hir); yield log({ kind: "hir", name: "DeadCodeElimination", value: hir }); + instructionReordering(hir); + yield log({ kind: "hir", name: "InstructionReordering", value: hir }); + pruneMaybeThrows(hir); yield log({ kind: "hir", name: "PruneMaybeThrows", value: hir }); diff --git a/compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts b/compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts new file mode 100644 index 0000000000000..b30d46d267745 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/InstructionReordering.ts @@ -0,0 +1,370 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { CompilerError } from ".."; +import { + BasicBlock, + Environment, + HIRFunction, + IdentifierId, + Instruction, + markInstructionIds, +} from "../HIR"; +import { printInstruction } from "../HIR/PrintHIR"; +import { + eachInstructionValueLValue, + eachInstructionValueOperand, + eachTerminalOperand, +} from "../HIR/visitors"; +import { mayAllocate } from "../ReactiveScopes/InferReactiveScopeVariables"; +import { getOrInsertWith } from "../Utils/utils"; + +/** + * This pass implements conservative instruction reordering to move instructions closer to + * to where their produced values are consumed. The goal is to group instructions in a way that + * is more optimal for future optimizations. Notably, MergeReactiveScopesThatAlwaysInvalidateTogether + * can only merge two candidate scopes if there are no intervenining instructions that are used by + * some later code: instruction reordering can move those intervening instructions later in many cases, + * thereby allowing more scopes to merge together. + * + * The high-level approach is to build a dependency graph where nodes correspond either to + * instructions OR to a particular lvalue assignment of another instruction. So + * `Destructure [x, y] = z` creates 3 nodes: one for the instruction, and one each for x and y. + * The lvalue nodes depend on the instruction node that assigns them. + * + * Dependency edges are added for all the lvalues and rvalues of each instruction, so for example + * the node for `t$2 = CallExpression t$0 ( t$1 )` will take dependencies on the nodes for t$0 and t$1. + * + * Individual instructions are grouped into two categories: + * - "Reorderable" instructions include a safe set of instructions that we know are fine to reorder. + * This includes JSX elements/fragments/text, primitives, template literals, and globals. + * These instructions are never emitted until they are referenced, and can even be moved across + * basic blocks until they are used. + * - All other instructions are non-reorderable, and take an explicit dependency on the last such + * non-reorderable instruction in their block. This largely ensures that mutations are serialized, + * since all potentially mutating instructions are in this category. + * + * The only remaining mutation not handled by the above is variable reassignment. To ensure that all + * reads/writes of a variable access the correct version, all references (lvalues and rvalues) to + * each named variable are serialized. Thus `x = 1; y = x; x = 2; z = x` will establish a chain + * of dependencies and retain the correct ordering. + * + * The algorithm proceeds one basic block at a time, first building up the dependnecy graph and then + * reordering. + * + * The reordering weights nodes according to their transitive dependencies, and whether a particular node + * needs memoization or not. Larger dependencies go first, followed by smaller dependencies, which in + * testing seems to allow scopes to merge more effectively. Over time we can likely continue to improve + * the reordering heuristic. + * + * An obvious area for improvement is to allow reordering of LoadLocals that occur after the last write + * of the named variable. We can add this in a follow-up. + */ +export function instructionReordering(fn: HIRFunction): void { + const shared: Nodes = new Map(); + for (const [, block] of fn.body.blocks) { + reorderBlock(fn.env, block, shared); + } + markInstructionIds(fn.body); +} + +const DEBUG = false; + +type Nodes = Map; +type Node = { + instruction: Instruction | null; + dependencies: Set; + depth: number | null; +}; + +function reorderBlock( + env: Environment, + block: BasicBlock, + shared: Nodes +): void { + const locals: Nodes = new Map(); + const named: Map = new Map(); + let previous: IdentifierId | null = null; + for (const instr of block.instructions) { + const { lvalue, value } = instr; + // Get or create a node for this lvalue + const node = getOrInsertWith( + locals, + lvalue.identifier.id, + () => + ({ + instruction: instr, + dependencies: new Set(), + depth: null, + }) as Node + ); + /** + * Ensure non-reoderable instructions have their order retained by + * adding explicit dependencies to the previous such instruction. + */ + if (getReoderability(instr) === Reorderability.Nonreorderable) { + if (previous !== null) { + node.dependencies.add(previous); + } + previous = lvalue.identifier.id; + } + /** + * Establish dependencies on operands + */ + for (const operand of eachInstructionValueOperand(value)) { + const { name, id } = operand.identifier; + if (name !== null && name.kind === "named") { + // Serialize all accesses to named variables + const previous = named.get(name.value); + if (previous !== undefined) { + node.dependencies.add(previous); + } + named.set(name.value, lvalue.identifier.id); + } else if (locals.has(id) || shared.has(id)) { + node.dependencies.add(id); + } + } + /** + * Establish nodes for lvalues, with dependencies on the node + * for the instruction itself. This ensures that any consumers + * of the lvalue will take a dependency through to the original + * instruction. + */ + for (const lvalueOperand of eachInstructionValueLValue(value)) { + const lvalueNode = getOrInsertWith( + locals, + lvalueOperand.identifier.id, + () => + ({ + instruction: null, + dependencies: new Set(), + depth: null, + }) as Node + ); + lvalueNode.dependencies.add(lvalue.identifier.id); + const name = lvalueOperand.identifier.name; + if (name !== null && name.kind === "named") { + const previous = named.get(name.value); + if (previous !== undefined) { + node.dependencies.add(previous); + } + named.set(name.value, lvalue.identifier.id); + } + } + } + + const nextInstructions: Array = []; + const seen = new Set(); + + 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. + */ + if ( + block.kind !== "block" && + block.kind !== "catch" && + 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, + 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) === 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); + } + + /* + *for (const operand of eachTerminalOperand(block.terminal)) { + * emit(env, locals, shared, nextInstructions, operand.identifier.id); + *} + *const index = nextInstructions.length; + *for (const id of Array.from(locals.keys()).reverse()) { + * const node = locals.get(id); + * if (node == null) { + * continue; + * } + * if ( + * node.instruction !== null && + * getReoderability(node.instruction) === Reorderability.Reorderable && + * (block.kind === "block" || block.kind === "catch") + * ) { + * shared.set(id, node); + * } else { + * emit(env, locals, shared, nextInstructions, id); + * } + *} + *if (block.kind !== "block" && block.kind !== "catch") { + * const extra = nextInstructions.splice(index); + * nextInstructions.splice(0, 0, ...extra); + *} + */ + block.instructions = nextInstructions; + DEBUG && console.log(); +} + +function getDepth(env: Environment, nodes: Nodes, id: IdentifierId): number { + const node = nodes.get(id)!; + if (node == null) { + return 0; + } + if (node.depth != null) { + return node.depth; + } + node.depth = 0; // in case of cycles + let depth = + node.instruction != null && mayAllocate(env, node.instruction) ? 1 : 0; + for (const dep of node.dependencies) { + depth += getDepth(env, nodes, dep); + } + node.depth = depth; + return depth; +} + +function print( + env: Environment, + locals: Nodes, + shared: Nodes, + seen: Set, + id: IdentifierId, + depth: number = 0 +): void { + if (seen.has(id)) { + console.log(`${"| ".repeat(depth)}$${id} `); + return; + } + seen.add(id); + const node = locals.get(id) ?? shared.get(id); + if (node == null) { + return; + } + const deps = [...node.dependencies]; + deps.sort((a, b) => { + const aDepth = getDepth(env, locals, a); + const bDepth = getDepth(env, locals, b); + return bDepth - aDepth; + }); + for (const dep of deps) { + print(env, locals, shared, seen, dep, depth + 1); + } + console.log( + `${"| ".repeat(depth)}$${id} ${printNode(node)} deps=[${deps.map((x) => `$${x}`).join(", ")}]` + ); +} + +function printNode(node: Node): string { + const { instruction } = node; + if (instruction === null) { + return ""; + } + switch (instruction.value.kind) { + case "FunctionExpression": + case "ObjectMethod": { + return `[${instruction.id}] ${instruction.value.kind}`; + } + default: { + return printInstruction(instruction); + } + } +} + +function emit( + env: Environment, + locals: Nodes, + shared: Nodes, + instructions: Array, + id: IdentifierId +): void { + const node = locals.get(id) ?? shared.get(id); + if (node == null) { + return; + } + locals.delete(id); + shared.delete(id); + const deps = [...node.dependencies]; + deps.sort((a, b) => { + const aDepth = getDepth(env, locals, a); + const bDepth = getDepth(env, locals, b); + return bDepth - aDepth; + }); + for (const dep of deps) { + emit(env, locals, shared, instructions, dep); + } + if (node.instruction !== null) { + instructions.push(node.instruction); + } +} + +enum Reorderability { + Reorderable, + Nonreorderable, +} +function getReoderability(instr: Instruction): Reorderability { + switch (instr.value.kind) { + case "JsxExpression": + case "JsxFragment": + case "JSXText": + case "LoadGlobal": + case "Primitive": + case "TemplateLiteral": { + return Reorderability.Reorderable; + } + default: { + return Reorderability.Nonreorderable; + } + } +} 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 2c9e67646b155..23a0a839ea4b1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/InferReactiveScopeVariables.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/InferReactiveScopeVariables.ts @@ -186,7 +186,10 @@ export function isMutable({ id }: Instruction, place: Place): boolean { return id >= range.start && id < range.end; } -function mayAllocate(env: Environment, instruction: Instruction): boolean { +export 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/ReactiveScopes/MemoizeFbtOperandsInSameScope.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtOperandsInSameScope.ts index daab49d22b267..b3d2dbe52bd5f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtOperandsInSameScope.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MemoizeFbtOperandsInSameScope.ts @@ -94,6 +94,7 @@ function visit(fn: HIRFunction, fbtValues: Set): void { operand.identifier.mutableRange.start ) ); + fbtValues.add(operand.identifier.id); } } else if ( isFbtJsxExpression(fbtValues, value) || @@ -126,6 +127,30 @@ function visit(fn: HIRFunction, fbtValues: Set): void { */ fbtValues.add(operand.identifier.id); } + } else if (fbtValues.has(lvalue.identifier.id)) { + const fbtScope = lvalue.identifier.scope; + if (fbtScope === null) { + return; + } + + for (const operand of eachReactiveValueOperand(value)) { + if (operand.identifier.name !== null) { + /* + * named identifiers were already locals, we only have to force temporaries + * into the same scope + */ + continue; + } + operand.identifier.scope = fbtScope; + + // Expand the jsx element's range to account for its operands + fbtScope.range.start = makeInstructionId( + Math.min( + fbtScope.range.start, + operand.identifier.mutableRange.start + ) + ); + } } } } diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts index 0509a3c65bead..70ce8c8f2ef4b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts @@ -190,7 +190,8 @@ class Transform extends ReactiveFunctionTransform
{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-usecallback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect-usecallback.expect.md index 33c6e23105139..7a7535560946f 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect-usecallback.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect-usecallback.expect.md @@ -67,19 +67,16 @@ function Component() { } useEffect(t1, t2); let t3; + let t4; if ($[3] === Symbol.for("react.memo_cache_sentinel")) { t3 = () => { setState(someGlobal.value); }; - $[3] = t3; - } else { - t3 = $[3]; - } - let t4; - if ($[4] === Symbol.for("react.memo_cache_sentinel")) { t4 = [someGlobal]; + $[3] = t3; $[4] = t4; } else { + t3 = $[3]; t4 = $[4]; } useEffect(t3, t4); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-mutation-in-effect-indirect.expect.md index 44813be9f180a..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,60 +39,51 @@ import { useEffect, useState } from "react"; let someGlobal = {}; function Component() { - const $ = _c(7); + const $ = _c(6); const [state, setState] = useState(someGlobal); let t0; + let t1; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = () => { + const setGlobal = () => { someGlobal.value = true; }; - $[0] = t0; - } else { - t0 = $[0]; - } - const setGlobal = t0; - let t1; - let t2; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = () => { + + t0 = () => { setGlobal(); }; - t2 = []; + t1 = []; + $[0] = t0; $[1] = t1; - $[2] = t2; } else { + t0 = $[0]; t1 = $[1]; - t2 = $[2]; } - useEffect(t1, t2); + useEffect(t0, t1); + let t2; let t3; - if ($[3] === Symbol.for("react.memo_cache_sentinel")) { - t3 = () => { + if ($[2] === Symbol.for("react.memo_cache_sentinel")) { + t2 = () => { setState(someGlobal.value); }; + t3 = [someGlobal]; + $[2] = t2; $[3] = t3; } else { + t2 = $[2]; t3 = $[3]; } - let t4; - if ($[4] === Symbol.for("react.memo_cache_sentinel")) { - t4 = [someGlobal]; - $[4] = t4; - } else { - t4 = $[4]; - } - useEffect(t3, t4); + useEffect(t2, t3); - const t5 = String(state); - let t6; - if ($[5] !== t5) { - t6 =
{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 27e2d3b3a45a4..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,60 +39,51 @@ import { useEffect, useState } from "react"; let someGlobal = false; function Component() { - const $ = _c(7); + const $ = _c(6); const [state, setState] = useState(someGlobal); let t0; + let t1; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = () => { + const setGlobal = () => { someGlobal = true; }; - $[0] = t0; - } else { - t0 = $[0]; - } - const setGlobal = t0; - let t1; - let t2; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = () => { + + t0 = () => { setGlobal(); }; - t2 = []; + t1 = []; + $[0] = t0; $[1] = t1; - $[2] = t2; } else { + t0 = $[0]; t1 = $[1]; - t2 = $[2]; } - useEffect(t1, t2); + useEffect(t0, t1); + let t2; let t3; - if ($[3] === Symbol.for("react.memo_cache_sentinel")) { - t3 = () => { + if ($[2] === Symbol.for("react.memo_cache_sentinel")) { + t2 = () => { setState(someGlobal); }; + t3 = [someGlobal]; + $[2] = t2; $[3] = t3; } else { + t2 = $[2]; t3 = $[3]; } - let t4; - if ($[4] === Symbol.for("react.memo_cache_sentinel")) { - t4 = [someGlobal]; - $[4] = t4; - } else { - t4 = $[4]; - } - useEffect(t3, t4); + useEffect(t2, t3); - const t5 = String(state); - let t6; - if ($[5] !== t5) { - t6 =
{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.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.expect.md index 293e32f4a191d..e4cd0e22c12f8 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-global-reassignment-in-effect.expect.md @@ -54,19 +54,16 @@ function Component() { } useEffect(t0, t1); let t2; + let t3; if ($[2] === Symbol.for("react.memo_cache_sentinel")) { t2 = () => { setState(someGlobal); }; - $[2] = t2; - } else { - t2 = $[2]; - } - let t3; - if ($[3] === Symbol.for("react.memo_cache_sentinel")) { t3 = [someGlobal]; + $[2] = t2; $[3] = t3; } else { + t2 = $[2]; t3 = $[3]; } useEffect(t2, t3); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutate-global-in-effect-fixpoint.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutate-global-in-effect-fixpoint.expect.md index 3f212a4add872..d5f8643d5b1c1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutate-global-in-effect-fixpoint.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutate-global-in-effect-fixpoint.expect.md @@ -70,19 +70,16 @@ function Component() { } useEffect(t0, t1); let t2; + let t3; if ($[2] === Symbol.for("react.memo_cache_sentinel")) { t2 = () => { setState(someGlobal.value); }; - $[2] = t2; - } else { - t2 = $[2]; - } - let t3; - if ($[3] === Symbol.for("react.memo_cache_sentinel")) { t3 = [someGlobal]; + $[2] = t2; $[3] = t3; } else { + t2 = $[2]; t3 = $[3]; } useEffect(t2, t3); diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md index b993630ce98d0..5b88a40644927 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/concise-arrow-expr.expect.md @@ -15,24 +15,17 @@ function component() { ```javascript import { c as _c } from "react/compiler-runtime"; function component() { - const $ = _c(2); + const $ = _c(1); const [x, setX] = useState(0); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = (v) => setX(v); + const handler = (v) => setX(v); + t0 = ; $[0] = t0; } else { t0 = $[0]; } - const handler = t0; - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ; - $[1] = t1; - } else { - t1 = $[1]; - } - return t1; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md index cd2fbc1011a4a..ad638cf28d871 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md @@ -36,65 +36,45 @@ function mayMutate() {} ```javascript import { c as _c } from "react/compiler-runtime"; function ComponentA(props) { - const $ = _c(6); - let a; - let b; + const $ = _c(2); + let t0; if ($[0] !== props) { - a = []; - b = []; + const a = []; + const b = []; if (b) { a.push(props.p0); } if (props.p1) { b.push(props.p2); } - $[0] = props; - $[1] = a; - $[2] = b; - } else { - a = $[1]; - b = $[2]; - } - let t0; - if ($[3] !== a || $[4] !== b) { + t0 = ; - $[3] = a; - $[4] = b; - $[5] = t0; + $[0] = props; + $[1] = t0; } else { - t0 = $[5]; + t0 = $[1]; } return t0; } function ComponentB(props) { - const $ = _c(6); - let a; - let b; + const $ = _c(2); + let t0; if ($[0] !== props) { - a = []; - b = []; + const a = []; + const b = []; if (mayMutate(b)) { a.push(props.p0); } if (props.p1) { b.push(props.p2); } - $[0] = props; - $[1] = a; - $[2] = b; - } else { - a = $[1]; - b = $[2]; - } - let t0; - if ($[3] !== a || $[4] !== b) { + t0 = ; - $[3] = a; - $[4] = b; - $[5] = t0; + $[0] = props; + $[1] = t0; } else { - t0 = $[5]; + t0 = $[1]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md index 7be6b15a887dd..8ea2190480003 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constant-propagation-into-function-expressions.expect.md @@ -17,25 +17,19 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(2); + const $ = _c(1); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = () => { + const onEvent = () => { console.log(42); }; + + t0 = ; $[0] = t0; } else { t0 = $[0]; } - const onEvent = t0; - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ; - $[1] = t1; - } else { - t1 = $[1]; - } - return t1; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-outside-of-lambda.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-outside-of-lambda.expect.md index 9b70b18c24b6a..8d53b0cc42d60 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-outside-of-lambda.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-outside-of-lambda.expect.md @@ -27,26 +27,20 @@ import { c as _c } from "react/compiler-runtime"; import { Stringify } from "shared-runtime"; function Component(props) { - const $ = _c(2); - let callback; + const $ = _c(1); + let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { let x; x = null; - callback = () => { + const callback = () => { console.log(x); }; x = {}; - $[0] = callback; - } else { - callback = $[0]; - } - let t0; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { t0 = ; - $[1] = t0; + $[0] = t0; } else { - t0 = $[1]; + t0 = $[0]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-function-declaration.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-function-declaration.expect.md index 4c6faaaad25f4..b9fc15ea0a7be 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-function-declaration.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/declare-reassign-variable-in-function-declaration.expect.md @@ -18,7 +18,7 @@ function Component() { ```javascript import { c as _c } from "react/compiler-runtime"; function Component() { - const $ = _c(2); + const $ = _c(1); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { let x; @@ -27,20 +27,13 @@ function Component() { x = 9; }; - t0 = bar(foo); + const y = bar(foo); + t0 = ; $[0] = t0; } else { t0 = $[0]; } - const y = t0; - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ; - $[1] = t1; - } else { - t1 = $[1]; - } - return t1; + return t0; } ``` diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.expect.md index e93fbb3b45fcf..d8be3af6cbd34 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.expect.md @@ -56,7 +56,7 @@ function useFragment(_arg1, _arg2) { } function Component(props) { - const $ = _c(15); + const $ = _c(9); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { t0 = graphql`...`; @@ -65,67 +65,52 @@ function Component(props) { t0 = $[0]; } const post = useFragment(t0, props.post); - let media; - let allUrls; - let onClick; + let t1; if ($[1] !== post) { - allUrls = []; + const allUrls = []; - const { media: t1, comments: t2, urls: t3 } = post; - media = t1 === undefined ? null : t1; - let t4; - if ($[5] !== t2) { - t4 = t2 === undefined ? [] : t2; - $[5] = t2; - $[6] = t4; - } else { - t4 = $[6]; - } - const comments = t4; + const { media: t2, comments: t3, urls: t4 } = post; + const media = t2 === undefined ? null : t2; let t5; - if ($[7] !== t3) { + if ($[3] !== t3) { t5 = t3 === undefined ? [] : t3; - $[7] = t3; - $[8] = t5; + $[3] = t3; + $[4] = t5; } else { - t5 = $[8]; + t5 = $[4]; } - const urls = t5; + const comments = t5; let t6; - if ($[9] !== comments.length) { - t6 = (e) => { + if ($[5] !== t4) { + t6 = t4 === undefined ? [] : t4; + $[5] = t4; + $[6] = t6; + } else { + t6 = $[6]; + } + const urls = t6; + let t7; + if ($[7] !== comments.length) { + t7 = (e) => { if (!comments.length) { return; } console.log(comments.length); }; - $[9] = comments.length; - $[10] = t6; + $[7] = comments.length; + $[8] = t7; } else { - t6 = $[10]; + t7 = $[8]; } - onClick = t6; + const onClick = t7; allUrls.push(...urls); - $[1] = post; - $[2] = media; - $[3] = allUrls; - $[4] = onClick; - } else { - media = $[2]; - allUrls = $[3]; - onClick = $[4]; - } - let t1; - if ($[11] !== media || $[12] !== allUrls || $[13] !== onClick) { t1 = ; - $[11] = media; - $[12] = allUrls; - $[13] = onClick; - $[14] = t1; + $[1] = post; + $[2] = t1; } else { - t1 = $[14]; + t1 = $[2]; } return t1; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md index 665b4a65fd063..69e0f07088e0b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md @@ -30,17 +30,15 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(8); + const $ = _c(4); const post = useFragment(graphql`...`, props.post); - let media; - let onClick; + let t0; if ($[0] !== post) { const allUrls = []; - const { media: t0, comments, urls } = post; - media = t0; + const { media, comments, urls } = post; let t1; - if ($[3] !== comments.length) { + if ($[2] !== comments.length) { t1 = (e) => { if (!comments.length) { return; @@ -48,29 +46,19 @@ function Component(props) { console.log(comments.length); }; - $[3] = comments.length; - $[4] = t1; + $[2] = comments.length; + $[3] = t1; } else { - t1 = $[4]; + t1 = $[3]; } - onClick = t1; + const onClick = t1; allUrls.push(...urls); - $[0] = post; - $[1] = media; - $[2] = onClick; - } else { - media = $[1]; - onClick = $[2]; - } - let t0; - if ($[5] !== media || $[6] !== onClick) { t0 = ; - $[5] = media; - $[6] = onClick; - $[7] = t0; + $[0] = post; + $[1] = t0; } else { - t0 = $[7]; + t0 = $[1]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-if-dep-is-inner-declaration-of-previous-scope.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-if-dep-is-inner-declaration-of-previous-scope.expect.md index ad843e230fc48..e8b5b351dd4e3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-if-dep-is-inner-declaration-of-previous-scope.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-if-dep-is-inner-declaration-of-previous-scope.expect.md @@ -99,41 +99,41 @@ function Component(t0) { t2 = $[12]; } let t3; - if ($[13] !== t2 || $[14] !== x) { - t3 = ; - $[13] = t2; - $[14] = x; + if ($[13] !== a || $[14] !== b) { + t3 = [a, b]; + $[13] = a; + $[14] = b; $[15] = t3; } else { t3 = $[15]; } let t4; - if ($[16] !== a || $[17] !== b) { - t4 = [a, b]; - $[16] = a; - $[17] = b; + if ($[16] !== t2 || $[17] !== x) { + t4 = ; + $[16] = t2; + $[17] = x; $[18] = t4; } else { t4 = $[18]; } let t5; - if ($[19] !== t4 || $[20] !== z) { - t5 = ; - $[19] = t4; + if ($[19] !== t3 || $[20] !== z) { + t5 = ; + $[19] = t3; $[20] = z; $[21] = t5; } else { t5 = $[21]; } let t6; - if ($[22] !== t3 || $[23] !== t5) { + if ($[22] !== t4 || $[23] !== t5) { t6 = ( <> - {t3} + {t4} {t5} ); - $[22] = t3; + $[22] = t4; $[23] = t5; $[24] = t6; } else { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-repro-trycatch-nested-overlapping-range.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-repro-trycatch-nested-overlapping-range.expect.md index ca77829e2f7f4..2390842e78f7d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-repro-trycatch-nested-overlapping-range.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-repro-trycatch-nested-overlapping-range.expect.md @@ -20,7 +20,7 @@ function Foo() { ## Error ``` -Invariant: Invalid nesting in program blocks or scopes. Items overlap but are not nested: 2:24(18:26) +Invariant: Invalid nesting in program blocks or scopes. Items overlap but are not nested: 2:23(17:25) ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-bug-ref-mutable-range.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-bug-ref-mutable-range.expect.md index 7cd2acc9affab..51b71b313696a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-bug-ref-mutable-range.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.repro-bug-ref-mutable-range.expect.md @@ -21,7 +21,7 @@ function Foo(props, ref) { ## Error ``` -Invariant: Invalid nesting in program blocks or scopes. Items overlap but are not nested: 1:21(16:23) +Invariant: Invalid nesting in program blocks or scopes. Items overlap but are not nested: 1:20(16:23) ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-reactive-scope-overlaps-try.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-reactive-scope-overlaps-try.expect.md index 95cdbe5aeea76..e10a451cf3af1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-reactive-scope-overlaps-try.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-reactive-scope-overlaps-try.expect.md @@ -30,7 +30,7 @@ export const FIXTURE_ENTRYPOINT = { ## Error ``` -Invariant: Invalid nesting in program blocks or scopes. Items overlap but are not nested: 4:19(5:22) +Invariant: Invalid nesting in program blocks or scopes. Items overlap but are not nested: 3:17(4:20) ``` \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.expect.md index 387031fc181c7..df4964f43c452 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.expect.md @@ -32,7 +32,7 @@ function Component(t0) { const $ = _c(4); const { name, data, icon } = t0; let t1; - if ($[0] !== name || $[1] !== icon || $[2] !== data) { + if ($[0] !== name || $[1] !== data || $[2] !== icon) { t1 = ( {fbt._( @@ -62,8 +62,8 @@ function Component(t0) { ); $[0] = name; - $[1] = icon; - $[2] = data; + $[1] = data; + $[2] = icon; $[3] = t1; } else { t1 = $[3]; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/lambda-with-fbt.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/lambda-with-fbt.expect.md index 5ac0ad17a0645..f7e71f4be7bb9 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/lambda-with-fbt.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/lambda-with-fbt.expect.md @@ -42,10 +42,10 @@ import { c as _c } from "react/compiler-runtime"; import { fbt } from "fbt"; function Component() { - const $ = _c(2); + const $ = _c(1); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = () => { + const buttonLabel = () => { if (!someCondition) { return fbt._("Purchase as a gift", null, { hk: "1gHj4g" }); } else { @@ -66,23 +66,17 @@ function Component() { } } }; - $[0] = t0; - } else { - t0 = $[0]; - } - const buttonLabel = t0; - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ( + + t0 = ( - ); + t2 = {state}; $[3] = state; $[4] = t2; } else { t2 = $[4]; } let t3; - if ($[5] !== t1 || $[6] !== t2) { + if ($[5] !== t0) { t3 = ( + + ); + $[5] = t0; + $[6] = t3; + } else { + t3 = $[6]; + } + let t4; + if ($[7] !== t2 || $[8] !== t3) { + t4 = (
- {t0} {t1} {t2} + {t3}
); - $[5] = t1; - $[6] = t2; - $[7] = t3; + $[7] = t2; + $[8] = t3; + $[9] = t4; } else { - t3 = $[7]; + t4 = $[9]; } - return t3; + return t4; } export const FIXTURE_ENTRYPOINT = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-default-gating-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-default-gating-test.expect.md index b7685a3d40fc6..4bbc85df89d87 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-default-gating-test.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-default-gating-test.expect.md @@ -36,27 +36,20 @@ const ErrorView = isForgetEnabled_Fixtures() export default Renderer = isForgetEnabled_Fixtures() ? (props) => { - const $ = _c(2); + const $ = _c(1); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = ; - $[0] = t0; - } else { - t0 = $[0]; - } - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ( + t0 = ( - {t0} + ); - $[1] = t1; + $[0] = t0; } else { - t1 = $[1]; + t0 = $[0]; } - return t1; + return t0; } : (props) => ( diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-gating-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-gating-test.expect.md index 6056b8f378f0e..e7bf6b327e95b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-gating-test.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-export-gating-test.expect.md @@ -36,27 +36,20 @@ const ErrorView = isForgetEnabled_Fixtures() export const Renderer = isForgetEnabled_Fixtures() ? (props) => { - const $ = _c(2); + const $ = _c(1); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = ; - $[0] = t0; - } else { - t0 = $[0]; - } - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ( + t0 = ( - {t0} + ); - $[1] = t1; + $[0] = t0; } else { - t1 = $[1]; + t0 = $[0]; } - return t1; + return t0; } : (props) => ( diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-gating-test.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-gating-test.expect.md index e830d72ed94c5..4ce7ec0fc4061 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-gating-test.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multi-arrow-expr-gating-test.expect.md @@ -38,27 +38,20 @@ const ErrorView = isForgetEnabled_Fixtures() const Renderer = isForgetEnabled_Fixtures() ? (props) => { - const $ = _c(2); + const $ = _c(1); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = ; - $[0] = t0; - } else { - t0 = $[0]; - } - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = ( + t0 = ( - {t0} + ); - $[1] = t1; + $[0] = t0; } else { - t1 = $[1]; + t0 = $[0]; } - return t1; + return t0; } : (props) => ( diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/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/property-assignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-assignment.expect.md index 65b2c46abf5bb..523b5b29bd8c6 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-assignment.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/property-assignment.expect.md @@ -18,30 +18,19 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(6); - let x; - let child; + const $ = _c(2); + let t0; if ($[0] !== props.p0) { - x = {}; + const x = {}; const y = []; x.y = y; - child = ; + const child = ; x.y.push(props.p0); - $[0] = props.p0; - $[1] = x; - $[2] = child; - } else { - x = $[1]; - child = $[2]; - } - let t0; - if ($[3] !== x || $[4] !== child) { t0 = {child}; - $[3] = x; - $[4] = child; - $[5] = t0; + $[0] = props.p0; + $[1] = t0; } else { - t0 = $[5]; + t0 = $[1]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-conditional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-conditional.expect.md index 0cda46f5a05e0..9358d39cf448a 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-conditional.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment-conditional.expect.md @@ -23,42 +23,32 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(9); - let x; - let y; + const $ = _c(5); + let t0; if ($[0] !== props.p0 || $[1] !== props.p1 || $[2] !== props.p2) { - x = []; + let x = []; x.push(props.p0); - y = x; + const y = x; if (props.p1) { - let t0; - if ($[5] === Symbol.for("react.memo_cache_sentinel")) { - t0 = []; - $[5] = t0; + let t1; + if ($[4] === Symbol.for("react.memo_cache_sentinel")) { + t1 = []; + $[4] = t1; } else { - t0 = $[5]; + t1 = $[4]; } - x = t0; + x = t1; } y.push(props.p2); + + t0 = ; $[0] = props.p0; $[1] = props.p1; $[2] = props.p2; - $[3] = x; - $[4] = y; - } else { - x = $[3]; - y = $[4]; - } - let t0; - if ($[6] !== x || $[7] !== y) { - t0 = ; - $[6] = x; - $[7] = y; - $[8] = t0; + $[3] = t0; } else { - t0 = $[8]; + t0 = $[3]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment.expect.md index 82cb494c9e4ee..3804326553c93 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/reassignment.expect.md @@ -22,39 +22,29 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(8); - let x; - let y; + const $ = _c(4); + let t0; if ($[0] !== props.p0 || $[1] !== props.p1) { - x = []; + let x = []; x.push(props.p0); - y = x; - let t0; - if ($[4] === Symbol.for("react.memo_cache_sentinel")) { - t0 = []; - $[4] = t0; + const y = x; + let t1; + if ($[3] === Symbol.for("react.memo_cache_sentinel")) { + t1 = []; + $[3] = t1; } else { - t0 = $[4]; + t1 = $[3]; } - x = t0; + x = t1; y.push(props.p1); + + t0 = ; $[0] = props.p0; $[1] = props.p1; - $[2] = x; - $[3] = y; - } else { - x = $[2]; - y = $[3]; - } - let t0; - if ($[5] !== x || $[6] !== y) { - t0 = ; - $[5] = x; - $[6] = y; - $[7] = t0; + $[2] = t0; } else { - t0 = $[7]; + t0 = $[2]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-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..05e75822ec5ad 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; - t1 = identity(c); + t1 = identity(b); + t2 = identity(a); + t3 = 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] !== t4 || $[12] !== t5 || $[13] !== t6) { + t7 = (
- {t2} - {t3} {t4} + {t5} + {t6}
); - $[13] = t2; - $[14] = t3; - $[15] = t4; - $[16] = t5; + $[11] = t4; + $[12] = t5; + $[13] = t6; + $[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/repro.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md index 07e508b259365..6ca1483fad1da 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro.expect.md @@ -24,13 +24,12 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(6); + const $ = _c(2); const item = props.item; - let baseVideos; - let thumbnails; + let t0; if ($[0] !== item) { - thumbnails = []; - baseVideos = getBaseVideos(item); + const thumbnails = []; + const baseVideos = getBaseVideos(item); baseVideos.forEach((video) => { const baseVideo = video.hasBaseVideo; @@ -38,21 +37,12 @@ function Component(props) { thumbnails.push({ extraVideo: true }); } }); - $[0] = item; - $[1] = baseVideos; - $[2] = thumbnails; - } else { - baseVideos = $[1]; - thumbnails = $[2]; - } - let t0; - if ($[3] !== baseVideos || $[4] !== thumbnails) { + t0 = ; - $[3] = baseVideos; - $[4] = thumbnails; - $[5] = t0; + $[0] = item; + $[1] = t0; } else { - t0 = $[5]; + t0 = $[1]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-leave-case.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-leave-case.expect.md index 0dbe08c710523..a7389041bb12d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-leave-case.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssa-leave-case.expect.md @@ -24,35 +24,26 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(6); - let x; - let y; + const $ = _c(2); + let t0; if ($[0] !== props) { - x = []; + const x = []; + let y; if (props.p0) { x.push(props.p1); y = x; } - $[0] = props; - $[1] = x; - $[2] = y; - } else { - x = $[1]; - y = $[2]; - } - let t0; - if ($[3] !== x || $[4] !== y) { + t0 = ( {x} {y} ); - $[3] = x; - $[4] = y; - $[5] = t0; + $[0] = props; + $[1] = t0; } else { - t0 = $[5]; + t0 = $[1]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-non-final-default.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-non-final-default.expect.md index a3e6dfeb8572a..915218fcfa467 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-non-final-default.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch-non-final-default.expect.md @@ -33,25 +33,25 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(9); - let x; + const $ = _c(7); let y; + let t0; if ($[0] !== props) { - x = []; + const x = []; bb0: switch (props.p0) { case 1: { break bb0; } case true: { x.push(props.p2); - let t0; + let t1; if ($[3] === Symbol.for("react.memo_cache_sentinel")) { - t0 = []; - $[3] = t0; + t1 = []; + $[3] = t1; } else { - t0 = $[3]; + t1 = $[3]; } - y = t0; + y = t1; } default: { break bb0; @@ -60,31 +60,25 @@ function Component(props) { y = x; } } - $[0] = props; - $[1] = x; - $[2] = y; - } else { - x = $[1]; - y = $[2]; - } - let t0; - if ($[4] !== x) { + t0 = ; - $[4] = x; - $[5] = t0; + $[0] = props; + $[1] = y; + $[2] = t0; } else { - t0 = $[5]; + y = $[1]; + t0 = $[2]; } const child = t0; y.push(props.p4); let t1; - if ($[6] !== y || $[7] !== child) { + if ($[4] !== y || $[5] !== child) { t1 = {child}; - $[6] = y; - $[7] = child; - $[8] = t1; + $[4] = y; + $[5] = child; + $[6] = t1; } else { - t1 = $[8]; + t1 = $[6]; } return t1; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch.expect.md index 14ac820af7c55..0c5aea9c7da9c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/switch.expect.md @@ -28,11 +28,11 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(8); - let x; + const $ = _c(6); let y; + let t0; if ($[0] !== props) { - x = []; + const x = []; switch (props.p0) { case true: { x.push(props.p2); @@ -42,31 +42,25 @@ function Component(props) { y = x; } } - $[0] = props; - $[1] = x; - $[2] = y; - } else { - x = $[1]; - y = $[2]; - } - let t0; - if ($[3] !== x) { + t0 = ; - $[3] = x; - $[4] = t0; + $[0] = props; + $[1] = y; + $[2] = t0; } else { - t0 = $[4]; + y = $[1]; + t0 = $[2]; } const child = t0; y.push(props.p4); let t1; - if ($[5] !== y || $[6] !== child) { + if ($[3] !== y || $[4] !== child) { t1 = {child}; - $[5] = y; - $[6] = child; - $[7] = t1; + $[3] = y; + $[4] = child; + $[5] = t1; } else { - t1 = $[7]; + t1 = $[5]; } return t1; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-function-expression-captures-value-later-frozen.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-function-expression-captures-value-later-frozen.expect.md index 2fdb888230e40..9f8fed44f0a02 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-function-expression-captures-value-later-frozen.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-function-expression-captures-value-later-frozen.expect.md @@ -24,10 +24,10 @@ function Component(props) { ```javascript import { c as _c } from "react/compiler-runtime"; function Component(props) { - const $ = _c(4); - let x; + const $ = _c(2); + let t0; if ($[0] !== props.cond) { - x = {}; + const x = {}; const onChange = (e) => { maybeMutate(x, e.target.value); @@ -36,18 +36,11 @@ function Component(props) { } onChange(); - $[0] = props.cond; - $[1] = x; - } else { - x = $[1]; - } - let t0; - if ($[2] !== x) { t0 = ; - $[2] = x; - $[3] = t0; + $[0] = props.cond; + $[1] = t0; } else { - t0 = $[3]; + t0 = $[1]; } return t0; } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-load-binary-op.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-load-binary-op.expect.md index 6f6ab2e3a119c..3bb448d26d070 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-load-binary-op.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-test-field-load-binary-op.expect.md @@ -21,22 +21,15 @@ function component() { ```javascript import { c as _c } from "react/compiler-runtime"; function component() { - const $ = _c(2); + const $ = _c(1); let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { - t0 = makeSomePrimitive(); + t0 = { u: makeSomePrimitive(), v: makeSomePrimitive() }; $[0] = t0; } else { t0 = $[0]; } - let t1; - if ($[1] === Symbol.for("react.memo_cache_sentinel")) { - t1 = { u: t0, v: makeSomePrimitive() }; - $[1] = t1; - } else { - t1 = $[1]; - } - const x = t1; + const x = t0; const u = x.u; const v = x.v; if (u > v) {