Add failing test for #35387

.github/workflows/runtime_build_and_test.yml

@@ -382,6 +382,9 @@ jobs:
           -r=experimental --env=development,
           -r=experimental --env=production,
 
+          # Dev Tools
+          --project=devtools -r=experimental,
+
           # TODO: Update test config to support www build tests
           # - "-r=www-classic --env=development --variant=false"
           # - "-r=www-classic --env=production --variant=false"
@@ -447,50 +450,6 @@ jobs:
         run: ls -R build
       - run: yarn test --build ${{ matrix.test_params }} --shard=${{ matrix.shard }} --ci
 
-  test_build_devtools:
-    name: yarn test-build (devtools)
-    needs: [build_and_lint, runtime_node_modules_cache]
-    strategy:
-      fail-fast: false
-      matrix:
-        shard:
-          - 1/5
-          - 2/5
-          - 3/5
-          - 4/5
-          - 5/5
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.inputs.commit_sha != '' && github.event.inputs.commit_sha || github.event.pull_request.head.sha || github.sha }}
-      - uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-          cache: yarn
-          cache-dependency-path: yarn.lock
-      - name: Restore cached node_modules
-        uses: actions/cache/restore@v4
-        id: node_modules
-        with:
-          path: |
-            **/node_modules
-          key: runtime-node_modules-v7-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('yarn.lock') }}
-          # Don't use restore-keys here. Otherwise the cache grows indefinitely.
-      - name: Ensure clean build directory
-        run: rm -rf build
-      - run: yarn install --frozen-lockfile
-        if: steps.node_modules.outputs.cache-hit != 'true'
-      - name: Restore archived build
-        uses: actions/download-artifact@v4
-        with:
-          pattern: _build_*
-          path: build
-          merge-multiple: true
-      - name: Display structure of build
-        run: ls -R build
-      - run: yarn test --build --project=devtools -r=experimental --shard=${{ matrix.shard }} --ci
-
   process_artifacts_combined:
     name: Process artifacts combined
     needs: [build_and_lint, runtime_node_modules_cache]

compiler/packages/babel-plugin-react-compiler/src/CompilerError.ts

@@ -132,12 +132,6 @@ export class CompilerDiagnostic {
     return new CompilerDiagnostic({...options, details: []});
   }
 
-  clone(): CompilerDiagnostic {
-    const cloned = CompilerDiagnostic.create({...this.options});
-    cloned.options.details = [...this.options.details];
-    return cloned;
-  }
-
   get reason(): CompilerDiagnosticOptions['reason'] {
     return this.options.reason;
   }

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts

@@ -96,6 +96,7 @@ import {propagateScopeDependenciesHIR} from '../HIR/PropagateScopeDependenciesHI
 import {outlineJSX} from '../Optimization/OutlineJsx';
 import {optimizePropsMethodCalls} from '../Optimization/OptimizePropsMethodCalls';
 import {transformFire} from '../Transform';
+import {validateNoImpureFunctionsInRender} from '../Validation/ValidateNoImpureFunctionsInRender';
 import {validateStaticComponents} from '../Validation/ValidateStaticComponents';
 import {validateNoFreezingKnownMutableFunctions} from '../Validation/ValidateNoFreezingKnownMutableFunctions';
 import {inferMutationAliasingEffects} from '../Inference/InferMutationAliasingEffects';
@@ -106,7 +107,6 @@ import {nameAnonymousFunctions} from '../Transform/NameAnonymousFunctions';
 import {optimizeForSSR} from '../Optimization/OptimizeForSSR';
 import {validateExhaustiveDependencies} from '../Validation/ValidateExhaustiveDependencies';
 import {validateSourceLocations} from '../Validation/ValidateSourceLocations';
-import {validateNoImpureValuesInRender} from '../Validation/ValidateNoImpureValuesInRender';
 
 export type CompilerPipelineValue =
   | {kind: 'ast'; name: string; value: CodegenFunction}
@@ -271,6 +271,10 @@ function runWithEnvironment(
       assertValidMutableRanges(hir);
     }
 
+    if (env.config.validateRefAccessDuringRender) {
+      validateNoRefAccessInRender(hir).unwrap();
+    }
+
     if (env.config.validateNoSetStateInRender) {
       validateNoSetStateInRender(hir).unwrap();
     }
@@ -292,15 +296,8 @@ function runWithEnvironment(
       env.logErrors(validateNoJSXInTryStatement(hir));
     }
 
-    if (
-      env.config.validateNoImpureFunctionsInRender ||
-      env.config.validateRefAccessDuringRender
-    ) {
-      validateNoImpureValuesInRender(hir).unwrap();
-    }
-
-    if (env.config.validateRefAccessDuringRender) {
-      validateNoRefAccessInRender(hir).unwrap();
+    if (env.config.validateNoImpureFunctionsInRender) {
+      validateNoImpureFunctionsInRender(hir).unwrap();
     }
 
     validateNoFreezingKnownMutableFunctions(hir).unwrap();

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

@@ -38,7 +38,7 @@ import {
   addObject,
 } from './ObjectShape';
 import {BuiltInType, ObjectType, PolyType} from './Types';
-import {AliasingSignatureConfig, TypeConfig} from './TypeSchema';
+import {TypeConfig} from './TypeSchema';
 import {assertExhaustive} from '../Utils/utils';
 import {isHookName} from './Environment';
 import {CompilerError, SourceLocation} from '..';
@@ -626,136 +626,11 @@ const TYPED_GLOBALS: Array<[string, BuiltInType]> = [
   // TODO: rest of Global objects
 ];
 
-const RenderHookAliasing: (
-  reason: ValueReason,
-) => AliasingSignatureConfig = reason => ({
-  receiver: '@receiver',
-  params: [],
-  rest: '@rest',
-  returns: '@returns',
-  temporaries: [],
-  effects: [
-    // Freeze the arguments
-    {
-      kind: 'Freeze',
-      value: '@rest',
-      reason: ValueReason.HookCaptured,
-    },
-    // Render the arguments
-    {
-      kind: 'Render',
-      place: '@rest',
-    },
-    // Returns a frozen value
-    {
-      kind: 'Create',
-      into: '@returns',
-      value: ValueKind.Frozen,
-      reason,
-    },
-    // May alias any arguments into the return
-    {
-      kind: 'Alias',
-      from: '@rest',
-      into: '@returns',
-    },
-  ],
-});
-
-const EffectHookAliasing: AliasingSignatureConfig = {
-  receiver: '@receiver',
-  params: ['@fn', '@deps'],
-  rest: '@rest',
-  returns: '@returns',
-  temporaries: ['@effect'],
-  effects: [
-    // Freezes the function and deps
-    {
-      kind: 'Freeze',
-      value: '@rest',
-      reason: ValueReason.Effect,
-    },
-    {
-      kind: 'Freeze',
-      value: '@fn',
-      reason: ValueReason.Effect,
-    },
-    {
-      kind: 'Freeze',
-      value: '@deps',
-      reason: ValueReason.Effect,
-    },
-    // Deps are accessed during render
-    {
-      kind: 'Render',
-      place: '@deps',
-    },
-    // Internally creates an effect object that captures the function and deps
-    {
-      kind: 'Create',
-      into: '@effect',
-      value: ValueKind.Frozen,
-      reason: ValueReason.KnownReturnSignature,
-    },
-    // The effect stores the function and dependencies
-    {
-      kind: 'Capture',
-      from: '@rest',
-      into: '@effect',
-    },
-    {
-      kind: 'Capture',
-      from: '@fn',
-      into: '@effect',
-    },
-    // Returns undefined
-    {
-      kind: 'Create',
-      into: '@returns',
-      value: ValueKind.Primitive,
-      reason: ValueReason.KnownReturnSignature,
-    },
-  ],
-};
-
 /*
  * TODO(mofeiZ): We currently only store rest param effects for hooks.
  * now that FeatureFlag `enableTreatHooksAsFunctions` is removed we can
  * use positional params too (?)
  */
-const useEffectEvent = addHook(
-  DEFAULT_SHAPES,
-  {
-    positionalParams: [],
-    restParam: Effect.Freeze,
-    returnType: {
-      kind: 'Function',
-      return: {kind: 'Poly'},
-      shapeId: BuiltInEffectEventId,
-      isConstructor: false,
-    },
-    calleeEffect: Effect.Read,
-    hookKind: 'useEffectEvent',
-    // Frozen because it should not mutate any locally-bound values
-    returnValueKind: ValueKind.Frozen,
-    aliasing: {
-      receiver: '@receiver',
-      params: ['@value'],
-      rest: null,
-      returns: '@return',
-      temporaries: [],
-      effects: [
-        {kind: 'Assign', from: '@value', into: '@return'},
-        {
-          kind: 'Freeze',
-          value: '@value',
-          reason: ValueReason.HookCaptured,
-        },
-      ],
-    },
-  },
-  BuiltInUseEffectEventId,
-);
 const REACT_APIS: Array<[string, BuiltInType]> = [
   [
     'useContext',
@@ -769,7 +644,6 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
         hookKind: 'useContext',
         returnValueKind: ValueKind.Frozen,
         returnValueReason: ValueReason.Context,
-        aliasing: RenderHookAliasing(ValueReason.Context),
       },
       BuiltInUseContextHookId,
     ),
@@ -784,7 +658,6 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
       hookKind: 'useState',
       returnValueKind: ValueKind.Frozen,
       returnValueReason: ValueReason.State,
-      aliasing: RenderHookAliasing(ValueReason.State),
     }),
   ],
   [
@@ -797,7 +670,6 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
       hookKind: 'useActionState',
       returnValueKind: ValueKind.Frozen,
       returnValueReason: ValueReason.State,
-      aliasing: RenderHookAliasing(ValueReason.HookCaptured),
     }),
   ],
   [
@@ -810,7 +682,6 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
       hookKind: 'useReducer',
       returnValueKind: ValueKind.Frozen,
       returnValueReason: ValueReason.ReducerState,
-      aliasing: RenderHookAliasing(ValueReason.ReducerState),
     }),
   ],
   [
@@ -844,7 +715,6 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
       calleeEffect: Effect.Read,
       hookKind: 'useMemo',
       returnValueKind: ValueKind.Frozen,
-      aliasing: RenderHookAliasing(ValueReason.HookCaptured),
     }),
   ],
   [
@@ -856,7 +726,6 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
       calleeEffect: Effect.Read,
       hookKind: 'useCallback',
       returnValueKind: ValueKind.Frozen,
-      aliasing: RenderHookAliasing(ValueReason.HookCaptured),
     }),
   ],
   [
@@ -870,7 +739,41 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
         calleeEffect: Effect.Read,
         hookKind: 'useEffect',
         returnValueKind: ValueKind.Frozen,
-        aliasing: EffectHookAliasing,
+        aliasing: {
+          receiver: '@receiver',
+          params: [],
+          rest: '@rest',
+          returns: '@returns',
+          temporaries: ['@effect'],
+          effects: [
+            // Freezes the function and deps
+            {
+              kind: 'Freeze',
+              value: '@rest',
+              reason: ValueReason.Effect,
+            },
+            // Internally creates an effect object that captures the function and deps
+            {
+              kind: 'Create',
+              into: '@effect',
+              value: ValueKind.Frozen,
+              reason: ValueReason.KnownReturnSignature,
+            },
+            // The effect stores the function and dependencies
+            {
+              kind: 'Capture',
+              from: '@rest',
+              into: '@effect',
+            },
+            // Returns undefined
+            {
+              kind: 'Create',
+              into: '@returns',
+              value: ValueKind.Primitive,
+              reason: ValueReason.KnownReturnSignature,
+            },
+          ],
+        },
       },
       BuiltInUseEffectHookId,
     ),
@@ -886,7 +789,6 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
         calleeEffect: Effect.Read,
         hookKind: 'useLayoutEffect',
         returnValueKind: ValueKind.Frozen,
-        aliasing: EffectHookAliasing,
       },
       BuiltInUseLayoutEffectHookId,
     ),
@@ -902,7 +804,6 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
         calleeEffect: Effect.Read,
         hookKind: 'useInsertionEffect',
         returnValueKind: ValueKind.Frozen,
-        aliasing: EffectHookAliasing,
       },
       BuiltInUseInsertionEffectHookId,
     ),
@@ -916,7 +817,6 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
       calleeEffect: Effect.Read,
       hookKind: 'useTransition',
       returnValueKind: ValueKind.Frozen,
-      aliasing: RenderHookAliasing(ValueReason.HookCaptured),
     }),
   ],
   [
@@ -929,7 +829,6 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
       hookKind: 'useOptimistic',
       returnValueKind: ValueKind.Frozen,
       returnValueReason: ValueReason.State,
-      aliasing: RenderHookAliasing(ValueReason.HookCaptured),
     }),
   ],
   [
@@ -943,7 +842,6 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
         returnType: {kind: 'Poly'},
         calleeEffect: Effect.Read,
         returnValueKind: ValueKind.Frozen,
-        aliasing: RenderHookAliasing(ValueReason.HookCaptured),
       },
       BuiltInUseOperatorId,
     ),
@@ -968,8 +866,27 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
       BuiltInFireId,
     ),
   ],
-  ['useEffectEvent', useEffectEvent],
-  ['experimental_useEffectEvent', useEffectEvent],
+  [
+    'useEffectEvent',
+    addHook(
+      DEFAULT_SHAPES,
+      {
+        positionalParams: [],
+        restParam: Effect.Freeze,
+        returnType: {
+          kind: 'Function',
+          return: {kind: 'Poly'},
+          shapeId: BuiltInEffectEventId,
+          isConstructor: false,
+        },
+        calleeEffect: Effect.Read,
+        hookKind: 'useEffectEvent',
+        // Frozen because it should not mutate any locally-bound values
+        returnValueKind: ValueKind.Frozen,
+      },
+      BuiltInUseEffectEventId,
+    ),
+  ],
   ['AUTODEPS', addObject(DEFAULT_SHAPES, BuiltInAutodepsId, [])],
 ];
 

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

