[compiler] Improved ref validation for non-mutating functions

If a function is known to freeze its inputs, and captures refs, then we can safely assume those refs are not mutated during render.

An example is React Native's PanResponder, which is designed for use in interaction handling. Calling `PanResponder.create()` creates an object that shouldn't be interacted with at render time, so we can treat it as freezing its arguments, returning a frozen value, and not accessing any refs in the callbacks passed to it. ValidateNoRefAccessInRender is updated accordingly - if we see a Freeze <place> and ImmutableCapture <place> for the same place in the same instruction, we know that it's not being mutated.

Note that this is a pretty targeted fix. One weakness is that we may not always emit a Freeze effect if a value is already frozen, which could cause this optimization not to kick in. The worst case there is that you'd just get a ref access in render error though, not miscompilation. And we could always choose to always emit Freeze effects, even for frozen values, just to retain the information for validations like this.

compiler/CLAUDE.md

@@ -35,6 +35,20 @@ yarn snap -p <file-basename> -d
 yarn snap -u
 ```
 
+## Linting
+
+```bash
+# Run lint on the compiler source
+yarn workspace babel-plugin-react-compiler lint
+```
+
+## Formatting
+
+```bash
+# Run prettier on all files (from the react root directory, not compiler/)
+yarn prettier-all
+```
+
 ## Compiling Arbitrary Files
 
 Use `yarn snap compile` to compile any file (not just fixtures) with the React Compiler:
@@ -229,20 +243,19 @@ Would enable the `enableJsxOutlining` feature and disable the `enableNameAnonymo
 3. Look for `Impure`, `Render`, `Capture` effects on instructions
 4. Check the pass ordering in Pipeline.ts to understand when effects are populated vs validated
 
-## Error Handling for Unsupported Features
+## Error Handling and Fault Tolerance
 
-When the compiler encounters an unsupported but known pattern, use `CompilerError.throwTodo()` instead of `CompilerError.invariant()`. Todo errors cause graceful bailouts in production; Invariant errors are hard failures indicating unexpected/invalid states.
+The compiler is fault-tolerant: it runs all passes and accumulates errors on the `Environment` rather than throwing on the first error. This lets users see all compilation errors at once.
 
-```typescript
-// Unsupported but expected pattern - graceful bailout
-CompilerError.throwTodo({
-  reason: `Support [description of unsupported feature]`,
-  loc: terminal.loc,
-});
+**Recording errors** — Passes record errors via `env.recordError(diagnostic)`. Errors are accumulated on `Environment.#errors` and checked at the end of the pipeline via `env.hasErrors()` / `env.aggregateErrors()`.
 
-// Invariant is for truly unexpected/invalid states - hard failure
-CompilerError.invariant(false, {
-  reason: `Unexpected [thing]`,
-  loc: terminal.loc,
-});
-```
+**`tryRecord()` wrapper** — In Pipeline.ts, validation passes are wrapped in `env.tryRecord(() => pass(hir))` which catches thrown `CompilerError`s (non-invariant) and records them. Infrastructure/transformation passes are NOT wrapped in `tryRecord()` because later passes depend on their output being structurally valid.
+
+**Error categories:**
+- `CompilerError.throwTodo()` — Unsupported but known pattern. Graceful bailout. Can be caught by `tryRecord()`.
+- `CompilerError.invariant()` — Truly unexpected/invalid state. Always throws immediately, never caught by `tryRecord()`.
+- Non-`CompilerError` exceptions — Always re-thrown.
+
+**Key files:** `Environment.ts` (`recordError`, `tryRecord`, `hasErrors`, `aggregateErrors`), `Pipeline.ts` (pass orchestration), `Program.ts` (`tryCompileFunction` handles the `Result`).
+
+**Test fixtures:** `__tests__/fixtures/compiler/fault-tolerance/` contains multi-error fixtures verifying all errors are reported.

compiler/packages/babel-plugin-react-compiler/docs/passes/README.md

@@ -302,6 +302,15 @@ yarn snap minimize <path>
 yarn snap -u
 ```
 
+## Fault Tolerance
+
+The pipeline is fault-tolerant: all passes run to completion, accumulating errors on `Environment` rather than aborting on the first error.
+
+- **Validation passes** are wrapped in `env.tryRecord()` in Pipeline.ts, which catches non-invariant `CompilerError`s and records them. If a validation pass throws, compilation continues.
+- **Infrastructure/transformation passes** (enterSSA, eliminateRedundantPhi, inferMutationAliasingEffects, codegen, etc.) are NOT wrapped in `tryRecord()` because subsequent passes depend on their output being structurally valid. If they fail, compilation aborts.
+- **`lower()` (BuildHIR)** always produces an `HIRFunction`, recording errors on `env` instead of returning `Err`. Unsupported constructs (e.g., `var`) are lowered best-effort.
+- At the end of the pipeline, `env.hasErrors()` determines whether to return `Ok(codegen)` or `Err(aggregatedErrors)`.
+
 ## Further Reading
 
 - [MUTABILITY_ALIASING_MODEL.md](../../src/Inference/MUTABILITY_ALIASING_MODEL.md): Detailed aliasing model docs

compiler/packages/babel-plugin-react-compiler/src/Babel/BabelPlugin.ts

@@ -11,7 +11,6 @@ import {
   injectReanimatedFlag,
   pipelineUsesReanimatedPlugin,
 } from '../Entrypoint/Reanimated';
-import validateNoUntransformedReferences from '../Entrypoint/ValidateNoUntransformedReferences';
 import {CompilerError} from '..';
 
 const ENABLE_REACT_COMPILER_TIMINGS =
@@ -64,19 +63,12 @@ export default function BabelPluginReactCompiler(
                 },
               };
             }
