[compiler] fix false positive "mutate frozen" validation with refs

The test case here previously reported a "Cannot modify local variables after render completes" error (from ValidateNoFreezingKnownMutableFunctions). This happens because one of the functions passed to a hook clearly mutates a ref — except that we try to ignore mutations of refs! The problem in this case is that the `const ref = ...` was getting converted to a context variable since the ref is accessed in a function before its declaration. We don't infer types for context variables at all, and our ref handling is based on types, so we failed to ignore this ref mutation.

The fix is to recognize that `StoreLocal const ...` is a special case: the variable may be referenced in code before the declaration, but at runtime it's either a TDZ error or the variable will have the type from the declaration. So we can safely infer a type.

compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts

@@ -943,7 +943,10 @@ export function printAliasingEffect(effect: AliasingEffect): string {
       return `Assign ${printPlaceForAliasEffect(effect.into)} = ${printPlaceForAliasEffect(effect.from)}`;
     }
     case 'Alias': {
-      return `Alias ${printPlaceForAliasEffect(effect.into)} = ${printPlaceForAliasEffect(effect.from)}`;
+      return `Alias ${printPlaceForAliasEffect(effect.into)} <- ${printPlaceForAliasEffect(effect.from)}`;
+    }
+    case 'MaybeAlias': {
+      return `MaybeAlias ${printPlaceForAliasEffect(effect.into)} <- ${printPlaceForAliasEffect(effect.from)}`;
     }
     case 'Capture': {
       return `Capture ${printPlaceForAliasEffect(effect.into)} <- ${printPlaceForAliasEffect(effect.from)}`;

compiler/packages/babel-plugin-react-compiler/src/Inference/AliasingEffects.ts

@@ -90,6 +90,23 @@ export type AliasingEffect =
    * c could be mutating a.
    */
   | {kind: 'Alias'; from: Place; into: Place}
+
+  /**
+   * Indicates the potential for information flow from `from` to `into`. This is used for a specific
+   * case: functions with unknown signatures. If the compiler sees a call such as `foo(x)`, it has to
+   * consider several possibilities (which may depend on the arguments):
+   * - foo(x) returns a new mutable value that does not capture any information from x.
+   * - foo(x) returns a new mutable value that *does* capture information from x.
+   * - foo(x) returns x itself, ie foo is the identity function
+   *
+   * The same is true of functions that take multiple arguments: `cond(a, b, c)` could conditionally
+   * return b or c depending on the value of a.
+   *
+   * To represent this case, MaybeAlias represents the fact that an aliasing relationship could exist.
+   * Any mutations that flow through this relationship automatically become conditional.
+   */
+  | {kind: 'MaybeAlias'; from: Place; into: Place}
+
   /**
    * Records direct assignment: `into = from`.
    */
@@ -183,7 +200,8 @@ export function hashEffect(effect: AliasingEffect): string {
     case 'ImmutableCapture':
     case 'Assign':
     case 'Alias':
-    case 'Capture': {
+    case 'Capture':
+    case 'MaybeAlias': {
       return [
         effect.kind,
         effect.from.identifier.id,

compiler/packages/babel-plugin-react-compiler/src/Inference/AnalyseFunctions.ts

@@ -85,7 +85,8 @@ function lowerWithMutationAliasing(fn: HIRFunction): void {
       case 'Assign':
       case 'Alias':
       case 'Capture':
-      case 'CreateFrom': {
+      case 'CreateFrom':
+      case 'MaybeAlias': {
         capturedOrMutated.add(effect.from.identifier.id);
         break;
       }

compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts

@@ -691,6 +691,7 @@ function applyEffect(
       }
       break;
     }
+    case 'MaybeAlias':
     case 'Alias':
     case 'Capture': {
       CompilerError.invariant(
@@ -955,7 +956,7 @@ function applyEffect(
             context,
             state,
             // OK: recording information flow
-            {kind: 'Alias', from: operand, into: effect.into},
+            {kind: 'MaybeAlias', from: operand, into: effect.into},
             initialized,
             effects,
           );
@@ -1323,7 +1324,7 @@ class InferenceState {
             return 'mutate-global';
           }
           case ValueKind.MaybeFrozen: {
-            return 'none';
+            return 'mutate-frozen';
           }
           default: {
             assertExhaustive(kind, `Unexpected kind ${kind}`);
@@ -2376,6 +2377,7 @@ function computeEffectsForSignature(
   // Apply substitutions
   for (const effect of signature.effects) {
     switch (effect.kind) {
+      case 'MaybeAlias':
       case 'Assign':
       case 'ImmutableCapture':
       case 'Alias':

compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingRanges.ts

@@ -160,6 +160,8 @@ export function inferMutationAliasingRanges(
           state.assign(index++, effect.from, effect.into);
         } else if (effect.kind === 'Alias') {
           state.assign(index++, effect.from, effect.into);
+        } else if (effect.kind === 'MaybeAlias') {
+          state.maybeAlias(index++, effect.from, effect.into);
         } else if (effect.kind === 'Capture') {
           state.capture(index++, effect.from, effect.into);
         } else if (
@@ -247,6 +249,7 @@ export function inferMutationAliasingRanges(
   }
   for (const param of [...fn.context, ...fn.params]) {
     const place = param.kind === 'Identifier' ? param : param.place;
+
     const node = state.nodes.get(place.identifier);
     if (node == null) {
       continue;
@@ -346,7 +349,8 @@ export function inferMutationAliasingRanges(
           case 'Assign':
           case 'Alias':
           case 'Capture':
-          case 'CreateFrom': {
+          case 'CreateFrom':
+          case 'MaybeAlias': {
             const isMutatedOrReassigned =
               effect.into.identifier.mutableRange.end > instr.id;
             if (isMutatedOrReassigned) {
@@ -567,7 +571,12 @@ type Node = {
   createdFrom: Map<Identifier, number>;
   captures: Map<Identifier, number>;
   aliases: Map<Identifier, number>;
-  edges: Array<{index: number; node: Identifier; kind: 'capture' | 'alias'}>;
+  maybeAliases: Map<Identifier, number>;
+  edges: Array<{
+    index: number;
+    node: Identifier;
+    kind: 'capture' | 'alias' | 'maybeAlias';
+  }>;
   transitive: {kind: MutationKind; loc: SourceLocation} | null;
   local: {kind: MutationKind; loc: SourceLocation} | null;
   lastMutated: number;
@@ -585,6 +594,7 @@ class AliasingState {
       createdFrom: new Map(),
       captures: new Map(),
       aliases: new Map(),
+      maybeAliases: new Map(),
       edges: [],
       transitive: null,
       local: null,
@@ -630,6 +640,18 @@ class AliasingState {
     }
   }
 
+  maybeAlias(index: number, from: Place, into: Place): void {
+    const fromNode = this.nodes.get(from.identifier);
+    const toNode = this.nodes.get(into.identifier);
+    if (fromNode == null || toNode == null) {
+      return;
+    }
+    fromNode.edges.push({index, node: into.identifier, kind: 'maybeAlias'});
+    if (!toNode.maybeAliases.has(from.identifier)) {
+      toNode.maybeAliases.set(from.identifier, index);
+    }
+  }
+
   render(index: number, start: Identifier, errors: CompilerError): void {
     const seen = new Set<Identifier>();
     const queue: Array<Identifier> = [start];
@@ -673,22 +695,24 @@ class AliasingState {
     // Null is used for simulated mutations
     end: InstructionId | null,
     transitive: boolean,
-    kind: MutationKind,
+    startKind: MutationKind,
     loc: SourceLocation,
     errors: CompilerError,
   ): void {
-    const seen = new Set<Identifier>();
+    const seen = new Map<Identifier, MutationKind>();
     const queue: Array<{
       place: Identifier;
       transitive: boolean;
       direction: 'backwards' | 'forwards';
-    }> = [{place: start, transitive, direction: 'backwards'}];
+      kind: MutationKind;
+    }> = [{place: start, transitive, direction: 'backwards', kind: startKind}];
     while (queue.length !== 0) {
-      const {place: current, transitive, direction} = queue.pop()!;
-      if (seen.has(current)) {
+      const {place: current, transitive, direction, kind} = queue.pop()!;
+      const previousKind = seen.get(current);
+      if (previousKind != null && previousKind >= kind) {
         continue;
       }
-      seen.add(current);
+      seen.set(current, kind);
       const node = this.nodes.get(current);
       if (node == null) {
         continue;
@@ -724,13 +748,18 @@ class AliasingState {
         if (edge.index >= index) {
           break;
         }
-        queue.push({place: edge.node, transitive, direction: 'forwards'});
+        queue.push({place: edge.node, transitive, direction: 'forwards', kind});
       }
       for (const [alias, when] of node.createdFrom) {
         if (when >= index) {
           continue;
         }
-        queue.push({place: alias, transitive: true, direction: 'backwards'});
+        queue.push({
+          place: alias,
+          transitive: true,
+          direction: 'backwards',
+          kind,
+        });
       }
       if (direction === 'backwards' || node.value.kind !== 'Phi') {
         /**
@@ -747,7 +776,25 @@ class AliasingState {
           if (when >= index) {
             continue;
           }
-          queue.push({place: alias, transitive, direction: 'backwards'});
+          queue.push({place: alias, transitive, direction: 'backwards', kind});
+        }
+        /**
+         * MaybeAlias indicates potential data flow from unknown function calls,
+         * so we downgrade mutations through these aliases to consider them
+         * conditional. This means we'll consider them for mutation *range*
+         * purposes but not report validation errors for mutations, since
+         * we aren't sure that the `from` value could actually be aliased.
+         */
+        for (const [alias, when] of node.maybeAliases) {
+          if (when >= index) {
+            continue;
+          }
+          queue.push({
+            place: alias,
+            transitive,
+            direction: 'backwards',
+            kind: MutationKind.Conditional,
+          });
         }
       }
       /**
@@ -758,7 +805,12 @@ class AliasingState {
           if (when >= index) {
             continue;
           }
-          queue.push({place: capture, transitive, direction: 'backwards'});
+          queue.push({
+            place: capture,
+            transitive,
+            direction: 'backwards',
+            kind,
+          });
         }
       }
     }

compiler/packages/babel-plugin-react-compiler/src/Inference/MUTABILITY_ALIASING_MODEL.md

@@ -153,6 +153,10 @@ This is somewhat the inverse of `Capture`. The `CreateFrom` effect describes tha
 
 Describes immutable data flow from one value to another. This is not currently used for anything, but is intended to eventually power a more sophisticated escape analysis.
 
+### MaybeAlias
+
+Describes potential data flow that the compiler knows may occur behind a function call, but cannot be sure about. For example, `foo(x)` _may_ be the identity function and return `x`, or `cond(a, b, c)` may conditionally return `b` or `c` depending on the value of `a`, but those functions could just as easily return new mutable values and not capture any information from their arguments. MaybeAlias represents that we have to consider the potential for data flow when deciding mutable ranges, but should be conservative about reporting errors. For example, `foo(someFrozenValue).property = true` should not error since we don't know for certain that foo returns its input.
+
 ### State-Changing Effects
 
 The following effects describe state changes to specific values, not data flow. In many cases, JavaScript semantics will involve a combination of both data-flow effects *and* state-change effects. For example, `object.property = value` has data flow (`Capture object <- value`) and mutation (`Mutate object`).
@@ -347,6 +351,17 @@ a.b = b; // capture
 mutate(a); // can transitively mutate b
 ```
 
+### MaybeAlias makes mutation conditional
+
+Because we don't know for certain that the aliasing occurs, we consider the mutation conditional against the source.
+
+```
+MaybeAlias a <- b
+Mutate a
+=>
+MutateConditional b
+```
+
 ### Freeze Does Not Freeze the Value
 
 Freeze does not freeze the value itself:

compiler/packages/babel-plugin-react-compiler/src/TypeInference/InferTypes.ts

@@ -14,6 +14,7 @@ import {
   Identifier,
   IdentifierId,
   Instruction,
+  InstructionKind,
   makePropertyLiteral,
   makeType,
   PropType,
@@ -194,12 +195,29 @@ function* generateInstructionTypes(
       break;
     }
 
-    // We intentionally do not infer types for context variables
+    // We intentionally do not infer types for most context variables
     case 'DeclareContext':
-    case 'StoreContext':
     case 'LoadContext': {
       break;
     }
+    case 'StoreContext': {
+      /**
+       * The caveat is StoreContext const, where we know the value is
+       * assigned once such that everywhere the value is accessed, it
+       * must have the same type from the rvalue.
+       *
+       * A concrete example where this is useful is `const ref = useRef()`
+       * where the ref is referenced before its declaration in a function
+       * expression, causing it to be converted to a const context variable.
+       */
+      if (value.lvalue.kind === InstructionKind.Const) {
+        yield equation(
+          value.lvalue.place.identifier.type,
+          value.value.identifier.type,
+        );
+      }
+      break;
+    }
 
     case 'StoreLocal': {
       if (env.config.enableUseTypeAnnotations) {

compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInEffects.ts

@@ -97,16 +97,21 @@ export function validateNoSetStateInEffects(
                 errors.pushDiagnostic(
                   CompilerDiagnostic.create({
                     category:
-                      'Calling setState within an effect can trigger cascading renders',
+                      'Calling setState synchronously within an effect can trigger cascading renders',
                     description:
-                      'Calling setState directly within a useEffect causes cascading renders that can hurt performance, and is not recommended. Consider alternatives to useEffect. (https://react.dev/learn/you-might-not-need-an-effect)',
+                      'Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. ' +
+                      'In general, the body of an effect should do one or both of the following:\n' +
+                      '* Update external systems with the latest state from React.\n' +
+                      '* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\n' +
+                      'Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. ' +
+                      '(https://react.dev/learn/you-might-not-need-an-effect)',
                     severity: ErrorSeverity.InvalidReact,
                     suggestions: null,
                   }).withDetail({
                     kind: 'error',
                     loc: setState.loc,
                     message:
-                      'Avoid calling setState() in the top-level of an effect',
+                      'Avoid calling setState() directly within an effect',
                   }),
                 );
               }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-phi-which-could-be-frozen.expect.md

@@ -0,0 +1,39 @@
+
+## Input
+
+```javascript
+import {useHook} from 'shared-runtime';
+
+function Component(props) {
+  const frozen = useHook();
+  let x;
+  if (props.cond) {
+    x = frozen;
+  } else {
+    x = {};
+  }
+  x.property = true;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value returned from a hook is not allowed. Consider moving the modification into the hook where the value is constructed.
+
+error.invalid-mutate-phi-which-could-be-frozen.ts:11:2
+   9 |     x = {};
+  10 |   }
+> 11 |   x.property = true;
+     |   ^ value cannot be modified
+  12 | }
+  13 |
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-phi-which-could-be-frozen.js

@@ -0,0 +1,12 @@
+import {useHook} from 'shared-runtime';
+
+function Component(props) {
+  const frozen = useHook();
+  let x;
+  if (props.cond) {
+    x = frozen;
+  } else {
+    x = {};
+  }
+  x.property = true;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-loop-with-context-variable-iterator.expect.md

@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+import {Stringify, useIdentity} from 'shared-runtime';
+
+function Component() {
+  const data = useIdentity(
+    new Map([
+      [0, 'value0'],
+      [1, 'value1'],
+    ])
+  );
+  const items = [];
+  // NOTE: `i` is a context variable because it's reassigned and also referenced
+  // within a closure, the `onClick` handler of each item
+  // TODO: for loops create a unique environment on each iteration, which means
+  // that if the iteration variable is only updated in the updater, the variable
+  // is effectively const within the body and the "update" acts more like
+  // a re-initialization than a reassignment.
+  // Until we model this "new environment" semantic, we allow this case to error
+  for (let i = MIN; i <= MAX; i += INCREMENT) {
+    items.push(
+      <Stringify key={i} onClick={() => data.get(i)} shouldInvokeFns={true} />
+    );
+  }
+  return <>{items}</>;
+}
+
+const MIN = 0;
+const MAX = 3;
+const INCREMENT = 1;
+
+export const FIXTURE_ENTRYPOINT = {
+  params: [],
+  fn: Component,
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a value used previously in JSX is not allowed. Consider moving the modification before the JSX.
+
+error.todo-for-loop-with-context-variable-iterator.ts:18:30
+  16 |   // a re-initialization than a reassignment.
+  17 |   // Until we model this "new environment" semantic, we allow this case to error
+> 18 |   for (let i = MIN; i <= MAX; i += INCREMENT) {
+     |                               ^ `i` cannot be modified
+  19 |     items.push(
+  20 |       <Stringify key={i} onClick={() => data.get(i)} shouldInvokeFns={true} />
+  21 |     );
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-for-loop-with-context-variable-iterator.js

@@ -10,6 +10,11 @@ function Component() {
   const items = [];
   // NOTE: `i` is a context variable because it's reassigned and also referenced
   // within a closure, the `onClick` handler of each item
+  // TODO: for loops create a unique environment on each iteration, which means
+  // that if the iteration variable is only updated in the updater, the variable
+  // is effectively const within the body and the "update" acts more like
+  // a re-initialization than a reassignment.
+  // Until we model this "new environment" semantic, we allow this case to error
   for (let i = MIN; i <= MAX; i += INCREMENT) {
     items.push(
       <Stringify key={i} onClick={() => data.get(i)} shouldInvokeFns={true} />

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/for-loop-with-context-variable-iterator.expect.md

@@ -1,89 +0,0 @@
-
-## Input
-
-```javascript
-import {Stringify, useIdentity} from 'shared-runtime';
-
-function Component() {
-  const data = useIdentity(
-    new Map([
-      [0, 'value0'],
-      [1, 'value1'],
-    ])
-  );
-  const items = [];
-  // NOTE: `i` is a context variable because it's reassigned and also referenced
-  // within a closure, the `onClick` handler of each item
-  for (let i = MIN; i <= MAX; i += INCREMENT) {
-    items.push(
-      <Stringify key={i} onClick={() => data.get(i)} shouldInvokeFns={true} />
-    );
-  }
-  return <>{items}</>;
-}
-
-const MIN = 0;
-const MAX = 3;
-const INCREMENT = 1;
-
-export const FIXTURE_ENTRYPOINT = {
-  params: [],
-  fn: Component,
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime";
-import { Stringify, useIdentity } from "shared-runtime";
-
-function Component() {
-  const $ = _c(3);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = new Map([
-      [0, "value0"],
-      [1, "value1"],
-    ]);
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  const data = useIdentity(t0);
-  let t1;
-  if ($[1] !== data) {
-    const items = [];
-    for (let i = MIN; i <= MAX; i = i + INCREMENT, i) {
-      items.push(
-        <Stringify
-          key={i}
-          onClick={() => data.get(i)}
-          shouldInvokeFns={true}
-        />,
-      );
-    }
-
-    t1 = <>{items}</>;
-    $[1] = data;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  return t1;
-}
-
-const MIN = 0;
-const MAX = 3;
-const INCREMENT = 1;
-
-export const FIXTURE_ENTRYPOINT = {
-  params: [],
-  fn: Component,
-};
-
-```
-      
-### Eval output
-(kind: ok) <div>{"onClick":{"kind":"Function","result":"value0"},"shouldInvokeFns":true}</div><div>{"onClick":{"kind":"Function","result":"value1"},"shouldInvokeFns":true}</div><div>{"onClick":{"kind":"Function"},"shouldInvokeFns":true}</div><div>{"onClick":{"kind":"Function"},"shouldInvokeFns":true}</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-transitive.expect.md

@@ -65,7 +65,7 @@ function _temp(s) {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"category":"Calling setState within an effect can trigger cascading renders","description":"Calling setState directly within a useEffect causes cascading renders that can hurt performance, and is not recommended. Consider alternatives to useEffect. (https://react.dev/learn/you-might-not-need-an-effect)","severity":"InvalidReact","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":13,"column":4,"index":265},"end":{"line":13,"column":5,"index":266},"filename":"invalid-setState-in-useEffect-transitive.ts","identifierName":"g"},"message":"Avoid calling setState() in the top-level of an effect"}]}},"fnLoc":null}
+{"kind":"CompileError","detail":{"options":{"category":"Calling setState synchronously within an effect can trigger cascading renders","description":"Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect)","severity":"InvalidReact","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":13,"column":4,"index":265},"end":{"line":13,"column":5,"index":266},"filename":"invalid-setState-in-useEffect-transitive.ts","identifierName":"g"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":92},"end":{"line":16,"column":1,"index":293},"filename":"invalid-setState-in-useEffect-transitive.ts"},"fnName":"Component","memoSlots":2,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect.expect.md

@@ -45,7 +45,7 @@ function _temp(s) {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"category":"Calling setState within an effect can trigger cascading renders","description":"Calling setState directly within a useEffect causes cascading renders that can hurt performance, and is not recommended. Consider alternatives to useEffect. (https://react.dev/learn/you-might-not-need-an-effect)","severity":"InvalidReact","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":7,"column":4,"index":180},"end":{"line":7,"column":12,"index":188},"filename":"invalid-setState-in-useEffect.ts","identifierName":"setState"},"message":"Avoid calling setState() in the top-level of an effect"}]}},"fnLoc":null}
+{"kind":"CompileError","detail":{"options":{"category":"Calling setState synchronously within an effect can trigger cascading renders","description":"Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect)","severity":"InvalidReact","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":7,"column":4,"index":180},"end":{"line":7,"column":12,"index":188},"filename":"invalid-setState-in-useEffect.ts","identifierName":"setState"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":92},"end":{"line":10,"column":1,"index":225},"filename":"invalid-setState-in-useEffect.ts"},"fnName":"Component","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-ref-in-function-passed-to-hook.expect.md

@@ -0,0 +1,114 @@
+
+## Input
+
+```javascript
+// @flow
+component Example() {
+  const fooRef = useRef();
+
+  function updateStyles() {
+    const foo = fooRef.current;
+    // The access of `barRef` here before its declaration causes it be hoisted...
+    if (barRef.current == null || foo == null) {
+      return;
+    }
+    foo.style.height = '100px';
+  }
+
+  // ...which previously meant that we didn't infer a type...
+  const barRef = useRef(null);
+
+  const resizeRef = useResizeObserver(
+    rect => {
+      const {width} = rect;
+      // ...which meant that we failed to ignore the mutation here...
+      barRef.current = width;
+    } // ...which caused this to fail with "can't freeze a mutable function"
+  );
+
+  useLayoutEffect(() => {
+    const observer = new ResizeObserver(_ => {
+      updateStyles();
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return <div ref={resizeRef} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Example() {
+  const $ = _c(6);
+  const fooRef = useRef();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = function updateStyles() {
+      const foo = fooRef.current;
+      if (barRef.current == null || foo == null) {
+        return;
+      }
+
+      foo.style.height = "100px";
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const updateStyles = t0;
+
+  const barRef = useRef(null);
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (rect) => {
+      const { width } = rect;
+
+      barRef.current = width;
+    };
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const resizeRef = useResizeObserver(t1);
+  let t2;
+  let t3;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      const observer = new ResizeObserver((_) => {
+        updateStyles();
+      });
+      return () => {
+        observer.disconnect();
+      };
+    };
+
+    t3 = [];
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t2 = $[2];
+    t3 = $[3];
+  }
+  useLayoutEffect(t2, t3);
+  let t4;
+  if ($[4] !== resizeRef) {
+    t4 = <div ref={resizeRef} />;
+    $[4] = resizeRef;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  return t4;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-ref-in-function-passed-to-hook.js

@@ -0,0 +1,36 @@
+// @flow
+component Example() {
+  const fooRef = useRef();
+
+  function updateStyles() {
+    const foo = fooRef.current;
+    // The access of `barRef` here before its declaration causes it be hoisted...
+    if (barRef.current == null || foo == null) {
+      return;
+    }
+    foo.style.height = '100px';
+  }
+
+  // ...which previously meant that we didn't infer a type...
+  const barRef = useRef(null);
+
+  const resizeRef = useResizeObserver(
+    rect => {
+      const {width} = rect;
+      // ...which meant that we failed to ignore the mutation here...
+      barRef.current = width;
+    } // ...which caused this to fail with "can't freeze a mutable function"
+  );
+
+  useLayoutEffect(() => {
+    const observer = new ResizeObserver(_ => {
+      updateStyles();
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return <div ref={resizeRef} />;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-function-call-with-frozen-argument-in-function-expression.expect.md

@@ -0,0 +1,77 @@
+
+## Input
+
+```javascript
+import {identity, makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Example(props) {
+  const object = props.object;
+  const f = () => {
+    // The argument maybe-aliases into the return
+    const obj = identity(object);
+    obj.property = props.value;
+    return obj;
+  };
+  const obj = f();
+  return <Stringify obj={obj} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Example,
+  params: [{object: makeObject_Primitives(), value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity, makeObject_Primitives, Stringify } from "shared-runtime";
+
+function Example(props) {
+  const $ = _c(7);
+  const object = props.object;
+  let t0;
+  if ($[0] !== object || $[1] !== props.value) {
+    t0 = () => {
+      const obj = identity(object);
+      obj.property = props.value;
+      return obj;
+    };
+    $[0] = object;
+    $[1] = props.value;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const f = t0;
+  let t1;
+  if ($[3] !== f) {
+    t1 = f();
+    $[3] = f;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const obj_0 = t1;
+  let t2;
+  if ($[5] !== obj_0) {
+    t2 = <Stringify obj={obj_0} />;
+    $[5] = obj_0;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Example,
+  params: [{ object: makeObject_Primitives(), value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"obj":{"a":0,"b":"value1","c":true,"property":42}}</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-function-call-with-frozen-argument-in-function-expression.js

@@ -0,0 +1,18 @@
+import {identity, makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Example(props) {
+  const object = props.object;
+  const f = () => {
+    // The argument maybe-aliases into the return
+    const obj = identity(object);
+    obj.property = props.value;
+    return obj;
+  };
+  const obj = f();
+  return <Stringify obj={obj} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Example,
+  params: [{object: makeObject_Primitives(), value: 42}],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-method-call-on-frozen-value-in-function-expression.expect.md

@@ -0,0 +1,77 @@
+
+## Input
+
+```javascript
+import {makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Example(props) {
+  const object = props.object;
+  const f = () => {
+    // The receiver maybe-aliases into the return
+    const obj = object.makeObject();
+    obj.property = props.value;
+    return obj;
+  };
+  const obj = f();
+  return <Stringify obj={obj} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Example,
+  params: [{object: {makeObject: makeObject_Primitives}, value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeObject_Primitives, Stringify } from "shared-runtime";
+
+function Example(props) {
+  const $ = _c(7);
+  const object = props.object;
+  let t0;
+  if ($[0] !== object || $[1] !== props.value) {
+    t0 = () => {
+      const obj = object.makeObject();
+      obj.property = props.value;
+      return obj;
+    };
+    $[0] = object;
+    $[1] = props.value;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const f = t0;
+  let t1;
+  if ($[3] !== f) {
+    t1 = f();
+    $[3] = f;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const obj_0 = t1;
+  let t2;
+  if ($[5] !== obj_0) {
+    t2 = <Stringify obj={obj_0} />;
+    $[5] = obj_0;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Example,
+  params: [{ object: { makeObject: makeObject_Primitives }, value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"obj":{"a":0,"b":"value1","c":true,"property":42}}</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-method-call-on-frozen-value-in-function-expression.js

@@ -0,0 +1,18 @@
+import {makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Example(props) {
+  const object = props.object;
+  const f = () => {
+    // The receiver maybe-aliases into the return
+    const obj = object.makeObject();
+    obj.property = props.value;
+    return obj;
+  };
+  const obj = f();
+  return <Stringify obj={obj} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Example,
+  params: [{object: {makeObject: makeObject_Primitives}, value: 42}],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-method-call-on-frozen-value-is-allowed.expect.md

@@ -0,0 +1,57 @@
+
+## Input
+
+```javascript
+import {makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Example(props) {
+  const obj = props.object.makeObject();
+  obj.property = props.value;
+  return <Stringify obj={obj} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Example,
+  params: [{object: {makeObject: makeObject_Primitives}, value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { makeObject_Primitives, Stringify } from "shared-runtime";
+
+function Example(props) {
+  const $ = _c(5);
+  let obj;
+  if ($[0] !== props.object || $[1] !== props.value) {
+    obj = props.object.makeObject();
+    obj.property = props.value;
+    $[0] = props.object;
+    $[1] = props.value;
+    $[2] = obj;
+  } else {
+    obj = $[2];
+  }
+  let t0;
+  if ($[3] !== obj) {
+    t0 = <Stringify obj={obj} />;
+    $[3] = obj;
+    $[4] = t0;
+  } else {
+    t0 = $[4];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Example,
+  params: [{ object: { makeObject: makeObject_Primitives }, value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"obj":{"a":0,"b":"value1","c":true,"property":42}}</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-mutate-result-of-method-call-on-frozen-value-is-allowed.js

@@ -0,0 +1,12 @@
+import {makeObject_Primitives, Stringify} from 'shared-runtime';
+
+function Example(props) {
+  const obj = props.object.makeObject();
+  obj.property = props.value;
+  return <Stringify obj={obj} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Example,
+  params: [{object: {makeObject: makeObject_Primitives}, value: 42}],
+};