@@ -1879,15 +1879,7 @@ export function isRefValueType(id: Identifier): boolean {
 }
 
 export function isUseRefType(id: Identifier): boolean {
-  return isUseRefType_(id.type);
-}
-
-export function isUseRefType_(type: Type): boolean {
-  return (
-    (type.kind === 'Object' && type.shapeId === 'BuiltInUseRefId') ||
-    (type.kind === 'Phi' &&
-      type.operands.some(operand => isUseRefType_(operand)))
-  );
+  return id.type.kind === 'Object' && id.type.shapeId === 'BuiltInUseRefId';
 }
 
 export function isUseStateType(id: Identifier): boolean {
@@ -1898,13 +1890,6 @@ export function isJsxType(type: Type): boolean {
   return type.kind === 'Object' && type.shapeId === 'BuiltInJsx';
 }
 
-export function isJsxOrJsxUnionType(type: Type): boolean {
-  return (
-    (type.kind === 'Object' && type.shapeId === 'BuiltInJsx') ||
-    (type.kind === 'Phi' && type.operands.some(op => isJsxOrJsxUnionType(op)))
-  );
-}
-
 export function isRefOrRefValue(id: Identifier): boolean {
   return isUseRefType(id) || isRefValueType(id);
 }
@@ -2073,23 +2058,4 @@ export function getHookKindForType(
   return null;
 }
 
-export function areEqualSourceLocations(
-  loc1: SourceLocation,
-  loc2: SourceLocation,
-): boolean {
-  if (typeof loc1 === 'symbol' || typeof loc2 === 'symbol') {
-    return false;
-  }
-  return (
-    loc1.filename === loc2.filename &&
-    loc1.identifierName === loc2.identifierName &&
-    loc1.start.line === loc2.start.line &&
-    loc1.start.column === loc2.start.column &&
-    loc1.start.index === loc2.start.index &&
-    loc1.end.line === loc2.end.line &&
-    loc1.end.column === loc2.end.column &&
-    loc1.end.index === loc2.end.index
-  );
-}
-
 export * from './Types';

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

@@ -988,7 +988,7 @@ export function createTemporaryPlace(
     identifier: makeTemporaryIdentifier(env.nextIdentifierId, loc),
     reactive: false,
     effect: Effect.Unknown,
-    loc,
+    loc: GeneratedSource,
   };
 }
 

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {CompilerError, ErrorCategory} from '../CompilerError';
+import {CompilerError} from '../CompilerError';
 import {AliasingEffect, AliasingSignature} from '../Inference/AliasingEffects';
 import {assertExhaustive} from '../Utils/utils';
 import {
@@ -190,22 +190,14 @@ function parseAliasingSignatureConfig(
           };
         }
         case 'Impure': {
-          const into = lookup(effect.into);
-          return {
-            kind: 'Impure',
-            into,
-            category: ErrorCategory.Purity,
-            description: effect.description,
-            reason: effect.reason,
-            sourceMessage: effect.sourceMessage,
-            usageMessage: effect.usageMessage,
-          };
-        }
-        case 'Render': {
           const place = lookup(effect.place);
           return {
-            kind: 'Render',
+            kind: 'Impure',
             place,
+            error: CompilerError.throwTodo({
+              reason: 'Support impure effect declarations',
+              loc: GeneratedSource,
+            }),
           };
         }
         case 'Apply': {
@@ -1521,11 +1513,6 @@ export const DefaultNonmutatingHook = addHook(
           value: '@rest',
           reason: ValueReason.HookCaptured,
         },
-        // Render the arguments
-        {
-          kind: 'Render',
-          place: '@rest',
-        },
         // Returns a frozen value
         {
           kind: 'Create',

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

@@ -1009,7 +1009,7 @@ export function printAliasingEffect(effect: AliasingEffect): string {
       return `MutateGlobal ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.reason)}`;
     }
     case 'Impure': {
-      return `Impure ${printPlaceForAliasEffect(effect.into)} reason=${effect.reason} description=${effect.description}`;
+      return `Impure ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.reason)}`;
     }
     case 'Render': {
       return `Render ${printPlaceForAliasEffect(effect.place)}`;

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

@@ -185,29 +185,11 @@ export const ApplyEffectSchema: z.ZodType<ApplyEffectConfig> = z.object({
 
 export type ImpureEffectConfig = {
   kind: 'Impure';
-  into: string;
-  reason: string;
-  description: string;
-  sourceMessage: string;
-  usageMessage: string;
+  place: string;
 };
 
 export const ImpureEffectSchema: z.ZodType<ImpureEffectConfig> = z.object({
   kind: z.literal('Impure'),
-  into: LifetimeIdSchema,
-  reason: z.string(),
-  description: z.string(),
-  sourceMessage: z.string(),
-  usageMessage: z.string(),
-});
-
-export type RenderEffectConfig = {
-  kind: 'Render';
-  place: string;
-};
-
-export const RenderEffectSchema: z.ZodType<RenderEffectConfig> = z.object({
-  kind: z.literal('Render'),
   place: LifetimeIdSchema,
 });
 
@@ -222,8 +204,7 @@ export type AliasingEffectConfig =
   | ImpureEffectConfig
   | MutateEffectConfig
   | MutateTransitiveConditionallyConfig
-  | ApplyEffectConfig
-  | RenderEffectConfig;
+  | ApplyEffectConfig;
 
 export const AliasingEffectSchema: z.ZodType<AliasingEffectConfig> = z.union([
   FreezeEffectSchema,

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {CompilerDiagnostic, ErrorCategory} from '../CompilerError';
+import {CompilerDiagnostic} from '../CompilerError';
 import {
   FunctionExpression,
   GeneratedSource,
@@ -162,15 +162,7 @@ export type AliasingEffect =
   /**
    * Indicates a side-effect that is not safe during render
    */
-  | {
-      kind: 'Impure';
-      into: Place;
-      category: ErrorCategory;
-      reason: string;
-      description: string;
-      usageMessage: string;
-      sourceMessage: string;
-    }
+  | {kind: 'Impure'; place: Place; error: CompilerDiagnostic}
   /**
    * Indicates that a given place is accessed during render. Used to distingush
    * hook arguments that are known to be called immediately vs those used for
@@ -230,14 +222,6 @@ export function hashEffect(effect: AliasingEffect): string {
       return [effect.kind, effect.value.identifier.id, effect.reason].join(':');
     }
     case 'Impure':
-      return [
-        effect.kind,
-        effect.into.identifier.id,
-        effect.reason,
-        effect.description,
-        effect.usageMessage,
-        effect.sourceMessage,
-      ].join(':');
     case 'Render': {
       return [effect.kind, effect.place.identifier.id].join(':');
     }

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

@@ -8,7 +8,7 @@
 import {BlockId, computePostDominatorTree, HIRFunction, Place} from '../HIR';
 import {PostDominator} from '../HIR/Dominator';
 
-export type ControlDominators = (id: BlockId) => Place | null;
+export type ControlDominators = (id: BlockId) => boolean;
 
 /**
  * Returns an object that lazily calculates whether particular blocks are controlled
@@ -23,7 +23,7 @@ export function createControlDominators(
   });
   const postDominatorFrontierCache = new Map<BlockId, Set<BlockId>>();
 
-  function isControlledBlock(id: BlockId): Place | null {
+  function isControlledBlock(id: BlockId): boolean {
     let controlBlocks = postDominatorFrontierCache.get(id);
     if (controlBlocks === undefined) {
       controlBlocks = postDominatorFrontier(fn, postDominators, id);
@@ -35,24 +35,24 @@ export function createControlDominators(
         case 'if':
         case 'branch': {
           if (isControlVariable(controlBlock.terminal.test)) {
-            return controlBlock.terminal.test;
+            return true;
           }
           break;
         }
         case 'switch': {
           if (isControlVariable(controlBlock.terminal.test)) {
-            return controlBlock.terminal.test;
+            return true;
           }
           for (const case_ of controlBlock.terminal.cases) {
             if (case_.test !== null && isControlVariable(case_.test)) {
-              return case_.test;
+              return true;
             }
           }
           break;
         }
       }
     }
-    return null;
+    return false;
   }
 
   return isControlledBlock;

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

@@ -27,13 +27,11 @@ import {
   InstructionKind,
   InstructionValue,
   isArrayType,
-  isJsxOrJsxUnionType,
+  isJsxType,
   isMapType,
-  isMutableEffect,
   isPrimitiveType,
   isRefOrRefValue,
   isSetType,
-  isUseRefType,
   makeIdentifierId,
   Phi,
   Place,
@@ -72,7 +70,6 @@ import {
   MutationReason,
 } from './AliasingEffects';
 import {ErrorCategory} from '../CompilerError';
-import {REF_ERROR_DESCRIPTION} from '../Validation/ValidateNoRefAccessInRender';
 
 const DEBUG = false;
 
@@ -572,32 +569,14 @@ function inferBlock(
       terminal.effects = effects.length !== 0 ? effects : null;
     }
   } else if (terminal.kind === 'return') {
-    terminal.effects = [
-      context.internEffect({
-        kind: 'Alias',
-        from: terminal.value,
-        into: context.fn.returns,
-      }),
-    ];
     if (!context.isFuctionExpression) {
-      terminal.effects.push(
+      terminal.effects = [
         context.internEffect({
           kind: 'Freeze',
           value: terminal.value,
           reason: ValueReason.JsxCaptured,
         }),
-      );
-    }
-    if (
-      context.fn.fnType === 'Component' ||
-      isJsxOrJsxUnionType(context.fn.returns.identifier.type)
-    ) {
-      terminal.effects.push(
-        context.internEffect({
-          kind: 'Render',
-          place: terminal.value,
-        }),
-      );
+      ];
     }
   }
 }
@@ -770,7 +749,17 @@ function applyEffect(
       break;
     }
     case 'ImmutableCapture': {
-      effects.push(effect);
+      const kind = state.kind(effect.from).kind;
+      switch (kind) {
+        case ValueKind.Global:
+        case ValueKind.Primitive: {
+          // no-op: we don't need to track data flow for copy types
+          break;
+        }
+        default: {
+          effects.push(effect);
+        }
+      }
       break;
     }
     case 'CreateFrom': {
@@ -1072,17 +1061,6 @@ function applyEffect(
             reason: new Set(fromValue.reason),
           });
           state.define(effect.into, value);
-          applyEffect(
-            context,
-            state,
-            {
-              kind: 'ImmutableCapture',
-              from: effect.from,
-              into: effect.into,
-            },
-            initialized,
-            effects,
-          );
           break;
         }
         default: {
@@ -1988,11 +1966,6 @@ function computeSignatureForInstruction(
           value: ValueKind.Primitive,
           reason: ValueReason.Other,
         });
-        effects.push({
-          kind: 'ImmutableCapture',
-          from: value.object,
-          into: lvalue,
-        });
       } else {
         effects.push({
           kind: 'CreateFrom',
@@ -2000,20 +1973,6 @@ function computeSignatureForInstruction(
           into: lvalue,
         });
       }
-      if (
-        env.config.validateRefAccessDuringRender &&
-        isUseRefType(value.object.identifier)
-      ) {
-        effects.push({
-          kind: 'Impure',
-          into: lvalue,
-          category: ErrorCategory.Refs,
-          reason: `Cannot access ref value during render`,
-          description: REF_ERROR_DESCRIPTION,
-          sourceMessage: `Ref is initially accessed`,
-          usageMessage: `Ref value is used during render`,
-        });
-      }
       break;
     }
     case 'PropertyStore':
@@ -2178,15 +2137,6 @@ function computeSignatureForInstruction(
           into: lvalue,
         });
       }
-      if (value.children != null) {
-        // Children are typically called during render, not used as an event/effect callback
-        for (const child of value.children) {
-          effects.push({
-            kind: 'Render',
-            place: child,
-          });
-        }
-      }
       if (value.kind === 'JsxExpression') {
         if (value.tag.kind === 'Identifier') {
           // Tags are render function, by definition they're called during render
@@ -2195,23 +2145,29 @@ function computeSignatureForInstruction(
             place: value.tag,
           });
         }
-        for (const prop of value.props) {
-          const place =
-            prop.kind === 'JsxAttribute' ? prop.place : prop.argument;
-          if (isUseRefType(place.identifier)) {
-            continue;
-          }
-          if (place.identifier.type.kind === 'Function') {
-            if (isJsxOrJsxUnionType(place.identifier.type.return)) {
-              effects.push({
-                kind: 'Render',
-                place,
-              });
-            }
-          } else {
+        if (value.children != null) {
+          // Children are typically called during render, not used as an event/effect callback
+          for (const child of value.children) {
             effects.push({
               kind: 'Render',
-              place,
+              place: child,
+            });
+          }
+        }
+        for (const prop of value.props) {
+          if (
+            prop.kind === 'JsxAttribute' &&
+            prop.place.identifier.type.kind === 'Function' &&
+            (isJsxType(prop.place.identifier.type.return) ||
+              (prop.place.identifier.type.return.kind === 'Phi' &&
+                prop.place.identifier.type.return.operands.some(operand =>
+                  isJsxType(operand),
+                )))
+          ) {
+            // Any props which return jsx are assumed to be called during render
+            effects.push({
+              kind: 'Render',
+              place: prop.place,
             });
           }
         }
@@ -2247,11 +2203,6 @@ function computeSignatureForInstruction(
             value: ValueKind.Primitive,
             reason: ValueReason.Other,
           });
-          effects.push({
-            kind: 'ImmutableCapture',
-            from: value.value,
-            into: place,
-          });
         } else if (patternItem.kind === 'Identifier') {
           effects.push({
             kind: 'CreateFrom',
@@ -2433,46 +2384,15 @@ function computeSignatureForInstruction(
       });
       break;
     }
-    case 'BinaryExpression': {
-      effects.push({
-        kind: 'Create',
-        into: lvalue,
-        value: ValueKind.Primitive,
-        reason: ValueReason.Other,
-      });
-      effects.push({
-        kind: 'ImmutableCapture',
-        into: lvalue,
-        from: value.left,
-      });
-      effects.push({
-        kind: 'ImmutableCapture',
-        into: lvalue,
-        from: value.right,
-      });
-      break;
-    }
-    case 'UnaryExpression': {
-      effects.push({
-        kind: 'Create',
-        into: lvalue,
-        value: ValueKind.Primitive,
-        reason: ValueReason.Other,
-      });
-      effects.push({
-        kind: 'ImmutableCapture',
-        into: lvalue,
-        from: value.value,
-      });
-      break;
-    }
     case 'TaggedTemplateExpression':
+    case 'BinaryExpression':
     case 'Debugger':
     case 'JSXText':
     case 'MetaProperty':
     case 'Primitive':
     case 'RegExpLiteral':
     case 'TemplateLiteral':
+    case 'UnaryExpression':
     case 'UnsupportedNode': {
       effects.push({
         kind: 'Create',
@@ -2503,7 +2423,7 @@ function computeEffectsForLegacySignature(
   lvalue: Place,
   receiver: Place,
   args: Array<Place | SpreadPattern | Hole>,
-  _loc: SourceLocation,
+  loc: SourceLocation,
 ): Array<AliasingEffect> {
   const returnValueReason = signature.returnValueReason ?? ValueReason.Other;
   const effects: Array<AliasingEffect> = [];
@@ -2516,18 +2436,20 @@ function computeEffectsForLegacySignature(
   if (signature.impure && state.env.config.validateNoImpureFunctionsInRender) {
     effects.push({
       kind: 'Impure',
-      into: lvalue,
-      category: ErrorCategory.Purity,
-      reason: 'Cannot access impure value during render',
-      description:
-        'Calling an impure function can produce unstable results that update ' +
-        'unpredictably when the component happens to re-render. ' +
-        '(https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)',
-      sourceMessage:
-        signature.canonicalName != null
-          ? `\`${signature.canonicalName}\` is an impure function.`
-          : 'This function is impure',
-      usageMessage: 'Cannot access impure value during render',
+      place: receiver,
+      error: CompilerDiagnostic.create({
+        category: ErrorCategory.Purity,
+        reason: 'Cannot call impure function during render',
+        description:
+          (signature.canonicalName != null
+            ? `\`${signature.canonicalName}\` is an impure function. `
+            : '') +
+          'Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)',
+      }).withDetails({
+        kind: 'error',
+        loc,
+        message: 'Cannot call impure function',
+      }),
     });
   }
   if (signature.knownIncompatible != null && state.env.enableValidations) {
@@ -2826,23 +2748,7 @@ function computeEffectsForSignature(
         }
         break;
       }
-      case 'Impure': {
-        if (env.config.validateNoImpureFunctionsInRender) {
-          const values = substitutions.get(effect.into.identifier.id) ?? [];
-          for (const value of values) {
-            effects.push({
-              kind: effect.kind,
-              into: value,
-              category: effect.category,
-              reason: effect.reason,
-              description: effect.description,
-              sourceMessage: effect.sourceMessage,
-              usageMessage: effect.usageMessage,
-            });
-          }
-        }
-        break;
-      }
+      case 'Impure':
       case 'MutateFrozen':
       case 'MutateGlobal': {
         const values = substitutions.get(effect.place.identifier.id) ?? [];

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

@@ -19,7 +19,6 @@ import {
   ValueReason,
   Place,
   isPrimitiveType,
-  isUseRefType,
 } from '../HIR/HIR';
 import {
   eachInstructionLValue,
@@ -29,9 +28,6 @@ import {
 import {assertExhaustive, getOrInsertWith} from '../Utils/utils';
 import {Err, Ok, Result} from '../Utils/Result';
 import {AliasingEffect, MutationReason} from './AliasingEffects';
-import {printIdentifier, printType} from '../HIR/PrintHIR';
-
-const DEBUG = false;
 
 /**
  * This pass builds an abstract model of the heap and interprets the effects of the
@@ -108,6 +104,7 @@ export function inferMutationAliasingRanges(
     reason: MutationReason | null;
   }> = [];
   const renders: Array<{index: number; place: Place}> = [];
+
   let index = 0;
 
   const errors = new CompilerError();
@@ -200,12 +197,14 @@ export function inferMutationAliasingRanges(
           });
         } else if (
           effect.kind === 'MutateFrozen' ||
-          effect.kind === 'MutateGlobal'
+          effect.kind === 'MutateGlobal' ||
+          effect.kind === 'Impure'
         ) {
           errors.pushDiagnostic(effect.error);
           functionEffects.push(effect);
         } else if (effect.kind === 'Render') {
           renders.push({index: index++, place: effect.place});
+          functionEffects.push(effect);
         }
       }
     }
@@ -215,6 +214,10 @@ export function inferMutationAliasingRanges(
         state.assign(index, from, into);
       }
     }
+    if (block.terminal.kind === 'return') {
+      state.assign(index++, block.terminal.value, fn.returns);
+    }
+
     if (
       (block.terminal.kind === 'maybe-throw' ||
         block.terminal.kind === 'return') &&
@@ -224,31 +227,23 @@ export function inferMutationAliasingRanges(
         if (effect.kind === 'Alias') {
           state.assign(index++, effect.from, effect.into);
         } else {
-          CompilerError.invariant(
-            effect.kind === 'Freeze' || effect.kind === 'Render',
-            {
-              reason: `Unexpected '${effect.kind}' effect for MaybeThrow terminal`,
-              description: null,
-              details: [
-                {
-                  kind: 'error',
-                  loc: block.terminal.loc,
-                  message: null,
-                },
-              ],
-            },
-          );
+          CompilerError.invariant(effect.kind === 'Freeze', {
+            reason: `Unexpected '${effect.kind}' effect for MaybeThrow terminal`,
+            description: null,
+            details: [
+              {
+                kind: 'error',
+                loc: block.terminal.loc,
+                message: null,
+              },
+            ],
+          });
         }
       }
     }
   }
 
   for (const mutation of mutations) {
-    if (DEBUG) {
-      console.log(
-        `[${mutation.index}] mutate ${printIdentifier(mutation.place.identifier)}`,
-      );
-    }
     state.mutate(
       mutation.index,
       mutation.place.identifier,
@@ -260,16 +255,8 @@ export function inferMutationAliasingRanges(
       errors,
     );
   }
-  if (DEBUG) {
-    console.log(state.debug());
-  }
   for (const render of renders) {
-    if (DEBUG) {
-      console.log(
-        `[${render.index}] render ${printIdentifier(render.place.identifier)}`,
-      );
-    }
-    state.render(render.index, render.place, errors);
+    state.render(render.index, render.place.identifier, errors);
   }
   for (const param of [...fn.context, ...fn.params]) {
     const place = param.kind === 'Identifier' ? param : param.place;
@@ -528,13 +515,6 @@ export function inferMutationAliasingRanges(
   const ignoredErrors = new CompilerError();
   for (const param of [...fn.params, ...fn.context, fn.returns]) {
     const place = param.kind === 'Identifier' ? param : param.place;
-    const node = state.nodes.get(place.identifier);
-    if (node != null && node.render != null) {
-      functionEffects.push({
-        kind: 'Render',
-        place: place,
-      });
-    }
     tracked.push(place);
   }
   for (const into of tracked) {
@@ -597,6 +577,7 @@ export function inferMutationAliasingRanges(
 function appendFunctionErrors(errors: CompilerError, fn: HIRFunction): void {
   for (const effect of fn.aliasingEffects ?? []) {
     switch (effect.kind) {
+      case 'Impure':
       case 'MutateFrozen':
       case 'MutateGlobal': {
         errors.pushDiagnostic(effect.error);
@@ -631,74 +612,10 @@ type Node = {
     | {kind: 'Object'}
     | {kind: 'Phi'}
     | {kind: 'Function'; function: HIRFunction};
-  render: Place | null;
 };
-
-function _printNode(node: Node): string {
-  const out: Array<string> = [];
-  debugNode(out, node);
-  return out.join('\n');
-}
-function debugNode(out: Array<string>, node: Node): void {
-  out.push(
-    printIdentifier(node.id) +
-      printType(node.id.type) +
-      ` lastMutated=[${node.lastMutated}]`,
-  );
-  if (node.transitive != null) {
-    out.push(`  transitive=${node.transitive.kind}`);
-  }
-  if (node.local != null) {
-    out.push(`  local=${node.local.kind}`);
-  }
-  if (node.mutationReason != null) {
-    out.push(`  mutationReason=${node.mutationReason?.kind}`);
-  }
-  const edges: Array<{
-    index: number;
-    direction: '<=' | '=>';
-    kind: string;
-    id: Identifier;
-  }> = [];
-  for (const [alias, index] of node.createdFrom) {
-    edges.push({index, direction: '<=', kind: 'createFrom', id: alias});
-  }
-  for (const [alias, index] of node.aliases) {
-    edges.push({index, direction: '<=', kind: 'alias', id: alias});
-  }
-  for (const [alias, index] of node.maybeAliases) {
-    edges.push({index, direction: '<=', kind: 'alias?', id: alias});
-  }
-  for (const [alias, index] of node.captures) {
-    edges.push({index, direction: '<=', kind: 'capture', id: alias});
-  }
-  for (const edge of node.edges) {
-    edges.push({
-      index: edge.index,
-      direction: '=>',
-      kind: edge.kind,
-      id: edge.node,
-    });
-  }
-  edges.sort((a, b) => a.index - b.index);
-  for (const edge of edges) {
-    out.push(
-      `  [${edge.index}] ${edge.direction} ${edge.kind} ${printIdentifier(edge.id)}`,
-    );
-  }
-}
-
 class AliasingState {
   nodes: Map<Identifier, Node> = new Map();
 
-  debug(): string {
-    const items: Array<string> = [];
-    for (const [_id, node] of this.nodes) {
-      debugNode(items, node);
-    }
-    return items.join('\n');
-  }
-
   create(place: Place, value: Node['value']): void {
     this.nodes.set(place.identifier, {
       id: place.identifier,
@@ -712,7 +629,6 @@ class AliasingState {
       lastMutated: 0,
       mutationReason: null,
       value,
-      render: null,
     });
   }
 
@@ -765,9 +681,9 @@ class AliasingState {
     }
   }
 
-  render(index: number, start: Place, errors: CompilerError): void {
+  render(index: number, start: Identifier, errors: CompilerError): void {
     const seen = new Set<Identifier>();
-    const queue: Array<Identifier> = [start.identifier];
+    const queue: Array<Identifier> = [start];
     while (queue.length !== 0) {
       const current = queue.pop()!;
       if (seen.has(current)) {
@@ -775,34 +691,11 @@ class AliasingState {
       }
       seen.add(current);
       const node = this.nodes.get(current);
-      if (node == null || isUseRefType(node.id)) {
-        if (DEBUG) {
-          console.log(`  render ${printIdentifier(current)}: skip mutated/ref`);
-        }
+      if (node == null || node.transitive != null || node.local != null) {
         continue;
       }
-      if (
-        node.local == null &&
-        node.transitive == null &&
-        node.value.kind === 'Function'
-      ) {
-        const returns = node.value.function.returns;
-        if (
-          isJsxType(returns.identifier.type) ||
-          (returns.identifier.type.kind === 'Phi' &&
-            returns.identifier.type.operands.some(operand =>
-              isJsxType(operand),
-            ))
-        ) {
-          appendFunctionErrors(errors, node.value.function);
-        }
-        if (DEBUG) {
-          console.log(`  render ${printIdentifier(current)}: skip function`);
-        }
-        continue;
-      }
-      if (node.render == null) {
-        node.render = start;
+      if (node.value.kind === 'Function') {
+        appendFunctionErrors(errors, node.value.function);
       }
       for (const [alias, when] of node.createdFrom) {
         if (when >= index) {
@@ -816,12 +709,6 @@ class AliasingState {
         }
         queue.push(alias);
       }
-      for (const [alias, when] of node.maybeAliases) {
-        if (when >= index) {
-          continue;
-        }
-        queue.push(alias);
-      }
       for (const [capture, when] of node.captures) {
         if (when >= index) {
           continue;

compiler/packages/babel-plugin-react-compiler/src/Utils/utils.ts

@@ -167,14 +167,6 @@ export function Set_filter<T>(
   return result;
 }
 
-export function Set_subtract<T>(
-  source: ReadonlySet<T>,
-  other: Iterable<T>,
-): Set<T> {
-  const otherSet = other instanceof Set ? other : new Set(other);
-  return Set_filter(source, item => !otherSet.has(item));
-}
-
 export function hasNode<T>(
   input: NodePath<T | null | undefined>,
 ): input is NodePath<NonNullable<T>> {

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

@@ -0,0 +1,59 @@
+/**
+ * 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 {CompilerDiagnostic, CompilerError} from '..';
+import {ErrorCategory} from '../CompilerError';
+import {HIRFunction} from '../HIR';
+import {getFunctionCallSignature} from '../Inference/InferMutationAliasingEffects';
+import {Result} from '../Utils/Result';
+
+/**
+ * Checks that known-impure functions are not called during render. Examples of invalid functions to
+ * call during render are `Math.random()` and `Date.now()`. Users may extend this set of
+ * impure functions via a module type provider and specifying functions with `impure: true`.
+ *
+ * TODO: add best-effort analysis of functions which are called during render. We have variations of
+ * this in several of our validation passes and should unify those analyses into a reusable helper
+ * and use it here.
+ */
+export function validateNoImpureFunctionsInRender(
+  fn: HIRFunction,
+): Result<void, CompilerError> {
+  const errors = new CompilerError();
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      const value = instr.value;
+      if (value.kind === 'MethodCall' || value.kind == 'CallExpression') {
+        const callee =
+          value.kind === 'MethodCall' ? value.property : value.callee;
+        const signature = getFunctionCallSignature(
+          fn.env,
+          callee.identifier.type,
+        );
+        if (signature != null && signature.impure === true) {
+          errors.pushDiagnostic(
+            CompilerDiagnostic.create({
+              category: ErrorCategory.Purity,
+              reason: 'Cannot call impure function during render',
+              description:
+                (signature.canonicalName != null
+                  ? `\`${signature.canonicalName}\` is an impure function. `
+                  : '') +
+                'Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)',
+              suggestions: null,
+            }).withDetails({
+              kind: 'error',
+              loc: callee.loc,
+              message: 'Cannot call impure function',
+            }),
+          );
+        }
+      }
+    }
+  }
+  return errors.asResult();
+}

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

@@ -1,307 +0,0 @@
-/**
- * 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 prettyFormat from 'pretty-format';
-import {CompilerDiagnostic, CompilerError, Effect} from '..';
-import {
-  areEqualSourceLocations,
-  HIRFunction,
-  IdentifierId,
-  InstructionId,
-  isJsxType,
-  isRefValueType,
-  isUseRefType,
-} from '../HIR';
-import {
-  eachInstructionLValue,
-  eachInstructionValueOperand,
-} from '../HIR/visitors';
-import {AliasingEffect} from '../Inference/AliasingEffects';
-import {createControlDominators} from '../Inference/ControlDominators';
-import {isMutable} from '../ReactiveScopes/InferReactiveScopeVariables';
-import {Err, Ok, Result} from '../Utils/Result';
-import {
-  assertExhaustive,
-  getOrInsertWith,
-  Set_filter,
-  Set_subtract,
-} from '../Utils/utils';
-import {printInstruction} from '../HIR/PrintHIR';
-
-type ImpureEffect = Extract<AliasingEffect, {kind: 'Impure'}>;
-type RenderEffect = Extract<AliasingEffect, {kind: 'Render'}>;
-type FunctionCache = Map<HIRFunction, Map<string, ImpuritySignature>>;
-type ImpuritySignature = {effects: Array<ImpureEffect>; error: CompilerError};
-
-export function validateNoImpureValuesInRender(
-  fn: HIRFunction,
-): Result<void, CompilerError> {
-  const impure = new Map<IdentifierId, ImpureEffect>();
-  const result = inferImpureValues(fn, impure, new Map());
-
-  if (result.error.hasAnyErrors()) {
-    return Err(result.error);
-  }
-  return Ok(undefined);
-}
-
-function inferFunctionExpressionMemo(
-  fn: HIRFunction,
-  impure: Map<IdentifierId, ImpureEffect>,
-  cache: FunctionCache,
-): ImpuritySignature {
-  const key = fn.context
-    .map(place => `${place.identifier.id}:${impure.has(place.identifier.id)}`)
-    .join(',');
-  return getOrInsertWith(
-    getOrInsertWith(cache, fn, () => new Map()),
-    key,
-    () => inferImpureValues(fn, impure, cache),
-  );
-}
-
-function processEffects(
-  id: InstructionId,
-  effects: Array<AliasingEffect>,
-  impure: Map<IdentifierId, ImpureEffect>,
-  cache: FunctionCache,
-): boolean {
-  let hasChanges = false;
-  const rendered: Set<IdentifierId> = new Set();
-  for (const effect of effects) {
-    if (effect.kind === 'Render') {
-      rendered.add(effect.place.identifier.id);
-    }
-  }
-  for (const effect of effects) {
-    switch (effect.kind) {
-      case 'Alias':
-      case 'Assign':
-      case 'Capture':
-      case 'CreateFrom':
-      case 'ImmutableCapture': {
-        const sourceEffect = impure.get(effect.from.identifier.id);
-        if (
-          sourceEffect != null &&
-          !impure.has(effect.into.identifier.id) &&
-          !rendered.has(effect.from.identifier.id) &&
-          !isUseRefType(effect.into.identifier) &&
-          !isJsxType(effect.into.identifier.type)
-        ) {
-          impure.set(effect.into.identifier.id, sourceEffect);
-          hasChanges = true;
-        }
-        if (
-          sourceEffect == null &&
-          (effect.kind === 'Assign' || effect.kind === 'Capture') &&
-          !impure.has(effect.from.identifier.id) &&
-          !rendered.has(effect.from.identifier.id) &&
-          !isUseRefType(effect.from.identifier) &&
-          isMutable({id}, effect.into)
-        ) {
-          const destinationEffect = impure.get(effect.into.identifier.id);
-          if (destinationEffect != null) {
-            impure.set(effect.from.identifier.id, destinationEffect);
-            hasChanges = true;
-          }
-        }
-        break;
-      }
-      case 'Impure': {
-        if (!impure.has(effect.into.identifier.id)) {
-          impure.set(effect.into.identifier.id, effect);
-          hasChanges = true;
-        }
-        break;
-      }
-      case 'Render': {
-        break;
-      }
-      case 'CreateFunction': {
-        const result = inferFunctionExpressionMemo(
-          effect.function.loweredFunc.func,
-          impure,
-          cache,
-        );
-        if (result.error.hasAnyErrors()) {
-          break;
-        }
-        const impureEffect: ImpureEffect | null =
-          result.effects.find(
-            (functionEffect: AliasingEffect): functionEffect is ImpureEffect =>
-              functionEffect.kind === 'Impure' &&
-              functionEffect.into.identifier.id ===
-                effect.function.loweredFunc.func.returns.identifier.id,
-          ) ?? null;
-        if (impureEffect != null) {
-          impure.set(effect.into.identifier.id, impureEffect);
-          hasChanges = true;
-        }
-        break;
-      }
-      case 'MaybeAlias':
-      case 'Apply':
-      case 'Create':
-      case 'Freeze':
-      case 'Mutate':
-      case 'MutateConditionally':
-      case 'MutateFrozen':
-      case 'MutateGlobal':
-      case 'MutateTransitive':
-      case 'MutateTransitiveConditionally': {
-        break;
-      }
-    }
-  }
-  return hasChanges;
-}
-
-function inferImpureValues(
-  fn: HIRFunction,
-  impure: Map<IdentifierId, ImpureEffect>,
-  cache: FunctionCache,
-): ImpuritySignature {
-  const getBlockControl = createControlDominators(fn, place => {
-    return impure.has(place.identifier.id);
-  });
-
-  let hasChanges = false;
-  do {
-    hasChanges = false;
-
-    for (const block of fn.body.blocks.values()) {
-      const controlPlace = getBlockControl(block.id);
-      const controlImpureEffect =
-        controlPlace != null ? impure.get(controlPlace.identifier.id) : null;
-
-      for (const phi of block.phis) {
-        if (impure.has(phi.place.identifier.id)) {
-          // Already marked impure on a previous pass
-          continue;
-        }
-        let impureEffect = null;
-        for (const [, operand] of phi.operands) {
-          const operandEffect = impure.get(operand.identifier.id);
-          if (operandEffect != null) {
-            impureEffect = operandEffect;
-            break;
-          }
-        }
-        if (impureEffect != null) {
-          impure.set(phi.place.identifier.id, impureEffect);
-          hasChanges = true;
-        } else {
-          for (const [pred] of phi.operands) {
-            const predControl = getBlockControl(pred);
-            if (predControl != null) {
-              const predEffect = impure.get(predControl.identifier.id);
-              if (predEffect != null) {
-                impure.set(phi.place.identifier.id, predEffect);
-                hasChanges = true;
-                break;
-              }
-            }
-          }
-        }
-      }
-
-      for (const instr of block.instructions) {
-        const _impure = new Set(impure.keys());
-        hasChanges =
-          processEffects(instr.id, instr.effects ?? [], impure, cache) ||
-          hasChanges;
-      }
-      if (block.terminal.kind === 'return' && block.terminal.effects != null) {
-        hasChanges =
-          processEffects(
-            block.terminal.id,
-            block.terminal.effects,
-            impure,
-            cache,
-          ) || hasChanges;
-      }
-    }
-  } while (hasChanges);
-
-  fn.env.logger?.debugLogIRs?.({
-    kind: 'debug',
-    name: 'ValidateNoImpureValuesInRender',
-    value: JSON.stringify(Array.from(impure.keys()).sort(), null, 2),
-  });
-
-  const error = new CompilerError();
-  function validateRenderEffect(effect: RenderEffect): void {
-    const impureEffect = impure.get(effect.place.identifier.id);
-    if (impureEffect == null) {
-      return;
-    }
-    const diagnostic = CompilerDiagnostic.create({
-      category: impureEffect.category,
-      reason: impureEffect.reason,
-      description: impureEffect.description,
-    }).withDetails({
-      kind: 'error',
-      loc: effect.place.loc,
-      message: impureEffect.usageMessage,
-    });
-    if (!areEqualSourceLocations(effect.place.loc, impureEffect.into.loc)) {
-      diagnostic.withDetails({
-        kind: 'error',
-        loc: impureEffect.into.loc,
-        message: impureEffect.sourceMessage,
-      });
-    }
-    error.pushDiagnostic(diagnostic);
-  }
-  for (const block of fn.body.blocks.values()) {
-    for (const instr of block.instructions) {
-      const value = instr.value;
-      if (
-        value.kind === 'FunctionExpression' ||
-        value.kind === 'ObjectMethod'
-      ) {
-        const result = inferFunctionExpressionMemo(
-          value.loweredFunc.func,
-          impure,
-          cache,
-        );
-        if (result.error.hasAnyErrors()) {
-          error.merge(result.error);
-        }
-      }
-      for (const effect of instr.effects ?? []) {
-        if (effect.kind === 'Render') {
-          validateRenderEffect(effect);
-        }
-      }
-    }
-    if (block.terminal.kind === 'return' && block.terminal.effects != null) {
-      for (const effect of block.terminal.effects) {
-        if (effect.kind === 'Render') {
-          validateRenderEffect(effect);
-        }
-      }
-    }
-  }
-  const impureEffects: Array<ImpureEffect> = [];
-  for (const param of [...fn.context, ...fn.params, fn.returns]) {
-    const place = param.kind === 'Identifier' ? param : param.place;
-    const impureEffect = impure.get(place.identifier.id);
-    if (impureEffect != null) {
-      impureEffects.push({
-        kind: 'Impure',
-        into: impureEffect.into,
-        category: impureEffect.category,
-        reason: impureEffect.reason,
-        description: impureEffect.description,
-        sourceMessage: impureEffect.sourceMessage,
-        usageMessage: impureEffect.usageMessage,
-      });
-    }
-  }
-  return {effects: impureEffects, error};
-}

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

@@ -397,10 +397,16 @@ function validateNoRefAccessInRenderImpl(
         switch (instr.value.kind) {
           case 'JsxExpression':
           case 'JsxFragment': {
+            for (const operand of eachInstructionValueOperand(instr.value)) {
+              validateNoDirectRefValueAccess(errors, operand, env);
+            }
             break;
           }
           case 'ComputedLoad':
           case 'PropertyLoad': {
+            if (instr.value.kind === 'ComputedLoad') {
+              validateNoDirectRefValueAccess(errors, instr.value.property, env);
+            }
             const objType = env.get(instr.value.object.identifier.id);
             let lookupType: null | RefAccessType = null;
             if (objType?.kind === 'Structure') {
@@ -493,10 +499,73 @@ function validateNoRefAccessInRenderImpl(
               instr.value.kind === 'CallExpression'
                 ? instr.value.callee
                 : instr.value.property;
+            const hookKind = getHookKindForType(fn.env, callee.identifier.type);
             let returnType: RefAccessType = {kind: 'None'};
             const fnType = env.get(callee.identifier.id);
+            let didError = false;
             if (fnType?.kind === 'Structure' && fnType.fn !== null) {
               returnType = fnType.fn.returnType;
+              if (fnType.fn.readRefEffect) {
+                didError = true;
+                errors.pushDiagnostic(
+                  CompilerDiagnostic.create({
+                    category: ErrorCategory.Refs,
+                    reason: 'Cannot access refs during render',
+                    description: ERROR_DESCRIPTION,
+                  }).withDetails({
+                    kind: 'error',
+                    loc: callee.loc,
+                    message: `This function accesses a ref value`,
+                  }),
+                );
+              }
+            }
+            /*
+             * If we already reported an error on this instruction, don't report
+             * duplicate errors
+             */
+            if (!didError) {
+              const isRefLValue = isUseRefType(instr.lvalue.identifier);
+              const isEventHandlerLValue = isEventHandlerType(
+                instr.lvalue.identifier,
+              );
+              for (const operand of eachInstructionValueOperand(instr.value)) {
+                /**
+                 * By default we check that function call operands are not refs,
+                 * ref values, or functions that can access refs.
+                 */
+                if (
+                  isRefLValue ||
+                  isEventHandlerLValue ||
+                  (hookKind != null &&
+                    hookKind !== 'useState' &&
+                    hookKind !== 'useReducer')
+                ) {
+                  /**
+                   * Allow passing refs or ref-accessing functions when:
+                   * 1. lvalue is a ref (mergeRefs pattern: `mergeRefs(ref1, ref2)`)
+                   * 2. lvalue is an event handler (DOM events execute outside render)
+                   * 3. calling hooks (independently validated for ref safety)
+                   */
+                  validateNoDirectRefValueAccess(errors, operand, env);
+                } else if (interpolatedAsJsx.has(instr.lvalue.identifier.id)) {
+                  /**
+                   * Special case: the lvalue is passed as a jsx child
+                   *
+                   * For example `<Foo>{renderHelper(ref)}</Foo>`. Here we have more
+                   * context and infer that the ref is being passed to a component-like
+                   * render function which attempts to obey the rules.
+                   */
+                  validateNoRefValueAccess(errors, env, operand);
+                } else {
+                  validateNoRefPassedToFunction(
+                    errors,
+                    env,
+                    operand,
+                    operand.loc,
+                  );
+                }
+              }
             }
             env.set(instr.lvalue.identifier.id, returnType);
             break;
@@ -505,6 +574,7 @@ function validateNoRefAccessInRenderImpl(
           case 'ArrayExpression': {
             const types: Array<RefAccessType> = [];
             for (const operand of eachInstructionValueOperand(instr.value)) {
+              validateNoDirectRefValueAccess(errors, operand, env);
               types.push(env.get(operand.identifier.id) ?? {kind: 'None'});
             }
             const value = joinRefAccessTypes(...types);
@@ -541,10 +611,17 @@ function validateNoRefAccessInRenderImpl(
             } else {
               validateNoRefUpdate(errors, env, instr.value.object, instr.loc);
             }
+            if (
+              instr.value.kind === 'ComputedDelete' ||
+              instr.value.kind === 'ComputedStore'
+            ) {
+              validateNoRefValueAccess(errors, env, instr.value.property);
+            }
             if (
               instr.value.kind === 'ComputedStore' ||
               instr.value.kind === 'PropertyStore'
             ) {
+              validateNoDirectRefValueAccess(errors, instr.value.value, env);
               const type = env.get(instr.value.value.identifier.id);
               if (type != null && type.kind === 'Structure') {
                 let objectType: RefAccessType = type;
@@ -585,9 +662,27 @@ function validateNoRefAccessInRenderImpl(
                  * error for the write to the ref
                  */
                 env.set(instr.lvalue.identifier.id, {kind: 'Guard', refId});
+                errors.pushDiagnostic(
+                  CompilerDiagnostic.create({
+                    category: ErrorCategory.Refs,
+                    reason: 'Cannot access refs during render',
+                    description: ERROR_DESCRIPTION,
+                  })
+                    .withDetails({
+                      kind: 'error',
+                      loc: instr.value.value.loc,
+                      message: `Cannot access ref value during render`,
+                    })
+                    .withDetails({
+                      kind: 'hint',
+                      message:
+                        'To initialize a ref only once, check that the ref is null with the pattern `if (ref.current == null) { ref.current = ... }`',
+                    }),
+                );
                 break;
               }
             }
+            validateNoRefValueAccess(errors, env, instr.value.value);
             break;
           }
           case 'BinaryExpression': {
@@ -609,14 +704,26 @@ function validateNoRefAccessInRenderImpl(
 
             if (refId !== null && nullish) {
               env.set(instr.lvalue.identifier.id, {kind: 'Guard', refId});
+            } else {
+              for (const operand of eachInstructionValueOperand(instr.value)) {
+                validateNoRefValueAccess(errors, env, operand);
+              }
             }
             break;
           }
           default: {
+            for (const operand of eachInstructionValueOperand(instr.value)) {
+              validateNoRefValueAccess(errors, env, operand);
+            }
             break;
           }
         }
 
+        // Guard values are derived from ref.current, so they can only be used in if statement targets
+        for (const operand of eachInstructionOperand(instr)) {
+          guardCheck(errors, operand, env);
+        }
+
         if (
           isUseRefType(instr.lvalue.identifier) &&
           env.get(instr.lvalue.identifier.id)?.kind !== 'Ref'
@@ -654,8 +761,15 @@ function validateNoRefAccessInRenderImpl(
       }
 
       for (const operand of eachTerminalOperand(block.terminal)) {
-        if (block.terminal.kind === 'return') {
+        if (block.terminal.kind !== 'return') {
+          validateNoRefValueAccess(errors, env, operand);
+          if (block.terminal.kind !== 'if') {
+            guardCheck(errors, operand, env);
+          }
+        } else {
           // Allow functions containing refs to be returned, but not direct ref values
+          validateNoDirectRefValueAccess(errors, operand, env);
+          guardCheck(errors, operand, env);
           returnValues.push(env.get(operand.identifier.id));
         }
       }
@@ -694,6 +808,72 @@ function destructure(
   return type;
 }
 
+function guardCheck(errors: CompilerError, operand: Place, env: Env): void {
+  if (env.get(operand.identifier.id)?.kind === 'Guard') {
+    errors.pushDiagnostic(
+      CompilerDiagnostic.create({
+        category: ErrorCategory.Refs,
+        reason: 'Cannot access refs during render',
+        description: ERROR_DESCRIPTION,
+      }).withDetails({
+        kind: 'error',
+        loc: operand.loc,
+        message: `Cannot access ref value during render`,
+      }),
+    );
+  }
+}
+
+function validateNoRefValueAccess(
+  errors: CompilerError,
+  env: Env,
+  operand: Place,
+): void {
+  const type = destructure(env.get(operand.identifier.id));
+  if (
+    type?.kind === 'RefValue' ||
+    (type?.kind === 'Structure' && type.fn?.readRefEffect)
+  ) {
+    errors.pushDiagnostic(
+      CompilerDiagnostic.create({
+        category: ErrorCategory.Refs,
+        reason: 'Cannot access refs during render',
+        description: ERROR_DESCRIPTION,
+      }).withDetails({
+        kind: 'error',
+        loc: (type.kind === 'RefValue' && type.loc) || operand.loc,
+        message: `Cannot access ref value during render`,
+      }),
+    );
+  }
+}
+
+function validateNoRefPassedToFunction(
+  errors: CompilerError,
+  env: Env,
+  operand: Place,
+  loc: SourceLocation,
+): void {
+  const type = destructure(env.get(operand.identifier.id));
+  if (
+    type?.kind === 'Ref' ||
+    type?.kind === 'RefValue' ||
+    (type?.kind === 'Structure' && type.fn?.readRefEffect)
+  ) {
+    errors.pushDiagnostic(
+      CompilerDiagnostic.create({
+        category: ErrorCategory.Refs,
+        reason: 'Cannot access refs during render',
+        description: ERROR_DESCRIPTION,
+      }).withDetails({
+        kind: 'error',
+        loc: (type.kind === 'RefValue' && type.loc) || loc,
+        message: `Passing a ref to a function may read its value during render`,
+      }),
+    );
+  }
+}
+
 function validateNoRefUpdate(
   errors: CompilerError,
   env: Env,
@@ -706,7 +886,7 @@ function validateNoRefUpdate(
       CompilerDiagnostic.create({
         category: ErrorCategory.Refs,
         reason: 'Cannot access refs during render',
-        description: REF_ERROR_DESCRIPTION,
+        description: ERROR_DESCRIPTION,
       }).withDetails({
         kind: 'error',
         loc: (type.kind === 'RefValue' && type.loc) || loc,
@@ -716,7 +896,28 @@ function validateNoRefUpdate(
   }
 }
 
-export const REF_ERROR_DESCRIPTION =
+function validateNoDirectRefValueAccess(
+  errors: CompilerError,
+  operand: Place,
+  env: Env,
+): void {
+  const type = destructure(env.get(operand.identifier.id));
+  if (type?.kind === 'RefValue') {
+    errors.pushDiagnostic(
+      CompilerDiagnostic.create({
+        category: ErrorCategory.Refs,
+        reason: 'Cannot access refs during render',
+        description: ERROR_DESCRIPTION,
+      }).withDetails({
+        kind: 'error',
+        loc: type.loc ?? operand.loc,
+        message: `Cannot access ref value during render`,
+      }),
+    );
+  }
+}
+
+const ERROR_DESCRIPTION =
   'React refs are values that are not needed for rendering. Refs should only be accessed ' +
   'outside of render, such as in event handlers or effects. ' +
   'Accessing a ref value (the `current` property) during render can cause your component ' +

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

@@ -202,10 +202,10 @@ function getSetStateCall(
     );
   };
 
-  const isRefControlledBlock: (id: BlockId) => Place | null =
+  const isRefControlledBlock: (id: BlockId) => boolean =
     enableAllowSetStateFromRefsInEffects
       ? createControlDominators(fn, place => isDerivedFromRef(place))
-      : (): Place | null => null;
+      : (): boolean => false;
 
   for (const [, block] of fn.body.blocks) {
     if (enableAllowSetStateFromRefsInEffects) {
@@ -224,7 +224,7 @@ function getSetStateCall(
           refDerivedValues.add(phi.place.identifier.id);
         } else {
           for (const [pred] of phi.operands) {
-            if (isRefControlledBlock(pred) != null) {
+            if (isRefControlledBlock(pred)) {
               refDerivedValues.add(phi.place.identifier.id);
               break;
             }
@@ -337,7 +337,7 @@ function getSetStateCall(
                  * be needed when initial layout measurements from refs need to be stored in state.
                  */
                 return null;
-              } else if (isRefControlledBlock(block.id) != null) {
+              } else if (isRefControlledBlock(block.id)) {
                 continue;
               }
             }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-assigning-ref-accessing-function-to-object-property-if-not-mutated.expect.md

@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+import {useRef} from 'react';
+import {Stringify} from 'shared-runtime';
+
+function Component(props) {
+  const ref = useRef(props.value);
+  const object = {};
+  object.foo = () => ref.current;
+  return <Stringify object={object} shouldInvokeFns={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useRef } from "react";
+import { Stringify } from "shared-runtime";
+
+function Component(props) {
+  const $ = _c(1);
+  const ref = useRef(props.value);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const object = {};
+    object.foo = () => ref.current;
+    t0 = <Stringify object={object} shouldInvokeFns={true} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42 }],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"object":{"foo":{"kind":"Function","result":42}},"shouldInvokeFns":true}</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.expect.md

@@ -5,7 +5,6 @@
 function Component() {
   const Foo = () => {
     someGlobal = true;
-    return <div />;
   };
   return <Foo />;
 }
@@ -27,9 +26,9 @@ error.assign-global-in-component-tag-function.ts:3:4
   2 |   const Foo = () => {
 > 3 |     someGlobal = true;
     |     ^^^^^^^^^^ `someGlobal` cannot be reassigned
-  4 |     return <div />;
-  5 |   };
-  6 |   return <Foo />;
+  4 |   };
+  5 |   return <Foo />;
+  6 | }
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.js

@@ -1,7 +1,6 @@
 function Component() {
   const Foo = () => {
     someGlobal = true;
-    return <div />;
   };
   return <Foo />;
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.expect.md

@@ -5,7 +5,6 @@
 function Component() {
   const foo = () => {
     someGlobal = true;
-    return <div />;
   };
   // Children are generally access/called during render, so
   // modifying a global in a children function is almost
@@ -30,9 +29,9 @@ error.assign-global-in-jsx-children.ts:3:4
   2 |   const foo = () => {
 > 3 |     someGlobal = true;
     |     ^^^^^^^^^^ `someGlobal` cannot be reassigned
-  4 |     return <div />;
-  5 |   };
-  6 |   // Children are generally access/called during render, so
+  4 |   };
+  5 |   // Children are generally access/called during render, so
+  6 |   // modifying a global in a children function is almost
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.js

@@ -1,7 +1,6 @@
 function Component() {
   const foo = () => {
     someGlobal = true;
-    return <div />;
   };
   // Children are generally access/called during render, so
   // modifying a global in a children function is almost

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-ref-value.expect.md

@@ -20,26 +20,30 @@ export const FIXTURE_ENTRYPOINT = {
 ## Error
 
 ```
-Found 1 error:
+Found 2 errors:
 
-Error: Cannot access ref value during render
+Error: Cannot access refs during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
-error.hook-ref-value.ts:5:22
-  3 | function Component(props) {
-  4 |   const ref = useRef();
-> 5 |   useEffect(() => {}, [ref.current]);
-    |                       ^^^^^^^^^^^^^ Ref value is used during render
-  6 | }
-  7 |
-  8 | export const FIXTURE_ENTRYPOINT = {
-
 error.hook-ref-value.ts:5:23
   3 | function Component(props) {
   4 |   const ref = useRef();
 > 5 |   useEffect(() => {}, [ref.current]);
-    |                        ^^^^^^^^^^^ Ref is initially accessed
+    |                        ^^^^^^^^^^^ Cannot access ref value during render
+  6 | }
+  7 |
+  8 | export const FIXTURE_ENTRYPOINT = {
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.hook-ref-value.ts:5:23
+  3 | function Component(props) {
+  4 |   const ref = useRef();
+> 5 |   useEffect(() => {}, [ref.current]);
+    |                        ^^^^^^^^^^^ Cannot access ref value during render
   6 | }
   7 |
   8 | export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md

@@ -17,23 +17,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Cannot access ref value during render
+Error: Cannot access refs during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
-error.invalid-access-ref-during-render.ts:5:9
-  3 |   const ref = useRef(null);
-  4 |   const value = ref.current;
-> 5 |   return value;
-    |          ^^^^^ Ref value is used during render
-  6 | }
-  7 |
-
 error.invalid-access-ref-during-render.ts:4:16
   2 | function Component(props) {
   3 |   const ref = useRef(null);
 > 4 |   const value = ref.current;
-    |                 ^^^^^^^^^^^ Ref is initially accessed
+    |                 ^^^^^^^^^^^ Cannot access ref value during render
   5 |   return value;
   6 | }
   7 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer-init.expect.md

@@ -28,7 +28,7 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 Found 1 error:
 
-Error: Cannot access ref value during render
+Error: Cannot access refs during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
@@ -36,16 +36,7 @@ error.invalid-access-ref-in-reducer-init.ts:8:4
    6 |     (state, action) => state + action,
    7 |     0,
 >  8 |     init => ref.current
-     |     ^^^^^^^^^^^^^^^^^^^ Ref value is used during render
-   9 |   );
-  10 |
-  11 |   return <Stringify state={state} />;
-
-error.invalid-access-ref-in-reducer-init.ts:8:12
-   6 |     (state, action) => state + action,
-   7 |     0,
->  8 |     init => ref.current
-     |             ^^^^^^^^^^^ Ref is initially accessed
+     |     ^^^^^^^^^^^^^^^^^^^ Passing a ref to a function may read its value during render
    9 |   );
   10 |
   11 |   return <Stringify state={state} />;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer.expect.md

@@ -24,7 +24,7 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 Found 1 error:
 
-Error: Cannot access ref value during render
+Error: Cannot access refs during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
@@ -32,16 +32,7 @@ error.invalid-access-ref-in-reducer.ts:5:29
   3 | function Component(props) {
   4 |   const ref = useRef(props.value);
 > 5 |   const [state] = useReducer(() => ref.current, null);
-    |                              ^^^^^^^^^^^^^^^^^ Ref value is used during render
-  6 |
-  7 |   return <Stringify state={state} />;
-  8 | }
-
-error.invalid-access-ref-in-reducer.ts:5:35
-  3 | function Component(props) {
-  4 |   const ref = useRef(props.value);
-> 5 |   const [state] = useReducer(() => ref.current, null);
-    |                                    ^^^^^^^^^^^ Ref is initially accessed
+    |                              ^^^^^^^^^^^^^^^^^ Passing a ref to a function may read its value during render
   6 |
   7 |   return <Stringify state={state} />;
   8 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-render-mutate-object-with-ref-function.expect.md

@@ -20,26 +20,18 @@ function Component() {
 ```
 Found 1 error:
 
-Error: Cannot access ref value during render
+Error: Cannot access refs during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
-error.invalid-access-ref-in-render-mutate-object-with-ref-function.ts:8:15
+error.invalid-access-ref-in-render-mutate-object-with-ref-function.ts:7:19
+   5 |   const object = {};
    6 |   object.foo = () => ref.current;
-   7 |   const refValue = object.foo();
->  8 |   return <div>{refValue}</div>;
-     |                ^^^^^^^^ Ref value is used during render
+>  7 |   const refValue = object.foo();
+     |                    ^^^^^^^^^^ This function accesses a ref value
+   8 |   return <div>{refValue}</div>;
    9 | }
   10 |
-
-error.invalid-access-ref-in-render-mutate-object-with-ref-function.ts:6:21
-  4 |   const ref = useRef(null);
-  5 |   const object = {};
-> 6 |   object.foo = () => ref.current;
-    |                      ^^^^^^^^^^^ Ref is initially accessed
-  7 |   const refValue = object.foo();
-  8 |   return <div>{refValue}</div>;
-  9 | }
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-state-initializer.expect.md

@@ -24,7 +24,7 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 Found 1 error:
 
-Error: Cannot access ref value during render
+Error: Cannot access refs during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
@@ -32,16 +32,7 @@ error.invalid-access-ref-in-state-initializer.ts:5:27
   3 | function Component(props) {
   4 |   const ref = useRef(props.value);
 > 5 |   const [state] = useState(() => ref.current);
-    |                            ^^^^^^^^^^^^^^^^^ Ref value is used during render
-  6 |
-  7 |   return <Stringify state={state} />;
-  8 | }
-
-error.invalid-access-ref-in-state-initializer.ts:5:33
-  3 | function Component(props) {
-  4 |   const ref = useRef(props.value);
-> 5 |   const [state] = useState(() => ref.current);
-    |                                  ^^^^^^^^^^^ Ref is initially accessed
+    |                            ^^^^^^^^^^^^^^^^^ Passing a ref to a function may read its value during render
   6 |
   7 |   return <Stringify state={state} />;
   8 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.expect.md

@@ -21,27 +21,17 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Cannot access ref value during render
+Error: Cannot access refs during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
-error.invalid-aliased-ref-in-callback-invoked-during-render-.ts:7:37
-   5 |     const aliasedRef = ref;
-   6 |     const current = aliasedRef.current;
->  7 |     return <Foo item={item} current={current} />;
-     |                                      ^^^^^^^ Ref value is used during render
+error.invalid-aliased-ref-in-callback-invoked-during-render-.ts:9:33
+   7 |     return <Foo item={item} current={current} />;
    8 |   };
-   9 |   return <Items>{props.items.map(item => renderItem(item))}</Items>;
+>  9 |   return <Items>{props.items.map(item => renderItem(item))}</Items>;
+     |                                  ^^^^^^^^^^^^^^^^^^^^^^^^ Cannot access ref value during render
   10 | }
-
-error.invalid-aliased-ref-in-callback-invoked-during-render-.ts:6:20
-  4 |   const renderItem = item => {
-  5 |     const aliasedRef = ref;
-> 6 |     const current = aliasedRef.current;
-    |                     ^^^^^^^^^^^^^^^^^^ Ref is initially accessed
-  7 |     return <Foo item={item} current={current} />;
-  8 |   };
-  9 |   return <Items>{props.items.map(item => renderItem(item))}</Items>;
+  11 |
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-capturing-ref-returning-function-in-rendered-object.expect.md

@@ -1,51 +0,0 @@
-
-## Input
-
-```javascript
-import {useRef} from 'react';
-import {Stringify} from 'shared-runtime';
-
-function Component(props) {
-  const ref = useRef(props.value);
-  const object = {};
-  object.foo = () => ref.current;
-  return <Stringify object={object} shouldInvokeFns={true} />;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{value: 42}],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot access ref value during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-error.invalid-capturing-ref-returning-function-in-rendered-object.ts:8:28
-   6 |   const object = {};
-   7 |   object.foo = () => ref.current;
->  8 |   return <Stringify object={object} shouldInvokeFns={true} />;
-     |                             ^^^^^^ Ref value is used during render
-   9 | }
-  10 |
-  11 | export const FIXTURE_ENTRYPOINT = {
-
-error.invalid-capturing-ref-returning-function-in-rendered-object.ts:7:21
-   5 |   const ref = useRef(props.value);
-   6 |   const object = {};
->  7 |   object.foo = () => ref.current;
-     |                      ^^^^^^^^^^^ Ref is initially accessed
-   8 |   return <Stringify object={object} shouldInvokeFns={true} />;
-   9 | }
-  10 |
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-indirect-via-mutation.expect.md

@@ -1,47 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoImpureFunctionsInRender
-
-import {arrayPush, identity, makeArray} from 'shared-runtime';
-
-function Component() {
-  const getDate = () => Date.now();
-  const now = getDate();
-  const array = [];
-  arrayPush(array, now);
-  return <Foo hasDate={array} />;
-}
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot access impure value during render
-
-Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
-
-error.invalid-impure-functions-in-render-indirect-via-mutation.ts:10:23
-   8 |   const array = [];
-   9 |   arrayPush(array, now);
-> 10 |   return <Foo hasDate={array} />;
-     |                        ^^^^^ Cannot access impure value during render
-  11 | }
-  12 |
-
-error.invalid-impure-functions-in-render-indirect-via-mutation.ts:6:24
-  4 |
-  5 | function Component() {
-> 6 |   const getDate = () => Date.now();
-    |                         ^^^^^^^^^^ `Date.now` is an impure function.
-  7 |   const now = getDate();
-  8 |   const array = [];
-  9 |   arrayPush(array, now);
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-indirect-via-mutation.js

@@ -1,11 +0,0 @@
-// @validateNoImpureFunctionsInRender
-
-import {arrayPush, identity, makeArray} from 'shared-runtime';
-
-function Component() {
-  const getDate = () => Date.now();
-  const now = getDate();
-  const array = [];
-  arrayPush(array, now);
-  return <Foo hasDate={array} />;
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-indirect.expect.md

@@ -1,46 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoImpureFunctionsInRender
-
-import {identity, makeArray} from 'shared-runtime';
-
-function Component() {
-  const getDate = () => Date.now();
-  const array = makeArray(getDate());
-  const hasDate = identity(array);
-  return <Foo hasDate={hasDate} />;
-}
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot access impure value during render
-
-Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
-
-error.invalid-impure-functions-in-render-indirect.ts:9:23
-   7 |   const array = makeArray(getDate());
-   8 |   const hasDate = identity(array);
->  9 |   return <Foo hasDate={hasDate} />;
-     |                        ^^^^^^^ Cannot access impure value during render
-  10 | }
-  11 |
-
-error.invalid-impure-functions-in-render-indirect.ts:6:24
-  4 |
-  5 | function Component() {
-> 6 |   const getDate = () => Date.now();
-    |                         ^^^^^^^^^^ `Date.now` is an impure function.
-  7 |   const array = makeArray(getDate());
-  8 |   const hasDate = identity(array);
-  9 |   return <Foo hasDate={hasDate} />;
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-indirect.js

@@ -1,10 +0,0 @@
-// @validateNoImpureFunctionsInRender
-
-import {identity, makeArray} from 'shared-runtime';
-
-function Component() {
-  const getDate = () => Date.now();
-  const array = makeArray(getDate());
-  const hasDate = identity(array);
-  return <Foo hasDate={hasDate} />;
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-function-call-2.expect.md

@@ -1,52 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoImpureFunctionsInRender
-
-import {identity, makeArray} from 'shared-runtime';
-
-function Component() {
-  const now = () => Date.now();
-  const f = () => {
-    // this should error but we currently lose track of the impurity bc
-    // the impure value comes from behind a call
-    const array = makeArray(now());
-    const hasDate = identity(array);
-    return hasDate;
-  };
-  const hasDate = f();
-  return <Foo hasDate={hasDate} />;
-}
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot access impure value during render
-
-Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
-
-error.invalid-impure-functions-in-render-via-function-call-2.ts:15:23
-  13 |   };
-  14 |   const hasDate = f();
-> 15 |   return <Foo hasDate={hasDate} />;
-     |                        ^^^^^^^ Cannot access impure value during render
-  16 | }
-  17 |
-
-error.invalid-impure-functions-in-render-via-function-call-2.ts:6:20
-  4 |
-  5 | function Component() {
-> 6 |   const now = () => Date.now();
-    |                     ^^^^^^^^^^ `Date.now` is an impure function.
-  7 |   const f = () => {
-  8 |     // this should error but we currently lose track of the impurity bc
-  9 |     // the impure value comes from behind a call
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-function-call-2.js

@@ -1,16 +0,0 @@
-// @validateNoImpureFunctionsInRender
-
-import {identity, makeArray} from 'shared-runtime';
-
-function Component() {
-  const now = () => Date.now();
-  const f = () => {
-    // this should error but we currently lose track of the impurity bc
-    // the impure value comes from behind a call
-    const array = makeArray(now());
-    const hasDate = identity(array);
-    return hasDate;
-  };
-  const hasDate = f();
-  return <Foo hasDate={hasDate} />;
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-function-call.expect.md

@@ -1,50 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoImpureFunctionsInRender
-
-import {identity, makeArray} from 'shared-runtime';
-
-function Component() {
-  const now = Date.now();
-  const f = () => {
-    const array = makeArray(now);
-    const hasDate = identity(array);
-    return hasDate;
-  };
-  const hasDate = f();
-  return <Foo hasDate={hasDate} />;
-}
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot access impure value during render
-
-Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
-
-error.invalid-impure-functions-in-render-via-function-call.ts:13:23
-  11 |   };
-  12 |   const hasDate = f();
-> 13 |   return <Foo hasDate={hasDate} />;
-     |                        ^^^^^^^ Cannot access impure value during render
-  14 | }
-  15 |
-
-error.invalid-impure-functions-in-render-via-function-call.ts:6:14
-  4 |
-  5 | function Component() {
-> 6 |   const now = Date.now();
-    |               ^^^^^^^^^^ `Date.now` is an impure function.
-  7 |   const f = () => {
-  8 |     const array = makeArray(now);
-  9 |     const hasDate = identity(array);
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-function-call.js

@@ -1,14 +0,0 @@
-// @validateNoImpureFunctionsInRender
-
-import {identity, makeArray} from 'shared-runtime';
-
-function Component() {
-  const now = Date.now();
-  const f = () => {
-    const array = makeArray(now);
-    const hasDate = identity(array);
-    return hasDate;
-  };
-  const hasDate = f();
-  return <Foo hasDate={hasDate} />;
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-render-helper-typed.expect.md

@@ -1,50 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoImpureFunctionsInRender
-
-import {typedArrayPush, typedIdentity} from 'shared-runtime';
-
-function Component() {
-  const now = Date.now();
-  const renderItem = () => {
-    const array = [];
-    typedArrayPush(array, now());
-    const hasDate = typedIdentity(array);
-    return <Bar hasDate={hasDate} />;
-  };
-  return <Foo renderItem={renderItem} />;
-}
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot access impure value during render
-
-Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
-
-error.invalid-impure-functions-in-render-via-render-helper-typed.ts:13:26
-  11 |     return <Bar hasDate={hasDate} />;
-  12 |   };
-> 13 |   return <Foo renderItem={renderItem} />;
-     |                           ^^^^^^^^^^ Cannot access impure value during render
-  14 | }
-  15 |
-
-error.invalid-impure-functions-in-render-via-render-helper-typed.ts:6:14
-  4 |
-  5 | function Component() {
-> 6 |   const now = Date.now();
-    |               ^^^^^^^^^^ `Date.now` is an impure function.
-  7 |   const renderItem = () => {
-  8 |     const array = [];
-  9 |     typedArrayPush(array, now());
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-render-helper-typed.js

@@ -1,14 +0,0 @@
-// @validateNoImpureFunctionsInRender
-
-import {typedArrayPush, typedIdentity} from 'shared-runtime';
-
-function Component() {
-  const now = Date.now();
-  const renderItem = () => {
-    const array = [];
-    typedArrayPush(array, now());
-    const hasDate = typedIdentity(array);
-    return <Bar hasDate={hasDate} />;
-  };
-  return <Foo renderItem={renderItem} />;
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-render-helper.expect.md

@@ -1,49 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoImpureFunctionsInRender
-
-import {identity, makeArray} from 'shared-runtime';
-
-function Component() {
-  const now = Date.now();
-  const renderItem = () => {
-    const array = makeArray(now);
-    const hasDate = identity(array);
-    return <Bar hasDate={hasDate} />;
-  };
-  return <Foo renderItem={renderItem} />;
-}
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot access impure value during render
-
-Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
-
-error.invalid-impure-functions-in-render-via-render-helper.ts:12:26
-  10 |     return <Bar hasDate={hasDate} />;
-  11 |   };
-> 12 |   return <Foo renderItem={renderItem} />;
-     |                           ^^^^^^^^^^ Cannot access impure value during render
-  13 | }
-  14 |
-
-error.invalid-impure-functions-in-render-via-render-helper.ts:6:14
-  4 |
-  5 | function Component() {
-> 6 |   const now = Date.now();
-    |               ^^^^^^^^^^ `Date.now` is an impure function.
-  7 |   const renderItem = () => {
-  8 |     const array = makeArray(now);
-  9 |     const hasDate = identity(array);
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-render-helper.js

@@ -1,13 +0,0 @@
-// @validateNoImpureFunctionsInRender
-
-import {identity, makeArray} from 'shared-runtime';
-
-function Component() {
-  const now = Date.now();
-  const renderItem = () => {
-    const array = makeArray(now);
-    const hasDate = identity(array);
-    return <Bar hasDate={hasDate} />;
-  };
-  return <Foo renderItem={renderItem} />;
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render.expect.md

@@ -19,65 +19,41 @@ function Component() {
 ```
 Found 3 errors:
 
-Error: Cannot access impure value during render
+Error: Cannot call impure function during render
 
-Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
-
-error.invalid-impure-functions-in-render.ts:7:20
-  5 |   const now = performance.now();
-  6 |   const rand = Math.random();
-> 7 |   return <Foo date={date} now={now} rand={rand} />;
-    |                     ^^^^ Cannot access impure value during render
-  8 | }
-  9 |
+`Date.now` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
 
 error.invalid-impure-functions-in-render.ts:4:15
   2 |
   3 | function Component() {
 > 4 |   const date = Date.now();
-    |                ^^^^^^^^^^ `Date.now` is an impure function.
+    |                ^^^^^^^^^^ Cannot call impure function
   5 |   const now = performance.now();
   6 |   const rand = Math.random();
   7 |   return <Foo date={date} now={now} rand={rand} />;
 
-Error: Cannot access impure value during render
+Error: Cannot call impure function during render
 
-Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
-
-error.invalid-impure-functions-in-render.ts:7:31
-  5 |   const now = performance.now();
-  6 |   const rand = Math.random();
-> 7 |   return <Foo date={date} now={now} rand={rand} />;
-    |                                ^^^ Cannot access impure value during render
-  8 | }
-  9 |
+`performance.now` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
 
 error.invalid-impure-functions-in-render.ts:5:14
   3 | function Component() {
   4 |   const date = Date.now();
 > 5 |   const now = performance.now();
-    |               ^^^^^^^^^^^^^^^^^ `performance.now` is an impure function.
+    |               ^^^^^^^^^^^^^^^^^ Cannot call impure function
   6 |   const rand = Math.random();
   7 |   return <Foo date={date} now={now} rand={rand} />;
   8 | }
 
-Error: Cannot access impure value during render
+Error: Cannot call impure function during render
 
-Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
-
-error.invalid-impure-functions-in-render.ts:7:42
-  5 |   const now = performance.now();
-  6 |   const rand = Math.random();
-> 7 |   return <Foo date={date} now={now} rand={rand} />;
-    |                                           ^^^^ Cannot access impure value during render
-  8 | }
-  9 |
+`Math.random` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
 
 error.invalid-impure-functions-in-render.ts:6:15
   4 |   const date = Date.now();
   5 |   const now = performance.now();
 > 6 |   const rand = Math.random();
-    |                ^^^^^^^^^^^^^ `Math.random` is an impure function.
+    |                ^^^^^^^^^^^^^ Cannot call impure function
   7 |   return <Foo date={date} now={now} rand={rand} />;
   8 | }
   9 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-value-in-render-helper.expect.md

@@ -1,45 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoImpureFunctionsInRender
-function Component() {
-  const now = () => Date.now();
-  const render = () => {
-    return <div>{now()}</div>;
-  };
-  return <div>{render()}</div>;
-}
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot access impure value during render
-
-Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
-
-error.invalid-impure-value-in-render-helper.ts:5:17
-  3 |   const now = () => Date.now();
-  4 |   const render = () => {
-> 5 |     return <div>{now()}</div>;
-    |                  ^^^^^ Cannot access impure value during render
-  6 |   };
-  7 |   return <div>{render()}</div>;
-  8 | }
-
-error.invalid-impure-value-in-render-helper.ts:3:20
-  1 | // @validateNoImpureFunctionsInRender
-  2 | function Component() {
-> 3 |   const now = () => Date.now();
-    |                     ^^^^^^^^^^ `Date.now` is an impure function.
-  4 |   const render = () => {
-  5 |     return <div>{now()}</div>;
-  6 |   };
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-value-in-render-helper.js

@@ -1,8 +0,0 @@
-// @validateNoImpureFunctionsInRender
-function Component() {
-  const now = () => Date.now();
-  const render = () => {
-    return <div>{now()}</div>;
-  };
-  return <div>{render()}</div>;
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.expect.md

@@ -16,23 +16,15 @@ function Component({ref}) {
 ```
 Found 1 error:
 
-Error: Cannot access ref value during render
+Error: Cannot access refs during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
-error.invalid-read-ref-prop-in-render-destructure.ts:4:15
-  2 | function Component({ref}) {
-  3 |   const value = ref.current;
-> 4 |   return <div>{value}</div>;
-    |                ^^^^^ Ref value is used during render
-  5 | }
-  6 |
-
 error.invalid-read-ref-prop-in-render-destructure.ts:3:16
   1 | // @validateRefAccessDuringRender @compilationMode:"infer"
   2 | function Component({ref}) {
 > 3 |   const value = ref.current;
-    |                 ^^^^^^^^^^^ Ref is initially accessed
+    |                 ^^^^^^^^^^^ Cannot access ref value during render
   4 |   return <div>{value}</div>;
   5 | }
   6 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.expect.md

@@ -16,23 +16,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Cannot access ref value during render
+Error: Cannot access refs during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
-error.invalid-read-ref-prop-in-render-property-load.ts:4:15
-  2 | function Component(props) {
-  3 |   const value = props.ref.current;
-> 4 |   return <div>{value}</div>;
-    |                ^^^^^ Ref value is used during render
-  5 | }
-  6 |
-
 error.invalid-read-ref-prop-in-render-property-load.ts:3:16
   1 | // @validateRefAccessDuringRender @compilationMode:"infer"
   2 | function Component(props) {
 > 3 |   const value = props.ref.current;
-    |                 ^^^^^^^^^^^^^^^^^ Ref is initially accessed
+    |                 ^^^^^^^^^^^^^^^^^ Cannot access ref value during render
   4 |   return <div>{value}</div>;
   5 | }
   6 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-access-render-unary.expect.md

@@ -22,27 +22,57 @@ export const FIXTURE_ENTRYPOINT = {
 ## Error
 
 ```
-Found 1 error:
+Found 4 errors:
 
-Error: Cannot access ref value during render
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+  4 | component C() {
+  5 |   const r = useRef(null);
+> 6 |   const current = !r.current;
+    |                    ^^^^^^^^^ Cannot access ref value during render
+  7 |   return <div>{current}</div>;
+  8 | }
+  9 |
+
+To initialize a ref only once, check that the ref is null with the pattern `if (ref.current == null) { ref.current = ... }`
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+  4 | component C() {
+  5 |   const r = useRef(null);
+> 6 |   const current = !r.current;
+    |                   ^^^^^^^^^^ Cannot access ref value during render
+  7 |   return <div>{current}</div>;
+  8 | }
+  9 |
+
+Error: Cannot access refs during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
    5 |   const r = useRef(null);
    6 |   const current = !r.current;
 >  7 |   return <div>{current}</div>;
-     |                ^^^^^^^ Ref value is used during render
+     |                ^^^^^^^ Cannot access ref value during render
    8 | }
    9 |
   10 | export const FIXTURE_ENTRYPOINT = {
 
-  4 | component C() {
-  5 |   const r = useRef(null);
-> 6 |   const current = !r.current;
-    |                    ^^^^^^^^^ Ref is initially accessed
-  7 |   return <div>{current}</div>;
-  8 | }
-  9 |
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+   5 |   const r = useRef(null);
+   6 |   const current = !r.current;
+>  7 |   return <div>{current}</div>;
+     |                ^^^^^^^ Cannot access ref value during render
+   8 | }
+   9 |
+  10 | export const FIXTURE_ENTRYPOINT = {
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-in-callback-invoked-during-render.expect.md

@@ -20,27 +20,17 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Cannot access ref value during render
+Error: Cannot access refs during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
-error.invalid-ref-in-callback-invoked-during-render.ts:6:37
-  4 |   const renderItem = item => {
-  5 |     const current = ref.current;
-> 6 |     return <Foo item={item} current={current} />;
-    |                                      ^^^^^^^ Ref value is used during render
-  7 |   };
-  8 |   return <Items>{props.items.map(item => renderItem(item))}</Items>;
-  9 | }
-
-error.invalid-ref-in-callback-invoked-during-render.ts:5:20
-  3 |   const ref = useRef(null);
-  4 |   const renderItem = item => {
-> 5 |     const current = ref.current;
-    |                     ^^^^^^^^^^^ Ref is initially accessed
-  6 |     return <Foo item={item} current={current} />;
-  7 |   };
-  8 |   return <Items>{props.items.map(item => renderItem(item))}</Items>;
+error.invalid-ref-in-callback-invoked-during-render.ts:8:33
+   6 |     return <Foo item={item} current={current} />;
+   7 |   };
+>  8 |   return <Items>{props.items.map(item => renderItem(item))}</Items>;
+     |                                  ^^^^^^^^^^^^^^^^^^^^^^^^ Cannot access ref value during render
+   9 | }
+  10 |
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-value-as-props.expect.md

@@ -16,7 +16,7 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Cannot access ref value during render
+Error: Cannot access refs during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
@@ -24,7 +24,7 @@ error.invalid-ref-value-as-props.ts:4:19
   2 | function Component(props) {
   3 |   const ref = useRef(null);
 > 4 |   return <Foo ref={ref.current} />;
-    |                    ^^^^^^^^^^^ Ref value is used during render
+    |                    ^^^^^^^^^^^ Cannot access ref value during render
   5 | }
   6 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md

@@ -15,9 +15,22 @@ function Component(props) {
 ## Error
 
 ```
-Found 1 error:
+Found 2 errors:
 
-Error: Cannot access ref value during render
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-set-and-read-ref-during-render.ts:4:2
+  2 | function Component(props) {
+  3 |   const ref = useRef(null);
+> 4 |   ref.current = props.value;
+    |   ^^^^^^^^^^^ Cannot update ref during render
+  5 |   return ref.current;
+  6 | }
+  7 |
+
+Error: Cannot access refs during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
@@ -25,7 +38,7 @@ error.invalid-set-and-read-ref-during-render.ts:5:9
   3 |   const ref = useRef(null);
   4 |   ref.current = props.value;
 > 5 |   return ref.current;
-    |          ^^^^^^^^^^^ Ref value is used during render
+    |          ^^^^^^^^^^^ Cannot access ref value during render
   6 | }
   7 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md

@@ -15,9 +15,22 @@ function Component(props) {
 ## Error
 
 ```
-Found 1 error:
+Found 2 errors:
 
-Error: Cannot access ref value during render
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-set-and-read-ref-nested-property-during-render.ts:4:2
+  2 | function Component(props) {
+  3 |   const ref = useRef({inner: null});
+> 4 |   ref.current.inner = props.value;
+    |   ^^^^^^^^^^^ Cannot update ref during render
+  5 |   return ref.current.inner;
+  6 | }
+  7 |
+
+Error: Cannot access refs during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
@@ -25,15 +38,7 @@ error.invalid-set-and-read-ref-nested-property-during-render.ts:5:9
   3 |   const ref = useRef({inner: null});
   4 |   ref.current.inner = props.value;
 > 5 |   return ref.current.inner;
-    |          ^^^^^^^^^^^^^^^^^ Ref value is used during render
-  6 | }
-  7 |
-
-error.invalid-set-and-read-ref-nested-property-during-render.ts:5:9
-  3 |   const ref = useRef({inner: null});
-  4 |   ref.current.inner = props.value;
-> 5 |   return ref.current.inner;
-    |          ^^^^^^^^^^^ Ref is initially accessed
+    |          ^^^^^^^^^^^^^^^^^ Cannot access ref value during render
   6 | }
   7 |
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-arbitrary.expect.md

@@ -25,7 +25,19 @@ export const FIXTURE_ENTRYPOINT = {
 ## Error
 
 ```
-Found 1 error:
+Found 2 errors:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+   6 | component C() {
+   7 |   const r = useRef(DEFAULT_VALUE);
+>  8 |   if (r.current == DEFAULT_VALUE) {
+     |       ^^^^^^^^^ Cannot access ref value during render
+   9 |     r.current = 1;
+  10 |   }
+  11 | }
 
 Error: Cannot access refs during render
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-optional.expect.md

@@ -22,7 +22,7 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 Found 1 error:
 
-Error: Cannot access ref value during render
+Error: Cannot access refs during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
@@ -30,7 +30,7 @@ error.ref-optional.ts:5:9
   3 | function Component(props) {
   4 |   const ref = useRef();
 > 5 |   return ref?.current;
-    |          ^^^^^^^^^^^^ Ref value is used during render
+    |          ^^^^^^^^^^^^ Cannot access ref value during render
   6 | }
   7 |
   8 | export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-event-handler-wrapper.expect.md

@@ -38,24 +38,15 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 Found 1 error:
 
-Error: Cannot access ref value during render
+Error: Cannot access refs during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
-error.ref-value-in-event-handler-wrapper.ts:19:6
-  17 |     <>
-  18 |       <input ref={ref} />
-> 19 |       <button onClick={handleClick(ref.current)}>Click</button>
-     |       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Ref value is used during render
-  20 |     </>
-  21 |   );
-  22 | }
-
 error.ref-value-in-event-handler-wrapper.ts:19:35
   17 |     <>
   18 |       <input ref={ref} />
 > 19 |       <button onClick={handleClick(ref.current)}>Click</button>
-     |                                    ^^^^^^^^^^^ Ref is initially accessed
+     |                                    ^^^^^^^^^^^ Cannot access ref value during render
   20 |     </>
   21 |   );
   22 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateExhaustiveMemoizationDependencies @validateRefAccessDuringRender:false
+// @validateExhaustiveMemoizationDependencies
 import {useMemo} from 'react';
 import {Stringify} from 'shared-runtime';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps.js

@@ -1,4 +1,4 @@
-// @validateExhaustiveMemoizationDependencies @validateRefAccessDuringRender:false
+// @validateExhaustiveMemoizationDependencies
 import {useMemo} from 'react';
 import {Stringify} from 'shared-runtime';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-impure-functions-in-render.expect.md

@@ -19,65 +19,41 @@ function Component() {
 ```
 Found 3 errors:
 
-Error: Cannot access impure value during render
+Error: Cannot call impure function during render
 
-Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
-
-error.invalid-impure-functions-in-render.ts:7:20
-  5 |   const now = performance.now();
-  6 |   const rand = Math.random();
-> 7 |   return <Foo date={date} now={now} rand={rand} />;
-    |                     ^^^^ Cannot access impure value during render
-  8 | }
-  9 |
+`Date.now` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
 
 error.invalid-impure-functions-in-render.ts:4:15
   2 |
   3 | function Component() {
 > 4 |   const date = Date.now();
-    |                ^^^^^^^^^^ `Date.now` is an impure function.
+    |                ^^^^^^^^^^ Cannot call impure function
   5 |   const now = performance.now();
   6 |   const rand = Math.random();
   7 |   return <Foo date={date} now={now} rand={rand} />;
 
-Error: Cannot access impure value during render
+Error: Cannot call impure function during render
 
-Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
-
-error.invalid-impure-functions-in-render.ts:7:31
-  5 |   const now = performance.now();
-  6 |   const rand = Math.random();
-> 7 |   return <Foo date={date} now={now} rand={rand} />;
-    |                                ^^^ Cannot access impure value during render
-  8 | }
-  9 |
+`performance.now` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
 
 error.invalid-impure-functions-in-render.ts:5:14
   3 | function Component() {
   4 |   const date = Date.now();
 > 5 |   const now = performance.now();
-    |               ^^^^^^^^^^^^^^^^^ `performance.now` is an impure function.
+    |               ^^^^^^^^^^^^^^^^^ Cannot call impure function
   6 |   const rand = Math.random();
   7 |   return <Foo date={date} now={now} rand={rand} />;
   8 | }
 
-Error: Cannot access impure value during render
+Error: Cannot call impure function during render
 
-Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
-
-error.invalid-impure-functions-in-render.ts:7:42
-  5 |   const now = performance.now();
-  6 |   const rand = Math.random();
-> 7 |   return <Foo date={date} now={now} rand={rand} />;
-    |                                           ^^^^ Cannot access impure value during render
-  8 | }
-  9 |
+`Math.random` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
 
 error.invalid-impure-functions-in-render.ts:6:15
   4 |   const date = Date.now();
   5 |   const now = performance.now();
 > 6 |   const rand = Math.random();
-    |                ^^^^^^^^^^^^^ `Math.random` is an impure function.
+    |                ^^^^^^^^^^^^^ Cannot call impure function
   7 |   return <Foo date={date} now={now} rand={rand} />;
   8 | }
   9 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.expect.md

@@ -6,7 +6,7 @@
 
 import {useRef} from 'react';
 
-hook useFoo() {
+component Foo() {
   const ref = useRef();
 
   const s = () => {
@@ -16,10 +16,6 @@ hook useFoo() {
   return s;
 }
 
-component Foo() {
-  useFoo();
-}
-
 export const FIXTURE_ENTRYPOINT = {
   fn: Foo,
   params: [],
@@ -34,7 +30,7 @@ import { c as _c } from "react/compiler-runtime";
 
 import { useRef } from "react";
 
-function useFoo() {
+function Foo() {
   const $ = _c(1);
   const ref = useRef();
   let t0;
@@ -48,10 +44,6 @@ function useFoo() {
   return s;
 }
 
-function Foo() {
-  useFoo();
-}
-
 export const FIXTURE_ENTRYPOINT = {
   fn: Foo,
   params: [],
@@ -60,4 +52,4 @@ export const FIXTURE_ENTRYPOINT = {
 ```
       
 ### Eval output
-(kind: ok) 
+(kind: ok) "[[ function params=0 ]]"

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.js

@@ -2,7 +2,7 @@
 
 import {useRef} from 'react';
 
-hook useFoo() {
+component Foo() {
   const ref = useRef();
 
   const s = () => {
@@ -12,10 +12,6 @@ hook useFoo() {
   return s;
 }
 
-component Foo() {
-  useFoo();
-}
-
 export const FIXTURE_ENTRYPOINT = {
   fn: Foo,
   params: [],

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-ref-current-access.expect.md

@@ -25,40 +25,22 @@ component Component(prop1, ref) {
 ## Code
 
 ```javascript
-import { c as _c, useFire } from "react/compiler-runtime";
+import { useFire } from "react/compiler-runtime";
 import { fire } from "react";
 import { print } from "shared-runtime";
 
 const Component = React.forwardRef(Component_withRef);
 function Component_withRef(t0, ref) {
-  const $ = _c(5);
   const { prop1 } = t0;
-  let t1;
-  if ($[0] !== prop1) {
-    t1 = () => {
-      console.log(prop1);
-    };
-    $[0] = prop1;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  const foo = t1;
-  const t2 = useFire(foo);
-  let t3;
-  if ($[2] !== prop1 || $[3] !== t2) {
-    t3 = () => {
-      t2(prop1);
-      bar();
-      t2();
-    };
-    $[2] = prop1;
-    $[3] = t2;
-    $[4] = t3;
-  } else {
-    t3 = $[4];
-  }
-  useEffect(t3);
+  const foo = () => {
+    console.log(prop1);
+  };
+  const t1 = useFire(foo);
+  useEffect(() => {
+    t1(prop1);
+    bar();
+    t1();
+  });
   print(ref.current);
   return null;
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-use-impure-value-in-ref.expect.md

@@ -1,49 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoImpureFunctionsInRender
-import {useIdentity} from 'shared-runtime';
-
-function Component() {
-  const f = () => Math.random();
-  const ref = useRef(f());
-  return <div ref={ref} />;
-}
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoImpureFunctionsInRender
-import { useIdentity } from "shared-runtime";
-
-function Component() {
-  const $ = _c(2);
-  const f = _temp;
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = f();
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  const ref = useRef(t0);
-  let t1;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = <div ref={ref} />;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  return t1;
-}
-function _temp() {
-  return Math.random();
-}
-
-```
-      
-### Eval output
-(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-use-impure-value-in-ref.js

@@ -1,8 +0,0 @@
-// @validateNoImpureFunctionsInRender
-import {useIdentity} from 'shared-runtime';
-
-function Component() {
-  const f = () => Math.random();
-  const ref = useRef(f());
-  return <div ref={ref} />;
-}

compiler/packages/eslint-plugin-react-compiler/__tests__/ImpureFunctionCallsRule-test.ts

@@ -29,9 +29,9 @@ testRule(
       }
     `,
         errors: [
-          makeTestCaseError('Cannot access impure value during render'),
-          makeTestCaseError('Cannot access impure value during render'),
-          makeTestCaseError('Cannot access impure value during render'),
+          makeTestCaseError('Cannot call impure function during render'),
+          makeTestCaseError('Cannot call impure function during render'),
+          makeTestCaseError('Cannot call impure function during render'),
         ],
       },
     ],

packages/react-devtools-shared/src/__tests__/profilerContext-test.js

@@ -654,7 +654,7 @@ describe('ProfilerContext', () => {
     expect(store.profilerStore.isProfilingBasedOnUserInput).toBe(false);
 
     document.body.removeChild(profilerContainer);
-  }, 20000);
+  });
 
   it('should navigate between commits when the keyboard shortcut is pressed', async () => {
     const Parent = () => <Child />;

packages/react-devtools-shared/src/__tests__/store-test.js

@@ -3143,59 +3143,6 @@ describe('Store', () => {
     expect(store).toMatchInlineSnapshot(``);
   });
 
-  // @reactVersion >= 17.0
-  it('should track suspended by in filtered fallback', async () => {
-    function IgnoreMe({promise}) {
-      return readValue(promise);
-    }
-
-    function Component({promise}) {
-      return readValue(promise);
-    }
-
-    await actAsync(
-      async () =>
-        (store.componentFilters = [createDisplayNameFilter('^IgnoreMe', true)]),
-    );
-
-    let resolveFallback;
-    const fallbackPromise = new Promise(resolve => {
-      resolveFallback = resolve;
-    });
-    let resolveContent;
-    const contentPromise = new Promise(resolve => {
-      resolveContent = resolve;
-    });
-
-    await actAsync(() =>
-      render(
-        <React.Suspense
-          name="main"
-          fallback={<IgnoreMe promise={fallbackPromise} />}>
-          <Component promise={contentPromise} />
-        </React.Suspense>,
-      ),
-    );
-    expect(store).toMatchInlineSnapshot(``);
-
-    await actAsync(() => resolveFallback('loading'));
-    expect(store).toMatchInlineSnapshot(`
-      [root]
-          <Suspense name="main">
-      [suspense-root]  rects={null}
-        <Suspense name="main" rects={null}>
-    `);
-
-    await actAsync(() => resolveContent('content'));
-    expect(store).toMatchInlineSnapshot(`
-      [root]
-        ▾ <Suspense name="main">
-            <Component>
-      [suspense-root]  rects={null}
-        <Suspense name="main" rects={null}>
-    `);
-  });
-
   // @reactVersion >= 19
   it('should keep suspended boundaries in the Suspense tree but not hidden Activity', async () => {
     const Activity = React.Activity || React.unstable_Activity;

packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -2992,30 +2992,6 @@ export function attach(
     ) {
       parentInstance = parentInstance.parent;
     }
-    if (parentInstance.kind === FIBER_INSTANCE) {
-      const fiber = parentInstance.data;
-
-      if (
-        fiber.tag === SuspenseComponent &&
-        parentInstance !== parentSuspenseNode.instance
-      ) {
-        // We're about to attach async info to a Suspense boundary we're not
-        // actually considering the parent Suspense boundary for this async info.
-        // We must have not found a suitable Fiber inside the fallback (e.g. due to filtering).
-        // Use the parent of this instance instead since we treat async info
-        // attached to a Suspense boundary as that async info triggering the
-        // fallback of that boundary.
-        const parent = parentInstance.parent;
-        if (parent === null) {
-          // This shouldn't happen. Any <Suspense> would have at least have the
-          // host root as the parent which can't have a fallback.
-          throw new Error(
-            'Did not find a suitable instance for this async info. This is a bug in React.',
-          );
-        }
-        parentInstance = parent;
-      }
-    }
 
     const suspenseNodeSuspendedBy = parentSuspenseNode.suspendedBy;
     const ioInfo = asyncInfo.awaited;
@@ -5279,9 +5255,9 @@ export function attach(
       // It might even result in a bad user experience for e.g. node selection in the Elements panel.
       // The easiest fix is to strip out the intermediate Fragment fibers,
       // so the Elements panel and Profiler don't need to special case them.
+      // Suspense components only have a non-null memoizedState if they're timed-out.
       const isLegacySuspense =
         nextFiber.tag === SuspenseComponent && OffscreenComponent === -1;
-      // Suspense components only have a non-null memoizedState if they're timed-out.
       const prevDidTimeout =
         isLegacySuspense && prevFiber.memoizedState !== null;
       const nextDidTimeOut =

packages/react-dom-bindings/src/events/plugins/FormActionEventPlugin.js

@@ -45,6 +45,30 @@ function coerceFormActionProp(
   }
 }
 
+function createFormDataWithSubmitter(
+  form: HTMLFormElement,
+  submitter: HTMLInputElement | HTMLButtonElement,
+) {
+  // The submitter's value should be included in the FormData.
+  // It should be in the document order in the form.
+  // Since the FormData constructor invokes the formdata event it also
+  // needs to be available before that happens so after construction it's too
+  // late. We use a temporary fake node for the duration of this event.
+  // TODO: FormData takes a second argument that it's the submitter but this
+  // is fairly new so not all browsers support it yet. Switch to that technique
+  // when available.
+  const temp = submitter.ownerDocument.createElement('input');
+  temp.name = submitter.name;
+  temp.value = submitter.value;
+  if (form.id) {
+    temp.setAttribute('form', form.id);
+  }
+  (submitter.parentNode: any).insertBefore(temp, submitter);
+  const formData = new FormData(form);
+  (temp.parentNode: any).removeChild(temp);
+  return formData;
+}
+
 /**
  * This plugin invokes action functions on forms, inputs and buttons if
  * the form doesn't prevent default.
@@ -105,7 +129,9 @@ function extractEvents(
       if (didCurrentEventScheduleTransition()) {
         // We're going to set the pending form status, but because the submission
         // was prevented, we should not fire the action function.
-        const formData = new FormData(form, submitter);
+        const formData = submitter
+          ? createFormDataWithSubmitter(form, submitter)
+          : new FormData(form);
         const pendingState: FormStatus = {
           pending: true,
           data: formData,
@@ -134,7 +160,9 @@ function extractEvents(
       event.preventDefault();
 
       // Dispatch the action and set a pending form status.
-      const formData = new FormData(form, submitter);
+      const formData = submitter
+        ? createFormDataWithSubmitter(form, submitter)
+        : new FormData(form);
       const pendingState: FormStatus = {
         pending: true,
         data: formData,

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetInlineCodeStrings.js

@@ -14,4 +14,4 @@ export const completeBoundaryWithStyles =
 export const completeSegment =
   '$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};';
 export const formReplaying =
-  'addEventListener("submit",function(a){if(!a.defaultPrevented){var b=a.target,d=a.submitter,c=b.action,e=d;if(d){var f=d.getAttribute("formAction");null!=f&&(c=f,e=null)}"javascript:throw new Error(\'React form unexpectedly submitted.\')"===c&&(a.preventDefault(),a=new FormData(b,e),c=b.ownerDocument||b,(c.$$reactFormReplay=c.$$reactFormReplay||[]).push(b,d,a))}});';
+  'addEventListener("submit",function(a){if(!a.defaultPrevented){var c=a.target,d=a.submitter,e=c.action,b=d;if(d){var f=d.getAttribute("formAction");null!=f&&(e=f,b=null)}"javascript:throw new Error(\'React form unexpectedly submitted.\')"===e&&(a.preventDefault(),b?(a=document.createElement("input"),a.name=b.name,a.value=b.value,b.parentNode.insertBefore(a,b),b=new FormData(c),a.parentNode.removeChild(a)):b=new FormData(c),a=c.ownerDocument||c,(a.$$reactFormReplay=a.$$reactFormReplay||[]).push(c,d,b))}});';

packages/react-dom-bindings/src/server/fizz-instruction-set/ReactDOMFizzInstructionSetShared.js

@@ -634,7 +634,25 @@ export function listenToFormSubmissionsForReplaying() {
     event.preventDefault();
 
     // Take a snapshot of the FormData at the time of the event.
-    const formData = new FormData(form, formDataSubmitter);
+    let formData;
+    if (formDataSubmitter) {
+      // The submitter's value should be included in the FormData.
+      // It should be in the document order in the form.
+      // Since the FormData constructor invokes the formdata event it also
+      // needs to be available before that happens so after construction it's too
+      // late. We use a temporary fake node for the duration of this event.
+      // TODO: FormData takes a second argument that it's the submitter but this
+      // is fairly new so not all browsers support it yet. Switch to that technique
+      // when available.
+      const temp = document.createElement('input');
+      temp.name = formDataSubmitter.name;
+      temp.value = formDataSubmitter.value;
+      formDataSubmitter.parentNode.insertBefore(temp, formDataSubmitter);
+      formData = new FormData(form);
+      temp.parentNode.removeChild(temp);
+    } else {
+      formData = new FormData(form);
+    }
 
     // Queue for replaying later. This field could potentially be shared with multiple
     // Reacts on the same page since each one will preventDefault for the next one.

packages/react-dom/src/__tests__/ReactDOMForm-test.js

@@ -14,8 +14,8 @@ global.IS_REACT_ACT_ENVIRONMENT = true;
 // Our current version of JSDOM doesn't implement the event dispatching
 // so we polyfill it.
 const NativeFormData = global.FormData;
-const FormDataPolyfill = function FormData(form, submitter) {
-  const formData = new NativeFormData(form, submitter);
+const FormDataPolyfill = function FormData(form) {
+  const formData = new NativeFormData(form);
   const formDataEvent = new Event('formdata', {
     bubbles: true,
     cancelable: false,
@@ -489,16 +489,11 @@ describe('ReactDOMForm', () => {
     const inputRef = React.createRef();
     const buttonRef = React.createRef();
     const outsideButtonRef = React.createRef();
-    const imageButtonRef = React.createRef();
     let button;
-    let buttonX;
-    let buttonY;
     let title;
 
     function action(formData) {
       button = formData.get('button');
-      buttonX = formData.get('button.x');
-      buttonY = formData.get('button.y');
       title = formData.get('title');
     }
 
@@ -513,12 +508,6 @@ describe('ReactDOMForm', () => {
             <button name="button" value="edit" ref={buttonRef}>
               Edit
             </button>
-            <input
-              type="image"
-              name="button"
-              href="/some/image.png"
-              ref={imageButtonRef}
-            />
           </form>
           <form id="form" action={action}>
             <input type="text" name="title" defaultValue="hello" />
@@ -557,12 +546,9 @@ describe('ReactDOMForm', () => {
     expect(button).toBe('outside');
     expect(title).toBe('hello');
 
-    await submit(imageButtonRef.current);
-
-    expect(button).toBe(null);
-    expect(buttonX).toBe('0');
-    expect(buttonY).toBe('0');
-    expect(title).toBe('hello');
+    // Ensure that the type field got correctly restored
+    expect(inputRef.current.getAttribute('type')).toBe('submit');
+    expect(buttonRef.current.getAttribute('type')).toBe(null);
   });
 
   it('excludes the submitter name when the submitter is a function action', async () => {

packages/react-reconciler/src/__tests__/ReactUse-test.js

@@ -2189,4 +2189,68 @@ describe('ReactUse', () => {
       expect(root).toMatchRenderedOutput('Updated');
     },
   );
+
+  it('regression: does not get stuck after resolving nested Suspense', async () => {
+    let resolve;
+    const promiseA = Promise.resolve({
+      text: 'A',
+      inner: new Promise(r => {
+        resolve = r;
+      }),
+    });
+    const promiseB = Promise.resolve({
+      text: 'B',
+      inner: new Promise(() => {}),
+    });
+
+    function AsyncOuter({promise}) {
+      const data = use(promise);
+      return (
+        <>
+          <Text text={data.text} />
+          <Suspense fallback={<Text text="(loading inner)" />}>
+            <AsyncInner promise={data.inner} />
+          </Suspense>
+        </>
+      );
+    }
+
+    function AsyncInner({promise}) {
+      use(promise);
+      return <Text text="(inner)" />;
+    }
+
+    let update;
+    function App() {
+      const [promise, setPromise] = useState(promiseA);
+      update = setPromise;
+      return (
+        <Suspense fallback={<Text text="(loading outer)" />}>
+          <AsyncOuter promise={promise} />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+    assertLog(['A', '(loading inner)']);
+    expect(root).toMatchRenderedOutput('A(loading inner)');
+
+    // Resolve inner data
+    await act(() => resolve());
+    assertLog(['(inner)']);
+    expect(root).toMatchRenderedOutput('A(inner)');
+
+    // Switch to B. Should show B, but inner is pending again.
+    // BUG: The UI gets stuck on A.
+    await act(() => {
+      startTransition(() => update(promiseB));
+    });
+    assertLog(['B', '(loading inner)']);
+    expect(root).toMatchRenderedOutput('B(loading inner)');
+  });
 });

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js

@@ -121,7 +121,17 @@ describe('ReactFlightDOMForm', () => {
       const method = (submitter && submitter.formMethod) || form.method;
       const encType = (submitter && submitter.formEnctype) || form.enctype;
       if (method === 'post' && encType === 'multipart/form-data') {
-        const formData = new FormData(form, submitter);
+        let formData;
+        if (submitter) {
+          const temp = document.createElement('input');
+          temp.name = submitter.name;
+          temp.value = submitter.value;
+          submitter.parentNode.insertBefore(temp, submitter);
+          formData = new FormData(form);
+          temp.parentNode.removeChild(temp);
+        } else {
+          formData = new FormData(form);
+        }
         return POST(formData);
       }
       throw new Error('Navigate to: ' + action);

scripts/jest/config.base.js

@@ -2,7 +2,6 @@
 
 module.exports = {
   globalSetup: require.resolve('./setupGlobal.js'),
-  testSequencer: require.resolve('./sizeBalancedSequencer.js'),
   modulePathIgnorePatterns: [
     '<rootDir>/scripts/rollup/shims/',
     '<rootDir>/scripts/bench/',

scripts/jest/sizeBalancedSequencer.js

@@ -1,28 +0,0 @@
-'use strict';
-
-const Sequencer = require('@jest/test-sequencer').default;
-const fs = require('fs');
-
-class SizeBalancedSequencer extends Sequencer {
-  shard(tests, {shardIndex, shardCount}) {
-    const shards = Array.from({length: shardCount}, () => ({
-      tests: [],
-      size: 0,
-    }));
-    const sorted = [...tests].sort(
-      (a, b) => fs.statSync(b.path).size - fs.statSync(a.path).size
-    );
-
-    for (let i = 0; i < sorted.length; i++) {
-      const test = sorted[i];
-      const size = fs.statSync(test.path).size;
-      const smallest = shards.reduce((min, s) => (s.size < min.size ? s : min));
-      smallest.tests.push(test);
-      smallest.size += size;
-    }
-
-    return shards[shardIndex - 1].tests;
-  }
-}
-
-module.exports = SizeBalancedSequencer;