-            const result = compileProgram(prog, {
+            compileProgram(prog, {
               opts,
               filename: pass.filename ?? null,
               comments: pass.file.ast.comments ?? [],
               code: pass.file.code,
             });
-            validateNoUntransformedReferences(
-              prog,
-              pass.filename ?? null,
-              opts.logger,
-              opts.environment,
-              result,
-            );
             if (ENABLE_REACT_COMPILER_TIMINGS === true) {
               performance.mark(`${filename}:end`, {
                 detail: 'BabelPlugin:Program:end',

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

@@ -19,7 +19,7 @@ import {getOrInsertWith} from '../Utils/utils';
 import {ExternalFunction, isHookName} from '../HIR/Environment';
 import {Err, Ok, Result} from '../Utils/Result';
 import {LoggerEvent, ParsedPluginOptions} from './Options';
-import {BabelFn, getReactCompilerRuntimeModule} from './Program';
+import {getReactCompilerRuntimeModule} from './Program';
 import {SuppressionRange} from './Suppression';
 
 export function validateRestrictedImports(
@@ -84,11 +84,6 @@ export class ProgramContext {
   // generated imports
   imports: Map<string, Map<string, NonLocalImportSpecifier>> = new Map();
 
-  /**
-   * Metadata from compilation
-   */
-  retryErrors: Array<{fn: BabelFn; error: CompilerError}> = [];
-
   constructor({
     program,
     suppressions,

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

@@ -228,8 +228,6 @@ const CompilerOutputModeSchema = z.enum([
   'ssr',
   // Build optimized for the client, with auto memoization
   'client',
-  // Build optimized for the client without auto memo
-  'client-no-memo',
   // Lint mode, the output is unused but validations should run
   'lint',
 ]);
@@ -254,6 +252,7 @@ export type LoggerEvent =
   | CompileErrorEvent
   | CompileDiagnosticEvent
   | CompileSkipEvent
+  | CompileUnexpectedThrowEvent
   | PipelineErrorEvent
   | TimingEvent;
 
@@ -288,6 +287,11 @@ export type PipelineErrorEvent = {
   fnLoc: t.SourceLocation | null;
   data: string;
 };
+export type CompileUnexpectedThrowEvent = {
+  kind: 'CompileUnexpectedThrow';
+  fnLoc: t.SourceLocation | null;
+  data: string;
+};
 export type TimingEvent = {
   kind: 'Timing';
   measurement: PerformanceMeasure;

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

@@ -9,6 +9,8 @@ import {NodePath} from '@babel/traverse';
 import * as t from '@babel/types';
 import prettyFormat from 'pretty-format';
 import {CompilerOutputMode, Logger, ProgramContext} from '.';
+import {CompilerError} from '../CompilerError';
+import {Err, Ok, Result} from '../Utils/Result';
 import {
   HIRFunction,
   ReactiveFunction,
@@ -89,7 +91,6 @@ import {validateNoJSXInTryStatement} from '../Validation/ValidateNoJSXInTryState
 import {propagateScopeDependenciesHIR} from '../HIR/PropagateScopeDependenciesHIR';
 import {outlineJSX} from '../Optimization/OutlineJsx';
 import {optimizePropsMethodCalls} from '../Optimization/OptimizePropsMethodCalls';
-import {validateNoImpureFunctionsInRender} from '../Validation/ValidateNoImpureFunctionsInRender';
 import {validateStaticComponents} from '../Validation/ValidateStaticComponents';
 import {validateNoFreezingKnownMutableFunctions} from '../Validation/ValidateNoFreezingKnownMutableFunctions';
 import {inferMutationAliasingEffects} from '../Inference/InferMutationAliasingEffects';
@@ -118,7 +119,7 @@ function run(
   logger: Logger | null,
   filename: string | null,
   code: string | null,
-): CodegenFunction {
+): Result<CodegenFunction, CompilerError> {
   const contextIdentifiers = findContextIdentifiers(func);
   const env = new Environment(
     func.scope,
@@ -149,21 +150,21 @@ function runWithEnvironment(
     t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
   >,
   env: Environment,
-): CodegenFunction {
+): Result<CodegenFunction, CompilerError> {
   const log = (value: CompilerPipelineValue): void => {
     env.logger?.debugLogIRs?.(value);
   };
-  const hir = lower(func, env).unwrap();
+  const hir = lower(func, env);
   log({kind: 'hir', name: 'HIR', value: hir});
 
   pruneMaybeThrows(hir);
   log({kind: 'hir', name: 'PruneMaybeThrows', value: hir});
 
   validateContextVariableLValues(hir);
-  validateUseMemo(hir).unwrap();
+  validateUseMemo(hir);
 
   if (env.enableDropManualMemoization) {
-    dropManualMemoization(hir).unwrap();
+    dropManualMemoization(hir);
     log({kind: 'hir', name: 'DropManualMemoization', value: hir});
   }
 
@@ -196,10 +197,10 @@ function runWithEnvironment(
 
   if (env.enableValidations) {
     if (env.config.validateHooksUsage) {
-      validateHooksUsage(hir).unwrap();
+      validateHooksUsage(hir);
     }
     if (env.config.validateNoCapitalizedCalls) {
-      validateNoCapitalizedCalls(hir).unwrap();
+      validateNoCapitalizedCalls(hir);
     }
   }
 
@@ -209,13 +210,8 @@ function runWithEnvironment(
   analyseFunctions(hir);
   log({kind: 'hir', name: 'AnalyseFunctions', value: hir});
 
-  const mutabilityAliasingErrors = inferMutationAliasingEffects(hir);
+  inferMutationAliasingEffects(hir);
   log({kind: 'hir', name: 'InferMutationAliasingEffects', value: hir});
-  if (env.enableValidations) {
-    if (mutabilityAliasingErrors.isErr()) {
-      throw mutabilityAliasingErrors.unwrapErr();
-    }
-  }
 
   if (env.outputMode === 'ssr') {
     optimizeForSSR(hir);
@@ -228,28 +224,23 @@ function runWithEnvironment(
   pruneMaybeThrows(hir);
   log({kind: 'hir', name: 'PruneMaybeThrows', value: hir});
 
-  const mutabilityAliasingRangeErrors = inferMutationAliasingRanges(hir, {
+  inferMutationAliasingRanges(hir, {
     isFunctionExpression: false,
   });
   log({kind: 'hir', name: 'InferMutationAliasingRanges', value: hir});
   if (env.enableValidations) {
-    if (mutabilityAliasingRangeErrors.isErr()) {
-      throw mutabilityAliasingRangeErrors.unwrapErr();
-    }
     validateLocalsNotReassignedAfterRender(hir);
-  }
 
-  if (env.enableValidations) {
     if (env.config.assertValidMutableRanges) {
       assertValidMutableRanges(hir);
     }
 
     if (env.config.validateRefAccessDuringRender) {
-      validateNoRefAccessInRender(hir).unwrap();
+      validateNoRefAccessInRender(hir);
     }
 
     if (env.config.validateNoSetStateInRender) {
-      validateNoSetStateInRender(hir).unwrap();
+      validateNoSetStateInRender(hir);
     }
 
     if (
@@ -269,11 +260,7 @@ function runWithEnvironment(
       env.logErrors(validateNoJSXInTryStatement(hir));
     }
 
-    if (env.config.validateNoImpureFunctionsInRender) {
-      validateNoImpureFunctionsInRender(hir).unwrap();
-    }
-
-    validateNoFreezingKnownMutableFunctions(hir).unwrap();
+    validateNoFreezingKnownMutableFunctions(hir);
   }
 
   inferReactivePlaces(hir);
@@ -285,7 +272,7 @@ function runWithEnvironment(
       env.config.validateExhaustiveEffectDependencies
     ) {
       // NOTE: this relies on reactivity inference running first
-      validateExhaustiveDependencies(hir).unwrap();
+      validateExhaustiveDependencies(hir);
     }
   }
 
@@ -399,6 +386,7 @@ function runWithEnvironment(
   });
   assertTerminalSuccessorsExist(hir);
   assertTerminalPredsExist(hir);
+
   propagateScopeDependenciesHIR(hir);
   log({
     kind: 'hir',
@@ -511,20 +499,20 @@ function runWithEnvironment(
     env.config.enablePreserveExistingMemoizationGuarantees ||
     env.config.validatePreserveExistingMemoizationGuarantees
   ) {
-    validatePreservedManualMemoization(reactiveFunction).unwrap();
+    validatePreservedManualMemoization(reactiveFunction);
   }
 
   const ast = codegenFunction(reactiveFunction, {
     uniqueIdentifiers,
     fbtOperands,
-  }).unwrap();
+  });
   log({kind: 'ast', name: 'Codegen', value: ast});
   for (const outlined of ast.outlined) {
     log({kind: 'ast', name: 'Codegen (outlined)', value: outlined.fn});
   }
 
   if (env.config.validateSourceLocations) {
-    validateSourceLocations(func, ast).unwrap();
+    validateSourceLocations(func, ast, env);
   }
 
   /**
@@ -536,7 +524,10 @@ function runWithEnvironment(
     throw new Error('unexpected error');
   }
 
-  return ast;
+  if (env.hasErrors()) {
+    return Err(env.aggregateErrors());
+  }
+  return Ok(ast);
 }
 
 export function compileFn(
@@ -550,7 +541,7 @@ export function compileFn(
   logger: Logger | null,
   filename: string | null,
   code: string | null,
-): CodegenFunction {
+): Result<CodegenFunction, CompilerError> {
   return run(
     func,
     config,

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

@@ -350,9 +350,6 @@ function isFilePartOfSources(
   return false;
 }
 
-export type CompileProgramMetadata = {
-  retryErrors: Array<{fn: BabelFn; error: CompilerError}>;
-};
 /**
  * Main entrypoint for React Compiler.
  *
@@ -363,7 +360,7 @@ export type CompileProgramMetadata = {
 export function compileProgram(
   program: NodePath<t.Program>,
   pass: CompilerPass,
-): CompileProgramMetadata | null {
+): void {
   /**
    * This is directly invoked by the react-compiler babel plugin, so exceptions
    * thrown by this function will fail the babel build.
@@ -376,7 +373,7 @@ export function compileProgram(
    *   the outlined functions.
    */
   if (shouldSkipCompilation(program, pass)) {
-    return null;
+    return;
   }
   const restrictedImportsErr = validateRestrictedImports(
     program,
@@ -384,7 +381,7 @@ export function compileProgram(
   );
   if (restrictedImportsErr) {
     handleError(restrictedImportsErr, pass, null);
-    return null;
+    return;
   }
   /*
    * Record lint errors and critical errors as depending on Forget's config,
@@ -478,15 +475,11 @@ export function compileProgram(
       );
       handleError(error, programContext, null);
     }
-    return null;
+    return;
   }
 
   // Insert React Compiler generated functions into the Babel AST
   applyCompiledFunctions(program, compiledFns, pass, programContext);
-
-  return {
-    retryErrors: programContext.retryErrors,
-  };
 }
 
 type CompileSource = {
@@ -704,20 +697,36 @@ function tryCompileFunction(
   }
 
   try {
-    return {
-      kind: 'compile',
-      compiledFn: compileFn(
-        fn,
-        programContext.opts.environment,
-        fnType,
-        outputMode,
-        programContext,
-        programContext.opts.logger,
-        programContext.filename,
-        programContext.code,
-      ),
-    };
+    const result = compileFn(
+      fn,
+      programContext.opts.environment,
+      fnType,
+      outputMode,
+      programContext,
+      programContext.opts.logger,
+      programContext.filename,
+      programContext.code,
+    );
+    if (result.isOk()) {
+      return {kind: 'compile', compiledFn: result.unwrap()};
+    } else {
+      return {kind: 'error', error: result.unwrapErr()};
+    }
   } catch (err) {
+    /**
+     * A pass incorrectly threw instead of recording the error.
+     * Log for detection in development.
+     */
+    if (
+      err instanceof CompilerError &&
+      err.details.every(detail => detail.category !== ErrorCategory.Invariant)
+    ) {
+      programContext.logEvent({
+        kind: 'CompileUnexpectedThrow',
+        fnLoc: fn.node.loc ?? null,
+        data: err.toString(),
+      });
+    }
     return {kind: 'error', error: err};
   }
 }

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

@@ -1,162 +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 {NodePath} from '@babel/core';
-import * as t from '@babel/types';
-
-import {CompilerError, EnvironmentConfig, Logger} from '..';
-import {getOrInsertWith} from '../Utils/utils';
-import {GeneratedSource} from '../HIR';
-import {DEFAULT_EXPORT} from '../HIR/Environment';
-import {CompileProgramMetadata} from './Program';
-export default function validateNoUntransformedReferences(
-  path: NodePath<t.Program>,
-  filename: string | null,
-  logger: Logger | null,
-  env: EnvironmentConfig,
-  compileResult: CompileProgramMetadata | null,
-): void {
-  const moduleLoadChecks = new Map<
-    string,
-    Map<string, CheckInvalidReferenceFn>
-  >();
-  if (moduleLoadChecks.size > 0) {
-    transformProgram(path, moduleLoadChecks, filename, logger, compileResult);
-  }
-}
-
-type TraversalState = {
-  shouldInvalidateScopes: boolean;
-  program: NodePath<t.Program>;
-  logger: Logger | null;
-  filename: string | null;
-  transformErrors: Array<{fn: NodePath<t.Node>; error: CompilerError}>;
-};
-type CheckInvalidReferenceFn = (
-  paths: Array<NodePath<t.Node>>,
-  context: TraversalState,
-) => void;
-
-function validateImportSpecifier(
-  specifier: NodePath<t.ImportSpecifier>,
-  importSpecifierChecks: Map<string, CheckInvalidReferenceFn>,
-  state: TraversalState,
-): void {
-  const imported = specifier.get('imported');
-  const specifierName: string =
-    imported.node.type === 'Identifier'
-      ? imported.node.name
-      : imported.node.value;
-  const checkFn = importSpecifierChecks.get(specifierName);
-  if (checkFn == null) {
-    return;
-  }
-  if (state.shouldInvalidateScopes) {
-    state.shouldInvalidateScopes = false;
-    state.program.scope.crawl();
-  }
-
-  const local = specifier.get('local');
-  const binding = local.scope.getBinding(local.node.name);
-  CompilerError.invariant(binding != null, {
-    reason: 'Expected binding to be found for import specifier',
-    loc: local.node.loc ?? GeneratedSource,
-  });
-  checkFn(binding.referencePaths, state);
-}
-
-function validateNamespacedImport(
-  specifier: NodePath<t.ImportNamespaceSpecifier | t.ImportDefaultSpecifier>,
-  importSpecifierChecks: Map<string, CheckInvalidReferenceFn>,
-  state: TraversalState,
-): void {
-  if (state.shouldInvalidateScopes) {
-    state.shouldInvalidateScopes = false;
-    state.program.scope.crawl();
-  }
-  const local = specifier.get('local');
-  const binding = local.scope.getBinding(local.node.name);
-  const defaultCheckFn = importSpecifierChecks.get(DEFAULT_EXPORT);
-
-  CompilerError.invariant(binding != null, {
-    reason: 'Expected binding to be found for import specifier',
-    loc: local.node.loc ?? GeneratedSource,
-  });
-  const filteredReferences = new Map<
-    CheckInvalidReferenceFn,
-    Array<NodePath<t.Node>>
-  >();
-  for (const reference of binding.referencePaths) {
-    if (defaultCheckFn != null) {
-      getOrInsertWith(filteredReferences, defaultCheckFn, () => []).push(
-        reference,
-      );
-    }
-    const parent = reference.parentPath;
-    if (
-      parent != null &&
-      parent.isMemberExpression() &&
-      parent.get('object') === reference
-    ) {
-      if (parent.node.computed || parent.node.property.type !== 'Identifier') {
-        continue;
-      }
-      const checkFn = importSpecifierChecks.get(parent.node.property.name);
-      if (checkFn != null) {
-        getOrInsertWith(filteredReferences, checkFn, () => []).push(parent);
-      }
-    }
-  }
-
-  for (const [checkFn, references] of filteredReferences) {
-    checkFn(references, state);
-  }
-}
-function transformProgram(
-  path: NodePath<t.Program>,
-
-  moduleLoadChecks: Map<string, Map<string, CheckInvalidReferenceFn>>,
-  filename: string | null,
-  logger: Logger | null,
-  compileResult: CompileProgramMetadata | null,
-): void {
-  const traversalState: TraversalState = {
-    shouldInvalidateScopes: true,
-    program: path,
-    filename,
-    logger,
-    transformErrors: compileResult?.retryErrors ?? [],
-  };
-  path.traverse({
-    ImportDeclaration(path: NodePath<t.ImportDeclaration>) {
-      const importSpecifierChecks = moduleLoadChecks.get(
-        path.node.source.value,
-      );
-      if (importSpecifierChecks == null) {
-        return;
-      }
-      const specifiers = path.get('specifiers');
-      for (const specifier of specifiers) {
-        if (specifier.isImportSpecifier()) {
-          validateImportSpecifier(
-            specifier,
-            importSpecifierChecks,
-            traversalState,
-          );
-        } else {
-          validateNamespacedImport(
-            specifier as NodePath<
-              t.ImportNamespaceSpecifier | t.ImportDefaultSpecifier
-            >,
-            importSpecifierChecks,
-            traversalState,
-          );
-        }
-      }
-    },
-  });
-}

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

@@ -310,16 +310,13 @@ function traverseOptionalBlock(
      * - a optional base block with a separate nested optional-chain (e.g. a(c?.d)?.d)
      */
     const testBlock = context.blocks.get(maybeTest.terminal.fallthrough)!;
-    if (testBlock!.terminal.kind !== 'branch') {
-      /**
-       * Fallthrough of the inner optional should be a block with no
-       * instructions, terminating with Test($<temporary written to from
-       * StoreLocal>)
-       */
-      CompilerError.throwTodo({
-        reason: `Unexpected terminal kind \`${testBlock.terminal.kind}\` for optional fallthrough block`,
-        loc: maybeTest.terminal.loc,
-      });
+    /**
+     * Fallthrough of the inner optional should be a block with no
+     * instructions, terminating with Test($<temporary written to from
+     * StoreLocal>)
+     */
+    if (testBlock.terminal.kind !== 'branch') {
+      return null;
     }
     /**
      * Recurse into inner optional blocks to collect inner optional-chain

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

@@ -8,7 +8,12 @@
 import * as t from '@babel/types';
 import {ZodError, z} from 'zod/v4';
 import {fromZodError} from 'zod-validation-error/v4';
-import {CompilerError} from '../CompilerError';
+import {
+  CompilerDiagnostic,
+  CompilerError,
+  CompilerErrorDetail,
+  ErrorCategory,
+} from '../CompilerError';
 import {CompilerOutputMode, Logger, ProgramContext} from '../Entrypoint';
 import {Err, Ok, Result} from '../Utils/Result';
 import {
@@ -545,6 +550,12 @@ export class Environment {
 
   #flowTypeEnvironment: FlowTypeEnv | null;
 
+  /**
+   * Accumulated compilation errors. Passes record errors here instead of
+   * throwing, so the pipeline can continue and report all errors at once.
+   */
+  #errors: CompilerError = new CompilerError();
+
   constructor(
     scope: BabelScope,
     fnType: ReactFunctionType,
@@ -629,9 +640,6 @@ export class Environment {
       case 'ssr': {
         return true;
       }
-      case 'client-no-memo': {
-        return false;
-      }
       default: {
         assertExhaustive(
           this.outputMode,
@@ -648,8 +656,7 @@ export class Environment {
         // linting also enables memoization so that we can check if manual memoization is preserved
         return true;
       }
-      case 'ssr':
-      case 'client-no-memo': {
+      case 'ssr': {
         return false;
       }
       default: {
@@ -668,9 +675,6 @@ export class Environment {
       case 'ssr': {
         return true;
       }
-      case 'client-no-memo': {
-        return false;
-      }
       default: {
         assertExhaustive(
           this.outputMode,
@@ -709,6 +713,52 @@ export class Environment {
     }
   }
 
+  /**
+   * Record a single diagnostic or error detail on this environment.
+   * If the error is an Invariant, it is immediately thrown since invariants
+   * represent internal bugs that cannot be recovered from.
+   * Otherwise, the error is accumulated and optionally logged.
+   */
+  recordError(error: CompilerDiagnostic | CompilerErrorDetail): void {
+    if (error.category === ErrorCategory.Invariant) {
+      const compilerError = new CompilerError();
+      if (error instanceof CompilerDiagnostic) {
+        compilerError.pushDiagnostic(error);
+      } else {
+        compilerError.pushErrorDetail(error);
+      }
+      throw compilerError;
+    }
+    if (error instanceof CompilerDiagnostic) {
+      this.#errors.pushDiagnostic(error);
+    } else {
+      this.#errors.pushErrorDetail(error);
+    }
+  }
+
+  /**
+   * Record all diagnostics from a CompilerError onto this environment.
+   */
+  recordErrors(error: CompilerError): void {
+    for (const detail of error.details) {
+      this.recordError(detail);
+    }
+  }
+
+  /**
+   * Returns true if any errors have been recorded during compilation.
+   */
+  hasErrors(): boolean {
+    return this.#errors.hasAnyErrors();
+  }
+
+  /**
+   * Returns the accumulated CompilerError containing all recorded diagnostics.
+   */
+  aggregateErrors(): CompilerError {
+    return this.#errors;
+  }
+
   isContextIdentifier(node: t.Identifier): boolean {
     return this.#contextIdentifiers.has(node);
   }

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

@@ -7,7 +7,12 @@
 
 import {Binding, NodePath} from '@babel/traverse';
 import * as t from '@babel/types';
-import {CompilerError, ErrorCategory} from '../CompilerError';
+import {
+  CompilerError,
+  CompilerDiagnostic,
+  CompilerErrorDetail,
+  ErrorCategory,
+} from '../CompilerError';
 import {Environment} from './Environment';
 import {
   BasicBlock,
@@ -110,7 +115,6 @@ export default class HIRBuilder {
   #bindings: Bindings;
   #env: Environment;
   #exceptionHandlerStack: Array<BlockId> = [];
-  errors: CompilerError = new CompilerError();
   /**
    * Traversal context: counts the number of `fbt` tag parents
    * of the current babel node.
@@ -148,6 +152,10 @@ export default class HIRBuilder {
     this.#current = newBlock(this.#entry, options?.entryBlockKind ?? 'block');
   }
 
+  recordError(error: CompilerDiagnostic | CompilerErrorDetail): void {
+    this.#env.recordError(error);
+  }
+
   currentBlockKind(): BlockKind {
     return this.#current.kind;
   }
@@ -308,34 +316,28 @@ export default class HIRBuilder {
 
   resolveBinding(node: t.Identifier): Identifier {
     if (node.name === 'fbt') {
-      CompilerError.throwDiagnostic({
-        category: ErrorCategory.Todo,
-        reason: 'Support local variables named `fbt`',
-        description:
-          'Local variables named `fbt` may conflict with the fbt plugin and are not yet supported',
-        details: [
-          {
-            kind: 'error',
-            message: 'Rename to avoid conflict with fbt plugin',
-            loc: node.loc ?? GeneratedSource,
-          },
-        ],
-      });
+      this.recordError(
+        new CompilerErrorDetail({
+          category: ErrorCategory.Todo,
+          reason: 'Support local variables named `fbt`',
+          description:
+            'Local variables named `fbt` may conflict with the fbt plugin and are not yet supported',
+          loc: node.loc ?? GeneratedSource,
+          suggestions: null,
+        }),
+      );
     }
     if (node.name === 'this') {
-      CompilerError.throwDiagnostic({
-        category: ErrorCategory.UnsupportedSyntax,
-        reason: '`this` is not supported syntax',
-        description:
-          'React Compiler does not support compiling functions that use `this`',
-        details: [
-          {
-            kind: 'error',
-            message: '`this` was used here',
-            loc: node.loc ?? GeneratedSource,
-          },
-        ],
-      });
+      this.recordError(
+        new CompilerErrorDetail({
+          category: ErrorCategory.UnsupportedSyntax,
+          reason: '`this` is not supported syntax',
+          description:
+            'React Compiler does not support compiling functions that use `this`',
+          loc: node.loc ?? GeneratedSource,
+          suggestions: null,
+        }),
+      );
     }
     const originalName = node.name;
     let name = originalName;
@@ -381,12 +383,15 @@ export default class HIRBuilder {
           instr => instr.value.kind === 'FunctionExpression',
         )
       ) {
-        CompilerError.throwTodo({
-          reason: `Support functions with unreachable code that may contain hoisted declarations`,
-          loc: block.instructions[0]?.loc ?? block.terminal.loc,
-          description: null,
-          suggestions: null,
-        });
+        this.recordError(
+          new CompilerErrorDetail({
+            reason: `Support functions with unreachable code that may contain hoisted declarations`,
+            loc: block.instructions[0]?.loc ?? block.terminal.loc,
+            description: null,
+            suggestions: null,
+            category: ErrorCategory.Todo,
+          }),
+        );
       }
     }
     ir.blocks = rpoBlocks;

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

@@ -54,7 +54,7 @@ function lowerWithMutationAliasing(fn: HIRFunction): void {
   deadCodeElimination(fn);
   const functionEffects = inferMutationAliasingRanges(fn, {
     isFunctionExpression: true,
-  }).unwrap();
+  });
   rewriteInstructionKindsBasedOnReassignment(fn);
   inferReactiveScopeVariables(fn);
   fn.aliasingEffects = functionEffects;

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

@@ -31,7 +31,6 @@ import {
   makeInstructionId,
 } from '../HIR';
 import {createTemporaryPlace, markInstructionIds} from '../HIR/HIRBuilder';
-import {Result} from '../Utils/Result';
 
 type ManualMemoCallee = {
   kind: 'useMemo' | 'useCallback';
@@ -294,7 +293,7 @@ function extractManualMemoizationArgs(
   instr: TInstruction<CallExpression> | TInstruction<MethodCall>,
   kind: 'useCallback' | 'useMemo',
   sidemap: IdentifierSidemap,
-  errors: CompilerError,
+  env: Environment,
 ): {
   fnPlace: Place;
   depsList: Array<ManualMemoDependency> | null;
@@ -304,7 +303,7 @@ function extractManualMemoizationArgs(
     Place | SpreadPattern | undefined
   >;
   if (fnPlace == null || fnPlace.kind !== 'Identifier') {
-    errors.pushDiagnostic(
+    env.recordError(
       CompilerDiagnostic.create({
         category: ErrorCategory.UseMemo,
         reason: `Expected a callback function to be passed to ${kind}`,
@@ -336,7 +335,7 @@ function extractManualMemoizationArgs(
       ? sidemap.maybeDepsLists.get(depsListPlace.identifier.id)
       : null;
   if (maybeDepsList == null) {
-    errors.pushDiagnostic(
+    env.recordError(
       CompilerDiagnostic.create({
         category: ErrorCategory.UseMemo,
         reason: `Expected the dependency list for ${kind} to be an array literal`,
@@ -355,7 +354,7 @@ function extractManualMemoizationArgs(
   for (const dep of maybeDepsList.deps) {
     const maybeDep = sidemap.maybeDeps.get(dep.identifier.id);
     if (maybeDep == null) {
-      errors.pushDiagnostic(
+      env.recordError(
         CompilerDiagnostic.create({
           category: ErrorCategory.UseMemo,
           reason: `Expected the dependency list to be an array of simple expressions (e.g. \`x\`, \`x.y.z\`, \`x?.y?.z\`)`,
@@ -389,10 +388,7 @@ function extractManualMemoizationArgs(
  * This pass also validates that useMemo callbacks return a value (not void), ensuring that useMemo
  * is only used for memoizing values and not for running arbitrary side effects.
  */
-export function dropManualMemoization(
-  func: HIRFunction,
-): Result<void, CompilerError> {
-  const errors = new CompilerError();
+export function dropManualMemoization(func: HIRFunction): void {
   const isValidationEnabled =
     func.env.config.validatePreserveExistingMemoizationGuarantees ||
     func.env.config.validateNoSetStateInRender ||
@@ -439,7 +435,7 @@ export function dropManualMemoization(
             instr as TInstruction<CallExpression> | TInstruction<MethodCall>,
             manualMemo.kind,
             sidemap,
-            errors,
+            func.env,
           );
 
           if (memoDetails == null) {
@@ -467,7 +463,7 @@ export function dropManualMemoization(
              * is rare and likely sketchy.
              */
             if (!sidemap.functions.has(fnPlace.identifier.id)) {
-              errors.pushDiagnostic(
+              func.env.recordError(
                 CompilerDiagnostic.create({
                   category: ErrorCategory.UseMemo,
                   reason: `Expected the first argument to be an inline function expression`,
@@ -552,8 +548,6 @@ export function dropManualMemoization(
       markInstructionIds(func.body);
     }
   }
-
-  return errors.asResult();
 }
 
 function findOptionalPlaces(fn: HIRFunction): Set<IdentifierId> {

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

@@ -45,7 +45,7 @@ import {
   eachTerminalOperand,
   eachTerminalSuccessor,
 } from '../HIR/visitors';
-import {Ok, Result} from '../Utils/Result';
+
 import {
   assertExhaustive,
   getOrInsertDefault,
@@ -100,7 +100,7 @@ export function inferMutationAliasingEffects(
   {isFunctionExpression}: {isFunctionExpression: boolean} = {
     isFunctionExpression: false,
   },
-): Result<void, CompilerError> {
+): void {
   const initialState = InferenceState.empty(fn.env, isFunctionExpression);
 
   // Map of blocks to the last (merged) incoming state that was processed
@@ -220,7 +220,7 @@ export function inferMutationAliasingEffects(
       }
     }
   }
-  return Ok(undefined);
+  return;
 }
 
 function findHoistedContextDeclarations(

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

@@ -20,13 +20,14 @@ import {
   Place,
   isPrimitiveType,
 } from '../HIR/HIR';
+import {Environment} from '../HIR/Environment';
 import {
   eachInstructionLValue,
   eachInstructionValueOperand,
   eachTerminalOperand,
 } from '../HIR/visitors';
 import {assertExhaustive, getOrInsertWith} from '../Utils/utils';
-import {Err, Ok, Result} from '../Utils/Result';
+
 import {AliasingEffect, MutationReason} from './AliasingEffects';
 
 /**
@@ -74,7 +75,7 @@ import {AliasingEffect, MutationReason} from './AliasingEffects';
 export function inferMutationAliasingRanges(
   fn: HIRFunction,
   {isFunctionExpression}: {isFunctionExpression: boolean},
-): Result<Array<AliasingEffect>, CompilerError> {
+): Array<AliasingEffect> {
   // The set of externally-visible effects
   const functionEffects: Array<AliasingEffect> = [];
 
@@ -107,7 +108,7 @@ export function inferMutationAliasingRanges(
 
   let index = 0;
 
-  const errors = new CompilerError();
+  const shouldRecordErrors = !isFunctionExpression && fn.env.enableValidations;
 
   for (const param of [...fn.params, ...fn.context, fn.returns]) {
     const place = param.kind === 'Identifier' ? param : param.place;
@@ -200,7 +201,9 @@ export function inferMutationAliasingRanges(
           effect.kind === 'MutateGlobal' ||
           effect.kind === 'Impure'
         ) {
-          errors.pushDiagnostic(effect.error);
+          if (shouldRecordErrors) {
+            fn.env.recordError(effect.error);
+          }
           functionEffects.push(effect);
         } else if (effect.kind === 'Render') {
           renders.push({index: index++, place: effect.place});
@@ -245,11 +248,15 @@ export function inferMutationAliasingRanges(
       mutation.kind,
       mutation.place.loc,
       mutation.reason,
-      errors,
+      shouldRecordErrors ? fn.env : null,
     );
   }
   for (const render of renders) {
-    state.render(render.index, render.place.identifier, errors);
+    state.render(
+      render.index,
+      render.place.identifier,
+      shouldRecordErrors ? fn.env : null,
+    );
   }
   for (const param of [...fn.context, ...fn.params]) {
     const place = param.kind === 'Identifier' ? param : param.place;
@@ -498,7 +505,6 @@ export function inferMutationAliasingRanges(
    * would be transitively mutated needs a capture relationship.
    */
   const tracked: Array<Place> = [];
-  const ignoredErrors = new CompilerError();
   for (const param of [...fn.params, ...fn.context, fn.returns]) {
     const place = param.kind === 'Identifier' ? param : param.place;
     tracked.push(place);
@@ -513,7 +519,7 @@ export function inferMutationAliasingRanges(
       MutationKind.Conditional,
       into.loc,
       null,
-      ignoredErrors,
+      null,
     );
     for (const from of tracked) {
       if (
@@ -547,19 +553,17 @@ export function inferMutationAliasingRanges(
     }
   }
 
-  if (errors.hasAnyErrors() && !isFunctionExpression) {
-    return Err(errors);
-  }
-  return Ok(functionEffects);
+  return functionEffects;
 }
 
-function appendFunctionErrors(errors: CompilerError, fn: HIRFunction): void {
+function appendFunctionErrors(env: Environment | null, fn: HIRFunction): void {
+  if (env == null) return;
   for (const effect of fn.aliasingEffects ?? []) {
     switch (effect.kind) {
       case 'Impure':
       case 'MutateFrozen':
       case 'MutateGlobal': {
-        errors.pushDiagnostic(effect.error);
+        env.recordError(effect.error);
         break;
       }
     }
@@ -660,7 +664,7 @@ class AliasingState {
     }
   }
 
-  render(index: number, start: Identifier, errors: CompilerError): void {
+  render(index: number, start: Identifier, env: Environment | null): void {
     const seen = new Set<Identifier>();
     const queue: Array<Identifier> = [start];
     while (queue.length !== 0) {
@@ -674,7 +678,7 @@ class AliasingState {
         continue;
       }
       if (node.value.kind === 'Function') {
-        appendFunctionErrors(errors, node.value.function);
+        appendFunctionErrors(env, node.value.function);
       }
       for (const [alias, when] of node.createdFrom) {
         if (when >= index) {
@@ -706,7 +710,7 @@ class AliasingState {
     startKind: MutationKind,
     loc: SourceLocation,
     reason: MutationReason | null,
-    errors: CompilerError,
+    env: Environment | null,
   ): void {
     const seen = new Map<Identifier, MutationKind>();
     const queue: Array<{
@@ -738,7 +742,7 @@ class AliasingState {
         node.transitive == null &&
         node.local == null
       ) {
-        appendFunctionErrors(errors, node.value.function);
+        appendFunctionErrors(env, node.value.function);
       }
       if (transitive) {
         if (node.transitive == null || node.transitive.kind < kind) {

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/BuildReactiveFunction.ts

@@ -1007,11 +1007,10 @@ class Driver {
     const test = this.visitValueBlock(testBlockId, loc);
     const testBlock = this.cx.ir.blocks.get(test.block)!;
     if (testBlock.terminal.kind !== 'branch') {
-      CompilerError.throwTodo({
-        reason: `Unexpected terminal kind \`${testBlock.terminal.kind}\` for ${terminalKind} test block`,
-        description: null,
+      CompilerError.invariant(false, {
+        reason: `Expected a branch terminal for ${terminalKind} test block`,
+        description: `Got \`${testBlock.terminal.kind}\``,
         loc: testBlock.terminal.loc,
-        suggestions: null,
       });
     }
     return {

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts

@@ -13,7 +13,11 @@ import {
   pruneUnusedLabels,
   renameVariables,
 } from '.';
-import {CompilerError, ErrorCategory} from '../CompilerError';
+import {
+  CompilerError,
+  CompilerErrorDetail,
+  ErrorCategory,
+} from '../CompilerError';
 import {Environment, ExternalFunction} from '../HIR';
 import {
   ArrayPattern,
@@ -46,7 +50,7 @@ import {
 } from '../HIR/HIR';
 import {printIdentifier, printInstruction, printPlace} from '../HIR/PrintHIR';
 import {eachPatternOperand} from '../HIR/visitors';
-import {Err, Ok, Result} from '../Utils/Result';
+
 import {GuardKind} from '../Utils/RuntimeDiagnosticConstants';
 import {assertExhaustive} from '../Utils/utils';
 import {buildReactiveFunction} from './BuildReactiveFunction';
@@ -111,7 +115,7 @@ export function codegenFunction(
     uniqueIdentifiers: Set<string>;
     fbtOperands: Set<IdentifierId>;
   },
-): Result<CodegenFunction, CompilerError> {
+): CodegenFunction {
   const cx = new Context(
     fn.env,
     fn.id ?? '[[ anonymous ]]',
@@ -141,11 +145,7 @@ export function codegenFunction(
     };
   }
 
-  const compileResult = codegenReactiveFunction(cx, fn);
-  if (compileResult.isErr()) {
-    return compileResult;
-  }
-  const compiled = compileResult.unwrap();
+  const compiled = codegenReactiveFunction(cx, fn);
 
   const hookGuard = fn.env.config.enableEmitHookGuards;
   if (hookGuard != null && fn.env.outputMode === 'client') {
@@ -273,7 +273,7 @@ export function codegenFunction(
         emitInstrumentForget.globalGating,
       );
       if (assertResult.isErr()) {
-        return assertResult;
+        fn.env.recordErrors(assertResult.unwrapErr());
       }
     }
 
@@ -323,20 +323,17 @@ export function codegenFunction(
       ),
       reactiveFunction,
     );
-    if (codegen.isErr()) {
-      return codegen;
-    }
-    outlined.push({fn: codegen.unwrap(), type});
+    outlined.push({fn: codegen, type});
   }
   compiled.outlined = outlined;
 
-  return compileResult;
+  return compiled;
 }
 
 function codegenReactiveFunction(
   cx: Context,
   fn: ReactiveFunction,
-): Result<CodegenFunction, CompilerError> {
+): CodegenFunction {
   for (const param of fn.params) {
     const place = param.kind === 'Identifier' ? param : param.place;
     cx.temp.set(place.identifier.declarationId, null);
@@ -354,14 +351,10 @@ function codegenReactiveFunction(
     }
   }
 
-  if (cx.errors.hasAnyErrors()) {
-    return Err(cx.errors);
-  }
-
   const countMemoBlockVisitor = new CountMemoBlockVisitor(fn.env);
   visitReactiveFunction(fn, countMemoBlockVisitor, undefined);
 
-  return Ok({
+  return {
     type: 'CodegenFunction',
     loc: fn.loc,
     id: fn.id !== null ? t.identifier(fn.id) : null,
@@ -376,7 +369,7 @@ function codegenReactiveFunction(
     prunedMemoBlocks: countMemoBlockVisitor.prunedMemoBlocks,
     prunedMemoValues: countMemoBlockVisitor.prunedMemoValues,
     outlined: [],
-  });
+  };
 }
 
 class CountMemoBlockVisitor extends ReactiveFunctionVisitor<void> {
@@ -427,7 +420,6 @@ class Context {
    */
   #declarations: Set<DeclarationId> = new Set();
   temp: Temporaries;
-  errors: CompilerError = new CompilerError();
   objectMethods: Map<IdentifierId, ObjectMethod> = new Map();
   uniqueIdentifiers: Set<string>;
   fbtOperands: Set<IdentifierId>;
@@ -446,6 +438,11 @@ class Context {
     this.fbtOperands = fbtOperands;
     this.temp = temporaries !== null ? new Map(temporaries) : new Map();
   }
+
+  recordError(error: CompilerErrorDetail): void {
+    this.env.recordError(error);
+  }
+
   get nextCacheIndex(): number {
     return this.#nextCacheIndex++;
   }
@@ -782,12 +779,15 @@ function codegenTerminal(
         loc: terminal.init.loc,
       });
       if (terminal.init.instructions.length !== 2) {
-        CompilerError.throwTodo({
-          reason: 'Support non-trivial for..in inits',
-          description: null,
-          loc: terminal.init.loc,
-          suggestions: null,
-        });
+        cx.recordError(
+          new CompilerErrorDetail({
+            reason: 'Support non-trivial for..in inits',
+            category: ErrorCategory.Todo,
+            loc: terminal.init.loc,
+            suggestions: null,
+          }),
+        );
+        return t.emptyStatement();
       }
       const iterableCollection = terminal.init.instructions[0];
       const iterableItem = terminal.init.instructions[1];
@@ -802,12 +802,15 @@ function codegenTerminal(
           break;
         }
         case 'StoreContext': {
-          CompilerError.throwTodo({
-            reason: 'Support non-trivial for..in inits',
-            description: null,
-            loc: terminal.init.loc,
-            suggestions: null,
-          });
+          cx.recordError(
+            new CompilerErrorDetail({
+              reason: 'Support non-trivial for..in inits',
+              category: ErrorCategory.Todo,
+              loc: terminal.init.loc,
+              suggestions: null,
+            }),
+          );
+          return t.emptyStatement();
         }
         default:
           CompilerError.invariant(false, {
@@ -877,12 +880,15 @@ function codegenTerminal(
         loc: terminal.test.loc,
       });
       if (terminal.test.instructions.length !== 2) {
-        CompilerError.throwTodo({
-          reason: 'Support non-trivial for..of inits',
-          description: null,
-          loc: terminal.init.loc,
-          suggestions: null,
-        });
+        cx.recordError(
+          new CompilerErrorDetail({
+            reason: 'Support non-trivial for..of inits',
+            category: ErrorCategory.Todo,
+            loc: terminal.init.loc,
+            suggestions: null,
+          }),
+        );
+        return t.emptyStatement();
       }
       const iterableItem = terminal.test.instructions[1];
       let lval: t.LVal;
@@ -896,12 +902,15 @@ function codegenTerminal(
           break;
         }
         case 'StoreContext': {
-          CompilerError.throwTodo({
-            reason: 'Support non-trivial for..of inits',
-            description: null,
-            loc: terminal.init.loc,
-            suggestions: null,
-          });
+          cx.recordError(
+            new CompilerErrorDetail({
+              reason: 'Support non-trivial for..of inits',
+              category: ErrorCategory.Todo,
+              loc: terminal.init.loc,
+              suggestions: null,
+            }),
+          );
+          return t.emptyStatement();
         }
         default:
           CompilerError.invariant(false, {
@@ -1665,7 +1674,7 @@ function codegenInstructionValue(
                   cx.temp,
                 ),
                 reactiveFunction,
-              ).unwrap();
+              );
 
               /*
                * ObjectMethod builder must be backwards compatible with older versions of babel.
@@ -1864,7 +1873,7 @@ function codegenInstructionValue(
           cx.temp,
         ),
         reactiveFunction,
-      ).unwrap();
+      );
 
       if (instrValue.type === 'ArrowFunctionExpression') {
         let body: t.BlockStatement | t.Expression = fn.body;
@@ -1960,22 +1969,26 @@ function codegenInstructionValue(
         } else {
           if (t.isVariableDeclaration(stmt)) {
             const declarator = stmt.declarations[0];
-            cx.errors.push({
-              reason: `(CodegenReactiveFunction::codegenInstructionValue) Cannot declare variables in a value block, tried to declare '${
-                (declarator.id as t.Identifier).name
-              }'`,
-              category: ErrorCategory.Todo,
-              loc: declarator.loc ?? null,
-              suggestions: null,
-            });
+            cx.recordError(
+              new CompilerErrorDetail({
+                reason: `(CodegenReactiveFunction::codegenInstructionValue) Cannot declare variables in a value block, tried to declare '${
+                  (declarator.id as t.Identifier).name
+                }'`,
+                category: ErrorCategory.Todo,
+                loc: declarator.loc ?? null,
+                suggestions: null,
+              }),
+            );
             return t.stringLiteral(`TODO handle ${declarator.id}`);
           } else {
-            cx.errors.push({
-              reason: `(CodegenReactiveFunction::codegenInstructionValue) Handle conversion of ${stmt.type} to expression`,
-              category: ErrorCategory.Todo,
-              loc: stmt.loc ?? null,
-              suggestions: null,
-            });
+            cx.recordError(
+              new CompilerErrorDetail({
+                reason: `(CodegenReactiveFunction::codegenInstructionValue) Handle conversion of ${stmt.type} to expression`,
+                category: ErrorCategory.Todo,
+                loc: stmt.loc ?? null,
+                suggestions: null,
+              }),
+            );
             return t.stringLiteral(`TODO handle ${stmt.type}`);
           }
         }

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

@@ -5,7 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {CompilerError} from '..';
+import {CompilerDiagnostic, CompilerError} from '..';
+import {ErrorCategory} from '../CompilerError';
+import {Environment} from '../HIR/Environment';
 import {HIRFunction, IdentifierId, Place} from '../HIR';
 import {printPlace} from '../HIR/PrintHIR';
 import {eachInstructionValueLValue, eachPatternOperand} from '../HIR/visitors';
@@ -17,12 +19,13 @@ import {eachInstructionValueLValue, eachPatternOperand} from '../HIR/visitors';
  */
 export function validateContextVariableLValues(fn: HIRFunction): void {
   const identifierKinds: IdentifierKinds = new Map();
-  validateContextVariableLValuesImpl(fn, identifierKinds);
+  validateContextVariableLValuesImpl(fn, identifierKinds, fn.env);
 }
 
 function validateContextVariableLValuesImpl(
   fn: HIRFunction,
   identifierKinds: IdentifierKinds,
+  env: Environment,
 ): void {
   for (const [, block] of fn.body.blocks) {
     for (const instr of block.instructions) {
@@ -30,30 +33,30 @@ function validateContextVariableLValuesImpl(
       switch (value.kind) {
         case 'DeclareContext':
         case 'StoreContext': {
-          visit(identifierKinds, value.lvalue.place, 'context');
+          visit(identifierKinds, value.lvalue.place, 'context', env);
           break;
         }
         case 'LoadContext': {
-          visit(identifierKinds, value.place, 'context');
+          visit(identifierKinds, value.place, 'context', env);
           break;
         }
         case 'StoreLocal':
         case 'DeclareLocal': {
-          visit(identifierKinds, value.lvalue.place, 'local');
+          visit(identifierKinds, value.lvalue.place, 'local', env);
           break;
         }
         case 'LoadLocal': {
-          visit(identifierKinds, value.place, 'local');
+          visit(identifierKinds, value.place, 'local', env);
           break;
         }
         case 'PostfixUpdate':
         case 'PrefixUpdate': {
-          visit(identifierKinds, value.lvalue, 'local');
+          visit(identifierKinds, value.lvalue, 'local', env);
           break;
         }
         case 'Destructure': {
           for (const lvalue of eachPatternOperand(value.lvalue.pattern)) {
-            visit(identifierKinds, lvalue, 'destructure');
+            visit(identifierKinds, lvalue, 'destructure', env);
           }
           break;
         }
@@ -62,18 +65,24 @@ function validateContextVariableLValuesImpl(
           validateContextVariableLValuesImpl(
             value.loweredFunc.func,
             identifierKinds,
+            env,
           );
           break;
         }
         default: {
           for (const _ of eachInstructionValueLValue(value)) {
-            CompilerError.throwTodo({
-              reason:
-                'ValidateContextVariableLValues: unhandled instruction variant',
-              loc: value.loc,
-              description: `Handle '${value.kind} lvalues`,
-              suggestions: null,
-            });
+            fn.env.recordError(
+              CompilerDiagnostic.create({
+                category: ErrorCategory.Todo,
+                reason:
+                  'ValidateContextVariableLValues: unhandled instruction variant',
+                description: `Handle '${value.kind} lvalues`,
+              }).withDetails({
+                kind: 'error',
+                loc: value.loc,
+                message: null,
+              }),
+            );
           }
         }
       }
@@ -90,6 +99,7 @@ function visit(
   identifiers: IdentifierKinds,
   place: Place,
   kind: 'local' | 'context' | 'destructure',
+  env: Environment,
 ): void {
   const prev = identifiers.get(place.identifier.id);
   if (prev !== undefined) {
@@ -97,12 +107,18 @@ function visit(
     const isContext = kind === 'context';
     if (wasContext !== isContext) {
       if (prev.kind === 'destructure' || kind === 'destructure') {
-        CompilerError.throwTodo({
-          reason: `Support destructuring of context variables`,
-          loc: kind === 'destructure' ? place.loc : prev.place.loc,
-          description: null,
-          suggestions: null,
-        });
+        env.recordError(
+          CompilerDiagnostic.create({
+            category: ErrorCategory.Todo,
+            reason: `Support destructuring of context variables`,
+            description: null,
+          }).withDetails({
+            kind: 'error',
+            loc: kind === 'destructure' ? place.loc : prev.place.loc,
+            message: null,
+          }),
+        );
+        return;
       }
 
       CompilerError.invariant(false, {

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

@@ -44,7 +44,6 @@ import {
   eachInstructionValueOperand,
   eachTerminalOperand,
 } from '../HIR/visitors';
-import {Result} from '../Utils/Result';
 import {retainWhere} from '../Utils/utils';
 
 const DEBUG = false;
@@ -88,9 +87,7 @@ const DEBUG = false;
  * When we go to compute the dependencies, we then think that the user's manual dep
  * logic is part of what the memo computation logic.
  */
-export function validateExhaustiveDependencies(
-  fn: HIRFunction,
-): Result<void, CompilerError> {
+export function validateExhaustiveDependencies(fn: HIRFunction): void {
   const env = fn.env;
   const reactive = collectReactiveIdentifiersHIR(fn);
 
@@ -105,7 +102,6 @@ export function validateExhaustiveDependencies(
       loc: place.loc,
     });
   }
-  const error = new CompilerError();
   let startMemo: StartMemoize | null = null;
 
   function onStartMemoize(
@@ -146,7 +142,7 @@ export function validateExhaustiveDependencies(
         'all',
       );
       if (diagnostic != null) {
-        error.pushDiagnostic(diagnostic);
+        fn.env.recordError(diagnostic);
       }
     }
 
@@ -211,13 +207,12 @@ export function validateExhaustiveDependencies(
           effectReportMode,
         );
         if (diagnostic != null) {
-          error.pushDiagnostic(diagnostic);
+          fn.env.recordError(diagnostic);
         }
       },
     },
     false, // isFunctionExpression
   );
-  return error.asResult();
 }
 
 function validateDependencies(

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

@@ -6,13 +6,9 @@
  */
 
 import * as t from '@babel/types';
-import {
-  CompilerError,
-  CompilerErrorDetail,
-  ErrorCategory,
-} from '../CompilerError';
+import {CompilerErrorDetail, ErrorCategory} from '../CompilerError';
 import {computeUnconditionalBlocks} from '../HIR/ComputeUnconditionalBlocks';
-import {isHookName} from '../HIR/Environment';
+import {Environment, isHookName} from '../HIR/Environment';
 import {
   HIRFunction,
   IdentifierId,
@@ -26,7 +22,6 @@ import {
   eachTerminalOperand,
 } from '../HIR/visitors';
 import {assertExhaustive} from '../Utils/utils';
-import {Result} from '../Utils/Result';
 
 /**
  * Represents the possible kinds of value which may be stored at a given Place during
@@ -88,20 +83,17 @@ function joinKinds(a: Kind, b: Kind): Kind {
  *   may not appear as the callee of a conditional call.
  *   See the note for Kind.PotentialHook for sources of potential hooks
  */
-export function validateHooksUsage(
-  fn: HIRFunction,
-): Result<void, CompilerError> {
+export function validateHooksUsage(fn: HIRFunction): void {
   const unconditionalBlocks = computeUnconditionalBlocks(fn);
 
-  const errors = new CompilerError();
   const errorsByPlace = new Map<t.SourceLocation, CompilerErrorDetail>();
 
-  function recordError(
+  function trackError(
     loc: SourceLocation,
     errorDetail: CompilerErrorDetail,
   ): void {
     if (typeof loc === 'symbol') {
-      errors.pushErrorDetail(errorDetail);
+      fn.env.recordError(errorDetail);
     } else {
       errorsByPlace.set(loc, errorDetail);
     }
@@ -121,7 +113,7 @@ export function validateHooksUsage(
      * If that same place is also used as a conditional call, upgrade the error to a conditonal hook error
      */
     if (previousError === undefined || previousError.reason !== reason) {
-      recordError(
+      trackError(
         place.loc,
         new CompilerErrorDetail({
           category: ErrorCategory.Hooks,
@@ -137,7 +129,7 @@ export function validateHooksUsage(
     const previousError =
       typeof place.loc !== 'symbol' ? errorsByPlace.get(place.loc) : undefined;
     if (previousError === undefined) {
-      recordError(
+      trackError(
         place.loc,
         new CompilerErrorDetail({
           category: ErrorCategory.Hooks,
@@ -154,7 +146,7 @@ export function validateHooksUsage(
     const previousError =
       typeof place.loc !== 'symbol' ? errorsByPlace.get(place.loc) : undefined;
     if (previousError === undefined) {
-      recordError(
+      trackError(
         place.loc,
         new CompilerErrorDetail({
           category: ErrorCategory.Hooks,
@@ -399,7 +391,7 @@ export function validateHooksUsage(
         }
         case 'ObjectMethod':
         case 'FunctionExpression': {
-          visitFunctionExpression(errors, instr.value.loweredFunc.func);
+          visitFunctionExpression(fn.env, instr.value.loweredFunc.func);
           break;
         }
         default: {
@@ -424,18 +416,17 @@ export function validateHooksUsage(
   }
 
   for (const [, error] of errorsByPlace) {
-    errors.pushErrorDetail(error);
+    fn.env.recordError(error);
   }
-  return errors.asResult();
 }
 
-function visitFunctionExpression(errors: CompilerError, fn: HIRFunction): void {
+function visitFunctionExpression(env: Environment, fn: HIRFunction): void {
   for (const [, block] of fn.body.blocks) {
     for (const instr of block.instructions) {
       switch (instr.value.kind) {
         case 'ObjectMethod':
         case 'FunctionExpression': {
-          visitFunctionExpression(errors, instr.value.loweredFunc.func);
+          visitFunctionExpression(env, instr.value.loweredFunc.func);
           break;
         }
         case 'MethodCall':
@@ -446,7 +437,7 @@ function visitFunctionExpression(errors: CompilerError, fn: HIRFunction): void {
               : instr.value.property;
           const hookKind = getHookKind(fn.env, callee.identifier);
           if (hookKind != null) {
-            errors.pushErrorDetail(
+            env.recordError(
               new CompilerErrorDetail({
                 category: ErrorCategory.Hooks,
                 reason:

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

@@ -7,6 +7,7 @@
 
 import {CompilerDiagnostic, CompilerError, Effect} from '..';
 import {ErrorCategory} from '../CompilerError';
+import {Environment} from '../HIR/Environment';
 import {HIRFunction, IdentifierId, Place} from '../HIR';
 import {
   eachInstructionLValue,
@@ -27,15 +28,15 @@ export function validateLocalsNotReassignedAfterRender(fn: HIRFunction): void {
     contextVariables,
     false,
     false,
+    fn.env,
   );
   if (reassignment !== null) {
-    const errors = new CompilerError();
     const variable =
       reassignment.identifier.name != null &&
       reassignment.identifier.name.kind === 'named'
         ? `\`${reassignment.identifier.name.value}\``
         : 'variable';
-    errors.pushDiagnostic(
+    fn.env.recordError(
       CompilerDiagnostic.create({
         category: ErrorCategory.Immutability,
         reason: 'Cannot reassign variable after render completes',
@@ -46,7 +47,6 @@ export function validateLocalsNotReassignedAfterRender(fn: HIRFunction): void {
         message: `Cannot reassign ${variable} after render completes`,
       }),
     );
-    throw errors;
   }
 }
 
@@ -55,6 +55,7 @@ function getContextReassignment(
   contextVariables: Set<IdentifierId>,
   isFunctionExpression: boolean,
   isAsync: boolean,
+  env: Environment,
 ): Place | null {
   const reassigningFunctions = new Map<IdentifierId, Place>();
   for (const [, block] of fn.body.blocks) {
@@ -68,6 +69,7 @@ function getContextReassignment(
             contextVariables,
             true,
             isAsync || value.loweredFunc.func.async,
+            env,
           );
           if (reassignment === null) {
             // If the function itself doesn't reassign, does one of its dependencies?
@@ -84,13 +86,12 @@ function getContextReassignment(
           // if the function or its depends reassign, propagate that fact on the lvalue
           if (reassignment !== null) {
             if (isAsync || value.loweredFunc.func.async) {
-              const errors = new CompilerError();
               const variable =
                 reassignment.identifier.name !== null &&
                 reassignment.identifier.name.kind === 'named'
                   ? `\`${reassignment.identifier.name.value}\``
                   : 'variable';
-              errors.pushDiagnostic(
+              env.recordError(
                 CompilerDiagnostic.create({
                   category: ErrorCategory.Immutability,
                   reason: 'Cannot reassign variable in async function',
@@ -102,7 +103,7 @@ function getContextReassignment(
                   message: `Cannot reassign ${variable}`,
                 }),
               );
-              throw errors;
+              return null;
             }
             reassigningFunctions.set(lvalue.identifier.id, reassignment);
           }

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

@@ -5,15 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {CompilerError, EnvironmentConfig} from '..';
+import {CompilerErrorDetail, EnvironmentConfig} from '..';
 import {ErrorCategory} from '../CompilerError';
 import {HIRFunction, IdentifierId} from '../HIR';
 import {DEFAULT_GLOBALS} from '../HIR/Globals';
-import {Result} from '../Utils/Result';
 
-export function validateNoCapitalizedCalls(
-  fn: HIRFunction,
-): Result<void, CompilerError> {
+export function validateNoCapitalizedCalls(fn: HIRFunction): void {
   const envConfig: EnvironmentConfig = fn.env.config;
   const ALLOW_LIST = new Set([
     ...DEFAULT_GLOBALS.keys(),
@@ -23,7 +20,6 @@ export function validateNoCapitalizedCalls(
     return ALLOW_LIST.has(name);
   };
 
-  const errors = new CompilerError();
   const capitalLoadGlobals = new Map<IdentifierId, string>();
   const capitalizedProperties = new Map<IdentifierId, string>();
   const reason =
@@ -48,13 +44,16 @@ export function validateNoCapitalizedCalls(
           const calleeIdentifier = value.callee.identifier.id;
           const calleeName = capitalLoadGlobals.get(calleeIdentifier);
           if (calleeName != null) {
-            CompilerError.throwInvalidReact({
-              category: ErrorCategory.CapitalizedCalls,
-              reason,
-              description: `${calleeName} may be a component`,
-              loc: value.loc,
-              suggestions: null,
-            });
+            fn.env.recordError(
+              new CompilerErrorDetail({
+                category: ErrorCategory.CapitalizedCalls,
+                reason,
+                description: `${calleeName} may be a component`,
+                loc: value.loc,
+                suggestions: null,
+              }),
+            );
+            continue;
           }
           break;
         }
@@ -72,18 +71,19 @@ export function validateNoCapitalizedCalls(
           const propertyIdentifier = value.property.identifier.id;
           const propertyName = capitalizedProperties.get(propertyIdentifier);
           if (propertyName != null) {
-            errors.push({
-              category: ErrorCategory.CapitalizedCalls,
-              reason,
-              description: `${propertyName} may be a component`,
-              loc: value.loc,
-              suggestions: null,
-            });
+            fn.env.recordError(
+              new CompilerErrorDetail({
+                category: ErrorCategory.CapitalizedCalls,
+                reason,
+                description: `${propertyName} may be a component`,
+                loc: value.loc,
+                suggestions: null,
+              }),
+            );
           }
           break;
         }
       }
     }
   }
-  return errors.asResult();
 }

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

@@ -6,7 +6,7 @@
  */
 
 import {CompilerError, SourceLocation} from '..';
-import {ErrorCategory} from '../CompilerError';
+import {CompilerErrorDetail, ErrorCategory} from '../CompilerError';
 import {
   ArrayExpression,
   BlockId,
@@ -20,6 +20,7 @@ import {
   eachInstructionValueOperand,
   eachTerminalOperand,
 } from '../HIR/visitors';
+import {Environment} from '../HIR/Environment';
 
 /**
  * Validates that useEffect is not used for derived computations which could/should
@@ -49,8 +50,6 @@ export function validateNoDerivedComputationsInEffects(fn: HIRFunction): void {
   const functions: Map<IdentifierId, FunctionExpression> = new Map();
   const locals: Map<IdentifierId, IdentifierId> = new Map();
 
-  const errors = new CompilerError();
-
   for (const block of fn.body.blocks.values()) {
     for (const instr of block.instructions) {
       const {lvalue, value} = instr;
@@ -90,22 +89,19 @@ export function validateNoDerivedComputationsInEffects(fn: HIRFunction): void {
             validateEffect(
               effectFunction.loweredFunc.func,
               dependencies,
-              errors,
+              fn.env,
             );
           }
         }
       }
     }
   }
-  if (errors.hasAnyErrors()) {
-    throw errors;
-  }
 }
 
 function validateEffect(
   effectFunction: HIRFunction,
   effectDeps: Array<IdentifierId>,
-  errors: CompilerError,
+  env: Environment,
 ): void {
   for (const operand of effectFunction.context) {
     if (isSetStateType(operand.identifier)) {
@@ -219,13 +215,15 @@ function validateEffect(
   }
 
   for (const loc of setStateLocations) {
-    errors.push({
-      category: ErrorCategory.EffectDerivationsOfState,
-      reason:
-        'Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)',
-      description: null,
-      loc,
-      suggestions: null,
-    });
+    env.recordError(
+      new CompilerErrorDetail({
+        category: ErrorCategory.EffectDerivationsOfState,
+        reason:
+          'Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)',
+        description: null,
+        loc,
+        suggestions: null,
+      }),
+    );
   }
 }

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {CompilerDiagnostic, CompilerError, Effect} from '..';
+import {CompilerDiagnostic, Effect} from '..';
 import {ErrorCategory} from '../CompilerError';
 import {
   HIRFunction,
@@ -18,7 +18,6 @@ import {
   eachTerminalOperand,
 } from '../HIR/visitors';
 import {AliasingEffect} from '../Inference/AliasingEffects';
-import {Result} from '../Utils/Result';
 
 /**
  * Validates that functions with known mutations (ie due to types) cannot be passed
@@ -43,10 +42,7 @@ import {Result} from '../Utils/Result';
  * This pass detects functions with *known* mutations (Store or Mutate, not ConditionallyMutate)
  * that are passed where a frozen value is expected and rejects them.
  */
-export function validateNoFreezingKnownMutableFunctions(
-  fn: HIRFunction,
-): Result<void, CompilerError> {
-  const errors = new CompilerError();
+export function validateNoFreezingKnownMutableFunctions(fn: HIRFunction): void {
   const contextMutationEffects: Map<
     IdentifierId,
     Extract<AliasingEffect, {kind: 'Mutate'} | {kind: 'MutateTransitive'}>
@@ -63,7 +59,7 @@ export function validateNoFreezingKnownMutableFunctions(
           place.identifier.name.kind === 'named'
             ? `\`${place.identifier.name.value}\``
             : 'a local variable';
-        errors.pushDiagnostic(
+        fn.env.recordError(
           CompilerDiagnostic.create({
             category: ErrorCategory.Immutability,
             reason: 'Cannot modify local variables after render completes',
@@ -162,5 +158,4 @@ export function validateNoFreezingKnownMutableFunctions(
       visitOperand(operand);
     }
   }
-  return errors.asResult();
 }

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

@@ -5,11 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {CompilerDiagnostic, CompilerError} from '..';
+import {CompilerDiagnostic} 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
@@ -20,10 +19,7 @@ import {Result} from '../Utils/Result';
  * 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();
+export function validateNoImpureFunctionsInRender(fn: HIRFunction): void {
   for (const [, block] of fn.body.blocks) {
     for (const instr of block.instructions) {
       const value = instr.value;
@@ -35,7 +31,7 @@ export function validateNoImpureFunctionsInRender(
           callee.identifier.type,
         );
         if (signature != null && signature.impure === true) {
-          errors.pushDiagnostic(
+          fn.env.recordError(
             CompilerDiagnostic.create({
               category: ErrorCategory.Purity,
               reason: 'Cannot call impure function during render',
@@ -55,5 +51,4 @@ export function validateNoImpureFunctionsInRender(
       }
     }
   }
-  return errors.asResult();
 }

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

@@ -27,7 +27,6 @@ import {
   eachPatternOperand,
   eachTerminalOperand,
 } from '../HIR/visitors';
-import {Err, Ok, Result} from '../Utils/Result';
 import {retainWhere} from '../Utils/utils';
 
 /**
@@ -120,12 +119,14 @@ class Env {
   }
 }
 
-export function validateNoRefAccessInRender(
-  fn: HIRFunction,
-): Result<void, CompilerError> {
+export function validateNoRefAccessInRender(fn: HIRFunction): void {
   const env = new Env();
   collectTemporariesSidemap(fn, env);
-  return validateNoRefAccessInRenderImpl(fn, env).map(_ => undefined);
+  const errors = new CompilerError();
+  validateNoRefAccessInRenderImpl(fn, env, errors);
+  for (const detail of errors.details) {
+    fn.env.recordError(detail);
+  }
 }
 
 function collectTemporariesSidemap(fn: HIRFunction, env: Env): void {
@@ -305,7 +306,8 @@ function joinRefAccessTypes(...types: Array<RefAccessType>): RefAccessType {
 function validateNoRefAccessInRenderImpl(
   fn: HIRFunction,
   env: Env,
-): Result<RefAccessType, CompilerError> {
+  errors: CompilerError,
+): RefAccessType {
   let returnValues: Array<undefined | RefAccessType> = [];
   let place;
   for (const param of fn.params) {
@@ -336,7 +338,6 @@ function validateNoRefAccessInRenderImpl(
     env.resetChanged();
     returnValues = [];
     const safeBlocks: Array<{block: BlockId; ref: RefId}> = [];
-    const errors = new CompilerError();
     for (const [, block] of fn.body.blocks) {
       retainWhere(safeBlocks, entry => entry.block !== block.id);
       for (const phi of block.phis) {
@@ -432,13 +433,15 @@ function validateNoRefAccessInRenderImpl(
           case 'FunctionExpression': {
             let returnType: RefAccessType = {kind: 'None'};
             let readRefEffect = false;
+            const innerErrors = new CompilerError();
             const result = validateNoRefAccessInRenderImpl(
               instr.value.loweredFunc.func,
               env,
+              innerErrors,
             );
-            if (result.isOk()) {
-              returnType = result.unwrap();
-            } else if (result.isErr()) {
+            if (!innerErrors.hasAnyErrors()) {
+              returnType = result;
+            } else {
               readRefEffect = true;
             }
             env.set(instr.lvalue.identifier.id, {
@@ -484,24 +487,26 @@ function validateNoRefAccessInRenderImpl(
              */
             if (!didError) {
               const isRefLValue = isUseRefType(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 ||
-                  (hookKind != null &&
-                    hookKind !== 'useState' &&
-                    hookKind !== 'useReducer')
-                ) {
+              if (
+                isRefLValue ||
+                (hookKind != null &&
+                  hookKind !== 'useState' &&
+                  hookKind !== 'useReducer')
+              ) {
+                for (const operand of eachInstructionValueOperand(
+                  instr.value,
+                )) {
                   /**
                    * Allow passing refs or ref-accessing functions when:
                    * 1. lvalue is a ref (mergeRefs pattern: `mergeRefs(ref1, ref2)`)
                    * 2. calling hooks (independently validated for ref safety)
                    */
                   validateNoDirectRefValueAccess(errors, operand, env);
-                } else if (interpolatedAsJsx.has(instr.lvalue.identifier.id)) {
+                }
+              } else if (interpolatedAsJsx.has(instr.lvalue.identifier.id)) {
+                for (const operand of eachInstructionValueOperand(
+                  instr.value,
+                )) {
                   /**
                    * Special case: the lvalue is passed as a jsx child
                    *
@@ -510,7 +515,98 @@ function validateNoRefAccessInRenderImpl(
                    * render function which attempts to obey the rules.
                    */
                   validateNoRefValueAccess(errors, env, operand);
-                } else {
+                }
+              } else if (hookKind == null && instr.effects != null) {
+                /**
+                 * For non-hook functions with known aliasing effects, use the
+                 * effects to determine what validation to apply for each place.
+                 * Track visited id:kind pairs to avoid duplicate errors.
+                 */
+                const visitedEffects: Set<string> = new Set();
+                for (const effect of instr.effects) {
+                  let place: Place | null = null;
+                  let validation: 'ref-passed' | 'direct-ref' | 'none' = 'none';
+                  switch (effect.kind) {
+                    case 'Freeze': {
+                      place = effect.value;
+                      validation = 'direct-ref';
+                      break;
+                    }
+                    case 'Mutate':
+                    case 'MutateTransitive':
+                    case 'MutateConditionally':
+                    case 'MutateTransitiveConditionally': {
+                      place = effect.value;
+                      validation = 'ref-passed';
+                      break;
+                    }
+                    case 'Render': {
+                      place = effect.place;
+                      validation = 'ref-passed';
+                      break;
+                    }
+                    case 'Capture':
+                    case 'Alias':
+                    case 'MaybeAlias':
+                    case 'Assign':
+                    case 'CreateFrom': {
+                      place = effect.from;
+                      validation = 'ref-passed';
+                      break;
+                    }
+                    case 'ImmutableCapture': {
+                      /**
+                       * ImmutableCapture can come from two sources:
+                       * 1. A known signature that explicitly freezes the operand
+                       *    (e.g. PanResponder.create) — safe, the function doesn't
+                       *    call callbacks during render.
+                       * 2. Downgraded defaults when the operand is already frozen
+                       *    (e.g. foo(propRef)) — the function is unknown and may
+                       *    access the ref.
+                       *
+                       * We distinguish these by checking whether the same operand
+                       * also has a Freeze effect on this instruction, which only
+                       * comes from known signatures.
+                       */
+                      place = effect.from;
+                      const isFrozen = instr.effects.some(
+                        e =>
+                          e.kind === 'Freeze' &&
+                          e.value.identifier.id === effect.from.identifier.id,
+                      );
+                      validation = isFrozen ? 'direct-ref' : 'ref-passed';
+                      break;
+                    }
+                    case 'Create':
+                    case 'CreateFunction':
+                    case 'Apply':
+                    case 'Impure':
+                    case 'MutateFrozen':
+                    case 'MutateGlobal': {
+                      break;
+                    }
+                  }
+                  if (place !== null && validation !== 'none') {
+                    const key = `${place.identifier.id}:${validation}`;
+                    if (!visitedEffects.has(key)) {
+                      visitedEffects.add(key);
+                      if (validation === 'direct-ref') {
+                        validateNoDirectRefValueAccess(errors, place, env);
+                      } else {
+                        validateNoRefPassedToFunction(
+                          errors,
+                          env,
+                          place,
+                          place.loc,
+                        );
+                      }
+                    }
+                  }
+                }
+              } else {
+                for (const operand of eachInstructionValueOperand(
+                  instr.value,
+                )) {
                   validateNoRefPassedToFunction(
                     errors,
                     env,
@@ -729,7 +825,7 @@ function validateNoRefAccessInRenderImpl(
     }
 
     if (errors.hasAnyErrors()) {
-      return Err(errors);
+      return {kind: 'None'};
     }
   }
 
@@ -738,10 +834,8 @@ function validateNoRefAccessInRenderImpl(
     loc: GeneratedSource,
   });
 
-  return Ok(
-    joinRefAccessTypes(
-      ...returnValues.filter((env): env is RefAccessType => env !== undefined),
-    ),
+  return joinRefAccessTypes(
+    ...returnValues.filter((env): env is RefAccessType => env !== undefined),
   );
 }
 

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

@@ -13,7 +13,6 @@ import {
 import {HIRFunction, IdentifierId, isSetStateType} from '../HIR';
 import {computeUnconditionalBlocks} from '../HIR/ComputeUnconditionalBlocks';
 import {eachInstructionValueOperand} from '../HIR/visitors';
-import {Result} from '../Utils/Result';
 
 /**
  * Validates that the given function does not have an infinite update loop
@@ -43,17 +42,21 @@ import {Result} from '../Utils/Result';
  * y();
  * ```
  */
-export function validateNoSetStateInRender(
-  fn: HIRFunction,
-): Result<void, CompilerError> {
+export function validateNoSetStateInRender(fn: HIRFunction): void {
   const unconditionalSetStateFunctions: Set<IdentifierId> = new Set();
-  return validateNoSetStateInRenderImpl(fn, unconditionalSetStateFunctions);
+  const errors = validateNoSetStateInRenderImpl(
+    fn,
+    unconditionalSetStateFunctions,
+  );
+  for (const detail of errors.details) {
+    fn.env.recordError(detail);
+  }
 }
 
 function validateNoSetStateInRenderImpl(
   fn: HIRFunction,
   unconditionalSetStateFunctions: Set<IdentifierId>,
-): Result<void, CompilerError> {
+): CompilerError {
   const unconditionalBlocks = computeUnconditionalBlocks(fn);
   let activeManualMemoId: number | null = null;
   const errors = new CompilerError();
@@ -92,7 +95,7 @@ function validateNoSetStateInRenderImpl(
             validateNoSetStateInRenderImpl(
               instr.value.loweredFunc.func,
               unconditionalSetStateFunctions,
-            ).isErr()
+            ).hasAnyErrors()
           ) {
             // This function expression unconditionally calls a setState
             unconditionalSetStateFunctions.add(instr.lvalue.identifier.id);
@@ -183,5 +186,5 @@ function validateNoSetStateInRenderImpl(
     }
   }
 
-  return errors.asResult();
+  return errors;
 }

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

@@ -27,6 +27,7 @@ import {
   ScopeId,
   SourceLocation,
 } from '../HIR';
+import {Environment} from '../HIR/Environment';
 import {printIdentifier, printManualMemoDependency} from '../HIR/PrintHIR';
 import {
   eachInstructionValueLValue,
@@ -37,7 +38,6 @@ import {
   ReactiveFunctionVisitor,
   visitReactiveFunction,
 } from '../ReactiveScopes/visitors';
-import {Result} from '../Utils/Result';
 import {getOrInsertDefault} from '../Utils/utils';
 
 /**
@@ -47,15 +47,12 @@ import {getOrInsertDefault} from '../Utils/utils';
  * This can occur if a value's mutable range somehow extended to include a hook and
  * was pruned.
  */
-export function validatePreservedManualMemoization(
-  fn: ReactiveFunction,
-): Result<void, CompilerError> {
+export function validatePreservedManualMemoization(fn: ReactiveFunction): void {
   const state = {
-    errors: new CompilerError(),
+    env: fn.env,
     manualMemoState: null,
   };
   visitReactiveFunction(fn, new Visitor(), state);
-  return state.errors.asResult();
 }
 
 const DEBUG = false;
@@ -113,7 +110,7 @@ type ManualMemoBlockState = {
 };
 
 type VisitorState = {
-  errors: CompilerError;
+  env: Environment;
   manualMemoState: ManualMemoBlockState | null;
 };
 
@@ -233,7 +230,7 @@ function validateInferredDep(
   temporaries: Map<IdentifierId, ManualMemoDependency>,
   declsWithinMemoBlock: Set<DeclarationId>,
   validDepsInMemoBlock: Array<ManualMemoDependency>,
-  errorState: CompilerError,
+  env: Environment,
   memoLocation: SourceLocation,
 ): void {
   let normalizedDep: ManualMemoDependency;
@@ -283,7 +280,7 @@ function validateInferredDep(
       errorDiagnostic = merge(errorDiagnostic ?? compareResult, compareResult);
     }
   }
-  errorState.pushDiagnostic(
+  env.recordError(
     CompilerDiagnostic.create({
       category: ErrorCategory.PreserveManualMemo,
       reason: 'Existing memoization could not be preserved',
@@ -429,7 +426,7 @@ class Visitor extends ReactiveFunctionVisitor<VisitorState> {
           this.temporaries,
           state.manualMemoState.decls,
           state.manualMemoState.depsFromSource,
-          state.errors,
+          state.env,
           state.manualMemoState.loc,
         );
       }
@@ -532,7 +529,7 @@ class Visitor extends ReactiveFunctionVisitor<VisitorState> {
           !this.scopes.has(identifier.scope.id) &&
           !this.prunedScopes.has(identifier.scope.id)
         ) {
-          state.errors.pushDiagnostic(
+          state.env.recordError(
             CompilerDiagnostic.create({
               category: ErrorCategory.PreserveManualMemo,
               reason: 'Existing memoization could not be preserved',
@@ -578,7 +575,7 @@ class Visitor extends ReactiveFunctionVisitor<VisitorState> {
 
           for (const identifier of decls) {
             if (isUnmemoized(identifier, this.scopes)) {
-              state.errors.pushDiagnostic(
+              state.env.recordError(
                 CompilerDiagnostic.create({
                   category: ErrorCategory.PreserveManualMemo,
                   reason: 'Existing memoization could not be preserved',

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

@@ -7,9 +7,9 @@
 
 import {NodePath} from '@babel/traverse';
 import * as t from '@babel/types';
-import {CompilerDiagnostic, CompilerError, ErrorCategory} from '..';
+import {CompilerDiagnostic, ErrorCategory} from '..';
 import {CodegenFunction} from '../ReactiveScopes';
-import {Result} from '../Utils/Result';
+import {Environment} from '../HIR/Environment';
 
 /**
  * IMPORTANT: This validation is only intended for use in unit tests.
@@ -123,9 +123,8 @@ export function validateSourceLocations(
     t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
   >,
   generatedAst: CodegenFunction,
-): Result<void, CompilerError> {
-  const errors = new CompilerError();
-
+  env: Environment,
+): void {
   /*
    * Step 1: Collect important locations from the original source
    * Note: Multiple node types can share the same location (e.g. VariableDeclarator and Identifier)
@@ -240,7 +239,7 @@ export function validateSourceLocations(
     loc: t.SourceLocation,
     nodeType: string,
   ): void => {
-    errors.pushDiagnostic(
+    env.recordError(
       CompilerDiagnostic.create({
         category: ErrorCategory.Todo,
         reason: 'Important source location missing in generated code',
@@ -260,7 +259,7 @@ export function validateSourceLocations(
     expectedType: string,
     actualTypes: Set<string>,
   ): void => {
-    errors.pushDiagnostic(
+    env.recordError(
       CompilerDiagnostic.create({
         category: ErrorCategory.Todo,
         reason:
@@ -308,6 +307,4 @@ export function validateSourceLocations(
       }
     }
   }
-
-  return errors.asResult();
 }

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

@@ -16,14 +16,13 @@ import {
   IdentifierId,
   SourceLocation,
 } from '../HIR';
+import {Environment} from '../HIR/Environment';
 import {
   eachInstructionValueOperand,
   eachTerminalOperand,
 } from '../HIR/visitors';
-import {Result} from '../Utils/Result';
 
-export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> {
-  const errors = new CompilerError();
+export function validateUseMemo(fn: HIRFunction): void {
   const voidMemoErrors = new CompilerError();
   const useMemos = new Set<IdentifierId>();
   const react = new Set<IdentifierId>();
@@ -91,7 +90,7 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> {
               firstParam.kind === 'Identifier'
                 ? firstParam.loc
                 : firstParam.place.loc;
-            errors.pushDiagnostic(
+            fn.env.recordError(
               CompilerDiagnostic.create({
                 category: ErrorCategory.UseMemo,
                 reason: 'useMemo() callbacks may not accept parameters',
@@ -107,7 +106,7 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> {
           }
 
           if (body.loweredFunc.func.async || body.loweredFunc.func.generator) {
-            errors.pushDiagnostic(
+            fn.env.recordError(
               CompilerDiagnostic.create({
                 category: ErrorCategory.UseMemo,
                 reason:
@@ -123,7 +122,7 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> {
             );
           }
 
-          validateNoContextVariableAssignment(body.loweredFunc.func, errors);
+          validateNoContextVariableAssignment(body.loweredFunc.func, fn.env);
 
           if (fn.env.config.validateNoVoidUseMemo) {
             if (!hasNonVoidReturn(body.loweredFunc.func)) {
@@ -177,12 +176,11 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> {
     }
   }
   fn.env.logErrors(voidMemoErrors.asResult());
-  return errors.asResult();
 }
 
 function validateNoContextVariableAssignment(
   fn: HIRFunction,
-  errors: CompilerError,
+  env: Environment,
 ): void {
   const context = new Set(fn.context.map(place => place.identifier.id));
   for (const block of fn.body.blocks.values()) {
@@ -191,7 +189,7 @@ function validateNoContextVariableAssignment(
       switch (value.kind) {
         case 'StoreContext': {
           if (context.has(value.lvalue.place.identifier.id)) {
-            errors.pushDiagnostic(
+            env.recordError(
               CompilerDiagnostic.create({
                 category: ErrorCategory.UseMemo,
                 reason:

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ecma/error.reserved-words.expect.md

@@ -24,18 +24,9 @@ function useThing(fn) {
 ```
 Found 1 error:
 
-Compilation Skipped: `this` is not supported syntax
+Error: Expected a non-reserved identifier name
 
-React Compiler does not support compiling functions that use `this`.
-
-error.reserved-words.ts:8:28
-   6 |
-   7 |   if (ref.current === null) {
->  8 |     ref.current = function (this: unknown, ...args) {
-     |                             ^^^^^^^^^^^^^ `this` was used here
-   9 |       return fnRef.current.call(this, ...args);
-  10 |     };
-  11 |   }
+`this` is a reserved word in JavaScript and cannot be used as an identifier name.
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error._todo.computed-lval-in-destructure.expect.md

@@ -17,16 +17,17 @@ function Component(props) {
 ```
 Found 1 error:
 
-Todo: (BuildHIR::lowerAssignment) Handle computed properties in ObjectPattern
+Invariant: [InferMutationAliasingEffects] Expected value kind to be initialized
 
-error._todo.computed-lval-in-destructure.ts:3:9
-  1 | function Component(props) {
-  2 |   const computedKey = props.key;
-> 3 |   const {[computedKey]: x} = props.val;
-    |          ^^^^^^^^^^^^^^^^ (BuildHIR::lowerAssignment) Handle computed properties in ObjectPattern
+<unknown> x$8.
+
+error._todo.computed-lval-in-destructure.ts:5:9
+  3 |   const {[computedKey]: x} = props.val;
   4 |
-  5 |   return x;
+> 5 |   return x;
+    |          ^ this is uninitialized
   6 | }
+  7 |
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.fault-tolerance-reports-multiple-errors.expect.md

@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+/**
+ * This fixture tests fault tolerance: the compiler should report
+ * multiple independent errors rather than stopping at the first one.
+ *
+ * Error 1: Ref access during render (ref.current)
+ * Error 2: Mutation of frozen value (props)
+ */
+function Component(props) {
+  const ref = useRef(null);
+
+  // Error: reading ref during render
+  const value = ref.current;
+
+  // Error: mutating frozen value (props, which is frozen after hook call)
+  props.items = [];
+
+  return <div>{value}</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: This value cannot be modified
+
+Modifying component props or hook arguments is not allowed. Consider using a local variable instead.
+
+error.fault-tolerance-reports-multiple-errors.ts:16:2
+  14 |
+  15 |   // Error: mutating frozen value (props, which is frozen after hook call)
+> 16 |   props.items = [];
+     |   ^^^^^ value cannot be modified
+  17 |
+  18 |   return <div>{value}</div>;
+  19 | }
+
+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.fault-tolerance-reports-multiple-errors.ts:13:16
+  11 |
+  12 |   // Error: reading ref during render
+> 13 |   const value = ref.current;
+     |                 ^^^^^^^^^^^ Cannot access ref value during render
+  14 |
+  15 |   // Error: mutating frozen value (props, which is frozen after hook call)
+  16 |   props.items = [];
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.fault-tolerance-reports-multiple-errors.js

@@ -0,0 +1,19 @@
+// @validateRefAccessDuringRender
+/**
+ * This fixture tests fault tolerance: the compiler should report
+ * multiple independent errors rather than stopping at the first one.
+ *
+ * Error 1: Ref access during render (ref.current)
+ * Error 2: Mutation of frozen value (props)
+ */
+function Component(props) {
+  const ref = useRef(null);
+
+  // Error: reading ref during render
+  const value = ref.current;
+
+  // Error: mutating frozen value (props, which is frozen after hook call)
+  props.items = [];
+
+  return <div>{value}</div>;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-call-freezes-captured-memberexpr.expect.md

@@ -29,7 +29,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Error
 
 ```
-Found 1 error:
+Found 2 errors:
 
 Error: This value cannot be modified
 
@@ -43,6 +43,32 @@ error.hook-call-freezes-captured-memberexpr.ts:13:2
   14 |   return <Stringify x={x} cb={cb} />;
   15 | }
   16 |
+
+Error: Cannot modify local variables after render completes
+
+This argument is a function which may reassign or mutate `x` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.hook-call-freezes-captured-memberexpr.ts:9:25
+   7 |    * After this custom hook call, it's no longer valid to mutate x.
+   8 |    */
+>  9 |   const cb = useIdentity(() => {
+     |                          ^^^^^^^
+> 10 |     x.value++;
+     | ^^^^^^^^^^^^^^
+> 11 |   });
+     | ^^^^ This function may (indirectly) reassign or modify `x` after render
+  12 |
+  13 |   x.value += count;
+  14 |   return <Stringify x={x} cb={cb} />;
+
+error.hook-call-freezes-captured-memberexpr.ts:10:4
+   8 |    */
+   9 |   const cb = useIdentity(() => {
+> 10 |     x.value++;
+     |     ^ This modifies `x`
+  11 |   });
+  12 |
+  13 |   x.value += count;
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ReactUseMemo-async-callback.expect.md

@@ -15,7 +15,7 @@ function component(a, b) {
 ## Error
 
 ```
-Found 1 error:
+Found 3 errors:
 
 Error: useMemo() callbacks may not be async or generator functions
 
@@ -32,6 +32,37 @@ error.invalid-ReactUseMemo-async-callback.ts:2:24
   5 |   return x;
   6 | }
   7 |
+
+Error: Found missing memoization dependencies
+
+Missing dependencies can cause a value to update less often than it should, resulting in stale UI.
+
+error.invalid-ReactUseMemo-async-callback.ts:3:10
+  1 | function component(a, b) {
+  2 |   let x = React.useMemo(async () => {
+> 3 |     await a;
+    |           ^ Missing dependency `a`
+  4 |   }, []);
+  5 |   return x;
+  6 | }
+
+Inferred dependencies: `[a]`
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `a`, but the source dependencies were []. Inferred dependency not present in source.
+
+error.invalid-ReactUseMemo-async-callback.ts:2:24
+  1 | function component(a, b) {
+> 2 |   let x = React.useMemo(async () => {
+    |                         ^^^^^^^^^^^^^
+> 3 |     await a;
+    | ^^^^^^^^^^^^
+> 4 |   }, []);
+    | ^^^^ Could not preserve existing manual memoization
+  5 |   return x;
+  6 | }
+  7 |
 ```
           
       

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

@@ -22,7 +22,7 @@ function Component({item, cond}) {
 ## Error
 
 ```
-Found 2 errors:
+Found 3 errors:
 
 Error: Calling setState from useMemo may trigger an infinite loop
 
@@ -49,6 +49,39 @@ error.invalid-conditional-setState-in-useMemo.ts:8:6
    9 |     }
   10 |   }, [cond, key, init]);
   11 |
+
+Error: Found missing/extra memoization dependencies
+
+Missing dependencies can cause a value to update less often than it should, resulting in stale UI. Extra dependencies can cause a value to update more often than it should, resulting in performance problems such as excessive renders or effects firing too often.
+
+error.invalid-conditional-setState-in-useMemo.ts:7:18
+   5 |   useMemo(() => {
+   6 |     if (cond) {
+>  7 |       setPrevItem(item);
+     |                   ^^^^ Missing dependency `item`
+   8 |       setState(0);
+   9 |     }
+  10 |   }, [cond, key, init]);
+
+error.invalid-conditional-setState-in-useMemo.ts:10:12
+   8 |       setState(0);
+   9 |     }
+> 10 |   }, [cond, key, init]);
+     |             ^^^ Unnecessary dependency `key`. Values declared outside of a component/hook should not be listed as dependencies as the component will not re-render if they change
+  11 |
+  12 |   return state;
+  13 | }
+
+error.invalid-conditional-setState-in-useMemo.ts:10:17
+   8 |       setState(0);
+   9 |     }
+> 10 |   }, [cond, key, init]);
+     |                  ^^^^ Unnecessary dependency `init`. Values declared outside of a component/hook should not be listed as dependencies as the component will not re-render if they change
+  11 |
+  12 |   return state;
+  13 | }
+
+Inferred dependencies: `[cond, item]`
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutation-in-closure.expect.md

@@ -16,7 +16,7 @@ function useInvalidMutation(options) {
 ## Error
 
 ```
-Found 1 error:
+Found 2 errors:
 
 Error: This value cannot be modified
 
@@ -30,6 +30,27 @@ error.invalid-mutation-in-closure.ts:4:4
   5 |   }
   6 |   return test;
   7 | }
+
+Error: Cannot modify local variables after render completes
+
+This argument is a function which may reassign or mutate `options` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-mutation-in-closure.ts:6:9
+  4 |     options.foo = 'bar';
+  5 |   }
+> 6 |   return test;
+    |          ^^^^ This function may (indirectly) reassign or modify `options` after render
+  7 | }
+  8 |
+
+error.invalid-mutation-in-closure.ts:4:4
+  2 |   function test() {
+  3 |     foo(options.foo); // error should not point on this line
+> 4 |     options.foo = 'bar';
+    |     ^^^^^^^ This modifies `options`
+  5 |   }
+  6 |   return test;
+  7 | }
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-in-hook-return-value.expect.md

@@ -15,7 +15,7 @@ function useFoo() {
 ## Error
 
 ```
-Found 1 error:
+Found 2 errors:
 
 Error: Cannot reassign variable after render completes
 
@@ -29,6 +29,31 @@ error.invalid-reassign-local-in-hook-return-value.ts:4:4
   5 |   };
   6 | }
   7 |
+
+Error: Cannot modify local variables after render completes
+
+This argument is a function which may reassign or mutate `x` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-reassign-local-in-hook-return-value.ts:3:9
+  1 | function useFoo() {
+  2 |   let x = 0;
+> 3 |   return value => {
+    |          ^^^^^^^^^^
+> 4 |     x = value;
+    | ^^^^^^^^^^^^^^
+> 5 |   };
+    | ^^^^ This function may (indirectly) reassign or modify `x` after render
+  6 | }
+  7 |
+
+error.invalid-reassign-local-in-hook-return-value.ts:4:4
+  2 |   let x = 0;
+  3 |   return value => {
+> 4 |     x = value;
+    |     ^ This modifies `x`
+  5 |   };
+  6 | }
+  7 |
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-effect.expect.md

@@ -47,7 +47,7 @@ function Component() {
 ## Error
 
 ```
-Found 1 error:
+Found 2 errors:
 
 Error: Cannot reassign variable after render completes
 
@@ -61,6 +61,32 @@ error.invalid-reassign-local-variable-in-effect.ts:7:4
    8 |   };
    9 |
   10 |   const onMount = newValue => {
+
+Error: Cannot modify local variables after render completes
+
+This argument is a function which may reassign or mutate `local` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-reassign-local-variable-in-effect.ts:33:12
+  31 |   };
+  32 |
+> 33 |   useEffect(() => {
+     |             ^^^^^^^
+> 34 |     onMount();
+     | ^^^^^^^^^^^^^^
+> 35 |   }, [onMount]);
+     | ^^^^ This function may (indirectly) reassign or modify `local` after render
+  36 |
+  37 |   return 'ok';
+  38 | }
+
+error.invalid-reassign-local-variable-in-effect.ts:7:4
+   5 |
+   6 |   const reassignLocal = newValue => {
+>  7 |     local = newValue;
+     |     ^^^^^ This modifies `local`
+   8 |   };
+   9 |
+  10 |   const onMount = newValue => {
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-hook-argument.expect.md

@@ -48,7 +48,7 @@ function Component() {
 ## Error
 
 ```
-Found 1 error:
+Found 2 errors:
 
 Error: Cannot reassign variable after render completes
 
@@ -62,6 +62,32 @@ error.invalid-reassign-local-variable-in-hook-argument.ts:8:4
    9 |   };
   10 |
   11 |   const callback = newValue => {
+
+Error: Cannot modify local variables after render completes
+
+This argument is a function which may reassign or mutate `local` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-reassign-local-variable-in-hook-argument.ts:34:14
+  32 |   };
+  33 |
+> 34 |   useIdentity(() => {
+     |               ^^^^^^^
+> 35 |     callback();
+     | ^^^^^^^^^^^^^^^
+> 36 |   });
+     | ^^^^ This function may (indirectly) reassign or modify `local` after render
+  37 |
+  38 |   return 'ok';
+  39 | }
+
+error.invalid-reassign-local-variable-in-hook-argument.ts:8:4
+   6 |
+   7 |   const reassignLocal = newValue => {
+>  8 |     local = newValue;
+     |     ^^^^^ This modifies `local`
+   9 |   };
+  10 |
+  11 |   const callback = newValue => {
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-local-variable-in-jsx-callback.expect.md

@@ -41,7 +41,7 @@ function Component() {
 ## Error
 
 ```
-Found 1 error:
+Found 2 errors:
 
 Error: Cannot reassign variable after render completes
 
@@ -55,6 +55,27 @@ error.invalid-reassign-local-variable-in-jsx-callback.ts:5:4
   6 |   };
   7 |
   8 |   const onClick = newValue => {
+
+Error: Cannot modify local variables after render completes
+
+This argument is a function which may reassign or mutate `local` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-reassign-local-variable-in-jsx-callback.ts:31:26
+  29 |   };
+  30 |
+> 31 |   return <button onClick={onClick}>Submit</button>;
+     |                           ^^^^^^^ This function may (indirectly) reassign or modify `local` after render
+  32 | }
+  33 |
+
+error.invalid-reassign-local-variable-in-jsx-callback.ts:5:4
+  3 |
+  4 |   const reassignLocal = newValue => {
+> 5 |     local = newValue;
+    |     ^^^^^ This modifies `local`
+  6 |   };
+  7 |
+  8 |   const onClick = newValue => {
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-setState-in-useMemo-indirect-useCallback.expect.md

@@ -26,7 +26,7 @@ function useKeyedState({key, init}) {
 ## Error
 
 ```
-Found 1 error:
+Found 3 errors:
 
 Error: Calling setState from useMemo may trigger an infinite loop
 
@@ -40,6 +40,61 @@ error.invalid-setState-in-useMemo-indirect-useCallback.ts:13:4
   14 |   }, [key, init]);
   15 |
   16 |   return state;
+
+Error: Found missing memoization dependencies
+
+Missing dependencies can cause a value to update less often than it should, resulting in stale UI.
+
+error.invalid-setState-in-useMemo-indirect-useCallback.ts:9:13
+   7 |   const fn = useCallback(() => {
+   8 |     setPrevKey(key);
+>  9 |     setState(init);
+     |              ^^^^ Missing dependency `init`
+  10 |   });
+  11 |
+  12 |   useMemo(() => {
+
+error.invalid-setState-in-useMemo-indirect-useCallback.ts:8:15
+   6 |
+   7 |   const fn = useCallback(() => {
+>  8 |     setPrevKey(key);
+     |                ^^^ Missing dependency `key`
+   9 |     setState(init);
+  10 |   });
+  11 |
+
+Error: Found missing/extra memoization dependencies
+
+Missing dependencies can cause a value to update less often than it should, resulting in stale UI. Extra dependencies can cause a value to update more often than it should, resulting in performance problems such as excessive renders or effects firing too often.
+
+error.invalid-setState-in-useMemo-indirect-useCallback.ts:13:4
+  11 |
+  12 |   useMemo(() => {
+> 13 |     fn();
+     |     ^^ Missing dependency `fn`
+  14 |   }, [key, init]);
+  15 |
+  16 |   return state;
+
+error.invalid-setState-in-useMemo-indirect-useCallback.ts:14:6
+  12 |   useMemo(() => {
+  13 |     fn();
+> 14 |   }, [key, init]);
+     |       ^^^ Unnecessary dependency `key`
+  15 |
+  16 |   return state;
+  17 | }
+
+error.invalid-setState-in-useMemo-indirect-useCallback.ts:14:11
+  12 |   useMemo(() => {
+  13 |     fn();
+> 14 |   }, [key, init]);
+     |            ^^^^ Unnecessary dependency `init`
+  15 |
+  16 |   return state;
+  17 | }
+
+Inferred dependencies: `[fn]`
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useMemo-async-callback.expect.md

@@ -15,7 +15,7 @@ function component(a, b) {
 ## Error
 
 ```
-Found 1 error:
+Found 3 errors:
 
 Error: useMemo() callbacks may not be async or generator functions
 
@@ -32,6 +32,37 @@ error.invalid-useMemo-async-callback.ts:2:18
   5 |   return x;
   6 | }
   7 |
+
+Error: Found missing memoization dependencies
+
+Missing dependencies can cause a value to update less often than it should, resulting in stale UI.
+
+error.invalid-useMemo-async-callback.ts:3:10
+  1 | function component(a, b) {
+  2 |   let x = useMemo(async () => {
+> 3 |     await a;
+    |           ^ Missing dependency `a`
+  4 |   }, []);
+  5 |   return x;
+  6 | }
+
+Inferred dependencies: `[a]`
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `a`, but the source dependencies were []. Inferred dependency not present in source.
+
+error.invalid-useMemo-async-callback.ts:2:18
+  1 | function component(a, b) {
+> 2 |   let x = useMemo(async () => {
+    |                   ^^^^^^^^^^^^^
+> 3 |     await a;
+    | ^^^^^^^^^^^^
+> 4 |   }, []);
+    | ^^^^ Could not preserve existing manual memoization
+  5 |   return x;
+  6 | }
+  7 |
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-useMemo-callback-args.expect.md

@@ -13,7 +13,7 @@ function component(a, b) {
 ## Error
 
 ```
-Found 1 error:
+Found 3 errors:
 
 Error: useMemo() callbacks may not accept parameters
 
@@ -26,6 +26,32 @@ error.invalid-useMemo-callback-args.ts:2:18
   3 |   return x;
   4 | }
   5 |
+
+Error: Found missing memoization dependencies
+
+Missing dependencies can cause a value to update less often than it should, resulting in stale UI.
+
+error.invalid-useMemo-callback-args.ts:2:23
+  1 | function component(a, b) {
+> 2 |   let x = useMemo(c => a, []);
+    |                        ^ Missing dependency `a`
+  3 |   return x;
+  4 | }
+  5 |
+
+Inferred dependencies: `[a]`
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `a`, but the source dependencies were []. Inferred dependency not present in source.
+
+error.invalid-useMemo-callback-args.ts:2:18
+  1 | function component(a, b) {
+> 2 |   let x = useMemo(c => a, []);
+    |                   ^^^^^^ Could not preserve existing manual memoization
+  3 |   return x;
+  4 | }
+  5 |
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.mutable-range-shared-inner-outer-function.expect.md

@@ -32,7 +32,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Error
 
 ```
-Found 1 error:
+Found 2 errors:
 
 Error: Cannot reassign variable after render completes
 
@@ -46,6 +46,28 @@ error.mutable-range-shared-inner-outer-function.ts:8:6
    9 |       b = [];
   10 |     } else {
   11 |       a = {};
+
+Error: Cannot modify local variables after render completes
+
+This argument is a function which may reassign or mutate `a` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.mutable-range-shared-inner-outer-function.ts:17:23
+  15 |     b.push(false);
+  16 |   };
+> 17 |   return <div onClick={f} />;
+     |                        ^ This function may (indirectly) reassign or modify `a` after render
+  18 | }
+  19 |
+  20 | export const FIXTURE_ENTRYPOINT = {
+
+error.mutable-range-shared-inner-outer-function.ts:8:6
+   6 |   const f = () => {
+   7 |     if (cond) {
+>  8 |       a = {};
+     |       ^ This modifies `a`
+   9 |       b = [];
+  10 |     } else {
+  11 |       a = {};
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-allow-assigning-to-inferred-ref-prop-in-callback.expect.md

@@ -29,7 +29,7 @@ function useHook(parentRef) {
 ## Error
 
 ```
-Found 1 error:
+Found 2 errors:
 
 Error: This value cannot be modified
 
@@ -43,6 +43,27 @@ error.todo-allow-assigning-to-inferred-ref-prop-in-callback.ts:15:8
   16 |       }
   17 |     }
   18 |   };
+
+Error: Cannot modify local variables after render completes
+
+This argument is a function which may reassign or mutate `parentRef` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.todo-allow-assigning-to-inferred-ref-prop-in-callback.ts:19:9
+  17 |     }
+  18 |   };
+> 19 |   return handler;
+     |          ^^^^^^^ This function may (indirectly) reassign or modify `parentRef` after render
+  20 | }
+  21 |
+
+error.todo-allow-assigning-to-inferred-ref-prop-in-callback.ts:15:8
+  13 |       } else {
+  14 |         // So this assignment fails since we don't know its a ref
+> 15 |         parentRef.current = instance;
+     |         ^^^^^^^^^ This modifies `parentRef`
+  16 |       }
+  17 |     }
+  18 |   };
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-function-expression-references-later-variable-declaration.expect.md

@@ -17,7 +17,7 @@ function Component() {
 ## Error
 
 ```
-Found 1 error:
+Found 2 errors:
 
 Error: Cannot reassign variable after render completes
 
@@ -31,6 +31,27 @@ error.todo-function-expression-references-later-variable-declaration.ts:3:4
   4 |   };
   5 |   let onClick;
   6 |
+
+Error: Cannot modify local variables after render completes
+
+This argument is a function which may reassign or mutate `onClick` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.todo-function-expression-references-later-variable-declaration.ts:7:23
+  5 |   let onClick;
+  6 |
+> 7 |   return <div onClick={callback} />;
+    |                        ^^^^^^^^ This function may (indirectly) reassign or modify `onClick` after render
+  8 | }
+  9 |
+
+error.todo-function-expression-references-later-variable-declaration.ts:3:4
+  1 | function Component() {
+  2 |   let callback = () => {
+> 3 |     onClick = () => {};
+    |     ^^^^^^^ This modifies `onClick`
+  4 |   };
+  5 |   let onClick;
+  6 |
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-hoisted-function-in-unreachable-code.expect.md

@@ -18,15 +18,18 @@ function Component() {
 ```
 Found 1 error:
 
-Todo: Support functions with unreachable code that may contain hoisted declarations
+Invariant: [InferMutationAliasingEffects] Expected value kind to be initialized
 
-error.todo-hoisted-function-in-unreachable-code.ts:6:2
+<unknown> Foo$0.
+
+error.todo-hoisted-function-in-unreachable-code.ts:3:10
+  1 | // @compilationMode:"infer"
+  2 | function Component() {
+> 3 |   return <Foo />;
+    |           ^^^ this is uninitialized
   4 |
   5 |   // This is unreachable from a control-flow perspective, but it gets hoisted
-> 6 |   function Foo() {}
-    |   ^^^^^^^^^^^^^^^^^ Support functions with unreachable code that may contain hoisted declarations
-  7 | }
-  8 |
+  6 |   function Foo() {}
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-kitchensink.expect.md

@@ -79,43 +79,11 @@ let moduleLocal = false;
 ## Error
 
 ```
-Found 10 errors:
+Found 1 error:
 
-Todo: (BuildHIR::lowerStatement) Handle var kinds in VariableDeclaration
+Invariant: Expected a variable declaration
 
-error.todo-kitchensink.ts:3:2
-  1 | function foo([a, b], {c, d, e = 'e'}, f = 'f', ...args) {
-  2 |   let i = 0;
-> 3 |   var x = [];
-    |   ^^^^^^^^^^^ (BuildHIR::lowerStatement) Handle var kinds in VariableDeclaration
-  4 |
-  5 |   class Bar {
-  6 |     #secretSauce = 42;
-
-Compilation Skipped: Inline `class` declarations are not supported
-
-Move class declarations outside of components/hooks.
-
-error.todo-kitchensink.ts:5:2
-   3 |   var x = [];
-   4 |
->  5 |   class Bar {
-     |   ^^^^^^^^^^^
->  6 |     #secretSauce = 42;
-     | ^^^^^^^^^^^^^^^^^^^^^^
->  7 |     constructor() {
-     | ^^^^^^^^^^^^^^^^^^^^^^
->  8 |       console.log(this.#secretSauce);
-     | ^^^^^^^^^^^^^^^^^^^^^^
->  9 |     }
-     | ^^^^^^^^^^^^^^^^^^^^^^
-> 10 |   }
-     | ^^^^ Inline `class` declarations are not supported
-  11 |
-  12 |   const g = {b() {}, c: () => {}};
-  13 |   const {z, aa = 'aa'} = useCustom();
-
-Todo: (BuildHIR::lowerStatement) Handle non-variable initialization in ForStatement
+Got ExpressionStatement.
 
 error.todo-kitchensink.ts:20:2
   18 |   const j = function bar([quz, qux], ...args) {};
@@ -125,103 +93,10 @@ error.todo-kitchensink.ts:20:2
 > 21 |     x.push(i);
      | ^^^^^^^^^^^^^^
 > 22 |   }
-     | ^^^^ (BuildHIR::lowerStatement) Handle non-variable initialization in ForStatement
+     | ^^^^ Expected a variable declaration
   23 |   for (; i < 3; ) {
   24 |     break;
   25 |   }
-
-Todo: (BuildHIR::lowerStatement) Handle non-variable initialization in ForStatement
-
-error.todo-kitchensink.ts:23:2
-  21 |     x.push(i);
-  22 |   }
-> 23 |   for (; i < 3; ) {
-     |   ^^^^^^^^^^^^^^^^^
-> 24 |     break;
-     | ^^^^^^^^^^
-> 25 |   }
-     | ^^^^ (BuildHIR::lowerStatement) Handle non-variable initialization in ForStatement
-  26 |   for (;;) {
-  27 |     break;
-  28 |   }
-
-Todo: (BuildHIR::lowerStatement) Handle non-variable initialization in ForStatement
-
-error.todo-kitchensink.ts:26:2
-  24 |     break;
-  25 |   }
-> 26 |   for (;;) {
-     |   ^^^^^^^^^^
-> 27 |     break;
-     | ^^^^^^^^^^
-> 28 |   }
-     | ^^^^ (BuildHIR::lowerStatement) Handle non-variable initialization in ForStatement
-  29 |
-  30 |   graphql`
-  31 |     ${g}
-
-Todo: (BuildHIR::lowerStatement) Handle empty test in ForStatement
-
-error.todo-kitchensink.ts:26:2
-  24 |     break;
-  25 |   }
-> 26 |   for (;;) {
-     |   ^^^^^^^^^^
-> 27 |     break;
-     | ^^^^^^^^^^
-> 28 |   }
-     | ^^^^ (BuildHIR::lowerStatement) Handle empty test in ForStatement
-  29 |
-  30 |   graphql`
-  31 |     ${g}
-
-Todo: (BuildHIR::lowerExpression) Handle tagged template with interpolations
-
-error.todo-kitchensink.ts:30:2
-  28 |   }
-  29 |
-> 30 |   graphql`
-     |   ^^^^^^^^
-> 31 |     ${g}
-     | ^^^^^^^^
-> 32 |   `;
-     | ^^^^ (BuildHIR::lowerExpression) Handle tagged template with interpolations
-  33 |
-  34 |   graphql`\\t\n`;
-  35 |
-
-Todo: (BuildHIR::lowerExpression) Handle tagged template where cooked value is different from raw value
-
-error.todo-kitchensink.ts:34:2
-  32 |   `;
-  33 |
-> 34 |   graphql`\\t\n`;
-     |   ^^^^^^^^^^^^^^ (BuildHIR::lowerExpression) Handle tagged template where cooked value is different from raw value
-  35 |
-  36 |   for (c of [1, 2]) {
-  37 |   }
-
-Todo: (BuildHIR::node.lowerReorderableExpression) Expression type `MemberExpression` cannot be safely reordered
-
-error.todo-kitchensink.ts:57:9
-  55 |     case foo(): {
-  56 |     }
-> 57 |     case x.y: {
-     |          ^^^ (BuildHIR::node.lowerReorderableExpression) Expression type `MemberExpression` cannot be safely reordered
-  58 |     }
-  59 |     default: {
-  60 |     }
-
-Todo: (BuildHIR::node.lowerReorderableExpression) Expression type `BinaryExpression` cannot be safely reordered
-
-error.todo-kitchensink.ts:53:9
-  51 |
-  52 |   switch (i) {
-> 53 |     case 1 + 1: {
-     |          ^^^^^ (BuildHIR::node.lowerReorderableExpression) Expression type `BinaryExpression` cannot be safely reordered
-  54 |     }
-  55 |     case foo(): {
-  56 |     }
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-optional.expect.md

@@ -1,39 +0,0 @@
-
-## Input
-
-```javascript
-function useFoo(props: {value: {x: string; y: string} | null}) {
-  const value = props.value;
-  return createArray(value?.x, value?.y)?.join(', ');
-}
-
-function createArray<T>(...args: Array<T>): Array<T> {
-  return args;
-}
-
-export const FIXTURE_ENTRYPONT = {
-  fn: useFoo,
-  props: [{value: null}],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Todo: Unexpected terminal kind `optional` for optional fallthrough block
-
-error.todo-optional-call-chain-in-optional.ts:3:21
-  1 | function useFoo(props: {value: {x: string; y: string} | null}) {
-  2 |   const value = props.value;
-> 3 |   return createArray(value?.x, value?.y)?.join(', ');
-    |                      ^^^^^^^^ Unexpected terminal kind `optional` for optional fallthrough block
-  4 | }
-  5 |
-  6 | function createArray<T>(...args: Array<T>): Array<T> {
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-reassign-const.expect.md

@@ -21,7 +21,7 @@ function Component({foo}) {
 ## Error
 
 ```
-Found 1 error:
+Found 3 errors:
 
 Todo: Support destructuring of context variables
 
@@ -29,10 +29,34 @@ error.todo-reassign-const.ts:3:20
   1 | import {Stringify} from 'shared-runtime';
   2 |
 > 3 | function Component({foo}) {
-    |                     ^^^ Support destructuring of context variables
+    |                     ^^^
   4 |   let bar = foo.bar;
   5 |   return (
   6 |     <Stringify
+
+Todo: Support destructuring of context variables
+
+error.todo-reassign-const.ts:3:20
+  1 | import {Stringify} from 'shared-runtime';
+  2 |
+> 3 | function Component({foo}) {
+    |                     ^^^
+  4 |   let bar = foo.bar;
+  5 |   return (
+  6 |     <Stringify
+
+Error: This value cannot be modified
+
+Modifying component props or hook arguments is not allowed. Consider using a local variable instead.
+
+error.todo-reassign-const.ts:8:8
+   6 |     <Stringify
+   7 |       handler={() => {
+>  8 |         foo = true;
+     |         ^^^ `foo` cannot be modified
+   9 |       }}
+  10 |     />
+  11 |   );
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-callback-generator.expect.md

@@ -18,7 +18,7 @@ function component(a, b) {
 ## Error
 
 ```
-Found 1 error:
+Found 2 errors:
 
 Todo: (BuildHIR::lowerExpression) Handle YieldExpression expressions
 
@@ -30,6 +30,23 @@ error.useMemo-callback-generator.ts:6:4
   7 |   }, []);
   8 |   return x;
   9 | }
+
+Error: useMemo() callbacks may not be async or generator functions
+
+useMemo() callbacks are called once and must synchronously return a value.
+
+error.useMemo-callback-generator.ts:5:18
+   3 |   // useful for now, but adding this test in case we do
+   4 |   // add support for generators in the future.
+>  5 |   let x = useMemo(function* () {
+     |                   ^^^^^^^^^^^^^^
+>  6 |     yield a;
+     | ^^^^^^^^^^^^
+>  7 |   }, []);
+     | ^^^^ Async and generator functions are not supported
+   8 |   return x;
+   9 | }
+  10 |
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.expect.md

@@ -3,8 +3,10 @@
 
 ```javascript
 // @validateRefAccessDuringRender:true
+import {mutate} from 'shared-runtime';
+
 function Foo(props, ref) {
-  console.log(ref.current);
+  mutate(ref.current);
   return <div>{props.bar}</div>;
 }
 
@@ -26,14 +28,14 @@ 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.validate-mutate-ref-arg-in-render.ts:3:14
-  1 | // @validateRefAccessDuringRender:true
-  2 | function Foo(props, ref) {
-> 3 |   console.log(ref.current);
-    |               ^^^^^^^^^^^ Passing a ref to a function may read its value during render
-  4 |   return <div>{props.bar}</div>;
-  5 | }
-  6 |
+error.validate-mutate-ref-arg-in-render.ts:5:9
+  3 |
+  4 | function Foo(props, ref) {
+> 5 |   mutate(ref.current);
+    |          ^^^^^^^^^^^ Passing a ref to a function may read its value during render
+  6 |   return <div>{props.bar}</div>;
+  7 | }
+  8 |
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.js

@@ -1,6 +1,8 @@
 // @validateRefAccessDuringRender:true
+import {mutate} from 'shared-runtime';
+
 function Foo(props, ref) {
-  console.log(ref.current);
+  mutate(ref.current);
   return <div>{props.bar}</div>;
 }
 

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

@@ -51,7 +51,7 @@ function Component({x, y, z}) {
 ## Error
 
 ```
-Found 4 errors:
+Found 6 errors:
 
 Error: Found missing/extra memoization dependencies
 
@@ -157,6 +157,48 @@ error.invalid-exhaustive-deps.ts:37:13
   40 |   }, []);
 
 Inferred dependencies: `[ref]`
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `x.y.z.a.b`, but the source dependencies were [x?.y.z.a?.b.z]. Inferred different dependency than source.
+
+error.invalid-exhaustive-deps.ts:14:20
+  12 |     // ok, not our job to type check nullability
+  13 |   }, [x.y.z.a]);
+> 14 |   const c = useMemo(() => {
+     |                     ^^^^^^^
+> 15 |     return x?.y.z.a?.b;
+     | ^^^^^^^^^^^^^^^^^^^^^^^
+> 16 |     // error: too precise
+     | ^^^^^^^^^^^^^^^^^^^^^^^
+> 17 |   }, [x?.y.z.a?.b.z]);
+     | ^^^^ Could not preserve existing manual memoization
+  18 |   const d = useMemo(() => {
+  19 |     return x?.y?.[(console.log(y), z?.b)];
+  20 |     // ok
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `ref`, but the source dependencies were []. Inferred dependency not present in source.
+
+error.invalid-exhaustive-deps.ts:35:21
+  33 |   const ref2 = useRef(null);
+  34 |   const ref = z ? ref1 : ref2;
+> 35 |   const cb = useMemo(() => {
+     |                      ^^^^^^^
+> 36 |     return () => {
+     | ^^^^^^^^^^^^^^^^^^
+> 37 |       return ref.current;
+     | ^^^^^^^^^^^^^^^^^^
+> 38 |     };
+     | ^^^^^^^^^^^^^^^^^^
+> 39 |     // error: ref is a stable type but reactive
+     | ^^^^^^^^^^^^^^^^^^
+> 40 |   }, []);
+     | ^^^^ Could not preserve existing manual memoization
+  41 |   return <Stringify results={[a, b, c, d, e, f, cb]} />;
+  42 | }
+  43 |
 ```
           
       

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

@@ -22,7 +22,7 @@ function useHook() {
 ## Error
 
 ```
-Found 1 error:
+Found 2 errors:
 
 Error: Found missing memoization dependencies
 
@@ -38,6 +38,19 @@ error.invalid-missing-nonreactive-dep-unmemoized.ts:11:31
   14 |
 
 Inferred dependencies: `[object]`
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `object`, but the source dependencies were []. Inferred dependency not present in source.
+
+error.invalid-missing-nonreactive-dep-unmemoized.ts:11:24
+   9 |   useIdentity();
+  10 |   object.x = 0;
+> 11 |   const array = useMemo(() => [object], []);
+     |                         ^^^^^^^^^^^^^^ Could not preserve existing manual memoization
+  12 |   return array;
+  13 | }
+  14 |
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fault-tolerance/error.try-finally-and-mutation-of-props.expect.md

@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+/**
+ * Fault tolerance test: two independent errors should both be reported.
+ *
+ * Error 1 (BuildHIR): `try/finally` is not supported
+ * Error 2 (InferMutationAliasingEffects): Mutation of frozen props
+ */
+function Component(props) {
+  // Error: try/finally (Todo from BuildHIR)
+  try {
+    doWork();
+  } finally {
+    doCleanup();
+  }
+
+  // Error: mutating frozen props
+  props.value = 1;
+
+  return <div>{props.value}</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Todo: (BuildHIR::lowerStatement) Handle TryStatement without a catch clause
+
+error.try-finally-and-mutation-of-props.ts:9:2
+   7 | function Component(props) {
+   8 |   // Error: try/finally (Todo from BuildHIR)
+>  9 |   try {
+     |   ^^^^^
+> 10 |     doWork();
+     | ^^^^^^^^^^^^^
+> 11 |   } finally {
+     | ^^^^^^^^^^^^^
+> 12 |     doCleanup();
+     | ^^^^^^^^^^^^^
+> 13 |   }
+     | ^^^^ (BuildHIR::lowerStatement) Handle TryStatement without a catch clause
+  14 |
+  15 |   // Error: mutating frozen props
+  16 |   props.value = 1;
+
+Error: This value cannot be modified
+
+Modifying component props or hook arguments is not allowed. Consider using a local variable instead.
+
+error.try-finally-and-mutation-of-props.ts:16:2
+  14 |
+  15 |   // Error: mutating frozen props
+> 16 |   props.value = 1;
+     |   ^^^^^ value cannot be modified
+  17 |
+  18 |   return <div>{props.value}</div>;
+  19 | }
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fault-tolerance/error.try-finally-and-mutation-of-props.js

@@ -0,0 +1,19 @@
+/**
+ * Fault tolerance test: two independent errors should both be reported.
+ *
+ * Error 1 (BuildHIR): `try/finally` is not supported
+ * Error 2 (InferMutationAliasingEffects): Mutation of frozen props
+ */
+function Component(props) {
+  // Error: try/finally (Todo from BuildHIR)
+  try {
+    doWork();
+  } finally {
+    doCleanup();
+  }
+
+  // Error: mutating frozen props
+  props.value = 1;
+
+  return <div>{props.value}</div>;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fault-tolerance/error.try-finally-and-ref-access.expect.md

@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+/**
+ * Fault tolerance test: two independent errors should both be reported.
+ *
+ * Error 1 (BuildHIR): `try/finally` is not supported
+ * Error 2 (ValidateNoRefAccessInRender): reading ref.current during render
+ */
+function Component() {
+  const ref = useRef(null);
+
+  // Error: try/finally (Todo from BuildHIR)
+  try {
+    doSomething();
+  } finally {
+    cleanup();
+  }
+
+  // Error: reading ref during render
+  const value = ref.current;
+
+  return <div>{value}</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Todo: (BuildHIR::lowerStatement) Handle TryStatement without a catch clause
+
+error.try-finally-and-ref-access.ts:12:2
+  10 |
+  11 |   // Error: try/finally (Todo from BuildHIR)
+> 12 |   try {
+     |   ^^^^^
+> 13 |     doSomething();
+     | ^^^^^^^^^^^^^^^^^^
+> 14 |   } finally {
+     | ^^^^^^^^^^^^^^^^^^
+> 15 |     cleanup();
+     | ^^^^^^^^^^^^^^^^^^
+> 16 |   }
+     | ^^^^ (BuildHIR::lowerStatement) Handle TryStatement without a catch clause
+  17 |
+  18 |   // Error: reading ref during render
+  19 |   const value = 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).
+
+error.try-finally-and-ref-access.ts:19:16
+  17 |
+  18 |   // Error: reading ref during render
+> 19 |   const value = ref.current;
+     |                 ^^^^^^^^^^^ Cannot access ref value during render
+  20 |
+  21 |   return <div>{value}</div>;
+  22 | }
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fault-tolerance/error.try-finally-and-ref-access.js

@@ -0,0 +1,22 @@
+// @validateRefAccessDuringRender
+/**
+ * Fault tolerance test: two independent errors should both be reported.
+ *
+ * Error 1 (BuildHIR): `try/finally` is not supported
+ * Error 2 (ValidateNoRefAccessInRender): reading ref.current during render
+ */
+function Component() {
+  const ref = useRef(null);
+
+  // Error: try/finally (Todo from BuildHIR)
+  try {
+    doSomething();
+  } finally {
+    cleanup();
+  }
+
+  // Error: reading ref during render
+  const value = ref.current;
+
+  return <div>{value}</div>;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fault-tolerance/error.try-finally-ref-access-and-mutation.expect.md

@@ -0,0 +1,86 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+/**
+ * Fault tolerance test: three independent errors should all be reported.
+ *
+ * Error 1 (BuildHIR): `try/finally` is not supported
+ * Error 2 (ValidateNoRefAccessInRender): reading ref.current during render
+ * Error 3 (InferMutationAliasingEffects): Mutation of frozen props
+ */
+function Component(props) {
+  const ref = useRef(null);
+
+  // Error: try/finally (Todo from BuildHIR)
+  try {
+    doWork();
+  } finally {
+    cleanup();
+  }
+
+  // Error: reading ref during render
+  const value = ref.current;
+
+  // Error: mutating frozen props
+  props.items = [];
+
+  return <div>{value}</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 3 errors:
+
+Todo: (BuildHIR::lowerStatement) Handle TryStatement without a catch clause
+
+error.try-finally-ref-access-and-mutation.ts:13:2
+  11 |
+  12 |   // Error: try/finally (Todo from BuildHIR)
+> 13 |   try {
+     |   ^^^^^
+> 14 |     doWork();
+     | ^^^^^^^^^^^^^
+> 15 |   } finally {
+     | ^^^^^^^^^^^^^
+> 16 |     cleanup();
+     | ^^^^^^^^^^^^^
+> 17 |   }
+     | ^^^^ (BuildHIR::lowerStatement) Handle TryStatement without a catch clause
+  18 |
+  19 |   // Error: reading ref during render
+  20 |   const value = ref.current;
+
+Error: This value cannot be modified
+
+Modifying component props or hook arguments is not allowed. Consider using a local variable instead.
+
+error.try-finally-ref-access-and-mutation.ts:23:2
+  21 |
+  22 |   // Error: mutating frozen props
+> 23 |   props.items = [];
+     |   ^^^^^ value cannot be modified
+  24 |
+  25 |   return <div>{value}</div>;
+  26 | }
+
+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.try-finally-ref-access-and-mutation.ts:20:16
+  18 |
+  19 |   // Error: reading ref during render
+> 20 |   const value = ref.current;
+     |                 ^^^^^^^^^^^ Cannot access ref value during render
+  21 |
+  22 |   // Error: mutating frozen props
+  23 |   props.items = [];
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fault-tolerance/error.try-finally-ref-access-and-mutation.js

@@ -0,0 +1,26 @@
+// @validateRefAccessDuringRender
+/**
+ * Fault tolerance test: three independent errors should all be reported.
+ *
+ * Error 1 (BuildHIR): `try/finally` is not supported
+ * Error 2 (ValidateNoRefAccessInRender): reading ref.current during render
+ * Error 3 (InferMutationAliasingEffects): Mutation of frozen props
+ */
+function Component(props) {
+  const ref = useRef(null);
+
+  // Error: try/finally (Todo from BuildHIR)
+  try {
+    doWork();
+  } finally {
+    cleanup();
+  }
+
+  // Error: reading ref during render
+  const value = ref.current;
+
+  // Error: mutating frozen props
+  props.items = [];
+
+  return <div>{value}</div>;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fault-tolerance/error.var-declaration-and-mutation-of-props.expect.md

@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+/**
+ * Fault tolerance test: two independent errors should both be reported.
+ *
+ * Error 1 (BuildHIR): `var` declarations are not supported (treated as `let`)
+ * Error 2 (InferMutationAliasingEffects): Mutation of frozen props
+ */
+function Component(props) {
+  // Error: var declaration (Todo from BuildHIR)
+  var items = props.items;
+
+  // Error: mutating frozen props (detected during inference)
+  props.items = [];
+
+  return <div>{items.length}</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Todo: (BuildHIR::lowerStatement) Handle var kinds in VariableDeclaration
+
+error.var-declaration-and-mutation-of-props.ts:9:2
+   7 | function Component(props) {
+   8 |   // Error: var declaration (Todo from BuildHIR)
+>  9 |   var items = props.items;
+     |   ^^^^^^^^^^^^^^^^^^^^^^^^ (BuildHIR::lowerStatement) Handle var kinds in VariableDeclaration
+  10 |
+  11 |   // Error: mutating frozen props (detected during inference)
+  12 |   props.items = [];
+
+Error: This value cannot be modified
+
+Modifying component props or hook arguments is not allowed. Consider using a local variable instead.
+
+error.var-declaration-and-mutation-of-props.ts:12:2
+  10 |
+  11 |   // Error: mutating frozen props (detected during inference)
+> 12 |   props.items = [];
+     |   ^^^^^ value cannot be modified
+  13 |
+  14 |   return <div>{items.length}</div>;
+  15 | }
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fault-tolerance/error.var-declaration-and-mutation-of-props.js

@@ -0,0 +1,15 @@
+/**
+ * Fault tolerance test: two independent errors should both be reported.
+ *
+ * Error 1 (BuildHIR): `var` declarations are not supported (treated as `let`)
+ * Error 2 (InferMutationAliasingEffects): Mutation of frozen props
+ */
+function Component(props) {
+  // Error: var declaration (Todo from BuildHIR)
+  var items = props.items;
+
+  // Error: mutating frozen props (detected during inference)
+  props.items = [];
+
+  return <div>{items.length}</div>;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fault-tolerance/error.var-declaration-and-ref-access.expect.md

@@ -0,0 +1,62 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+/**
+ * Fault tolerance test: two independent errors should both be reported.
+ *
+ * Error 1 (BuildHIR): `var` declarations are not supported (treated as `let`)
+ * Error 2 (ValidateNoRefAccessInRender): reading ref.current during render
+ */
+function Component() {
+  const ref = useRef(null);
+
+  // Error: var declaration (Todo from BuildHIR)
+  var items = [1, 2, 3];
+
+  // Error: reading ref during render
+  const value = ref.current;
+
+  return (
+    <div>
+      {value}
+      {items.length}
+    </div>
+  );
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Todo: (BuildHIR::lowerStatement) Handle var kinds in VariableDeclaration
+
+error.var-declaration-and-ref-access.ts:12:2
+  10 |
+  11 |   // Error: var declaration (Todo from BuildHIR)
+> 12 |   var items = [1, 2, 3];
+     |   ^^^^^^^^^^^^^^^^^^^^^^ (BuildHIR::lowerStatement) Handle var kinds in VariableDeclaration
+  13 |
+  14 |   // Error: reading ref during render
+  15 |   const value = 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).
+
+error.var-declaration-and-ref-access.ts:15:16
+  13 |
+  14 |   // Error: reading ref during render
+> 15 |   const value = ref.current;
+     |                 ^^^^^^^^^^^ Cannot access ref value during render
+  16 |
+  17 |   return (
+  18 |     <div>
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fault-tolerance/error.var-declaration-and-ref-access.js

@@ -0,0 +1,23 @@
+// @validateRefAccessDuringRender
+/**
+ * Fault tolerance test: two independent errors should both be reported.
+ *
+ * Error 1 (BuildHIR): `var` declarations are not supported (treated as `let`)
+ * Error 2 (ValidateNoRefAccessInRender): reading ref.current during render
+ */
+function Component() {
+  const ref = useRef(null);
+
+  // Error: var declaration (Todo from BuildHIR)
+  var items = [1, 2, 3];
+
+  // Error: reading ref during render
+  const value = ref.current;
+
+  return (
+    <div>
+      {value}
+      {items.length}
+    </div>
+  );
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-fbt-as-local.expect.md

@@ -50,7 +50,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Error
 
 ```
-Found 1 error:
+Found 4 errors:
 
 Todo: Support local variables named `fbt`
 
@@ -60,10 +60,49 @@ error.todo-fbt-as-local.ts:18:19
   16 |
   17 | function Foo(props) {
 > 18 |   const getText1 = fbt =>
-     |                    ^^^ Rename to avoid conflict with fbt plugin
+     |                    ^^^ Support local variables named `fbt`
   19 |     fbt(
   20 |       `Hello, ${fbt.param('(key) name', identity(props.name))}!`,
   21 |       '(description) Greeting'
+
+Todo: Support local variables named `fbt`
+
+Local variables named `fbt` may conflict with the fbt plugin and are not yet supported.
+
+error.todo-fbt-as-local.ts:18:19
+  16 |
+  17 | function Foo(props) {
+> 18 |   const getText1 = fbt =>
+     |                    ^^^ Support local variables named `fbt`
+  19 |     fbt(
+  20 |       `Hello, ${fbt.param('(key) name', identity(props.name))}!`,
+  21 |       '(description) Greeting'
+
+Todo: Support local variables named `fbt`
+
+Local variables named `fbt` may conflict with the fbt plugin and are not yet supported.
+
+error.todo-fbt-as-local.ts:18:19
+  16 |
+  17 | function Foo(props) {
+> 18 |   const getText1 = fbt =>
+     |                    ^^^ Support local variables named `fbt`
+  19 |     fbt(
+  20 |       `Hello, ${fbt.param('(key) name', identity(props.name))}!`,
+  21 |       '(description) Greeting'
+
+Todo: Support local variables named `fbt`
+
+Local variables named `fbt` may conflict with the fbt plugin and are not yet supported.
+
+error.todo-fbt-as-local.ts:24:19
+  22 |     );
+  23 |
+> 24 |   const getText2 = fbt =>
+     |                    ^^^ Support local variables named `fbt`
+  25 |     fbt(
+  26 |       `Goodbye, ${fbt.param('(key) name', identity(props.name))}!`,
+  27 |       '(description) Greeting2'
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/error.todo-locally-require-fbt.expect.md

@@ -16,17 +16,15 @@ function Component(props) {
 ```
 Found 1 error:
 
-Todo: Support local variables named `fbt`
+Invariant: <fbt> tags should be module-level imports
 
-Local variables named `fbt` may conflict with the fbt plugin and are not yet supported.
-
-error.todo-locally-require-fbt.ts:2:8
-  1 | function Component(props) {
-> 2 |   const fbt = require('fbt');
-    |         ^^^ Rename to avoid conflict with fbt plugin
+error.todo-locally-require-fbt.ts:4:10
+  2 |   const fbt = require('fbt');
   3 |
-  4 |   return <fbt desc="Description">{'Text'}</fbt>;
+> 4 |   return <fbt desc="Description">{'Text'}</fbt>;
+    |           ^^^ <fbt> tags should be module-level imports
   5 | }
+  6 |
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-reassign-local-variable-in-jsx-callback.expect.md

@@ -42,7 +42,7 @@ function Component() {
 ## Error
 
 ```
-Found 1 error:
+Found 2 errors:
 
 Error: Cannot reassign variable after render completes
 
@@ -56,6 +56,27 @@ error.invalid-reassign-local-variable-in-jsx-callback.ts:6:4
   7 |   };
   8 |
   9 |   const onClick = newValue => {
+
+Error: Cannot modify local variables after render completes
+
+This argument is a function which may reassign or mutate `local` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-reassign-local-variable-in-jsx-callback.ts:32:26
+  30 |   };
+  31 |
+> 32 |   return <button onClick={onClick}>Submit</button>;
+     |                           ^^^^^^^ This function may (indirectly) reassign or modify `local` after render
+  33 | }
+  34 |
+
+error.invalid-reassign-local-variable-in-jsx-callback.ts:6:4
+  4 |
+  5 |   const reassignLocal = newValue => {
+> 6 |     local = newValue;
+    |     ^^^^^ This modifies `local`
+  7 |   };
+  8 |
+  9 |   const onClick = newValue => {
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-referencing-frozen-hoisted-storecontext-const.expect.md

@@ -31,7 +31,7 @@ function Component({content, refetch}) {
 ## Error
 
 ```
-Found 1 error:
+Found 2 errors:
 
 Error: Cannot access variable before it is declared
 
@@ -52,6 +52,18 @@ Error: Cannot access variable before it is declared
   20 |
   21 |   return <Foo data={data} onSubmit={onSubmit} />;
   22 | }
+
+Error: Found missing memoization dependencies
+
+Missing dependencies can cause a value to update less often than it should, resulting in stale UI.
+
+   9 |   // TDZ violation!
+  10 |   const onRefetch = useCallback(() => {
+> 11 |     refetch(data);
+     |             ^^^^ Missing dependency `data`
+  12 |   }, [refetch]);
+  13 |
+  14 |   // The context variable gets frozen here since it's passed to a hook
 ```
           
       

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

@@ -0,0 +1,77 @@
+
+## Input
+
+```javascript
+// @flow
+import {PanResponder, Stringify} from 'shared-runtime';
+
+export default component Playground() {
+  const onDragEndRef = useRef(() => {});
+  useEffect(() => {
+    onDragEndRef.current = () => {
+      console.log('drag ended');
+    };
+  });
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onPanResponderTerminate: () => {
+          onDragEndRef.current();
+        },
+      }),
+    []
+  );
+  return <Stringify responder={panResponder} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { PanResponder, Stringify } from "shared-runtime";
+
+export default function Playground() {
+  const $ = _c(3);
+  const onDragEndRef = useRef(_temp);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = () => {
+      onDragEndRef.current = _temp2;
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  useEffect(t0);
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = PanResponder.create({
+      onPanResponderTerminate: () => {
+        onDragEndRef.current();
+      },
+    });
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const panResponder = t1;
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = <Stringify responder={panResponder} />;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+}
+function _temp2() {
+  console.log("drag ended");
+}
+function _temp() {}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented

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

@@ -0,0 +1,21 @@
+// @flow
+import {PanResponder, Stringify} from 'shared-runtime';
+
+export default component Playground() {
+  const onDragEndRef = useRef(() => {});
+  useEffect(() => {
+    onDragEndRef.current = () => {
+      console.log('drag ended');
+    };
+  });
+  const panResponder = useMemo(
+    () =>
+      PanResponder.create({
+        onPanResponderTerminate: () => {
+          onDragEndRef.current();
+        },
+      }),
+    []
+  );
+  return <Stringify responder={panResponder} />;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-unrelated-mutation-in-depslist.expect.md

@@ -30,7 +30,7 @@ function useFoo(input1) {
 ## Error
 
 ```
-Found 1 error:
+Found 2 errors:
 
 Error: Found missing memoization dependencies
 
@@ -46,6 +46,23 @@ error.useMemo-unrelated-mutation-in-depslist.ts:18:14
   21 | }
 
 Inferred dependencies: `[x, y]`
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `input1`, but the source dependencies were [y]. Inferred different dependency than source.
+
+error.useMemo-unrelated-mutation-in-depslist.ts:16:27
+  14 |   const x = {};
+  15 |   const y = [input1];
+> 16 |   const memoized = useMemo(() => {
+     |                            ^^^^^^^
+> 17 |     return [y];
+     | ^^^^^^^^^^^^^^^
+> 18 |   }, [(mutate(x), y)]);
+     | ^^^^ Could not preserve existing manual memoization
+  19 |
+  20 |   return [x, memoized];
+  21 | }
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/error.todo-optional-call-chain-in-optional.expect.md

@@ -1,40 +0,0 @@
-
-## Input
-
-```javascript
-// @enablePropagateDepsInHIR
-function useFoo(props: {value: {x: string; y: string} | null}) {
-  const value = props.value;
-  return createArray(value?.x, value?.y)?.join(', ');
-}
-
-function createArray<T>(...args: Array<T>): Array<T> {
-  return args;
-}
-
-export const FIXTURE_ENTRYPONT = {
-  fn: useFoo,
-  props: [{value: null}],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Todo: Unexpected terminal kind `optional` for optional fallthrough block
-
-error.todo-optional-call-chain-in-optional.ts:4:21
-  2 | function useFoo(props: {value: {x: string; y: string} | null}) {
-  3 |   const value = props.value;
-> 4 |   return createArray(value?.x, value?.y)?.join(', ');
-    |                      ^^^^^^^^ Unexpected terminal kind `optional` for optional fallthrough block
-  5 | }
-  6 |
-  7 | function createArray<T>(...args: Array<T>): Array<T> {
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/todo-optional-call-chain-in-optional.expect.md

@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+// @enablePropagateDepsInHIR
+function useFoo(props: {value: {x: string; y: string} | null}) {
+  const value = props.value;
+  return createArray(value?.x, value?.y)?.join(', ');
+}
+
+function createArray<T>(...args: Array<T>): Array<T> {
+  return args;
+}
+
+export const FIXTURE_ENTRYPONT = {
+  fn: useFoo,
+  props: [{value: null}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enablePropagateDepsInHIR
+function useFoo(props) {
+  const $ = _c(3);
+  const value = props.value;
+  let t0;
+  if ($[0] !== value?.x || $[1] !== value?.y) {
+    t0 = createArray(value?.x, value?.y)?.join(", ");
+    $[0] = value?.x;
+    $[1] = value?.y;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+function createArray(...t0) {
+  const args = t0;
+  return args;
+}
+
+export const FIXTURE_ENTRYPONT = {
+  fn: useFoo,
+  props: [{ value: null }],
+};
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/rules-of-hooks/error.invalid-hook-for.expect.md

@@ -16,29 +16,24 @@ function Component(props) {
 ## Error
 
 ```
-Found 2 errors:
+Found 1 error:
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+Invariant: Unexpected empty block with `goto` terminal
 
-error.invalid-hook-for.ts:4:9
-  2 |   let i = 0;
-  3 |   for (let x = 0; useHook(x) < 10; useHook(i), x++) {
-> 4 |     i += useHook(x);
-    |          ^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
-  5 |   }
-  6 |   return i;
-  7 | }
+Block bb5 is empty.
 
-Error: Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
-
-error.invalid-hook-for.ts:3:35
+error.invalid-hook-for.ts:3:2
   1 | function Component(props) {
   2 |   let i = 0;
 > 3 |   for (let x = 0; useHook(x) < 10; useHook(i), x++) {
-    |                                    ^^^^^^^ Hooks must always be called in a consistent order, and may not be called conditionally. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
-  4 |     i += useHook(x);
-  5 |   }
+    |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 4 |     i += useHook(x);
+    | ^^^^^^^^^^^^^^^^^^^^
+> 5 |   }
+    | ^^^^ Unexpected empty block with `goto` terminal
   6 |   return i;
+  7 | }
+  8 |
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-optional-call-chain-in-optional.expect.md

@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+function useFoo(props: {value: {x: string; y: string} | null}) {
+  const value = props.value;
+  return createArray(value?.x, value?.y)?.join(', ');
+}
+
+function createArray<T>(...args: Array<T>): Array<T> {
+  return args;
+}
+
+export const FIXTURE_ENTRYPONT = {
+  fn: useFoo,
+  props: [{value: null}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function useFoo(props) {
+  const $ = _c(3);
+  const value = props.value;
+  let t0;
+  if ($[0] !== value?.x || $[1] !== value?.y) {
+    t0 = createArray(value?.x, value?.y)?.join(", ");
+    $[0] = value?.x;
+    $[1] = value?.y;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+
+function createArray(...t0) {
+  const args = t0;
+  return args;
+}
+
+export const FIXTURE_ENTRYPONT = {
+  fn: useFoo,
+  props: [{ value: null }],
+};
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.error.object-pattern-computed-key.expect.md

@@ -23,16 +23,18 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 Found 1 error:
 
-Todo: (BuildHIR::lowerAssignment) Handle computed properties in ObjectPattern
+Invariant: [InferMutationAliasingEffects] Expected value kind to be initialized
 
-todo.error.object-pattern-computed-key.ts:5:9
-  3 | const SCALE = 2;
+<unknown> value$3.
+
+todo.error.object-pattern-computed-key.ts:6:9
   4 | function Component(props) {
-> 5 |   const {[props.name]: value} = props;
-    |          ^^^^^^^^^^^^^^^^^^^ (BuildHIR::lowerAssignment) Handle computed properties in ObjectPattern
-  6 |   return value;
+  5 |   const {[props.name]: value} = props;
+> 6 |   return value;
+    |          ^^^^^ this is uninitialized
   7 | }
   8 |
+  9 | export const FIXTURE_ENTRYPOINT = {
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-no-forget-multiple-with-eslint-suppression.expect.md

@@ -25,6 +25,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
+import { c as _c } from "react/compiler-runtime";
 import { useRef } from "react";
 
 const useControllableState = (options) => {};

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

@@ -64,6 +64,9 @@ testRule(
           makeTestCaseError(
             'Capitalized functions are reserved for components',
           ),
+          makeTestCaseError(
+            'Capitalized functions are reserved for components',
+          ),
         ],
       },
     ],

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

@@ -57,7 +57,6 @@ testRule('plugin-recommended', TestRecommendedRules, {
   ],
   invalid: [
     {
-      // TODO: actually return multiple diagnostics in this case
       name: 'Multiple diagnostic kinds from the same function are surfaced',
       code: normalizeIndent`
         import Child from './Child';
@@ -70,6 +69,7 @@ testRule('plugin-recommended', TestRecommendedRules, {
       `,
       errors: [
         makeTestCaseError('Hooks must always be called in a consistent order'),
+        makeTestCaseError('Capitalized functions are reserved for components'),
       ],
     },
     {
@@ -128,6 +128,7 @@ testRule('plugin-recommended', TestRecommendedRules, {
         makeTestCaseError(
           'Calling setState from useMemo may trigger an infinite loop',
         ),
+        makeTestCaseError('Found extra memoization dependencies'),
       ],
     },
   ],

compiler/packages/snap/src/compiler.ts

@@ -378,6 +378,17 @@ export async function transformFixtureInput(
       msg: 'Expected nothing to be compiled (from `// @expectNothingCompiled`), but some functions compiled or errored',
     };
   }
+  const unexpectedThrows = logs.filter(
+    log => log.event.kind === 'CompileUnexpectedThrow',
+  );
+  if (unexpectedThrows.length > 0) {
+    return {
+      kind: 'err',
+      msg:
+        `Compiler pass(es) threw instead of recording errors:\n` +
+        unexpectedThrows.map(l => (l.event as any).data).join('\n'),
+    };
+  }
   return {
     kind: 'ok',
     value: {

compiler/packages/snap/src/sprout/shared-runtime-type-provider.ts

@@ -196,6 +196,44 @@ export function makeSharedRuntimeTypeProvider({
               ],
             },
           },
+          PanResponder: {
+            kind: 'object',
+            properties: {
+              create: {
+                kind: 'function',
+                positionalParams: [EffectEnum.Freeze],
+                restParam: null,
+                calleeEffect: EffectEnum.Read,
+                returnType: {kind: 'type', name: 'Any'},
+                returnValueKind: ValueKindEnum.Frozen,
+                aliasing: {
+                  receiver: '@receiver',
+                  params: ['@config'],
+                  rest: null,
+                  returns: '@returns',
+                  temporaries: [],
+                  effects: [
+                    {
+                      kind: 'Freeze',
+                      value: '@config',
+                      reason: ValueReasonEnum.KnownReturnSignature,
+                    },
+                    {
+                      kind: 'Create',
+                      into: '@returns',
+                      value: ValueKindEnum.Frozen,
+                      reason: ValueReasonEnum.KnownReturnSignature,
+                    },
+                    {
+                      kind: 'ImmutableCapture',
+                      from: '@config',
+                      into: '@returns',
+                    },
+                  ],
+                },
+              },
+            },
+          },
         },
       };
     } else if (moduleName === 'ReactCompilerKnownIncompatibleTest') {

compiler/packages/snap/src/sprout/shared-runtime.ts

@@ -421,4 +421,10 @@ export function typedMutate(x: any, v: any = null): void {
   x.property = v;
 }
 
+export const PanResponder = {
+  create(obj: any): any {
+    return obj;
+  },
+};
+
 export default typedLog;

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -3991,9 +3991,23 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
         // whether to retry the primary children, or to skip over it and
         // go straight to the fallback. Check the priority of the primary
         // child fragment.
+        //
+        // Propagate context changes first. If a parent context changed
+        // and the primary children's consumer fibers were discarded
+        // during initial mount suspension, normal propagation can't find
+        // them. In that case we conservatively retry the boundary — the
+        // re-mounted children will read the updated context value.
+        const contextChanged = lazilyPropagateParentContextChanges(
+          current,
+          workInProgress,
+          renderLanes,
+        );
         const primaryChildFragment: Fiber = (workInProgress.child: any);
         const primaryChildLanes = primaryChildFragment.childLanes;
-        if (includesSomeLane(renderLanes, primaryChildLanes)) {
+        if (
+          contextChanged ||
+          includesSomeLane(renderLanes, primaryChildLanes)
+        ) {
           // The primary children have pending work. Use the normal path
           // to attempt to render the primary children again.
           return updateSuspenseComponent(current, workInProgress, renderLanes);

packages/react-reconciler/src/ReactFiberNewContext.js

@@ -20,7 +20,11 @@ import type {Hook} from './ReactFiberHooks';
 
 import {isPrimaryRenderer, HostTransitionContext} from './ReactFiberConfig';
 import {createCursor, push, pop} from './ReactFiberStack';
-import {ContextProvider, DehydratedFragment} from './ReactWorkTags';
+import {
+  ContextProvider,
+  DehydratedFragment,
+  SuspenseComponent,
+} from './ReactWorkTags';
 import {NoLanes, isSubsetOfLanes, mergeLanes} from './ReactFiberLane';
 import {
   NoFlags,
@@ -295,6 +299,37 @@ function propagateContextChanges<T>(
         workInProgress,
       );
       nextFiber = null;
+    } else if (
+      fiber.tag === SuspenseComponent &&
+      fiber.memoizedState !== null &&
+      fiber.memoizedState.dehydrated === null
+    ) {
+      // This is a client-rendered Suspense boundary that is currently
+      // showing its fallback. The primary children may include context
+      // consumers, but their fibers may not exist in the tree — during
+      // initial mount, if the primary children suspended, their fibers
+      // were discarded since there was no current tree to preserve them.
+      // We can't walk into the primary tree to find consumers, so
+      // conservatively mark the Suspense boundary itself for retry.
+      // When it re-renders, it will re-mount the primary children,
+      // which will read the updated context value.
+      fiber.lanes = mergeLanes(fiber.lanes, renderLanes);
+      const alternate = fiber.alternate;
+      if (alternate !== null) {
+        alternate.lanes = mergeLanes(alternate.lanes, renderLanes);
+      }
+      scheduleContextWorkOnParentPath(
+        fiber.return,
+        renderLanes,
+        workInProgress,
+      );
+      if (!forcePropagateEntireTree) {
+        // During lazy propagation, we can defer propagating changes to
+        // the children, same as the consumer match above.
+        nextFiber = null;
+      } else {
+        nextFiber = fiber.child;
+      }
     } else {
       // Traverse down.
       nextFiber = fiber.child;
@@ -331,9 +366,9 @@ export function lazilyPropagateParentContextChanges(
   current: Fiber,
   workInProgress: Fiber,
   renderLanes: Lanes,
-) {
+): boolean {
   const forcePropagateEntireTree = false;
-  propagateParentContextChanges(
+  return propagateParentContextChanges(
     current,
     workInProgress,
     renderLanes,
@@ -364,7 +399,7 @@ function propagateParentContextChanges(
   workInProgress: Fiber,
   renderLanes: Lanes,
   forcePropagateEntireTree: boolean,
-) {
+): boolean {
   // Collect all the parent providers that changed. Since this is usually small
   // number, we use an Array instead of Set.
   let contexts = null;
@@ -460,6 +495,7 @@ function propagateParentContextChanges(
   // then we could remove both `DidPropagateContext` and `NeedsPropagation`.
   // Consider this as part of the next refactor to the fiber tree structure.
   workInProgress.flags |= DidPropagateContext;
+  return contexts !== null;
 }
 
 export function checkIfContextChanged(

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

@@ -2,6 +2,7 @@ let React;
 let ReactNoop;
 let Scheduler;
 let act;
+let use;
 let useState;
 let useContext;
 let Suspense;
@@ -19,6 +20,7 @@ describe('ReactLazyContextPropagation', () => {
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
     act = require('internal-test-utils').act;
+    use = React.use;
     useState = React.useState;
     useContext = React.useContext;
     Suspense = React.Suspense;
@@ -937,4 +939,102 @@ describe('ReactLazyContextPropagation', () => {
     assertLog(['B', 'B']);
     expect(root).toMatchRenderedOutput('BB');
   });
+
+  it('regression: context change triggers retry of suspended Suspense boundary on initial mount', async () => {
+    // Regression test for a bug where a context change above a suspended
+    // Suspense boundary would fail to trigger a retry. When a Suspense
+    // boundary suspends during initial mount, the primary children's fibers
+    // are discarded because there is no current tree to preserve them. If
+    // the suspended promise never resolves, the only way to retry is
+    // something external — like a context change. Context propagation must
+    // mark suspended Suspense boundaries for retry even though the consumer
+    // fibers no longer exist in the tree.
+    //
+    // The Provider component owns the state update. The children are
+    // passed in from above, so they are not re-created when the Provider
+    // re-renders — this means the Suspense boundary bails out, exercising
+    // the lazy context propagation path where the bug manifests.
+    const Context = React.createContext(null);
+    const neverResolvingPromise = new Promise(() => {});
+    const resolvedThenable = {status: 'fulfilled', value: 'Result', then() {}};
+
+    function Consumer() {
+      return <Text text={use(use(Context))} />;
+    }
+
+    let setPromise;
+    function Provider({children}) {
+      const [promise, _setPromise] = useState(neverResolvingPromise);
+      setPromise = _setPromise;
+      return <Context.Provider value={promise}>{children}</Context.Provider>;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <Provider>
+          <Suspense fallback={<Text text="Loading" />}>
+            <Consumer />
+          </Suspense>
+        </Provider>,
+      );
+    });
+    assertLog(['Loading']);
+    expect(root).toMatchRenderedOutput('Loading');
+
+    await act(() => {
+      setPromise(resolvedThenable);
+    });
+    assertLog(['Result']);
+    expect(root).toMatchRenderedOutput('Result');
+  });
+
+  it('regression: context change triggers retry of suspended Suspense boundary on initial mount (nested)', async () => {
+    // Same as above, but with an additional indirection component between
+    // the provider and the Suspense boundary. This exercises the
+    // propagateContextChanges walker path rather than the
+    // propagateParentContextChanges path.
+    const Context = React.createContext(null);
+    const neverResolvingPromise = new Promise(() => {});
+    const resolvedThenable = {status: 'fulfilled', value: 'Result', then() {}};
+
+    function Consumer() {
+      return <Text text={use(use(Context))} />;
+    }
+
+    function Indirection({children}) {
+      Scheduler.log('Indirection');
+      return children;
+    }
+
+    let setPromise;
+    function Provider({children}) {
+      const [promise, _setPromise] = useState(neverResolvingPromise);
+      setPromise = _setPromise;
+      return <Context.Provider value={promise}>{children}</Context.Provider>;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(() => {
+      root.render(
+        <Provider>
+          <Indirection>
+            <Suspense fallback={<Text text="Loading" />}>
+              <Consumer />
+            </Suspense>
+          </Indirection>
+        </Provider>,
+      );
+    });
+    assertLog(['Indirection', 'Loading']);
+    expect(root).toMatchRenderedOutput('Loading');
+
+    // Indirection should not re-render — only the Suspense boundary
+    // should be retried.
+    await act(() => {
+      setPromise(resolvedThenable);
+    });
+    assertLog(['Result']);
+    expect(root).toMatchRenderedOutput('Result');
+  });
 });