From 0c10c8f7e411a46f7dd1b947f9401f62c49a4549 Mon Sep 17 00:00:00 2001
From: Joe Savona <joesavona@fb.com>
Date: Fri, 23 Jan 2026 11:07:42 -0800
Subject: [PATCH 1/6] [compiler] Improve snap workflow for debugging errors

Much nicer workflow for working through errors in the compiler:
* Run `yarn snap -w`, oops there are are errors
* Hit 'p' to select a fixture => the suggestions populate with recent failures, sorted alphabetically. No need to copy/paste the name of the fixture you want to focus on!
* tab/shift-tab to pick one, hit enter to select that one
* ...Focus on fixing that test...
* 'p' to re-enter the picker. Snap tracks the last state of each fixture and continues to show all tests that failed on their last run, so you can easily move on to the next one. The currently selected test is highlighted, making it easy to move to the next one.
* 'a' at any time to run all tests
* 'd' at any time to toggle debug output on/off (while focusing on a single test)
---
 compiler/packages/snap/src/runner-watch.ts | 192 +++++++++++++++++++--
 compiler/packages/snap/src/runner.ts       |   8 +
 2 files changed, 186 insertions(+), 14 deletions(-)

diff --git a/compiler/packages/snap/src/runner-watch.ts b/compiler/packages/snap/src/runner-watch.ts
index 06ae9984668..c29a2985153 100644
--- a/compiler/packages/snap/src/runner-watch.ts
+++ b/compiler/packages/snap/src/runner-watch.ts
@@ -9,7 +9,7 @@ import watcher from '@parcel/watcher';
 import path from 'path';
 import ts from 'typescript';
 import {FIXTURES_PATH, PROJECT_ROOT} from './constants';
-import {TestFilter} from './fixture-utils';
+import {TestFilter, getFixtures} from './fixture-utils';
 import {execSync} from 'child_process';
 
 export function watchSrc(
@@ -121,6 +121,12 @@ export type RunnerState = {
   // Input mode for interactive pattern entry
   inputMode: 'none' | 'pattern';
   inputBuffer: string;
+  // Autocomplete state
+  allFixtureNames: Array<string>;
+  matchingFixtures: Array<string>;
+  selectedIndex: number;
+  // Track last run status of each fixture (for autocomplete suggestions)
+  fixtureLastRunStatus: Map<string, 'pass' | 'fail'>;
 };
 
 function subscribeFixtures(
@@ -179,46 +185,187 @@ function subscribeTsc(
   );
 }
 
+/**
+ * Levenshtein edit distance between two strings
+ */
+function editDistance(a: string, b: string): number {
+  const m = a.length;
+  const n = b.length;
+
+  // Create a 2D array for memoization
+  const dp: number[][] = Array.from({length: m + 1}, () =>
+    Array(n + 1).fill(0),
+  );
+
+  // Base cases
+  for (let i = 0; i <= m; i++) dp[i][0] = i;
+  for (let j = 0; j <= n; j++) dp[0][j] = j;
+
+  // Fill in the rest
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      if (a[i - 1] === b[j - 1]) {
+        dp[i][j] = dp[i - 1][j - 1];
+      } else {
+        dp[i][j] = 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]);
+      }
+    }
+  }
+
+  return dp[m][n];
+}
+
+function filterFixtures(
+  allNames: Array<string>,
+  pattern: string,
+): Array<string> {
+  if (pattern === '') {
+    return allNames;
+  }
+  const lowerPattern = pattern.toLowerCase();
+  const matches = allNames.filter(name =>
+    name.toLowerCase().includes(lowerPattern),
+  );
+  // Sort by edit distance (lower = better match)
+  matches.sort((a, b) => {
+    const distA = editDistance(lowerPattern, a.toLowerCase());
+    const distB = editDistance(lowerPattern, b.toLowerCase());
+    return distA - distB;
+  });
+  return matches;
+}
+
+const MAX_DISPLAY = 15;
+
+function renderAutocomplete(state: RunnerState): void {
+  // Clear terminal
+  console.log('\u001Bc');
+
+  // Show current input
+  console.log(`Pattern: ${state.inputBuffer}`);
+  console.log('');
+
+  // Get current filter pattern if active
+  const currentFilterPattern =
+    state.mode.filter && state.filter ? state.filter.paths[0] : null;
+
+  // Show matching fixtures (limit to MAX_DISPLAY)
+  const toShow = state.matchingFixtures.slice(0, MAX_DISPLAY);
+
+  toShow.forEach((name, i) => {
+    const isSelected = i === state.selectedIndex;
+    const matchesCurrentFilter =
+      currentFilterPattern != null &&
+      name.toLowerCase().includes(currentFilterPattern.toLowerCase());
+
+    let prefix: string;
+    if (isSelected) {
+      prefix = '> ';
+    } else if (matchesCurrentFilter) {
+      prefix = '* ';
+    } else {
+      prefix = '  ';
+    }
+    console.log(`${prefix}${name}`);
+  });
+
+  if (state.matchingFixtures.length > MAX_DISPLAY) {
+    console.log(
+      `  ... and ${state.matchingFixtures.length - MAX_DISPLAY} more`,
+    );
+  }
+
+  console.log('');
+  console.log('↑/↓/Tab navigate | Enter select | Esc cancel');
+}
+
 function subscribeKeyEvents(
   state: RunnerState,
   onChange: (state: RunnerState) => void,
 ) {
   process.stdin.on('keypress', async (str, key) => {
-    // Handle input mode (pattern entry)
+    // Handle input mode (pattern entry with autocomplete)
     if (state.inputMode !== 'none') {
       if (key.name === 'return') {
-        // Enter pressed - process input
-        const pattern = state.inputBuffer.trim();
+        // Enter pressed - use selected fixture or typed text
+        let pattern: string;
+        if (
+          state.selectedIndex >= 0 &&
+          state.selectedIndex < state.matchingFixtures.length
+        ) {
+          pattern = state.matchingFixtures[state.selectedIndex];
+        } else {
+          pattern = state.inputBuffer.trim();
+        }
+
         state.inputMode = 'none';
         state.inputBuffer = '';
-        process.stdout.write('\n');
+        state.allFixtureNames = [];
+        state.matchingFixtures = [];
+        state.selectedIndex = -1;
 
         if (pattern !== '') {
-          // Set the pattern as filter
           state.filter = {paths: [pattern]};
           state.mode.filter = true;
           state.mode.action = RunnerAction.Test;
           onChange(state);
         }
-        // If empty, just exit input mode without changes
         return;
       } else if (key.name === 'escape') {
         // Cancel input mode
         state.inputMode = 'none';
         state.inputBuffer = '';
-        process.stdout.write(' (cancelled)\n');
+        state.allFixtureNames = [];
+        state.matchingFixtures = [];
+        state.selectedIndex = -1;
+        // Redraw normal UI
+        onChange(state);
+        return;
+      } else if (key.name === 'up' || (key.name === 'tab' && key.shift)) {
+        // Navigate up in autocomplete list
+        if (state.matchingFixtures.length > 0) {
+          if (state.selectedIndex <= 0) {
+            state.selectedIndex =
+              Math.min(state.matchingFixtures.length, MAX_DISPLAY) - 1;
+          } else {
+            state.selectedIndex--;
+          }
+          renderAutocomplete(state);
+        }
+        return;
+      } else if (key.name === 'down' || (key.name === 'tab' && !key.shift)) {
+        // Navigate down in autocomplete list
+        if (state.matchingFixtures.length > 0) {
+          const maxIndex =
+            Math.min(state.matchingFixtures.length, MAX_DISPLAY) - 1;
+          if (state.selectedIndex >= maxIndex) {
+            state.selectedIndex = 0;
+          } else {
+            state.selectedIndex++;
+          }
+          renderAutocomplete(state);
+        }
         return;
       } else if (key.name === 'backspace') {
         if (state.inputBuffer.length > 0) {
           state.inputBuffer = state.inputBuffer.slice(0, -1);
-          // Erase character: backspace, space, backspace
-          process.stdout.write('\b \b');
+          state.matchingFixtures = filterFixtures(
+            state.allFixtureNames,
+            state.inputBuffer,
+          );
+          state.selectedIndex = -1;
+          renderAutocomplete(state);
         }
         return;
       } else if (str && !key.ctrl && !key.meta) {
-        // Regular character - accumulate and echo
+        // Regular character - accumulate, filter, and render
         state.inputBuffer += str;
-        process.stdout.write(str);
+        state.matchingFixtures = filterFixtures(
+          state.allFixtureNames,
+          state.inputBuffer,
+        );
+        state.selectedIndex = -1;
+        renderAutocomplete(state);
         return;
       }
       return; // Ignore other keys in input mode
@@ -240,10 +387,23 @@ function subscribeKeyEvents(
       state.debug = !state.debug;
       state.mode.action = RunnerAction.Test;
     } else if (key.name === 'p') {
-      // p => enter pattern input mode
+      // p => enter pattern input mode with autocomplete
       state.inputMode = 'pattern';
       state.inputBuffer = '';
-      process.stdout.write('Pattern: ');
+
+      // Load all fixtures for autocomplete
+      const fixtures = await getFixtures(null);
+      state.allFixtureNames = Array.from(fixtures.keys()).sort();
+      // Show failed fixtures first when no pattern entered
+      const failedFixtures = Array.from(state.fixtureLastRunStatus.entries())
+        .filter(([_, status]) => status === 'fail')
+        .map(([name]) => name)
+        .sort();
+      state.matchingFixtures =
+        failedFixtures.length > 0 ? failedFixtures : state.allFixtureNames;
+      state.selectedIndex = -1;
+
+      renderAutocomplete(state);
       return; // Don't trigger onChange yet
     } else {
       // any other key re-runs tests
@@ -279,6 +439,10 @@ export async function makeWatchRunner(
     debug: debugMode,
     inputMode: 'none',
     inputBuffer: '',
+    allFixtureNames: [],
+    matchingFixtures: [],
+    selectedIndex: -1,
+    fixtureLastRunStatus: new Map(),
   };
 
   subscribeTsc(state, onChange);
diff --git a/compiler/packages/snap/src/runner.ts b/compiler/packages/snap/src/runner.ts
index 04724532b64..21320048eb2 100644
--- a/compiler/packages/snap/src/runner.ts
+++ b/compiler/packages/snap/src/runner.ts
@@ -142,6 +142,14 @@ async function onChange(
       true, // requireSingleFixture in watch mode
     );
     const end = performance.now();
+
+    // Track fixture status for autocomplete suggestions
+    for (const [basename, result] of results) {
+      const failed =
+        result.actual !== result.expected || result.unexpectedError != null;
+      state.fixtureLastRunStatus.set(basename, failed ? 'fail' : 'pass');
+    }
+
     if (mode.action === RunnerAction.Update) {
       update(results);
       state.lastUpdate = end;

From ff39247ee019ae5f2380228c507cc39a22e60f94 Mon Sep 17 00:00:00 2001
From: Joe Savona <joesavona@fb.com>
Date: Fri, 23 Jan 2026 11:07:42 -0800
Subject: [PATCH 2/6] [compiler] Summaries of the compiler passes to assist
 agents in development

Autogenerated summaries of each of the compiler passes which allow agents to get the key ideas of a compiler pass, including key input/output invariants, without having to reprocess the file each time. In the subsequent diff this seemed to help.
---
 compiler/CLAUDE.md                            |   2 +
 .../docs/passes/01-lower.md                   | 157 ++++++++
 .../docs/passes/02-enterSSA.md                | 182 +++++++++
 .../docs/passes/03-eliminateRedundantPhi.md   |  90 +++++
 .../docs/passes/04-constantPropagation.md     | 110 +++++
 .../docs/passes/05-deadCodeElimination.md     | 109 +++++
 .../docs/passes/06-inferTypes.md              | 127 ++++++
 .../docs/passes/07-analyseFunctions.md        |  84 ++++
 .../passes/08-inferMutationAliasingEffects.md | 144 +++++++
 .../passes/09-inferMutationAliasingRanges.md  | 149 +++++++
 .../docs/passes/10-inferReactivePlaces.md     | 169 ++++++++
 .../passes/11-inferReactiveScopeVariables.md  | 176 ++++++++
 ...riteInstructionKindsBasedOnReassignment.md | 151 +++++++
 .../docs/passes/13-alignMethodCallScopes.md   | 131 ++++++
 .../docs/passes/14-alignObjectMethodScopes.md | 128 ++++++
 .../15-alignReactiveScopesToBlockScopesHIR.md | 177 +++++++++
 .../16-mergeOverlappingReactiveScopesHIR.md   | 134 +++++++
 .../17-buildReactiveScopeTerminalsHIR.md      | 161 ++++++++
 .../docs/passes/18-flattenReactiveLoopsHIR.md | 158 ++++++++
 .../19-flattenScopesWithHooksOrUseHIR.md      | 143 +++++++
 .../20-propagateScopeDependenciesHIR.md       | 158 ++++++++
 .../docs/passes/21-buildReactiveFunction.md   | 180 +++++++++
 .../docs/passes/22-pruneUnusedLabels.md       | 145 +++++++
 .../docs/passes/23-pruneNonEscapingScopes.md  | 130 ++++++
 .../passes/24-pruneNonReactiveDependencies.md | 138 +++++++
 .../docs/passes/25-pruneUnusedScopes.md       | 111 ++++++
 ...rgeReactiveScopesThatInvalidateTogether.md | 213 ++++++++++
 .../27-pruneAlwaysInvalidatingScopes.md       | 143 +++++++
 .../docs/passes/28-propagateEarlyReturns.md   | 183 +++++++++
 .../docs/passes/29-promoteUsedTemporaries.md  | 203 ++++++++++
 .../docs/passes/30-renameVariables.md         | 200 ++++++++++
 .../docs/passes/31-codegenReactiveFunction.md | 289 ++++++++++++++
 .../docs/passes/32-transformFire.md           | 203 ++++++++++
 .../docs/passes/33-lowerContextAccess.md      | 174 ++++++++
 .../passes/34-optimizePropsMethodCalls.md     | 132 ++++++
 .../docs/passes/35-optimizeForSSR.md          | 187 +++++++++
 .../docs/passes/36-outlineJSX.md              | 224 +++++++++++
 .../docs/passes/37-outlineFunctions.md        | 169 ++++++++
 ...8-memoizeFbtAndMacroOperandsInSameScope.md | 231 +++++++++++
 .../39-validateContextVariableLValues.md      | 192 +++++++++
 .../docs/passes/40-validateUseMemo.md         | 299 ++++++++++++++
 .../docs/passes/41-validateHooksUsage.md      | 330 +++++++++++++++
 .../passes/42-validateNoCapitalizedCalls.md   | 233 +++++++++++
 ...-validateLocalsNotReassignedAfterRender.md | 321 +++++++++++++++
 .../passes/44-validateNoSetStateInRender.md   | 133 +++++++
 ...-validateNoDerivedComputationsInEffects.md | 141 +++++++
 .../passes/46-validateNoSetStateInEffects.md  | 150 +++++++
 .../passes/47-validateNoJSXInTryStatement.md  | 167 ++++++++
 .../48-validateNoImpureValuesInRender.md      | 180 +++++++++
 .../passes/49-validateNoRefAccessInRender.md  | 268 +++++++++++++
 ...validateNoFreezingKnownMutableFunctions.md | 285 +++++++++++++
 .../51-validateExhaustiveDependencies.md      | 376 ++++++++++++++++++
 .../52-validateMemoizedEffectDependencies.md  |  93 +++++
 .../53-validatePreservedManualMemoization.md  | 152 +++++++
 .../passes/54-validateStaticComponents.md     | 153 +++++++
 .../docs/passes/55-validateSourceLocations.md | 199 +++++++++
 .../docs/passes/README.md                     | 305 ++++++++++++++
 57 files changed, 10072 insertions(+)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/01-lower.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/02-enterSSA.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/03-eliminateRedundantPhi.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/04-constantPropagation.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/05-deadCodeElimination.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/06-inferTypes.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/07-analyseFunctions.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/08-inferMutationAliasingEffects.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/09-inferMutationAliasingRanges.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/10-inferReactivePlaces.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/11-inferReactiveScopeVariables.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/12-rewriteInstructionKindsBasedOnReassignment.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/13-alignMethodCallScopes.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/14-alignObjectMethodScopes.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/15-alignReactiveScopesToBlockScopesHIR.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/16-mergeOverlappingReactiveScopesHIR.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/17-buildReactiveScopeTerminalsHIR.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/18-flattenReactiveLoopsHIR.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/19-flattenScopesWithHooksOrUseHIR.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/20-propagateScopeDependenciesHIR.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/21-buildReactiveFunction.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/22-pruneUnusedLabels.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/23-pruneNonEscapingScopes.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/24-pruneNonReactiveDependencies.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/25-pruneUnusedScopes.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/26-mergeReactiveScopesThatInvalidateTogether.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/27-pruneAlwaysInvalidatingScopes.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/28-propagateEarlyReturns.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/29-promoteUsedTemporaries.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/30-renameVariables.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/31-codegenReactiveFunction.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/32-transformFire.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/33-lowerContextAccess.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/34-optimizePropsMethodCalls.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/35-optimizeForSSR.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/36-outlineJSX.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/37-outlineFunctions.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/38-memoizeFbtAndMacroOperandsInSameScope.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/39-validateContextVariableLValues.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/40-validateUseMemo.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/41-validateHooksUsage.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/42-validateNoCapitalizedCalls.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/43-validateLocalsNotReassignedAfterRender.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/44-validateNoSetStateInRender.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/45-validateNoDerivedComputationsInEffects.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/46-validateNoSetStateInEffects.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/47-validateNoJSXInTryStatement.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/48-validateNoImpureValuesInRender.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/49-validateNoRefAccessInRender.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/50-validateNoFreezingKnownMutableFunctions.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/51-validateExhaustiveDependencies.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/52-validateMemoizedEffectDependencies.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/53-validatePreservedManualMemoization.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/54-validateStaticComponents.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/55-validateSourceLocations.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/docs/passes/README.md

diff --git a/compiler/CLAUDE.md b/compiler/CLAUDE.md
index c8e909bf214..8de9c88fcf7 100644
--- a/compiler/CLAUDE.md
+++ b/compiler/CLAUDE.md
@@ -4,6 +4,8 @@ This document contains knowledge about the React Compiler gathered during develo
 
 ## Project Structure
 
+When modifying the compiler, you MUST read the documentation about that pass in `compiler/packages/babel-plugin-react-compiler/docs/passes/` to learn more about the role of that pass within the compiler.
+
 - `packages/babel-plugin-react-compiler/` - Main compiler package
   - `src/HIR/` - High-level Intermediate Representation types and utilities
   - `src/Inference/` - Effect inference passes (aliasing, mutation, etc.)
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/01-lower.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/01-lower.md
new file mode 100644
index 00000000000..b5b3d8f46e6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/01-lower.md
@@ -0,0 +1,157 @@
+# lower (BuildHIR)
+
+## File
+`src/HIR/BuildHIR.ts`
+
+## Purpose
+Converts a Babel AST function node into a High-level Intermediate Representation (HIR), which represents code as a control-flow graph (CFG) with basic blocks, instructions, and terminals. This is the first major transformation pass in the React Compiler pipeline, enabling precise expression-level memoization analysis.
+
+## Input Invariants
+- Input must be a valid Babel `NodePath<t.Function>` (FunctionDeclaration, FunctionExpression, or ArrowFunctionExpression)
+- The function must be a component or hook (determined by the environment)
+- Babel scope analysis must be available for binding resolution
+- An `Environment` instance must be provided with compiler configuration
+- Optional `bindings` map for nested function lowering (recursive calls)
+- Optional `capturedRefs` map for context variables captured from outer scope
+
+## Output Guarantees
+- Returns `Result<HIRFunction, CompilerError>` - either a successfully lowered function or compilation errors
+- The HIR function contains:
+  - A complete CFG with basic blocks (`body.blocks: Map<BlockId, BasicBlock>`)
+  - Each block has an array of instructions and exactly one terminal
+  - All control flow is explicit (if/else, loops, switch, logical operators, ternary)
+  - Parameters are converted to `Place` or `SpreadPattern`
+  - Context captures are tracked in `context` array
+  - Function metadata (id, async, generator, directives)
+- All identifiers get unique `IdentifierId` values
+- Instructions have placeholder instruction IDs (set to 0, assigned later)
+- Effects are null (populated by later inference passes)
+
+## Algorithm
+The lowering algorithm uses a recursive descent pattern with a `HIRBuilder` helper class:
+
+1. **Initialization**: Create an `HIRBuilder` with environment and optional bindings. Process captured context variables.
+
+2. **Parameter Processing**: For each function parameter:
+   - Simple identifiers: resolve binding and create Place
+   - Patterns (object/array): create temporary Place, then emit destructuring assignments
+   - Rest elements: wrap in SpreadPattern
+   - Unsupported: emit Todo error
+
+3. **Body Processing**:
+   - Arrow function expressions: lower body expression to temporary, emit implicit return
+   - Block statements: recursively lower each statement
+
+4. **Statement Lowering** (`lowerStatement`): Handle each statement type:
+   - **Control flow**: Create separate basic blocks for branches, loops connect back to conditional blocks
+   - **Variable declarations**: Create `DeclareLocal`/`DeclareContext` or `StoreLocal`/`StoreContext` instructions
+   - **Expressions**: Lower to temporary and discard result
+   - **Hoisting**: Detect forward references and emit `DeclareContext` for hoisted identifiers
+
+5. **Expression Lowering** (`lowerExpression`): Convert expressions to `InstructionValue`:
+   - **Identifiers**: Create `LoadLocal`, `LoadContext`, or `LoadGlobal` based on binding
+   - **Literals**: Create `Primitive` values
+   - **Operators**: Create `BinaryExpression`, `UnaryExpression` etc.
+   - **Calls**: Distinguish `CallExpression` vs `MethodCall` (member expression callee)
+   - **Control flow expressions**: Create separate value blocks for branches (ternary, logical, optional chaining)
+   - **JSX**: Lower to `JsxExpression` with lowered tag, props, and children
+
+6. **Block Management**: The builder maintains:
+   - A current work-in-progress block accumulating instructions
+   - Completed blocks map
+   - Scope stack for break/continue resolution
+   - Exception handler stack for try/catch
+
+7. **Termination**: Add implicit void return at end if no explicit return
+
+## Key Data Structures
+
+### HIRBuilder (from HIRBuilder.ts)
+- `#current: WipBlock` - Work-in-progress block being populated
+- `#completed: Map<BlockId, BasicBlock>` - Finished blocks
+- `#scopes: Array<Scope>` - Stack for break/continue target resolution (LoopScope, LabelScope, SwitchScope)
+- `#exceptionHandlerStack: Array<BlockId>` - Stack of catch handlers for try/catch
+- `#bindings: Bindings` - Map of variable names to their identifiers
+- `#context: Map<t.Identifier, SourceLocation>` - Captured context variables
+- Methods: `push()`, `reserve()`, `enter()`, `terminate()`, `terminateWithContinuation()`
+
+### Core HIR Types
+- **BasicBlock**: Contains `instructions: Array<Instruction>`, `terminal: Terminal`, `preds: Set<BlockId>`, `phis: Set<Phi>`, `kind: BlockKind`
+- **Instruction**: Contains `id`, `lvalue` (Place), `value` (InstructionValue), `effects` (null initially), `loc`
+- **Terminal**: Block terminator - `if`, `branch`, `goto`, `return`, `throw`, `for`, `while`, `switch`, `ternary`, `logical`, etc.
+- **Place**: Reference to a value - `{kind: 'Identifier', identifier, effect, reactive, loc}`
+- **InstructionValue**: The operation - `LoadLocal`, `StoreLocal`, `CallExpression`, `BinaryExpression`, `FunctionExpression`, etc.
+
+### Block Kinds
+- `block` - Regular sequential block
+- `loop` - Loop header/test block
+- `value` - Block that produces a value (ternary/logical branches)
+- `sequence` - Sequence expression block
+- `catch` - Exception handler block
+
+## Edge Cases
+
+1. **Hoisting**: Forward references to `let`/`const`/`function` declarations emit `DeclareContext` before the reference, enabling correct temporal dead zone handling
+
+2. **Context Variables**: Variables captured by nested functions use `LoadContext`/`StoreContext` instead of `LoadLocal`/`StoreLocal`
+
+3. **For-of/For-in Loops**: Synthesize iterator instructions (`GetIterator`, `IteratorNext`, `NextPropertyOf`)
+
+4. **Optional Chaining**: Creates nested `OptionalTerminal` structures with short-circuit branches
+
+5. **Logical Expressions**: Create branching structures where left side stores to temporary, right side only evaluated if needed
+
+6. **Try/Catch**: Adds `MaybeThrowTerminal` after each instruction in try block, modeling potential control flow to handler
+
+7. **JSX in fbt**: Tracks `fbtDepth` counter to handle whitespace differently in fbt/fbs tags
+
+8. **Unsupported Syntax**: `var` declarations, `with` statements, inline `class` declarations, `eval` - emit appropriate errors
+
+## TODOs
+- `returnTypeAnnotation: null, // TODO: extract the actual return type node if present`
+- `TODO(gsn): In the future, we could only pass in the context identifiers that are actually used by this function and its nested functions`
+- Multiple `// TODO remove type cast` in destructuring pattern handling
+- `// TODO: should JSX namespaced names be handled here as well?`
+
+## Example
+Input JavaScript:
+```javascript
+export default function foo(x, y) {
+  if (x) {
+    return foo(false, y);
+  }
+  return [y * 10];
+}
+```
+
+Output HIR (simplified):
+```
+foo(<unknown> x$0, <unknown> y$1): <unknown> $12
+bb0 (block):
+  [1] <unknown> $6 = LoadLocal <unknown> x$0
+  [2] If (<unknown> $6) then:bb2 else:bb1 fallthrough=bb1
+
+bb2 (block):
+  predecessor blocks: bb0
+  [3] <unknown> $2 = LoadGlobal(module) foo
+  [4] <unknown> $3 = false
+  [5] <unknown> $4 = LoadLocal <unknown> y$1
+  [6] <unknown> $5 = Call <unknown> $2(<unknown> $3, <unknown> $4)
+  [7] Return Explicit <unknown> $5
+
+bb1 (block):
+  predecessor blocks: bb0
+  [8] <unknown> $7 = LoadLocal <unknown> y$1
+  [9] <unknown> $8 = 10
+  [10] <unknown> $9 = Binary <unknown> $7 * <unknown> $8
+  [11] <unknown> $10 = Array [<unknown> $9]
+  [12] Return Explicit <unknown> $10
+```
+
+Key observations:
+- The function has 3 basic blocks: entry (bb0), consequent (bb2), alternate/fallthrough (bb1)
+- The if statement creates an `IfTerminal` at the end of bb0
+- Each branch ends with its own `ReturnTerminal`
+- All values are stored in temporaries (`$N`) or named identifiers (`x$0`, `y$1`)
+- Instructions have sequential IDs within blocks
+- Types and effects are `<unknown>` at this stage (populated by later passes)
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/02-enterSSA.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/02-enterSSA.md
new file mode 100644
index 00000000000..d5e03b60d76
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/02-enterSSA.md
@@ -0,0 +1,182 @@
+# enterSSA
+
+## File
+`src/SSA/EnterSSA.ts`
+
+## Purpose
+Converts the HIR from a non-SSA form (where variables can be reassigned) into Static Single Assignment (SSA) form, where each variable is defined exactly once and phi nodes are inserted at control flow join points to merge values from different paths.
+
+## Input Invariants
+- The HIR must have blocks in reverse postorder (predecessors visited before successors, except for back-edges)
+- Block predecessor information (`block.preds`) must be populated correctly
+- The function's `context` array must be empty for the root function (outer function declarations)
+- Identifiers may be reused across multiple definitions/assignments (non-SSA form)
+
+## Output Guarantees
+- Each identifier has a unique `IdentifierId` - no identifier is defined more than once
+- All operand references use the SSA-renamed identifiers
+- Phi nodes are inserted at join points where values from different control flow paths converge
+- Function parameters are SSA-renamed
+- Nested functions (FunctionExpression, ObjectMethod) are recursively converted to SSA form
+- Context variables (captured from outer scopes) are handled specially and not redefined
+
+## Algorithm
+The pass uses the Braun et al. algorithm ("Simple and Efficient Construction of Static Single Assignment Form") with adaptations for handling loops and nested functions.
+
+### Key Steps:
+1. **Block Traversal**: Iterate through blocks in order (assumed reverse postorder from previous passes)
+2. **Definition Tracking**: Maintain a per-block `defs` map from original identifiers to their SSA-renamed versions
+3. **Renaming**:
+   - When a value is **defined** (lvalue), create a new SSA identifier with fresh `IdentifierId`
+   - When a value is **used** (operand), look up the current SSA identifier via `getIdAt`
+4. **Phi Node Insertion**: When looking up an identifier at a block with multiple predecessors:
+   - If all predecessors have been visited, create a phi node collecting values from each predecessor
+   - If some predecessors are unvisited (back-edge/loop), create an "incomplete phi" that will be fixed later
+5. **Incomplete Phi Resolution**: When all predecessors of a block are finally visited, fix any incomplete phi nodes by populating their operands
+6. **Nested Function Handling**: Recursively apply SSA transformation to nested functions, temporarily adding a fake predecessor edge to enable identifier lookup from the enclosing scope
+
+### Phi Node Placement Logic (`getIdAt`):
+- If the identifier is defined locally in the current block, return it
+- If at entry block with no predecessors and not found, mark as unknown (global)
+- If some predecessors are unvisited (loop), create incomplete phi
+- If exactly one predecessor, recursively look up in that predecessor
+- If multiple predecessors, create phi node with operands from all predecessors
+
+## Key Data Structures
+- **SSABuilder**: Main class managing the transformation
+  - `#states: Map<BasicBlock, State>` - Per-block state (defs map and incomplete phis)
+  - `unsealedPreds: Map<BasicBlock, number>` - Count of unvisited predecessors per block
+  - `#unknown: Set<Identifier>` - Identifiers assumed to be globals
+  - `#context: Set<Identifier>` - Context variables that should not be redefined
+- **State**: Per-block state containing:
+  - `defs: Map<Identifier, Identifier>` - Maps original identifiers to SSA-renamed versions
+  - `incompletePhis: Array<IncompletePhi>` - Phi nodes waiting for predecessor values
+- **IncompletePhi**: Tracks a phi node created before all predecessors were visited
+  - `oldPlace: Place` - Original place being phi'd
+  - `newPlace: Place` - SSA-renamed phi result place
+- **Phi**: The actual phi node in the HIR
+  - `place: Place` - The result of the phi
+  - `operands: Map<BlockId, Place>` - Maps predecessor block to the place providing the value
+
+## Edge Cases
+- **Loops (back-edges)**: When a variable is used in a loop header before the loop body assigns it, an incomplete phi is created and later fixed when the loop body block is visited
+- **Globals**: If an identifier is used but never defined (reaching the entry block without a definition), it's assumed to be a global and not renamed
+- **Context variables**: Variables captured from an outer function scope are tracked specially and not redefined when reassigned
+- **Nested functions**: Function expressions and object methods are processed recursively with a temporary predecessor edge linking them to the enclosing block
+
+## TODOs
+- `[hoisting] EnterSSA: Expected identifier to be defined before being used` - Handles cases where hoisting causes an identifier to be used before definition (throws a Todo error for graceful bailout)
+
+## Example
+
+### Input (simple reassignment with control flow):
+```javascript
+function foo() {
+  let y = 2;
+  if (y > 1) {
+    y = 1;
+  } else {
+    y = 2;
+  }
+  let x = y;
+}
+```
+
+### Before SSA (HIR):
+```
+bb0 (block):
+  [1] $0 = 2
+  [2] $2 = StoreLocal Let y$1 = $0
+  [3] $7 = LoadLocal y$1
+  [4] $8 = 1
+  [5] $9 = Binary $7 > $8
+  [6] If ($9) then:bb2 else:bb3 fallthrough=bb1
+
+bb2 (block):
+  predecessor blocks: bb0
+  [7] $3 = 1
+  [8] $4 = StoreLocal Reassign y$1 = $3  // Same y$1 reassigned
+  [9] Goto bb1
+
+bb3 (block):
+  predecessor blocks: bb0
+  [10] $5 = 2
+  [11] $6 = StoreLocal Reassign y$1 = $5  // Same y$1 reassigned
+  [12] Goto bb1
+
+bb1 (block):
+  predecessor blocks: bb2 bb3
+  [13] $10 = LoadLocal y$1                // Which y$1?
+  [14] $12 = StoreLocal Let x$11 = $10
+```
+
+### After SSA:
+```
+bb0 (block):
+  [1] $15 = 2
+  [2] $17 = StoreLocal Let y$16 = $15    // y$16: initial definition
+  [3] $18 = LoadLocal y$16
+  [4] $19 = 1
+  [5] $20 = Binary $18 > $19
+  [6] If ($20) then:bb2 else:bb3 fallthrough=bb1
+
+bb2 (block):
+  predecessor blocks: bb0
+  [7] $21 = 1
+  [8] $23 = StoreLocal Reassign y$22 = $21  // y$22: new SSA name
+  [9] Goto bb1
+
+bb3 (block):
+  predecessor blocks: bb0
+  [10] $24 = 2
+  [11] $26 = StoreLocal Reassign y$25 = $24  // y$25: new SSA name
+  [12] Goto bb1
+
+bb1 (block):
+  predecessor blocks: bb2 bb3
+  y$27: phi(bb2: y$22, bb3: y$25)           // PHI NODE: merges y$22 and y$25
+  [13] $28 = LoadLocal y$27                  // Uses phi result
+  [14] $30 = StoreLocal Let x$29 = $28
+```
+
+### Loop Example (while loop with back-edge):
+```javascript
+function foo() {
+  let x = 1;
+  while (x < 10) {
+    x = x + 1;
+  }
+  return x;
+}
+```
+
+### After SSA:
+```
+bb0 (block):
+  [1] $13 = 1
+  [2] $15 = StoreLocal Let x$14 = $13    // x$14: initial definition
+  [3] While test=bb1 loop=bb3 fallthrough=bb2
+
+bb1 (loop):
+  predecessor blocks: bb0 bb3
+  x$16: phi(bb0: x$14, bb3: x$23)        // PHI merges initial and loop-updated values
+  [4] $17 = LoadLocal x$16
+  [5] $18 = 10
+  [6] $19 = Binary $17 < $18
+  [7] Branch ($19) then:bb3 else:bb2
+
+bb3 (block):
+  predecessor blocks: bb1
+  [8] $20 = LoadLocal x$16               // Uses phi result
+  [9] $21 = 1
+  [10] $22 = Binary $20 + $21
+  [11] $24 = StoreLocal Reassign x$23 = $22  // x$23: new SSA name in loop body
+  [12] Goto(Continue) bb1
+
+bb2 (block):
+  predecessor blocks: bb1
+  [13] $25 = LoadLocal x$16              // Uses phi result
+  [14] Return Explicit $25
+```
+
+The phi node at `bb1` (the loop header) is initially created as an "incomplete phi" when first visited because `bb3` (the loop body) hasn't been visited yet. Once `bb3` is processed and its terminal is handled, the incomplete phi is fixed by calling `fixIncompletePhis` to populate the operand from `bb3`.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/03-eliminateRedundantPhi.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/03-eliminateRedundantPhi.md
new file mode 100644
index 00000000000..fe774253ade
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/03-eliminateRedundantPhi.md
@@ -0,0 +1,90 @@
+# eliminateRedundantPhi
+
+## File
+`src/SSA/EliminateRedundantPhi.ts`
+
+## Purpose
+Eliminates phi nodes whose operands are trivially the same, replacing all usages of the phi's output identifier with the single source identifier. This simplifies the HIR by removing unnecessary join points that do not actually merge distinct values.
+
+## Input Invariants
+- The function must be in SSA form (i.e., `enterSSA` has already run)
+- Blocks are in reverse postorder (guaranteed by the HIR structure)
+- Phi nodes exist at the start of blocks where control flow merges
+
+## Output Guarantees
+- All redundant phi nodes are removed from the HIR
+- All references to eliminated phi identifiers are rewritten to the source identifier
+- Non-redundant phi nodes (those merging two or more distinct values) are preserved
+- Nested function expressions (FunctionExpression, ObjectMethod) also have their redundant phis eliminated and contexts rewritten
+
+## Algorithm
+A phi node is considered redundant when:
+1. **All operands are the same identifier**: e.g., `x2 = phi(x1, x1, x1)` - the phi is replaced with `x1`
+2. **All operands are either the same identifier OR the phi's output**: e.g., `x2 = phi(x1, x2, x1, x2)` - this handles loop back-edges where the phi references itself
+
+The algorithm works as follows:
+1. Visit blocks in reverse postorder, building a rewrite table (`Map<Identifier, Identifier>`)
+2. For each phi node in a block:
+   - First rewrite operands using any existing rewrites (to handle cascading eliminations)
+   - Check if all operands (excluding self-references) point to the same identifier
+   - If so, add a mapping from the phi's output to that identifier and delete the phi
+3. After processing phis, rewrite all instruction lvalues, operands, and terminal operands
+4. For nested functions, recursively call `eliminateRedundantPhi` with shared rewrites
+5. If the CFG has back-edges (loops) and new rewrites were added, repeat the entire process
+
+The loop termination condition `rewrites.size > size && hasBackEdge` ensures:
+- Without loops: completes in a single pass (reverse postorder guarantees forward propagation)
+- With loops: repeats until no new rewrites are found (fixpoint)
+
+## Key Data Structures
+- **`Phi`** (from `src/HIR/HIR.ts`): Represents a phi node with:
+  - `place: Place` - the output identifier
+  - `operands: Map<BlockId, Place>` - maps predecessor block IDs to source places
+- **`rewrites: Map<Identifier, Identifier>`**: Maps eliminated phi outputs to their replacement identifier
+- **`visited: Set<BlockId>`**: Tracks visited blocks to detect back-edges (loops)
+
+## Edge Cases
+- **Loop back-edges**: When a block has a predecessor that hasn't been visited yet (in reverse postorder), that predecessor is a back-edge. The algorithm handles self-referential phis like `x2 = phi(x1, x2)` by ignoring operands equal to the phi's output.
+- **Cascading eliminations**: When one phi's output is used in another phi's operands, the algorithm rewrites operands before checking redundancy, enabling transitive elimination in a single pass (for non-loop cases).
+- **Nested functions**: FunctionExpression and ObjectMethod values contain nested HIR that may have their own phis. The algorithm recursively processes these with a shared rewrite table, ensuring context captures are also rewritten.
+- **Empty phi check**: The algorithm includes an invariant check that phi operands are never empty (which would be invalid HIR).
+
+## TODOs
+(None found in the source code)
+
+## Example
+
+Consider this fixture from `rewrite-phis-in-lambda-capture-context.js`:
+
+```javascript
+function Component() {
+  const x = 4;
+  const get4 = () => {
+    while (bar()) {
+      if (baz) { bar(); }
+    }
+    return () => x;
+  };
+  return get4;
+}
+```
+
+**After SSA pass**, the inner function has redundant phis due to the loop:
+
+```
+bb2 (loop):
+  predecessor blocks: bb1 bb5
+  x$29: phi(bb1: x$21, bb5: x$30)  // Loop header phi
+  ...
+bb5 (block):
+  predecessor blocks: bb6 bb4
+  x$30: phi(bb6: x$29, bb4: x$29)  // Redundant: both operands are x$29
+  ...
+```
+
+**After EliminateRedundantPhi**:
+- `x$30 = phi(x$29, x$29)` is eliminated because both operands are `x$29`
+- `x$29 = phi(x$21, x$30)` becomes `x$29 = phi(x$21, x$29)` after rewriting, which is also redundant (one operand is the phi itself, the other is `x$21`)
+- Both phis are eliminated, and all uses of `x$29` and `x$30` are rewritten to `x$21`
+
+The result: the context capture `@context[x$29]` becomes `@context[x$21]`, correctly propagating that `x` is never modified inside the loop.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/04-constantPropagation.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/04-constantPropagation.md
new file mode 100644
index 00000000000..36e57abe03a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/04-constantPropagation.md
@@ -0,0 +1,110 @@
+# constantPropagation
+
+## File
+`src/Optimization/ConstantPropagation.ts`
+
+## Purpose
+Applies Sparse Conditional Constant Propagation (SCCP) to fold compile-time evaluable expressions to constant values, propagate those constants through the program, and eliminate unreachable branches when conditionals have known constant values.
+
+## Input Invariants
+- HIR must be in SSA form (runs after `enterSSA`)
+- Redundant phi nodes should be eliminated (runs after `eliminateRedundantPhi`)
+- Consistent identifiers must be ensured (`assertConsistentIdentifiers`)
+- Terminal successors must exist (`assertTerminalSuccessorsExist`)
+
+## Output Guarantees
+- Instructions with compile-time evaluable operands are replaced with `Primitive` constants
+- `ComputedLoad`/`ComputedStore` with constant string/number properties are converted to `PropertyLoad`/`PropertyStore`
+- `LoadLocal` and `StoreLocal` propagate known constant values
+- `IfTerminal` with constant boolean test values are replaced with `goto` terminals
+- Unreachable blocks are removed and the CFG is minimized
+- Phi nodes with unreachable predecessor operands are pruned
+- Nested functions (`FunctionExpression`, `ObjectMethod`) are recursively processed
+
+## Algorithm
+The pass uses Sparse Conditional Constant Propagation (SCCP) with fixpoint iteration:
+
+1. **Data Structure**: A `Constants` map (`Map<IdentifierId, Constant>`) tracks known constant values (either `Primitive` or `LoadGlobal`)
+
+2. **Single Pass per Iteration**: Visits all blocks in order:
+   - Evaluates phi nodes - if all operands have the same constant value, the phi result is constant
+   - Evaluates instructions - replaces evaluable expressions with constants
+   - Evaluates terminals - if an `IfTerminal` test is a constant, replaces it with a `goto`
+
+3. **Fixpoint Loop**: If any terminals changed (branch elimination):
+   - Recomputes block ordering (`reversePostorderBlocks`)
+   - Removes unreachable code (`removeUnreachableForUpdates`, `removeDeadDoWhileStatements`, `removeUnnecessaryTryCatch`)
+   - Renumbers instructions (`markInstructionIds`)
+   - Updates predecessors (`markPredecessors`)
+   - Prunes phi operands from unreachable predecessors
+   - Eliminates newly-redundant phis (`eliminateRedundantPhi`)
+   - Merges consecutive blocks (`mergeConsecutiveBlocks`)
+   - Repeats until no more changes
+
+4. **Instruction Evaluation**: Handles various instruction types:
+   - **Primitives/LoadGlobal**: Directly constant
+   - **BinaryExpression**: Folds arithmetic (`+`, `-`, `*`, `/`, `%`, `**`), bitwise (`|`, `&`, `^`, `<<`, `>>`, `>>>`), and comparison (`<`, `<=`, `>`, `>=`, `==`, `===`, `!=`, `!==`) operators
+   - **UnaryExpression**: Folds `!` (boolean negation) and `-` (numeric negation)
+   - **PostfixUpdate/PrefixUpdate**: Folds `++`/`--` on constant numbers
+   - **PropertyLoad**: Folds `.length` on constant strings
+   - **TemplateLiteral**: Folds template strings with constant interpolations
+   - **ComputedLoad/ComputedStore**: Converts to property access when property is constant string/number
+
+## Key Data Structures
+- `Constant = Primitive | LoadGlobal` - The lattice values (no top/bottom, absence means unknown)
+- `Constants = Map<IdentifierId, Constant>` - Maps identifier IDs to their known constant values
+- Uses HIR types: `Instruction`, `Phi`, `Place`, `Primitive`, `LoadGlobal`, `InstructionValue`
+
+## Edge Cases
+- **Last instruction of sequence blocks**: Skipped to preserve evaluation order
+- **Phi nodes with back-edges**: Single-pass analysis means loop back-edges won't have constant values propagated
+- **Template literals with Symbol**: Not folded (would throw at runtime)
+- **Template literals with objects/arrays**: Not folded (custom toString behavior)
+- **Division results**: Computed at compile time (may produce `NaN`, `Infinity`, etc.)
+- **LoadGlobal in phis**: Only propagated if all operands reference the same global name
+- **Nested functions**: Constants from outer scope are propagated into nested function expressions
+
+## TODOs
+- `// TODO: handle more cases` - The default case in `evaluateInstruction` has room for additional instruction types
+
+## Example
+
+**Input:**
+```javascript
+function Component() {
+  let a = 1;
+
+  let b;
+  if (a === 1) {
+    b = true;
+  } else {
+    b = false;
+  }
+
+  let c;
+  if (b) {
+    c = 'hello';
+  } else {
+    c = null;
+  }
+
+  return c;
+}
+```
+
+**After ConstantPropagation:**
+- `a === 1` evaluates to `true`
+- The `if (a === 1)` branch is eliminated, only consequent remains
+- `b` is known to be `true`
+- `if (b)` branch is eliminated, only consequent remains
+- `c` is known to be `'hello'`
+- All intermediate blocks are merged
+
+**Output:**
+```javascript
+function Component() {
+  return "hello";
+}
+```
+
+The pass performs iterative simplification: first iteration determines `a === 1` is `true` and eliminates that branch. The CFG is updated, phi for `b` is pruned to single operand making `b = true`. Second iteration uses `b = true` to eliminate the next branch. This continues until no more branches can be eliminated.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/05-deadCodeElimination.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/05-deadCodeElimination.md
new file mode 100644
index 00000000000..d1bbb5b742f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/05-deadCodeElimination.md
@@ -0,0 +1,109 @@
+# deadCodeElimination
+
+## File
+`src/Optimization/DeadCodeElimination.ts`
+
+## Purpose
+Eliminates instructions whose values are unused, reducing generated code size. The pass performs mark-and-sweep analysis to identify and remove dead code while preserving side effects and program semantics.
+
+## Input Invariants
+- Must run after `InferMutationAliasingEffects` because "dead" code may still affect effect inference
+- HIR is in SSA form with phi nodes
+- Unreachable blocks are already pruned during HIR construction
+
+## Output Guarantees
+- All instructions with unused lvalues (that are safe to prune) are removed
+- Unused phi nodes are deleted
+- Unused context variables are removed from `fn.context`
+- Destructuring patterns are rewritten to remove unused bindings
+- `StoreLocal` instructions with unused initializers are converted to `DeclareLocal`
+
+## Algorithm
+Two-phase mark-and-sweep with fixed-point iteration for loops:
+
+**Phase 1: Mark (findReferencedIdentifiers)**
+1. Detect if function has back-edges (loops)
+2. Iterate blocks in reverse postorder (successors before predecessors) to visit usages before declarations
+3. For each block:
+   - Mark all terminal operands as referenced
+   - Process instructions in reverse order:
+     - If lvalue is used OR instruction is not pruneable, mark the lvalue and all operands as referenced
+     - Special case for `StoreLocal`: only mark initializer if the SSA lvalue is actually read
+   - Mark phi operands if the phi result is used
+4. If loops exist and new identifiers were marked, repeat until fixed point
+
+**Phase 2: Sweep**
+1. Remove unused phi nodes from each block
+2. Remove instructions with unused lvalues using `retainWhere`
+3. Rewrite retained instructions:
+   - **Array destructuring**: Replace unused elements with holes, truncate trailing holes
+   - **Object destructuring**: Remove unused properties (only if rest element is unused or absent)
+   - **StoreLocal**: Convert to `DeclareLocal` if initializer value is never read
+4. Remove unused context variables
+
+## Key Data Structures
+- **State class**: Tracks referenced identifiers
+  - `identifiers: Set<IdentifierId>` - SSA-specific usages
+  - `named: Set<string>` - Named variable usages (any version)
+  - `isIdOrNameUsed()` - Checks if identifier or any version of named variable is used
+  - `isIdUsed()` - Checks if specific SSA id is used
+- **hasBackEdge/findBlocksWithBackEdges**: Detect loops requiring fixed-point iteration
+
+## Edge Cases
+- **Preserved even if unused:**
+  - `debugger` statements (to not break debugging workflows)
+  - Call expressions and method calls (may have side effects)
+  - Await expressions
+  - Store operations (ComputedStore, PropertyStore, StoreGlobal)
+  - Delete operations (ComputedDelete, PropertyDelete)
+  - Iterator operations (GetIterator, IteratorNext, NextPropertyOf)
+  - Context operations (LoadContext, DeclareContext, StoreContext)
+  - Memoization markers (StartMemoize, FinishMemoize)
+
+- **SSR mode special case:**
+  - In SSR mode, unused `useState`, `useReducer`, and `useRef` hooks can be removed
+
+- **Object destructuring with rest:**
+  - Cannot remove unused properties if rest element is used (would change rest's value)
+
+- **Block value instructions:**
+  - Last instruction of value blocks (not 'block' kind) is never pruned as it's the block's value
+
+## TODOs
+- "TODO: we could be more precise and make this conditional on whether any arguments are actually modified" (for mutating instructions)
+
+## Example
+
+**Input:**
+```javascript
+function Component(props) {
+  const _ = 42;
+  return props.value;
+}
+```
+
+**After DeadCodeElimination:**
+The `const _ = 42` assignment is removed since `_` is never used:
+```javascript
+function Component(props) {
+  return props.value;
+}
+```
+
+**Array destructuring example:**
+
+Input:
+```javascript
+function foo(props) {
+  const [x, unused, y] = props.a;
+  return x + y;
+}
+```
+
+Output (middle element becomes a hole):
+```javascript
+function foo(props) {
+  const [x, , y] = props.a;
+  return x + y;
+}
+```
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/06-inferTypes.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/06-inferTypes.md
new file mode 100644
index 00000000000..eca37e88431
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/06-inferTypes.md
@@ -0,0 +1,127 @@
+# inferTypes
+
+## File
+`src/TypeInference/InferTypes.ts`
+
+## Purpose
+Infers types for all identifiers in the HIR by generating type equations and solving them using unification. This pass annotates identifiers with concrete types (Primitive, Object, Function) based on the operations performed on them and the types of globals/hooks they interact with.
+
+## Input Invariants
+- The HIR must be in SSA form (the pass runs after `enterSSA` and `eliminateRedundantPhi`)
+- Constant propagation has already run
+- Global declarations and hook shapes are available via the Environment
+
+## Output Guarantees
+- All identifier types are resolved from type variables (`Type`) to concrete types where possible
+- Phi nodes have their operand types unified to produce a single result type
+- Function return types are inferred from the unified types of all return statements
+- Property accesses on known objects/hooks resolve to the declared property types
+- Component props parameters are typed as `TObject<BuiltInProps>`
+- Component ref parameters are typed as `TObject<BuiltInUseRefId>`
+
+## Algorithm
+The pass uses a classic constraint-based type inference approach with three phases:
+
+1. **Constraint Generation (`generate`)**: Traverses all instructions and generates type equations:
+   - Primitives, literals, unary/binary operations -> `Primitive` type
+   - Hook/function calls -> Function type with fresh return type variable
+   - Property loads -> `Property` type that defers to object shape lookup
+   - Destructuring -> Property types for each extracted element
+   - Phi nodes -> `Phi` type with all operand types as candidates
+   - JSX -> `Object<BuiltInJsx>`
+   - Arrays -> `Object<BuiltInArray>`
+   - Objects -> `Object<BuiltInObject>`
+
+2. **Unification (`Unifier.unify`)**: Solves constraints by unifying type equations:
+   - Type variables are bound to concrete types via substitution
+   - Property types are resolved by looking up the object's shape
+   - Phi types are resolved by finding a common type among operands (or falling back to `Phi` if incompatible)
+   - Function types are unified by unifying their return types
+   - Occurs check prevents infinite types (cycles in type references)
+
+3. **Application (`apply`)**: Applies the computed substitutions to all identifiers in the HIR, replacing type variables with their resolved types.
+
+## Key Data Structures
+- **TypeVar** (`kind: 'Type'`): A type variable with a unique TypeId, used for unknowns
+- **Unifier**: Maintains a substitution map from TypeId to Type, with methods for unification and cycle detection
+- **TypeEquation**: A pair of types that should be equal, used as constraints
+- **PhiType** (`kind: 'Phi'`): Represents the join of multiple types from control flow merge points
+- **PropType** (`kind: 'Property'`): Deferred property lookup that resolves based on object shape
+- **FunctionType** (`kind: 'Function'`): Callable type with optional shapeId and return type
+- **ObjectType** (`kind: 'Object'`): Object with optional shapeId for shape lookup
+
+## Edge Cases
+
+### Phi Type Resolution
+When phi operands have incompatible types, the pass attempts to find a union:
+- `Union(Primitive | MixedReadonly) = MixedReadonly`
+- `Union(Array | MixedReadonly) = Array`
+- If no union is possible, the type remains as `Phi`
+
+### Ref-like Name Inference
+When `enableTreatRefLikeIdentifiersAsRefs` is enabled, property access on variables matching the pattern `/^(?:[a-zA-Z$_][a-zA-Z$_0-9]*)Ref$|^ref$/` with property name `current` infers:
+- Object type as `TObject<BuiltInUseRefId>`
+- Property type as `TObject<BuiltInRefValue>`
+
+### Cycle Detection
+The `occursCheck` method prevents infinite types by detecting when a type variable appears in its own substitution. When a cycle is detected, `tryResolveType` removes the cyclic reference from Phi operands.
+
+### Context Variables
+- `DeclareContext` and `LoadContext` generate no type equations (intentionally untyped)
+- `StoreContext` with `Const` kind does propagate the rvalue type to enable ref inference through context variables
+
+### Event Handler Inference
+When `enableInferEventHandlers` is enabled, JSX props starting with "on" (e.g., `onClick`) on built-in DOM elements (excluding web components with hyphens) are inferred as `Function<BuiltInEventHandlerId>`.
+
+## TODOs
+1. **Hook vs Function type ambiguity**:
+   > "TODO: callee could be a hook or a function, so this type equation isn't correct. We should change Hook to a subtype of Function or change unifier logic."
+
+2. **PropertyStore rvalue inference**:
+   > "TODO: consider using the rvalue type here" - Currently uses a dummy type for PropertyStore to avoid inferring rvalue types from lvalue assignments.
+
+## Example
+
+**Input (infer-phi-primitive.js):**
+```javascript
+function foo(a, b) {
+  let x;
+  if (a) {
+    x = 1;
+  } else {
+    x = 2;
+  }
+  let y = x;
+  return y;
+}
+```
+
+**Before InferTypes (SSA form):**
+```
+<unknown> x$26: phi(bb2: <unknown> x$21, bb3: <unknown> x$24)
+[10] <unknown> $27 = LoadLocal <unknown> x$26
+[11] <unknown> $29 = StoreLocal Let <unknown> y$28 = <unknown> $27
+```
+
+**After InferTypes:**
+```
+<unknown> x$26:TPrimitive: phi(bb2: <unknown> x$21:TPrimitive, bb3: <unknown> x$24:TPrimitive)
+[10] <unknown> $27:TPrimitive = LoadLocal <unknown> x$26:TPrimitive
+[11] <unknown> $29:TPrimitive = StoreLocal Let <unknown> y$28:TPrimitive = <unknown> $27:TPrimitive
+```
+
+The pass infers that:
+- Literals `1` and `2` are `TPrimitive`
+- The phi of two primitives is `TPrimitive`
+- Variables `x` and `y` are `TPrimitive`
+- The function return type is `TPrimitive`
+
+**Hook type inference example (useState):**
+```javascript
+const [x, setX] = useState(initialValue);
+```
+
+After InferTypes:
+- `useState` -> `TFunction<BuiltInUseState>:TObject<BuiltInUseState>`
+- Return value `$27` -> `TObject<BuiltInUseState>`
+- Destructured `setX` -> `TFunction<BuiltInSetState>:TPrimitive`
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/07-analyseFunctions.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/07-analyseFunctions.md
new file mode 100644
index 00000000000..b86881163bb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/07-analyseFunctions.md
@@ -0,0 +1,84 @@
+# analyseFunctions
+
+## File
+`src/Inference/AnalyseFunctions.ts`
+
+## Purpose
+Recursively analyzes all nested function expressions and object methods in a function to infer their aliasing effect signatures, which describe how the function affects its captured variables when invoked.
+
+## Input Invariants
+- The HIR has been through SSA conversion and type inference
+- FunctionExpression and ObjectMethod instructions have an empty `aliasingEffects` array (`@aliasingEffects=[]`)
+- Context variables (captured variables from outer scope) exist on `fn.context` but do not have their effect populated
+
+## Output Guarantees
+- Every FunctionExpression and ObjectMethod has its `aliasingEffects` array populated with the effects the function performs when called (mutations, captures, aliasing to return value, etc.)
+- Each context variable's `effect` property is set to either `Effect.Capture` (if the variable is captured or mutated by the inner function) or `Effect.Read` (if only read)
+- Context variable mutable ranges are reset to `{start: 0, end: 0}` and scopes are set to `null` to prepare for the outer function's subsequent `inferMutationAliasingRanges` pass
+
+## Algorithm
+1. **Recursive traversal**: Iterates through all blocks and instructions looking for `FunctionExpression` or `ObjectMethod` instructions
+2. **Depth-first processing**: For each function expression found, calls `lowerWithMutationAliasing()` which:
+   - Recursively calls `analyseFunctions()` on the inner function (handles nested functions)
+   - Runs `inferMutationAliasingEffects()` on the inner function to determine effects
+   - Runs `deadCodeElimination()` to clean up
+   - Runs `inferMutationAliasingRanges()` to compute mutable ranges and extract externally-visible effects
+   - Runs `rewriteInstructionKindsBasedOnReassignment()` and `inferReactiveScopeVariables()`
+   - Stores the computed effects in `fn.aliasingEffects`
+3. **Context variable effect classification**: Scans the computed effects to determine which context variables are captured/mutated vs only read:
+   - Effects like `Capture`, `Alias`, `Assign`, `MaybeAlias`, `CreateFrom` mark the source as captured
+   - Mutation effects (`Mutate`, `MutateTransitive`, etc.) mark the target as captured
+   - Sets `operand.effect = Effect.Capture` or `Effect.Read` accordingly
+4. **Range reset**: Resets mutable ranges and scopes on context variables to prepare for outer function analysis
+
+## Key Data Structures
+- **HIRFunction.aliasingEffects**: Array of `AliasingEffect` storing the externally-visible behavior of a function when called
+- **Place.effect**: Effect enum value (`Capture` or `Read`) describing how a context variable is used
+- **AliasingEffect**: Union type describing data flow (Capture, Alias, Assign, etc.) and mutations (Mutate, MutateTransitive, etc.)
+- **FunctionExpression/ObjectMethod.loweredFunc.func**: The inner HIRFunction to analyze
+
+## Edge Cases
+- **Nested functions**: Handled via recursive call to `analyseFunctions()` before processing the current function - innermost functions are analyzed first
+- **ObjectMethod**: Treated identically to FunctionExpression
+- **Apply effects invariant**: The pass asserts that no `Apply` effects remain in the function's signature - these should have been resolved to more precise effects by `inferMutationAliasingRanges()`
+- **Conditional mutations**: Effects like `MutateTransitiveConditionally` are tracked - a function that conditionally mutates a captured variable will have that effect in its signature
+- **Immutable captures**: `ImmutableCapture`, `Freeze`, `Create`, `Impure`, `Render` effects do not contribute to marking context variables as `Capture`
+
+## TODOs
+- No TODO comments in the pass itself
+
+## Example
+Consider a function that captures and conditionally mutates a variable:
+
+```javascript
+function useHook(a, b) {
+  let z = {a};
+  let y = b;
+  let x = function () {
+    if (y) {
+      maybeMutate(z);  // Unknown function, may mutate z
+    }
+  };
+  return x;
+}
+```
+
+**Before AnalyseFunctions:**
+```
+Function @context[y$28, z$25] @aliasingEffects=[]
+```
+
+**After AnalyseFunctions:**
+```
+Function @context[read y$28, capture z$25] @aliasingEffects=[
+  MutateTransitiveConditionally z$25,
+  Create $14 = primitive
+]
+```
+
+The pass infers:
+- `y` is only read (used in the condition)
+- `z` is captured into the function and conditionally mutated transitively (because `maybeMutate()` is unknown)
+- The inner function's signature includes `MutateTransitiveConditionally z$25` to indicate this potential mutation
+
+This signature is then used by `InferMutationAliasingEffects` on the outer function to understand that creating this function captures `z`, and calling the function may mutate `z`.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/08-inferMutationAliasingEffects.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/08-inferMutationAliasingEffects.md
new file mode 100644
index 00000000000..a8b488008e0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/08-inferMutationAliasingEffects.md
@@ -0,0 +1,144 @@
+# inferMutationAliasingEffects
+
+## File
+`src/Inference/InferMutationAliasingEffects.ts`
+
+## Purpose
+Infers the mutation and aliasing effects for all instructions and terminals in the HIR, making the effects of built-in instructions/functions as well as user-defined functions explicit. These effects form the basis for subsequent analysis to determine the mutable range of each value in the program and for validation against invalid code patterns like mutating frozen values.
+
+## Input Invariants
+- HIR must be in SSA form (run after SSA pass)
+- Types must be inferred (run after InferTypes pass)
+- Functions must be analyzed (run after AnalyseFunctions pass) - this provides `aliasingEffects` on FunctionExpressions
+- Each instruction must have an lvalue (destination place)
+
+## Output Guarantees
+- Every instruction has an `effects` array (or null if no effects) containing `AliasingEffect` objects
+- Terminals that affect data flow (return, try/catch) have their `effects` populated
+- Each instruction's lvalue is guaranteed to be defined in the inference state after visiting
+- Effects describe: creation of values, data flow (Assign, Alias, Capture), mutations (Mutate, MutateTransitive), freezing, and errors (MutateFrozen, MutateGlobal, Impure)
+
+## Algorithm
+The pass uses abstract interpretation with the following key phases:
+
+1. **Initialization**:
+   - Create initial `InferenceState` mapping identifiers to abstract values
+   - Initialize context variables as `ValueKind.Context`
+   - Initialize parameters as `ValueKind.Frozen` (for top-level components/hooks) or `ValueKind.Mutable` (for function expressions)
+
+2. **Two-Phase Effect Processing**:
+   - **Phase 1 - Signature Computation**: For each instruction, compute a "candidate signature" based purely on instruction semantics and types (cached per instruction via `computeSignatureForInstruction`)
+   - **Phase 2 - Effect Application**: Apply the signature to the current abstract state via `applySignature`, which refines effects based on the actual runtime kinds of values
+
+3. **Fixed-Point Iteration**:
+   - Process blocks in a worklist, queuing successors after each block
+   - Merge states at control flow join points using lattice operations
+   - Iterate until no changes occur (max 100 iterations as safety limit)
+   - Phi nodes are handled by unioning the abstract values from all predecessors
+
+4. **Effect Refinement** (in `applyEffect`):
+   - `MutateConditionally` effects are dropped if value is not mutable
+   - `Capture` effects are downgraded to `ImmutableCapture` if source is frozen
+   - `Mutate` on frozen values becomes `MutateFrozen` error
+   - `Assign` from primitives/globals creates new values rather than aliasing
+
+## Key Data Structures
+
+### InferenceState
+Maintains two maps:
+- `#values: Map<InstructionValue, AbstractValue>` - Maps allocation sites to their abstract kind
+- `#variables: Map<IdentifierId, Set<InstructionValue>>` - Maps identifiers to the set of values they may point to (set to handle phi joins)
+
+### AbstractValue
+```typescript
+type AbstractValue = {
+  kind: ValueKind;
+  reason: ReadonlySet<ValueReason>;
+};
+```
+
+### ValueKind (lattice)
+```
+MaybeFrozen    <- top (unknown if frozen or mutable)
+    |
+  Frozen       <- immutable, cannot be mutated
+  Mutable      <- can be mutated locally
+  Context      <- mutable box (context variables)
+    |
+  Global       <- global value
+  Primitive    <- copy-on-write semantics
+```
+
+The `mergeValueKinds` function implements the lattice join:
+- `Frozen | Mutable -> MaybeFrozen`
+- `Context | Mutable -> Context`
+- `Context | Frozen -> MaybeFrozen`
+
+### AliasingEffect Types
+Key effect kinds handled:
+- **Create**: Creates a new value at a place
+- **Assign**: Direct assignment (pointer copy)
+- **Alias**: Mutation of destination implies mutation of source
+- **Capture**: Information flow (MutateTransitive propagates through)
+- **MaybeAlias**: Possible aliasing for unknown function returns
+- **Mutate/MutateTransitive**: Direct/transitive mutation
+- **MutateConditionally/MutateTransitiveConditionally**: Conditional versions
+- **Freeze**: Marks value as immutable
+- **Apply**: Function call with complex data flow
+
+## Edge Cases
+
+1. **Spread Destructuring from Props**: The `findNonMutatedDestructureSpreads` pre-pass identifies spread patterns from frozen values that are never mutated, allowing them to be treated as frozen.
+
+2. **Hoisted Context Declarations**: Special handling for variables declared with hoisting (`HoistedConst`, `HoistedFunction`, `HoistedLet`) to detect access before declaration.
+
+3. **Try-Catch Aliasing**: When a `maybe-throw` terminal is reached, call return values are aliased into the catch binding since exceptions can throw return values.
+
+4. **Function Expressions**: Functions are considered mutable only if they have mutable captures or tracked side effects (MutateFrozen, MutateGlobal, Impure).
+
+5. **Iterator Mutation**: Non-builtin iterators may alias their collection and mutation of the iterator is conditional.
+
+6. **Array.push and Similar**: Uses legacy signature system with `Store` effect on receiver and `Capture` of arguments.
+
+## TODOs
+- `// TODO: using InstructionValue as a bit of a hack, but it's pragmatic` - context variable initialization
+- `// TODO: call applyEffect() instead` - try-catch aliasing
+- `// TODO: make sure we're also validating against global mutations somewhere` - global mutation validation for effects/event handlers
+- `// TODO; include "render" here?` - whether to track Render effects in function hasTrackedSideEffects
+- `// TODO: consider using persistent data structures to make clone cheaper` - performance optimization for state cloning
+- `// TODO check this` and `// TODO: what kind here???` - DeclareLocal value kinds
+
+## Example
+
+For the code:
+```javascript
+const arr = [];
+arr.push({});
+arr.push(x, y);
+```
+
+After `InferMutationAliasingEffects`, the effects are:
+
+```
+[10] $39 = Array []
+    Create $39 = mutable           // Array literal creates mutable value
+
+[11] $41 = StoreLocal arr$40 = $39
+    Assign arr$40 = $39            // arr points to the array value
+    Assign $41 = $39
+
+[15] $45 = MethodCall $42.push($44)
+    Apply $45 = $42.$43($44)       // Records the call
+    Mutate $42                      // push mutates the array
+    Capture $42 <- $44             // {} is captured into array
+    Create $45 = primitive         // push returns number (length)
+
+[20] $50 = MethodCall $46.push($48, $49)
+    Apply $50 = $46.$47($48, $49)
+    Mutate $46                      // push mutates the array
+    Capture $46 <- $48             // x captured into array
+    Capture $46 <- $49             // y captured into array
+    Create $50 = primitive
+```
+
+The key insight is that `Mutate` effects extend the mutable range of the array, and `Capture` effects record data flow so that if the array is later frozen (e.g., returned from a component), the captured values are also considered frozen for validation purposes.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/09-inferMutationAliasingRanges.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/09-inferMutationAliasingRanges.md
new file mode 100644
index 00000000000..769f386abe8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/09-inferMutationAliasingRanges.md
@@ -0,0 +1,149 @@
+# inferMutationAliasingRanges
+
+## File
+`src/Inference/InferMutationAliasingRanges.ts`
+
+## Purpose
+This pass builds an abstract model of the heap and interprets the effects of the given function to determine: (1) the mutable ranges of all identifiers, (2) the externally-visible effects of the function (mutations of params/context-vars, aliasing relationships), and (3) the legacy `Effect` annotation for each Place.
+
+## Input Invariants
+- InferMutationAliasingEffects must have already run, populating `instr.effects` on each instruction with aliasing/mutation effects
+- SSA form must be established (identifiers are in SSA)
+- Type inference has been run (InferTypes)
+- Functions have been analyzed (AnalyseFunctions)
+- Dead code elimination has been performed
+
+## Output Guarantees
+- Every identifier has a populated `mutableRange` (start:end instruction IDs)
+- Every Place has a legacy `Effect` annotation (Read, Capture, Store, Freeze, etc.)
+- The function's `aliasingEffects` array is populated with externally-visible effects (mutations of params/context-vars, aliasing between params/context-vars/return)
+- Validation errors are collected for invalid effects like `MutateFrozen` or `MutateGlobal`
+
+## Algorithm
+The pass operates in three main phases:
+
+**Part 1: Build Data Flow Graph and Infer Mutable Ranges**
+1. Creates an `AliasingState` which maintains a `Node` for each identifier
+2. Iterates through all blocks and instructions, processing effects in program order
+3. For each effect:
+   - `Create`/`CreateFunction`: Creates a new node in the graph
+   - `CreateFrom`/`Assign`/`Alias`: Adds alias edges between nodes (with ordering index)
+   - `MaybeAlias`: Adds conditional alias edges
+   - `Capture`: Adds capture edges (for transitive mutations)
+   - `Mutate*`: Queues mutations for later processing
+   - `Render`: Queues render effects for later processing
+4. Phi node operands are connected once their predecessor blocks have been visited
+5. After the graph is built, mutations are processed:
+   - Mutations propagate both forward (via edges) and backward (via aliases/captures)
+   - Each mutation extends the `mutableRange.end` of affected identifiers
+   - Transitive mutations also traverse capture edges backward
+   - `MaybeAlias` edges downgrade mutations to `Conditional`
+6. Render effects are processed to mark values as rendered
+
+**Part 2: Populate Legacy Per-Place Effects**
+- Sets legacy effects on lvalues and operands based on instruction effects and mutable ranges
+- Fixes up mutable range start values for identifiers that are mutated after creation
+
+**Part 3: Infer Externally-Visible Function Effects**
+- Creates a `Create` effect for the return value
+- Simulates transitive mutations of each param/context-var/return to detect capture relationships
+- Produces `Alias`/`Capture` effects showing data flow between params/context-vars/return
+
+## Key Data Structures
+
+### `AliasingState`
+The main state class maintaining the data flow graph:
+- `nodes: Map<Identifier, Node>` - Maps identifiers to their graph nodes
+
+### `Node`
+Represents an identifier in the data flow graph:
+```typescript
+type Node = {
+  id: Identifier;
+  createdFrom: Map<Identifier, number>;   // CreateFrom edges (source -> index)
+  captures: Map<Identifier, number>;       // Capture edges (source -> index)
+  aliases: Map<Identifier, number>;        // Alias/Assign edges (source -> index)
+  maybeAliases: Map<Identifier, number>;   // MaybeAlias edges (source -> index)
+  edges: Array<{index, node, kind}>;       // Forward edges to other nodes
+  transitive: {kind: MutationKind; loc} | null;  // Transitive mutation info
+  local: {kind: MutationKind; loc} | null;       // Local mutation info
+  lastMutated: number;                     // Index of last mutation affecting this node
+  mutationReason: MutationReason | null;   // Reason for mutation
+  value: {kind: 'Object'} | {kind: 'Phi'} | {kind: 'Function'; function: HIRFunction};
+  render: Place | null;                    // Render context if used in JSX
+};
+```
+
+### `MutationKind`
+Enum describing mutation certainty:
+```typescript
+enum MutationKind {
+  None = 0,
+  Conditional = 1,  // May mutate (e.g., via MaybeAlias or MutateConditionally)
+  Definite = 2,     // Definitely mutates
+}
+```
+
+## Edge Cases
+
+### Phi Nodes
+- Phi nodes are created as special `{kind: 'Phi'}` nodes
+- Phi operands from predecessor blocks are processed with pending edges until the predecessor is visited
+- When traversing "forwards" through edges and encountering a phi, backward traversal is stopped (prevents mutation from one phi input affecting other inputs)
+
+### Transitive vs Local Mutations
+- Local mutations (`Mutate`) only affect alias/assign edges backward
+- Transitive mutations (`MutateTransitive`) also affect capture edges backward
+- Both affect all forward edges
+
+### MaybeAlias
+- Mutations through MaybeAlias edges are downgraded to `Conditional`
+- This prevents false positive errors when we cannot be certain about aliasing
+
+### Function Values
+- Functions are tracked specially as `{kind: 'Function'}` nodes
+- When a function is mutated (transitively), errors from the function body are propagated
+- This handles cases where mutating a captured value in a function affects render safety
+
+### Render Effect Propagation
+- Render effects traverse backward through alias/capture/createFrom edges
+- Functions that have not been mutated are skipped during render traversal (except for JSX-returning functions)
+- Ref types (`isUseRefType`) stop render traversal
+
+## TODOs
+1. Assign effects should have an invariant that the node is not initialized yet. Currently `InferFunctionExpressionAliasingEffectSignatures` infers Assign effects that should be Alias, causing reinitialization.
+
+2. Phi place effects are not properly set today.
+
+3. Phi mutable range start calculation is imprecise - currently just sets it to the instruction before the block rather than computing the exact start.
+
+## Example
+
+Consider the following code:
+```javascript
+function foo() {
+  let a = {};   // Create a (instruction 1)
+  let b = {};   // Create b (instruction 3)
+  a = b;        // Assign a <- b (instruction 8)
+  mutate(a, b); // MutateTransitiveConditionally a, b (instruction 16)
+  return a;
+}
+```
+
+The pass builds a graph:
+1. Creates node for `{}` at instruction 1 (initially assigned to `a`)
+2. Creates node for `{}` at instruction 3 (initially assigned to `b`)
+3. At instruction 8, creates alias edge: `b -> a` with index 8
+4. At instruction 16, mutations are queued for `a` and `b`
+
+When processing the mutation of `a` at instruction 16:
+- Extends `a`'s mutableRange.end to 17
+- Traverses backward through alias edge to `b`, extends `b`'s mutableRange.end to 17
+- Since `a = b`, both objects must be considered mutable until instruction 17
+
+The output shows identifiers with range annotations like `$25[3:17]` meaning:
+- `$25` is the identifier
+- `3` is the instruction where it was created
+- `17` is the instruction after which it is no longer mutated
+
+For aliased values, the ranges are unified - all values that could be affected by a mutation have their ranges extended to include that mutation point.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/10-inferReactivePlaces.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/10-inferReactivePlaces.md
new file mode 100644
index 00000000000..c0b8b974e21
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/10-inferReactivePlaces.md
@@ -0,0 +1,169 @@
+# inferReactivePlaces
+
+## File
+`src/Inference/InferReactivePlaces.ts`
+
+## Purpose
+Determines which `Place`s (identifiers and temporaries) in the HIR are **reactive** - meaning they may *semantically* change over the course of the component or hook's lifetime. This information is critical for memoization: reactive places form the dependencies that, when changed, should invalidate cached values.
+
+A place is reactive if it derives from any source of reactivity:
+1. **Props** - Component parameters may change between renders
+2. **Hooks** - Hooks can access state or context which can change
+3. **`use` operator** - Can access context which may change
+4. **Mutation with reactive operands** - Values mutated in instructions that have reactive operands become reactive themselves
+5. **Conditional assignment based on reactive control flow** - Values assigned in branches controlled by reactive conditions become reactive
+
+## Input Invariants
+- HIR is in SSA form with phi nodes at join points
+- `inferMutationAliasingEffects` and `inferMutationAliasingRanges` have run, establishing:
+  - Effect annotations on operands (Effect.Capture, Effect.Store, Effect.Mutate, etc.)
+  - Mutable ranges on identifiers
+  - Aliasing relationships captured by `findDisjointMutableValues`
+- All operands have known effects (asserts on `Effect.Unknown`)
+
+## Output Guarantees
+- Every reactive Place has `place.reactive = true`
+- Reactivity is transitively complete (derived from reactive → reactive)
+- All identifiers in a mutable alias group share reactivity
+- Reactivity is propagated to operands used within nested function expressions
+
+## Algorithm
+The algorithm uses **fixpoint iteration** to propagate reactivity forward through the control-flow graph:
+
+### Initialization
+1. Create a `ReactivityMap` backed by disjoint sets of mutably-aliased identifiers
+2. Mark all function parameters as reactive (props are reactive by definition)
+3. Create a `ControlDominators` helper to identify blocks controlled by reactive conditions
+
+### Fixpoint Loop
+Iterate until no changes occur:
+
+For each block:
+1. **Phi Nodes**: Mark phi nodes reactive if:
+   - Any operand is reactive, OR
+   - Any predecessor block is controlled by a reactive condition (control-flow dependency)
+
+2. **Instructions**: For each instruction:
+   - Track stable identifier sources (for hooks like `useRef`, `useState` dispatch)
+   - Check if any operand is reactive
+   - Hook calls and `use` operator are sources of reactivity
+   - If instruction has reactive input:
+     - Mark lvalues reactive (unless they are known-stable like `setState` functions)
+   - If instruction has reactive input OR is in reactive-controlled block:
+     - Mark mutable operands (Capture, Store, Mutate effects) as reactive
+
+3. **Terminals**: Check terminal operands for reactivity
+
+### Post-processing
+Propagate reactivity to inner functions (nested `FunctionExpression` and `ObjectMethod`).
+
+## Key Data Structures
+
+### ReactivityMap
+```typescript
+class ReactivityMap {
+  hasChanges: boolean = false;           // Tracks if fixpoint changed
+  reactive: Set<IdentifierId> = new Set(); // Set of reactive identifiers
+  aliasedIdentifiers: DisjointSet<Identifier>; // Mutable alias groups
+}
+```
+- Uses disjoint sets so that when one identifier in an alias group becomes reactive, they all are effectively reactive
+- `isReactive(place)` checks and marks `place.reactive = true` as a side effect
+- `snapshot()` resets change tracking and returns whether changes occurred
+
+### StableSidemap
+```typescript
+class StableSidemap {
+  map: Map<IdentifierId, {isStable: boolean}> = new Map();
+}
+```
+Tracks sources of stability (e.g., `useState()[1]` dispatch function). Forward data-flow analysis that:
+- Records hook calls that return stable types
+- Propagates stability through PropertyLoad and Destructure from stable containers
+- Propagates through LoadLocal and StoreLocal
+
+### ControlDominators
+Uses post-dominator frontier analysis to determine which blocks are controlled by reactive branch conditions.
+
+## Edge Cases
+
+### Backward Reactivity Propagation via Mutable Aliasing
+```javascript
+const x = [];
+const z = [x];
+x.push(props.input);
+return <div>{z}</div>;
+```
+Here `z` aliases `x` which is later mutated with reactive data. The disjoint set ensures `z` becomes reactive even though the mutation happens after its creation.
+
+### Stable Types Are Not Reactive
+```javascript
+const [state, setState] = useState();
+// setState is stable - not marked reactive despite coming from reactive hook
+```
+The `StableSidemap` tracks these and skips marking them reactive.
+
+### Ternary with Stable Values Still Reactive
+```javascript
+props.cond ? setState1 : setState2
+```
+Even though both branches are stable types, the result depends on reactive control flow, so it cannot be marked non-reactive just based on type.
+
+### Phi Nodes with Reactive Predecessors
+When a phi's predecessor block is controlled by a reactive condition, the phi becomes reactive even if its operands are all non-reactive constants.
+
+## TODOs
+No explicit TODO comments are present in the source file. However, comments note:
+
+- **ComputedLoads not handled for stability**: Only PropertyLoad propagates stability from containers, not ComputedLoad. The comment notes this is safe because stable containers have differently-typed elements, but ComputedLoad handling could be added.
+
+## Example
+
+### Fixture: `reactive-dependency-fixpoint.js`
+
+**Input:**
+```javascript
+function Component(props) {
+  let x = 0;
+  let y = 0;
+  while (x === 0) {
+    x = y;
+    y = props.value;
+  }
+  return [x];
+}
+```
+
+**Before InferReactivePlaces:**
+```
+bb1 (loop):
+  store x$26:TPhi:TPhi: phi(bb0: read x$21:TPrimitive, bb3: read x$32:TPhi)
+  store y$30:TPhi:TPhi: phi(bb0: read y$24:TPrimitive, bb3: read y$37)
+  ...
+bb3 (block):
+  [12] mutate? $35 = LoadLocal read props$19
+  [13] mutate? $36 = PropertyLoad read $35.value
+  [14] mutate? $38 = StoreLocal Reassign mutate? y$37 = read $36
+```
+
+**After InferReactivePlaces:**
+```
+bb1 (loop):
+  store x$26:TPhi{reactive}:TPhi: phi(bb0: read x$21:TPrimitive, bb3: read x$32:TPhi{reactive})
+  store y$30:TPhi{reactive}:TPhi: phi(bb0: read y$24:TPrimitive, bb3: read y$37{reactive})
+  [6] mutate? $27:TPhi{reactive} = LoadLocal read x$26:TPhi{reactive}
+  ...
+bb3 (block):
+  [12] mutate? $35{reactive} = LoadLocal read props$19{reactive}
+  [13] mutate? $36{reactive} = PropertyLoad read $35{reactive}.value
+  [14] mutate? $38{reactive} = StoreLocal Reassign mutate? y$37{reactive} = read $36{reactive}
+```
+
+**Key observations:**
+- `props$19` is marked `{reactive}` as a function parameter
+- The reactivity propagates through the loop:
+  - First iteration: `y$37` becomes reactive from `props.value`
+  - Second iteration: `x$32` becomes reactive from `y$30` (which is reactive via the phi from `y$37`)
+  - The phi nodes `x$26` and `y$30` become reactive because their bb3 operands are reactive
+- The fixpoint algorithm handles this backward propagation through the loop correctly
+- The final output `$40` is reactive, so the array `[x]` will be memoized with `x` as a dependency
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/11-inferReactiveScopeVariables.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/11-inferReactiveScopeVariables.md
new file mode 100644
index 00000000000..e8a480b115f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/11-inferReactiveScopeVariables.md
@@ -0,0 +1,176 @@
+# inferReactiveScopeVariables
+
+## File
+`src/ReactiveScopes/InferReactiveScopeVariables.ts`
+
+## Purpose
+This is the **1st of 4 passes** that determine how to break a React function into discrete reactive scopes (independently memoizable units of code). Its specific responsibilities are:
+
+1. **Identify operands that mutate together** - Variables that are mutated in the same instruction must be placed in the same reactive scope
+2. **Assign a unique ReactiveScope to each group** - Each disjoint set of co-mutating identifiers gets assigned a unique ScopeId
+3. **Compute the mutable range** - The scope's range is computed as the union of all member identifiers' mutable ranges
+
+The pass does NOT determine which instructions compute each scope, only which variables belong together.
+
+## Input Invariants
+- `InferMutationAliasingEffects` has run - Effects describe mutations, captures, and aliasing
+- `InferMutationAliasingRanges` has run - Each identifier has a valid `mutableRange` property
+- `InferReactivePlaces` has run - Places are marked as reactive or not
+- `RewriteInstructionKindsBasedOnReassignment` has run - Let/Const properly determined
+- All instructions have been numbered with valid `InstructionId` values
+- Phi nodes are properly constructed at block join points
+
+## Output Guarantees
+- Each identifier that is part of a mutable group has its `identifier.scope` property set to a `ReactiveScope` object
+- All identifiers in the same scope share the same `ReactiveScope` reference
+- The scope's `range` is the union (min start, max end) of all member mutable ranges
+- The scope's `range` is validated to be within [1, maxInstruction+1]
+- Identifiers that only have single-instruction lifetimes (read once) may not be assigned to a scope unless they allocate
+
+## Algorithm
+
+### Phase 1: Find Disjoint Mutable Values (`findDisjointMutableValues`)
+
+Uses a Union-Find (Disjoint Set) data structure to group identifiers that mutate together:
+
+1. **Handle Phi Nodes**: For each phi in each block:
+   - If the phi's result is mutated after creation (mutableRange.end > first instruction in block), union the phi with all its operands
+   - This ensures values that flow through control flow and are later mutated are grouped together
+
+2. **Handle Instructions**: For each instruction:
+   - Collect mutable operands based on instruction type:
+     - If lvalue has extended mutable range OR instruction may allocate, include lvalue
+     - For StoreLocal/StoreContext: Include lvalue if it has extended mutable range, include value if mutable
+     - For Destructure: Include each pattern operand with extended range, include source if mutable
+     - For MethodCall: Include all mutable operands plus the computed property (to keep method resolution in same scope)
+     - For other instructions: Include all mutable operands
+   - Exclude global variables (mutableRange.start === 0) since they cannot be recreated
+   - Union all collected operands together
+
+### Phase 2: Assign Scopes
+
+1. Iterate over all identifiers in the disjoint set using `forEach(item, groupIdentifier)`
+2. For each unique group, create a new ReactiveScope:
+   - Generate a unique ScopeId from the environment
+   - Initialize range from the first member's mutableRange
+   - Set up empty dependencies, declarations, reassignments sets
+3. For subsequent members of the same group:
+   - Expand the scope's range to encompass the member's mutableRange
+   - Merge source locations
+4. Assign the scope to each identifier: `identifier.scope = scope`
+5. Update each identifier's mutableRange to match the scope's range
+
+**Validation**: After scope assignment, validate that all scopes have valid ranges within [1, maxInstruction+1].
+
+## Key Data Structures
+
+### DisjointSet<Identifier>
+A Union-Find data structure optimized for grouping items into disjoint sets:
+
+```typescript
+class DisjointSet<T> {
+  #entries: Map<T, T>;  // Maps each item to its parent (root points to self)
+
+  union(items: Array<T>): void;     // Merge items into one set
+  find(item: T): T | null;          // Find the root of item's set (with path compression)
+  forEach(fn: (item, group) => void): void;  // Iterate all items with their group root
+}
+```
+
+Path compression is used during `find()` to flatten the tree structure, improving subsequent lookup performance.
+
+### ReactiveScope
+```typescript
+type ReactiveScope = {
+  id: ScopeId;
+  range: MutableRange;              // [start, end) instruction range
+  dependencies: Set<ReactiveScopeDependency>;  // Inputs (populated later)
+  declarations: Map<IdentifierId, ReactiveScopeDeclaration>;  // Outputs (populated later)
+  reassignments: Set<Identifier>;   // Reassigned variables (populated later)
+  earlyReturnValue: {...} | null;   // For scopes with early returns
+  merged: Set<ScopeId>;             // IDs of scopes merged into this one
+  loc: SourceLocation;
+};
+```
+
+## Edge Cases
+
+### Global Variables
+Excluded from scopes (mutableRange.start === 0) since they cannot be recreated during memoization.
+
+### Phi Nodes After Mutation
+When a phi's result is mutated after the join point, all phi operands must be in the same scope to ensure the mutation can be recomputed correctly.
+
+### MethodCall Property Resolution
+The computed property load for a method call is explicitly added to the same scope as the call itself.
+
+### Allocating Instructions
+Instructions that allocate (Array, Object, JSX, etc.) add their lvalue to the scope even if the lvalue has a single-instruction range.
+
+### Single-Instruction Ranges
+Values with range `[n, n+1)` (used exactly once) are only included if they allocate, otherwise they're just read.
+
+### enableForest Config
+When enabled, phi operands are unconditionally unioned with the phi result (even without mutation after the phi).
+
+## TODOs
+1. `// TODO: improve handling of module-scoped variables and globals` - The current approach excludes globals entirely, but a more nuanced handling could be beneficial.
+
+2. Known issue with aliasing and mutable lifetimes (from header comments):
+```javascript
+let x = {};
+let y = [];
+x.y = y; // RHS is not considered mutable here bc not further mutation
+mutate(x); // bc y is aliased here, it should still be considered mutable above
+```
+This suggests the pass may miss some co-mutation relationships when aliasing is involved.
+
+## Example
+
+### Fixture: `reactive-scope-grouping.js`
+
+**Input:**
+```javascript
+function foo() {
+  let x = {};
+  let y = [];
+  let z = {};
+  y.push(z);  // y and z co-mutate (z captured into y)
+  x.y = y;    // x and y co-mutate (y captured into x)
+  return x;
+}
+```
+
+**After InferReactiveScopeVariables:**
+```
+[1] mutate? $19_@0[1:14] = Object { }     // x's initial object, scope @0
+[2] store $21_@0[1:14] = StoreLocal x     // x in scope @0
+[3] mutate? $22_@1[3:11] = Array []       // y's array, scope @1
+[4] store $24_@1[3:11] = StoreLocal y     // y in scope @1
+[5] mutate? $25_@2 = Object { }           // z's object, scope @2
+[10] MethodCall y.push(z)                 // Mutates y, captures z
+[13] PropertyStore x.y = y                // Mutates x, captures y
+```
+
+The `y.push(z)` joins y and z into scope @1, and `x.y = y` joins x and y into scope @0. Because y is now in @0, and z was captured into y, ultimately x, y, and z all end up in the same scope @0.
+
+**Compiled Output:**
+```javascript
+function foo() {
+  const $ = _c(1);
+  let x;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    x = {};
+    const y = [];
+    const z = {};
+    y.push(z);
+    x.y = y;
+    $[0] = x;
+  } else {
+    x = $[0];
+  }
+  return x;
+}
+```
+
+All three objects (x, y, z) are created within the same memoization block because they co-mutate and could potentially alias each other.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/12-rewriteInstructionKindsBasedOnReassignment.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/12-rewriteInstructionKindsBasedOnReassignment.md
new file mode 100644
index 00000000000..556a80783ca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/12-rewriteInstructionKindsBasedOnReassignment.md
@@ -0,0 +1,151 @@
+# rewriteInstructionKindsBasedOnReassignment
+
+## File
+`src/SSA/RewriteInstructionKindsBasedOnReassignment.ts`
+
+## Purpose
+Rewrites the `InstructionKind` of variable declaration and assignment instructions to correctly reflect whether variables should be declared as `const` or `let` in the final output. It determines this based on whether a variable is subsequently reassigned after its initial declaration.
+
+The key insight is that this pass runs **after dead code elimination (DCE)**, so a variable that was originally declared with `let` in the source (because it was reassigned) may be converted to `const` if the reassignment was removed by DCE. However, variables originally declared as `const` cannot become `let`.
+
+## Input Invariants
+- SSA form: Each identifier has a unique `IdentifierId` and `DeclarationId`
+- Dead code elimination has run: Unused assignments have been removed
+- Mutation/aliasing inference complete: Runs after `InferMutationAliasingRanges` and `InferReactivePlaces` in the main pipeline
+- All instruction kinds are initially set (typically `Let` for variables that may be reassigned)
+
+## Output Guarantees
+- **First declaration gets `Const` or `Let`**: The first `StoreLocal` for a named variable is marked as:
+  - `InstructionKind.Const` if the variable is never reassigned after
+  - `InstructionKind.Let` if the variable has subsequent reassignments
+- **Reassignments marked as `Reassign`**: Any subsequent `StoreLocal` to the same `DeclarationId` is marked as `InstructionKind.Reassign`
+- **Destructure consistency**: All places in a destructuring pattern must have consistent kinds (all Const or all Reassign)
+- **Update operations trigger Let**: `PrefixUpdate` and `PostfixUpdate` operations (like `++x` or `x--`) mark the original declaration as `Let`
+
+## Algorithm
+
+1. **Initialize declarations map**: Create a `Map<DeclarationId, LValue | LValuePattern>` to track declared variables.
+
+2. **Seed with parameters and context**: Add all named function parameters and captured context variables to the map with kind `Let` (since they're already "declared" outside the function body).
+
+3. **Process blocks in order**: Iterate through all blocks and instructions:
+
+   - **DeclareLocal**: Record the declaration in the map (invariant: must not already exist)
+
+   - **StoreLocal**:
+     - If not in map: This is the first store, add to map with `kind = Const`
+     - If already in map: This is a reassignment. Update original declaration to `Let`, set current instruction to `Reassign`
+
+   - **Destructure**:
+     - For each operand in the pattern, check if it's already declared
+     - All operands must be consistent (all new declarations OR all reassignments)
+     - Set pattern kind to `Const` for new declarations, `Reassign` for existing ones
+
+   - **PrefixUpdate / PostfixUpdate**: Look up the declaration and mark it as `Let` (these always imply reassignment)
+
+## Key Data Structures
+
+```typescript
+// Main tracking structure
+const declarations = new Map<DeclarationId, LValue | LValuePattern>();
+
+// InstructionKind enum (from HIR.ts)
+enum InstructionKind {
+  Const = 'Const',      // const declaration
+  Let = 'Let',          // let declaration
+  Reassign = 'Reassign', // reassignment to existing binding
+  Catch = 'Catch',      // catch clause binding
+  HoistedLet = 'HoistedLet',     // hoisted let
+  HoistedConst = 'HoistedConst', // hoisted const
+  HoistedFunction = 'HoistedFunction', // hoisted function
+  Function = 'Function', // function declaration
+}
+```
+
+## Edge Cases
+
+### DCE Removes Reassignment
+A `let x = 0; x = 1;` where `x = 1` is unused becomes `const x = 0;` after DCE.
+
+### Destructuring with Mixed Operands
+The invariant checks ensure all operands in a destructure pattern are either all new declarations or all reassignments. Mixed cases cause a compiler error.
+
+### Value Blocks with DCE
+There's a TODO for handling reassignment in value blocks where the original declaration was removed by DCE.
+
+### Parameters and Context Variables
+These are pre-seeded as `Let` in the declarations map since they're conceptually "declared" at function entry.
+
+### Update Expressions
+`++x` and `x--` always mark the variable as `Let`, even if used inline.
+
+## TODOs
+```typescript
+CompilerError.invariant(block.kind !== 'value', {
+  reason: `TODO: Handle reassignment in a value block where the original
+           declaration was removed by dead code elimination (DCE)`,
+  ...
+});
+```
+
+This indicates an edge case where a destructuring reassignment occurs in a value block but the original declaration was eliminated by DCE. This is currently an invariant violation rather than handled gracefully.
+
+## Example
+
+### Fixture: `reassignment.js`
+
+**Input Source:**
+```javascript
+function Component(props) {
+  let x = [];
+  x.push(props.p0);
+  let y = x;
+
+  x = [];
+  let _ = <Component x={x} />;
+
+  y.push(props.p1);
+
+  return <Component x={x} y={y} />;
+}
+```
+
+**Before Pass (InferReactivePlaces output):**
+```
+[2] StoreLocal Let x$32 = $31      // x is initially marked Let
+[9] StoreLocal Let y$40 = $39      // y is initially marked Let
+[11] StoreLocal Reassign x$43 = $42  // reassignment already marked
+```
+
+**After Pass:**
+```
+[2] StoreLocal Let x$32 = $31      // x stays Let (has reassignment at line 11)
+[9] StoreLocal Const y$40 = $39    // y becomes Const (never reassigned)
+[11] StoreLocal Reassign x$43 = $42  // stays Reassign
+```
+
+**Final Generated Code:**
+```javascript
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.p0 || $[1] !== props.p1) {
+    let x = [];              // let because reassigned
+    x.push(props.p0);
+    const y = x;             // const because never reassigned
+    // ... x = t1; (reassignment)
+    y.push(props.p1);
+    t0 = <Component x={x} y={y} />;
+    // ...
+  }
+  return t0;
+}
+```
+
+The pass correctly identified that `x` needs `let` (since it's reassigned on line 6 of the source) while `y` can use `const` (it's never reassigned after initialization).
+
+## Where This Pass is Called
+
+1. **Main Pipeline** (`src/Entrypoint/Pipeline.ts:322`): Called after `InferReactivePlaces` and before `InferReactiveScopeVariables`.
+
+2. **AnalyseFunctions** (`src/Inference/AnalyseFunctions.ts:58`): Called when lowering inner function expressions as part of the function analysis phase.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/13-alignMethodCallScopes.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/13-alignMethodCallScopes.md
new file mode 100644
index 00000000000..8fef182c087
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/13-alignMethodCallScopes.md
@@ -0,0 +1,131 @@
+# alignMethodCallScopes
+
+## File
+`src/ReactiveScopes/AlignMethodCallScopes.ts`
+
+## Purpose
+Ensures that `MethodCall` instructions and their associated `PropertyLoad` instructions (which load the method being called) have consistent scope assignments. The pass enforces one of two invariants:
+1. Both the MethodCall lvalue and the property have the **same** reactive scope
+2. **Neither** has a reactive scope
+
+This alignment is critical because the PropertyLoad and MethodCall are semantically a single operation (`receiver.method(args)`) and must be memoized together as a unit. If they had different scopes, the generated code would incorrectly try to memoize the property load separately from the method call, which could break correctness.
+
+## Input Invariants
+- The function has been converted to HIR form
+- `inferReactiveScopeVariables` has already run, assigning initial reactive scopes to identifiers based on mutation analysis
+- Each instruction's lvalue has an `identifier.scope` that is either a `ReactiveScope` or `null`
+- For `MethodCall` instructions, the `value.property` field contains a `Place` referencing the loaded method
+
+## Output Guarantees
+After this pass runs:
+- For every `MethodCall` instruction in the function:
+  - If the lvalue has a scope AND the property has a scope, they point to the **same merged scope**
+  - If only the lvalue has a scope, the property's scope is set to match the lvalue's scope
+  - If only the property has a scope, the property's scope is set to `null` (so neither has a scope)
+- Merged scopes have their `range` extended to cover the union of the original scopes' ranges
+- Nested functions (FunctionExpression, ObjectMethod) are recursively processed
+
+## Algorithm
+
+### Phase 1: Collect Scope Relationships
+```
+For each instruction in all blocks:
+  If instruction is a MethodCall:
+    lvalueScope = instruction.lvalue.identifier.scope
+    propertyScope = instruction.value.property.identifier.scope
+
+    If both have scopes:
+      Record that these scopes should be merged (using DisjointSet.union)
+    Else if only lvalue has scope:
+      Record that property should be assigned to lvalueScope
+    Else if only property has scope:
+      Record that property should be assigned to null (no scope)
+
+  If instruction is FunctionExpression or ObjectMethod:
+    Recursively process the nested function
+```
+
+### Phase 2: Merge Scopes
+```
+For each merged scope group:
+  Pick a "root" scope
+  Extend root's range to cover all merged scopes:
+    root.range.start = min(all scope start points)
+    root.range.end = max(all scope end points)
+```
+
+### Phase 3: Apply Changes
+```
+For each instruction:
+  If lvalue was recorded for remapping:
+    Set identifier.scope to the mapped value
+  Else if identifier has a scope that was merged:
+    Set identifier.scope to the merged root scope
+```
+
+## Key Data Structures
+
+1. **`scopeMapping: Map<IdentifierId, ReactiveScope | null>`**
+   - Maps property identifier IDs to their new scope assignment
+   - Value of `null` means the scope should be removed
+
+2. **`mergedScopes: DisjointSet<ReactiveScope>`**
+   - Union-find data structure tracking scopes that need to be merged
+   - Used when both MethodCall and property have different scopes
+
+3. **`ReactiveScope`** (from HIR)
+   - Contains `range: { start: InstructionId, end: InstructionId }`
+   - The range defines which instructions are part of the scope
+
+## Edge Cases
+
+### Both Have the Same Scope Already
+No action needed (implicit in the logic).
+
+### Nested Functions
+The pass recursively processes `FunctionExpression` and `ObjectMethod` instructions to handle closures.
+
+### Multiple MethodCalls Sharing Scopes
+The DisjointSet handles transitive merging - if A merges with B, and B merges with C, all three end up in the same scope.
+
+### Property Without Scope, MethodCall Without Scope
+No action needed (both already aligned at `null`).
+
+## TODOs
+There are no explicit TODO comments in the source code.
+
+## Example
+
+### Fixture: `alias-capture-in-method-receiver.js`
+
+**Source code:**
+```javascript
+function Component() {
+  let a = someObj();
+  let x = [];
+  x.push(a);
+  return [x, a];
+}
+```
+
+**Before AlignMethodCallScopes:**
+```
+[7] store $24_@1[4:10]:TFunction = PropertyLoad capture $23_@1.push
+[9] mutate? $26:TPrimitive = MethodCall store $23_@1.read $24_@1(capture $25)
+```
+- PropertyLoad result `$24_@1` has scope `@1`
+- MethodCall result `$26` has no scope (`null`)
+
+**After AlignMethodCallScopes:**
+```
+[7] store $24[4:10]:TFunction = PropertyLoad capture $23_@1.push
+[9] mutate? $26:TPrimitive = MethodCall store $23_@1.read $24(capture $25)
+```
+- PropertyLoad result `$24` now has **no scope** (the `_@1` suffix removed)
+- MethodCall result `$26` still has no scope
+
+**Why this matters:**
+Without this alignment, later passes might try to memoize the `.push` property load separately from the actual `push()` call. This would be incorrect because:
+1. Reading a method from an object and calling it are semantically one operation
+2. The property load's value (the bound method) is only valid immediately when called on the same receiver
+3. Separate memoization could lead to stale method references or incorrect this-binding
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/14-alignObjectMethodScopes.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/14-alignObjectMethodScopes.md
new file mode 100644
index 00000000000..ebb78ba16cb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/14-alignObjectMethodScopes.md
@@ -0,0 +1,128 @@
+# alignObjectMethodScopes
+
+## File
+`src/ReactiveScopes/AlignObjectMethodScopes.ts`
+
+## Purpose
+Ensures that object method values and their enclosing object expressions share the same reactive scope. This is critical for code generation because JavaScript requires object method definitions to be inlined within their containing object literals. If the object method and object expression were in different reactive scopes (which map to different memoization blocks), the generated code would be invalid since you cannot reference an object method defined in one block from an object literal in a different block.
+
+From the file's documentation:
+> "To produce a well-formed JS program in Codegen, object methods and object expressions must be in the same ReactiveBlock as object method definitions must be inlined."
+
+## Input Invariants
+- Reactive scopes have been inferred: This pass runs after `InferReactiveScopeVariables`
+- ObjectMethod and ObjectExpression have non-null scopes: The pass asserts this with an invariant check
+- Scopes are disjoint across functions: The pass assumes that scopes do not overlap between parent and nested functions
+
+## Output Guarantees
+- ObjectMethod and ObjectExpression share the same scope: Any ObjectMethod used as a property in an ObjectExpression will have its scope merged with the ObjectExpression's scope
+- Merged scope covers both ranges: The resulting merged scope's range is expanded to cover the minimum start and maximum end of all merged scopes
+- All identifiers are repointed: All identifiers whose scopes were merged are updated to point to the canonical root scope
+- Inner functions are also processed: The pass recursively handles nested ObjectMethod and FunctionExpression values
+
+## Algorithm
+
+### Phase 1: Find Scopes to Merge (`findScopesToMerge`)
+1. Iterate through all blocks and instructions in the function
+2. Track all ObjectMethod declarations in a set by their lvalue identifier
+3. When encountering an ObjectExpression, check each operand:
+   - If an operand's identifier was previously recorded as an ObjectMethod declaration
+   - Get the scope of both the ObjectMethod operand and the ObjectExpression lvalue
+   - Assert both scopes are non-null
+   - Union these two scopes together in a DisjointSet data structure
+
+### Phase 2: Merge and Repoint Scopes (`alignObjectMethodScopes`)
+1. Recursively process inner functions first (ObjectMethod and FunctionExpression values)
+2. Canonicalize the DisjointSet to get a mapping from each scope to its root
+3. **Step 1 - Merge ranges**: For each scope that maps to a different root:
+   - Expand the root's range to encompass both the original range and the merged scope's range
+   - `root.range.start = min(scope.range.start, root.range.start)`
+   - `root.range.end = max(scope.range.end, root.range.end)`
+4. **Step 2 - Repoint identifiers**: For each instruction's lvalue:
+   - If the identifier has a scope that was merged
+   - Update the identifier's scope reference to point to the canonical root
+
+## Key Data Structures
+
+1. **DisjointSet<ReactiveScope>** - A union-find data structure that tracks which scopes should be merged together. Uses path compression for efficient `find()` operations.
+
+2. **Set<Identifier>** - Tracks which identifiers are ObjectMethod declarations, used to identify when an ObjectExpression operand is an object method.
+
+3. **ReactiveScope** - Contains:
+   - `id: ScopeId` - Unique identifier
+   - `range: MutableRange` - Start and end instruction IDs
+   - `dependencies` - Inputs to the scope
+   - `declarations` - Values produced by the scope
+
+4. **MutableRange** - Has `start` and `end` InstructionId fields that define the scope's extent.
+
+## Edge Cases
+
+### Nested Object Methods
+When an object method itself contains another object with methods, the pass recursively processes inner functions first before handling the outer function's scopes.
+
+### Multiple Object Methods in Same Object
+If an object has multiple method properties, all their scopes will be merged with the object's scope through the DisjointSet.
+
+### Object Methods in Conditional Expressions
+Object methods inside ternary expressions still need scope alignment to ensure the method and its containing object are in the same reactive block.
+
+### Method Call After Object Creation
+The pass works in conjunction with `AlignMethodCallScopes` (which runs immediately before) to ensure that method calls on objects with object methods are also properly scoped.
+
+## TODOs
+None explicitly marked in the source file.
+
+## Example
+
+### Fixture: `object-method-shorthand.js`
+
+**Input:**
+```javascript
+function Component() {
+  let obj = {
+    method() {
+      return 1;
+    },
+  };
+  return obj.method();
+}
+```
+
+**Before AlignObjectMethodScopes:**
+```
+InferReactiveScopeVariables:
+  [1] mutate? $12_@0:TObjectMethod = ObjectMethod ...    // scope @0
+  [2] mutate? $14_@1[2:7]:TObject = Object { method: ... } // scope @1 (range 2:7)
+```
+The ObjectMethod `$12` is in scope `@0` while the ObjectExpression `$14` is in scope `@1` with range `[2:7]`.
+
+**After AlignObjectMethodScopes:**
+```
+AlignObjectMethodScopes:
+  [1] mutate? $12_@0[1:7]:TObjectMethod = ObjectMethod ... // scope @0, range now 1:7
+  [2] mutate? $14_@0[1:7]:TObject = Object { method: ... } // also scope @0, range 1:7
+```
+Both identifiers are in the same scope `@0`, and the scope's range has been expanded to `[1:7]` to cover both instructions.
+
+**Final Generated Code:**
+```javascript
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const obj = {
+      method() {
+        return 1;
+      },
+    };
+    t0 = obj.method();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+```
+
+The object literal with its method and the subsequent method call are all inside the same memoization block, producing valid JavaScript where the method definition is inlined within the object literal.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/15-alignReactiveScopesToBlockScopesHIR.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/15-alignReactiveScopesToBlockScopesHIR.md
new file mode 100644
index 00000000000..1230ecbaa83
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/15-alignReactiveScopesToBlockScopesHIR.md
@@ -0,0 +1,177 @@
+# alignReactiveScopesToBlockScopesHIR
+
+## File
+`src/ReactiveScopes/AlignReactiveScopesToBlockScopesHIR.ts`
+
+## Purpose
+This is the **2nd of 4 passes** that determine how to break a function into discrete reactive scopes (independently memoizable units of code). The pass aligns reactive scope boundaries to control flow (block scope) boundaries.
+
+The problem it solves: Prior inference passes assign reactive scopes to operands based on mutation ranges at arbitrary instruction points in the control-flow graph. However, to generate memoization blocks around instructions, scopes must be aligned to block-scope boundaries -- you cannot memoize half of a loop or half of an if-block.
+
+**Example from the source code comments:**
+```javascript
+function foo(cond, a) {
+                    // original scope end
+                         // expanded scope end
+   const x = [];    |    |
+   if (cond) {      |    |
+     ...            |    |
+     x.push(a);     <--- original scope ended here
+     ...                 |
+   }                     <--- scope must extend to here
+}
+```
+
+## Input Invariants
+- `InferReactiveScopeVariables` has run: Each identifier has been assigned a `ReactiveScope` with a `range` (start/end instruction IDs) based on mutation analysis
+- The HIR is in SSA form: Blocks have unique IDs, instructions have unique IDs, and control flow is represented with basic blocks
+- Each block has a terminal with possible successors and fallthroughs
+- Each scope has a mutable range `{start: InstructionId, end: InstructionId}` indicating when the scope is active
+
+## Output Guarantees
+- **Scopes end at valid block boundaries**: A reactive scope may only end at the same block scope level as it began. The scope's `range.end` is updated to the first instruction of the fallthrough block after any control flow structure that the scope overlaps
+- **Scopes start at valid block boundaries**: For labeled breaks (gotos to a label), scopes that extend beyond the goto have their `range.start` extended back to include the label
+- **Value blocks (ternary, logical, optional) are handled specially**: Scopes inside value blocks are extended to align with the outer block scope's instruction range
+
+## Algorithm
+
+The pass performs a single forward traversal over all blocks:
+
+### 1. Tracking Active Scopes
+- Maintains `activeScopes: Set<ReactiveScope>` - scopes whose range overlaps the current block
+- Maintains `activeBlockFallthroughRanges: Array<{range, fallthrough}>` - stack of pending block-fallthrough ranges
+
+### 2. Per-Block Processing
+For each block:
+- Prune `activeScopes` to only those that extend past the current block's start
+- If this block is a fallthrough target, pop the range from the stack and extend all active scopes' start to the range start
+
+### 3. Recording Places
+For each instruction lvalue and operand:
+- If the place has a scope, add it to `activeScopes`
+- If inside a value block, extend the scope's range to match the value block's outer range
+
+### 4. Handling Block Fallthroughs
+When a terminal has a fallthrough (not a simple branch):
+- Extend all active scopes whose `range.end > terminal.id` to at least the first instruction of the fallthrough block
+- Push the fallthrough range onto the stack for future scopes
+
+### 5. Handling Labeled Breaks (Goto)
+When encountering a goto to a label (not the natural fallthrough):
+- Find the corresponding fallthrough range on the stack
+- Extend all active scopes to span from the label start to its fallthrough end
+
+### 6. Value Block Handling
+For ternary, logical, and optional terminals:
+- Create `ValueBlockNode` to track the outer block's instruction range
+- Scopes inside value blocks inherit this range, ensuring they align to the outer block scope
+
+## Key Data Structures
+
+```typescript
+type ValueBlockNode = {
+  kind: 'node';
+  id: InstructionId;
+  valueRange: MutableRange;  // Range of outer block scope
+  children: Array<ValueBlockNode | ReactiveScopeNode>;
+};
+
+type ReactiveScopeNode = {
+  kind: 'scope';
+  id: InstructionId;
+  scope: ReactiveScope;
+};
+
+// Tracked during traversal:
+activeBlockFallthroughRanges: Array<{
+  range: InstructionRange;
+  fallthrough: BlockId;
+}>;
+activeScopes: Set<ReactiveScope>;
+valueBlockNodes: Map<BlockId, ValueBlockNode>;
+```
+
+## Edge Cases
+
+### Labeled Breaks
+When a `goto` jumps to a label (not the natural fallthrough), scopes must be extended to include the entire labeled block range, preventing the break from jumping out of the scope.
+
+### Value Blocks (Ternary/Logical/Optional)
+These create nested "value" contexts. Scopes inside must be aligned to the outer block scope's boundaries, not the value block's boundaries.
+
+### Nested Control Flow
+Deeply nested if-statements require the scope to be extended through all levels back to the outermost block where the scope started.
+
+### do-while and try/catch
+The terminal's successor might be a block (not value block), which is handled specially.
+
+## TODOs
+1. `// TODO: consider pruning activeScopes per instruction` - Currently, `activeScopes` is only pruned at block start points. Some scopes may no longer be active by the time a goto is encountered.
+
+2. `// TODO: add a variant of eachTerminalSuccessor() that visits _all_ successors, not just those that are direct successors for normal control-flow ordering.` - The current implementation uses `mapTerminalSuccessors` which may not visit all successors in all cases.
+
+## Example
+
+### Fixture: `extend-scopes-if.js`
+
+**Input:**
+```javascript
+function foo(a, b, c) {
+  let x = [];
+  if (a) {
+    if (b) {
+      if (c) {
+        x.push(0);  // Mutation of x ends here (instruction 12-13)
+      }
+    }
+  }
+  if (x.length) {  // instruction 16
+    return x;
+  }
+  return null;
+}
+```
+
+**Before AlignReactiveScopesToBlockScopesHIR:**
+```
+x$23_@0[1:13]  // Scope range 1-13
+```
+The scope for `x` ends at instruction 13 (inside the innermost if block).
+
+**After AlignReactiveScopesToBlockScopesHIR:**
+```
+x$23_@0[1:16]  // Scope range extended to 1-16
+```
+The scope is extended to instruction 16 (the first instruction after all the nested if-blocks), aligning to the block scope boundary.
+
+**Generated Code:**
+```javascript
+function foo(a, b, c) {
+  const $ = _c(4);
+  let x;
+  if ($[0] !== a || $[1] !== b || $[2] !== c) {
+    x = [];
+    if (a) {
+      if (b) {
+        if (c) {
+          x.push(0);
+        }
+      }
+    }
+    // Scope ends here, after ALL the if-blocks
+    $[0] = a;
+    $[1] = b;
+    $[2] = c;
+    $[3] = x;
+  } else {
+    x = $[3];
+  }
+  // Code outside the scope
+  if (x.length) {
+    return x;
+  }
+  return null;
+}
+```
+
+The memoization block correctly wraps the entire nested if-structure, not just part of it.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/16-mergeOverlappingReactiveScopesHIR.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/16-mergeOverlappingReactiveScopesHIR.md
new file mode 100644
index 00000000000..e7b008df8f3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/16-mergeOverlappingReactiveScopesHIR.md
@@ -0,0 +1,134 @@
+# mergeOverlappingReactiveScopesHIR
+
+## File
+`src/HIR/MergeOverlappingReactiveScopesHIR.ts`
+
+## Purpose
+This pass ensures that reactive scope ranges form valid, non-overlapping blocks in the output JavaScript program. It merges reactive scopes that would otherwise be inconsistent with each other due to:
+
+1. **Overlapping ranges**: Scopes whose instruction ranges partially overlap (not disjoint and not nested) must be merged because the compiler cannot produce valid `if-else` memo blocks for overlapping scopes.
+
+2. **Cross-scope mutations**: When an instruction within one scope mutates a value belonging to a different (outer) scope, those scopes must be merged to maintain correctness.
+
+The pass guarantees that after execution, any two reactive scopes are either:
+- Entirely disjoint (no common instructions)
+- Properly nested (one scope is completely contained within the other)
+
+## Input Invariants
+- Reactive scope variables have been inferred (`InferReactiveScopeVariables` pass has run)
+- Scopes have been aligned to block scopes (`AlignReactiveScopesToBlockScopesHIR` pass has run)
+- Each `Place` may have an associated `ReactiveScope` with a `range` (start/end instruction IDs)
+- Scopes may still have overlapping ranges or contain instructions that mutate outer scopes
+
+## Output Guarantees
+- **No overlapping scopes**: All reactive scopes either are disjoint or properly nested
+- **Consistent mutation boundaries**: Instructions only mutate their "active" scope (the innermost containing scope)
+- **Merged scope ranges**: Merged scopes have their ranges extended to cover the union of all constituent scopes
+- **Updated references**: All `Place` references have their `identifier.scope` updated to point to the merged scope
+
+## Algorithm
+
+### Phase 1: Collect Scope Information (`collectScopeInfo`)
+- Iterates through all instructions and terminals in the function
+- Records for each `Place`:
+  - The scope it belongs to (`placeScopes` map)
+  - When scopes start and end (`scopeStarts` and `scopeEnds` arrays, sorted in descending order by ID)
+- Only records scopes with non-empty ranges (`range.start !== range.end`)
+
+### Phase 2: Detect Overlapping Scopes (`getOverlappingReactiveScopes`)
+Uses a stack-based traversal to track "active" scopes at each instruction:
+
+1. **For each instruction/terminal**:
+   - **Handle scope endings**: Pop completed scopes from the active stack. If a scope ends while other scopes that started later are still active (detected by finding the scope is not at the top of the stack), those scopes overlap and must be merged via `DisjointSet.union()`.
+
+   - **Handle scope starts**: Push new scopes onto the active stack (sorted by end time descending so earlier-ending scopes are at the top). Merge any scopes that have identical start/end ranges.
+
+   - **Handle mutations**: For each operand/lvalue, if it:
+     - Has an associated scope
+     - Is mutable at the current instruction
+     - The scope is active but not at the top of the stack (i.e., an outer scope)
+
+     Then merge all scopes from the mutated outer scope to the top of the stack.
+
+2. **Special case**: Primitive operands in `FunctionExpression` and `ObjectMethod` are skipped.
+
+### Phase 3: Merge Scopes and Rewrite References
+1. For each scope in the disjoint set, compute the merged range as the union (min start, max end)
+2. Update all `Place.identifier.scope` references to point to the merged "group" scope
+
+## Key Data Structures
+
+### ScopeInfo
+```typescript
+type ScopeInfo = {
+  scopeStarts: Array<{id: InstructionId; scopes: Set<ReactiveScope>}>;
+  scopeEnds: Array<{id: InstructionId; scopes: Set<ReactiveScope>}>;
+  placeScopes: Map<Place, ReactiveScope>;
+};
+```
+
+### TraversalState
+```typescript
+type TraversalState = {
+  joined: DisjointSet<ReactiveScope>;  // Union-find for merged scopes
+  activeScopes: Array<ReactiveScope>;   // Stack of currently active scopes
+};
+```
+
+### DisjointSet<ReactiveScope>
+A union-find data structure that tracks which scopes should be merged into the same group.
+
+## Edge Cases
+
+### Identical Scope Ranges
+When multiple scopes have the exact same start and end, they are automatically merged since they would produce the same reactive block.
+
+### Empty Scopes
+Scopes where `range.start === range.end` are skipped entirely.
+
+### Primitive Captures in Functions
+When a `FunctionExpression` or `ObjectMethod` captures a primitive operand, it's excluded from scope merging analysis.
+
+### JSX Single-Instruction Scopes
+The comment in the code notes this isn't perfect - mutating scopes may get merged with JSX single-instruction scopes.
+
+### Non-Mutating Captures
+The pass records both mutating and non-mutating scopes to handle cases where still-mutating values are aliased by inner scopes.
+
+## TODOs
+From the comments in the source file, the design constraints arise from the current compiler output design:
+- **Instruction ordering is preserved**: If reordering were allowed, disjoint ranges could be produced by reordering mutating instructions
+- **One if-else block per scope**: The current design doesn't allow composing a reactive scope from disconnected instruction ranges
+
+## Example
+
+### Fixture: `overlapping-scopes-interleaved.js`
+
+**Input Code:**
+```javascript
+function foo(a, b) {
+  let x = [];
+  let y = [];
+  x.push(a);
+  y.push(b);
+}
+```
+
+**Before MergeOverlappingReactiveScopesHIR:**
+```
+[1] $20_@0[1:9] = Array []        // x belongs to scope @0, range [1:9]
+[2] x$21_@0[1:9] = StoreLocal...
+[3] $23_@1[3:13] = Array []       // y belongs to scope @1, range [3:13]
+[4] y$24_@1[3:13] = StoreLocal...
+```
+Scopes @0 [1:9] and @1 [3:13] overlap: @0 starts at 1, @1 starts at 3, @0 ends at 9, @1 ends at 13. This is invalid.
+
+**After MergeOverlappingReactiveScopesHIR:**
+```
+[1] $20_@0[1:13] = Array []       // Merged scope @0, range [1:13]
+[2] x$21_@0[1:13] = StoreLocal...
+[3] $23_@0[1:13] = Array []       // Now also scope @0
+[4] y$24_@0[1:13] = StoreLocal...
+```
+
+Both `x` and `y` now belong to the same merged scope @0 with range [1:13], producing a single `if-else` memo block in the output.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/17-buildReactiveScopeTerminalsHIR.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/17-buildReactiveScopeTerminalsHIR.md
new file mode 100644
index 00000000000..a9c31dd1ec6
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/17-buildReactiveScopeTerminalsHIR.md
@@ -0,0 +1,161 @@
+# buildReactiveScopeTerminalsHIR
+
+## File
+`src/HIR/BuildReactiveScopeTerminalsHIR.ts`
+
+## Purpose
+This pass transforms the HIR by inserting `ReactiveScopeTerminal` nodes to explicitly demarcate the boundaries of reactive scopes within the control flow graph. It converts the implicit scope ranges (stored on identifiers as `identifier.scope.range`) into explicit control flow structure by:
+
+1. Inserting a `scope` terminal at the **start** of each reactive scope
+2. Inserting a `goto` terminal at the **end** of each reactive scope
+3. Creating fallthrough blocks to properly connect the scopes to the rest of the CFG
+
+This transformation makes scope boundaries first-class elements in the CFG, which is essential for later passes that generate the memoization code (the `if ($[n] !== dep)` checks).
+
+## Input Invariants
+- **Properly nested scopes and blocks**: The pass assumes `assertValidBlockNesting` has passed, meaning all program blocks and reactive scopes form a proper tree hierarchy
+- **Aligned scope ranges**: Reactive scope ranges have been correctly aligned and merged by previous passes
+- **Valid instruction IDs**: All instructions have sequential IDs that define the scope boundaries
+- **Scopes attached to identifiers**: Reactive scopes are found by traversing all `Place` operands and collecting unique non-empty scopes
+
+## Output Guarantees
+- **Explicit scope terminals**: Each reactive scope is represented in the CFG as a `ReactiveScopeTerminal` with:
+  - `block` - The BlockId containing the scope's instructions
+  - `fallthrough` - The BlockId that executes after the scope
+- **Proper block structure**: Original blocks are split at scope boundaries
+- **Restored HIR invariants**: The pass restores RPO ordering, predecessor sets, instruction IDs, and scope/identifier ranges
+- **Updated phi nodes**: Phi operands are repointed when their source blocks are split
+
+## Algorithm
+
+### Step 1: Collect Scope Rewrites
+```
+for each reactive scope (in range pre-order):
+  push StartScope rewrite at scope.range.start
+  push EndScope rewrite at scope.range.end
+```
+The `recursivelyTraverseItems` helper traverses scopes in pre-order (outer scopes before inner scopes).
+
+### Step 2: Apply Rewrites by Splitting Blocks
+```
+reverse queuedRewrites (to pop in ascending instruction order)
+for each block:
+  for each instruction (or terminal):
+    while there are rewrites <= current instruction ID:
+      split block at current index
+      insert scope terminal (for start) or goto terminal (for end)
+  emit final block segment with original terminal
+```
+
+### Step 3: Repoint Phi Nodes
+When a block is split, its final segment gets a new BlockId. Phi operands that referenced the original block are updated to reference the new final block.
+
+### Step 4: Restore HIR Invariants
+- Recompute RPO (reverse post-order) block traversal
+- Recalculate predecessor sets
+- Renumber instruction IDs
+- Fix scope and identifier ranges to match new instruction IDs
+
+## Key Data Structures
+
+### TerminalRewriteInfo
+```typescript
+type TerminalRewriteInfo =
+  | {
+      kind: 'StartScope';
+      blockId: BlockId;        // New block for scope content
+      fallthroughId: BlockId;  // Block after scope ends
+      instrId: InstructionId;  // Where to insert
+      scope: ReactiveScope;    // The scope being created
+    }
+  | {
+      kind: 'EndScope';
+      instrId: InstructionId;  // Where to insert
+      fallthroughId: BlockId;  // Same as corresponding StartScope
+    };
+```
+
+### RewriteContext
+```typescript
+type RewriteContext = {
+  source: BasicBlock;        // Original block being split
+  instrSliceIdx: number;     // Current slice start index
+  nextPreds: Set<BlockId>;   // Predecessors for next emitted block
+  nextBlockId: BlockId;      // BlockId for next emitted block
+  rewrites: Array<BasicBlock>; // Accumulated split blocks
+};
+```
+
+### ScopeTraversalContext
+```typescript
+type ScopeTraversalContext = {
+  fallthroughs: Map<ScopeId, BlockId>; // Cache: scope -> its fallthrough block
+  rewrites: Array<TerminalRewriteInfo>;
+  env: Environment;
+};
+```
+
+## Edge Cases
+
+### Multiple Rewrites at Same Instruction ID
+The while loop in Step 2 handles multiple scope start/ends at the same instruction ID.
+
+### Nested Scopes
+The pre-order traversal ensures outer scopes are processed before inner scopes, creating proper nesting in the CFG.
+
+### Empty Blocks After Split
+When a scope boundary falls at the start of a block, the split may create a block with no instructions (only a terminal).
+
+### Control Flow Within Scopes
+The pass preserves existing control flow (if/else, loops) within scopes; it only adds scope entry/exit points.
+
+### Early Returns
+When a return occurs within a scope, the scope terminal still has a fallthrough block, but that block may contain `Unreachable` terminal.
+
+## TODOs
+Line 283-284:
+```typescript
+// TODO make consistent instruction IDs instead of reusing
+```
+
+## Example
+
+### Fixture: `reactive-scopes-if.js`
+
+**Before BuildReactiveScopeTerminalsHIR:**
+```
+bb0 (block):
+  [1] $29_@0[1:22] = Array []           // x with scope @0 range [1:22]
+  [2] StoreLocal x$30_@0 = $29_@0
+  [3] $32 = LoadLocal a$26
+  [4] If ($32) then:bb2 else:bb3 fallthrough=bb1
+bb2:
+  [5] $33_@1[5:11] = Array []           // y with scope @1 range [5:11]
+  ...
+```
+
+**After BuildReactiveScopeTerminalsHIR:**
+```
+bb0 (block):
+  [1] Scope @0 [1:28] block=bb9 fallthrough=bb10   // <-- scope terminal inserted
+bb9:
+  [2] $29_@0 = Array []
+  [3] StoreLocal x$30_@0 = $29_@0
+  [4] $32 = LoadLocal a$26
+  [5] If ($32) then:bb2 else:bb3 fallthrough=bb1
+bb2:
+  [6] Scope @1 [6:14] block=bb11 fallthrough=bb12  // <-- nested scope terminal
+bb11:
+  [7] $33_@1 = Array []
+  ...
+  [13] Goto bb12                                    // <-- scope end goto
+bb12:
+  ...
+bb1:
+  [27] Goto bb10                                    // <-- scope @0 end goto
+bb10:
+  [28] $50 = LoadLocal x$30_@0
+  [29] Return $50
+```
+
+The key transformation is that scope boundaries become explicit control flow: a `Scope` terminal enters the scope content block, and a `Goto` terminal exits to the fallthrough block. This structure is later used to generate the memoization checks.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/18-flattenReactiveLoopsHIR.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/18-flattenReactiveLoopsHIR.md
new file mode 100644
index 00000000000..e9a216323cf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/18-flattenReactiveLoopsHIR.md
@@ -0,0 +1,158 @@
+# flattenReactiveLoopsHIR
+
+## File
+`src/ReactiveScopes/FlattenReactiveLoopsHIR.ts`
+
+## Purpose
+This pass **prunes reactive scopes that are nested inside loops** (for, for-in, for-of, while, do-while). The compiler does not yet support memoization within loops because:
+
+1. Loop iterations would require reconciliation across runs (similar to how `key` is used in JSX for lists)
+2. There is no way to identify values across iterations
+3. The current approach is to memoize *around* the loop rather than *within* it
+
+When a reactive scope is found inside a loop body, the pass converts its terminal from `scope` to `pruned-scope`. A `pruned-scope` terminal is later treated specially during codegen - its instructions are emitted inline without any memoization guards.
+
+## Input Invariants
+- The HIR has been through `buildReactiveScopeTerminalsHIR`, which creates `scope` terminal nodes for reactive scopes
+- The HIR is in valid block form with proper terminal kinds
+- The block ordering respects control flow (blocks are iterated in order, with loop fallthroughs appearing after loop bodies)
+
+## Output Guarantees
+- All `scope` terminals that appear inside any loop body are converted to `pruned-scope` terminals
+- Scopes outside of loops remain unchanged as `scope` terminals
+- The structure of blocks is preserved; only the terminal kind is mutated
+- The `pruned-scope` terminal retains all the same fields as `scope` (block, fallthrough, scope, id, loc)
+
+## Algorithm
+
+The algorithm uses a **linear scan with a stack-based loop tracking** approach:
+
+```
+1. Initialize an empty array `activeLoops` to track which loop(s) we are currently inside
+2. For each block in the function body (in order):
+   a. Remove the current block ID from activeLoops (if present)
+      - This happens when we reach a loop's fallthrough block, exiting the loop
+   b. Examine the block's terminal:
+      - If it's a loop terminal (do-while, for, for-in, for-of, while):
+        Push the loop's fallthrough block ID onto activeLoops
+      - If it's a scope terminal AND activeLoops is non-empty:
+        Convert the terminal to pruned-scope (keeping all other fields)
+      - All other terminal kinds are ignored
+```
+
+Key insight: The algorithm tracks when we "enter" a loop by pushing the fallthrough ID when encountering a loop terminal, and "exits" the loop when that fallthrough block is visited.
+
+## Key Data Structures
+
+### activeLoops: Array<BlockId>
+A stack of block IDs representing loop fallthroughs. When non-empty, we are inside one or more nested loops.
+
+### PrunedScopeTerminal
+```typescript
+export type PrunedScopeTerminal = {
+  kind: 'pruned-scope';
+  fallthrough: BlockId;
+  block: BlockId;
+  scope: ReactiveScope;
+  id: InstructionId;
+  loc: SourceLocation;
+};
+```
+
+### retainWhere
+Utility from utils.ts - an in-place array filter that removes elements not matching the predicate.
+
+## Edge Cases
+
+### Nested Loops
+The algorithm handles nested loops correctly because `activeLoops` is an array that can contain multiple fallthrough IDs. A scope deep inside multiple nested loops will still be pruned.
+
+### Scope Spanning the Loop
+If a scope terminal appears before the loop terminal but its body contains the loop, it is NOT pruned because the scope terminal itself is not inside the loop.
+
+### Multiple Loops in Sequence
+When exiting one loop (reaching its fallthrough) and entering another, `activeLoops` correctly clears the first loop before potentially adding the second.
+
+### Control Flow That Exits Loops (break/return)
+The algorithm relies on block ordering and fallthrough IDs. Early exits via break/return don't affect the tracking since we track by fallthrough block ID.
+
+## TODOs
+No explicit TODOs in this file. However, the docstring mentions future improvements:
+> "Eventually we may integrate more deeply into the runtime so that we can do a single level of reconciliation"
+
+This suggests a potential future feature to support memoization within loops via runtime integration.
+
+## Example
+
+### Fixture: `repro-memoize-for-of-collection-when-loop-body-returns.js`
+
+**Input:**
+```javascript
+function useHook(nodeID, condition) {
+  const graph = useContext(GraphContext);
+  const node = nodeID != null ? graph[nodeID] : null;
+
+  for (const key of Object.keys(node?.fields ?? {})) {
+    if (condition) {
+      return new Class(node.fields?.[field]);  // <-- Scope @4 is here
+    }
+  }
+  return new Class();  // <-- Scope @5 is here (outside loop)
+}
+```
+
+**Before FlattenReactiveLoopsHIR:**
+```
+[45] Scope scope @3 [45:72] ... block=bb35 fallthrough=bb36
+bb35:
+  [46] ForOf init=bb6 test=bb7 loop=bb8 fallthrough=bb5
+  ...
+  [66] Scope scope @4 [66:69] ... block=bb37 fallthrough=bb38  <-- Inside loop
+  ...
+  [73] Scope scope @5 [73:76] ... block=bb39 fallthrough=bb40  <-- Outside loop
+```
+
+**After FlattenReactiveLoopsHIR:**
+```
+[45] Scope scope @3 [45:72] ... block=bb35 fallthrough=bb36    <-- Unchanged
+...
+[66] <pruned> Scope scope @4 [66:69] ... block=bb37 fallthrough=bb38  <-- PRUNED!
+...
+[73] Scope scope @5 [73:76] ... block=bb39 fallthrough=bb40    <-- Unchanged
+```
+
+**Final Codegen Result:**
+```javascript
+function useHook(nodeID, condition) {
+  const $ = _c(7);
+  // ... memoized Object.keys call (scope @2)
+
+  let t1;
+  if ($[2] !== condition || $[3] !== node || $[4] !== t0) {
+    // Scope @3 wraps the loop
+    t1 = Symbol.for("react.early_return_sentinel");
+    bb0: for (const key of t0) {
+      if (condition) {
+        t1 = new Class(node.fields?.[field]);  // Scope @4 was PRUNED - no memoization
+        break bb0;
+      }
+    }
+    $[2] = condition;
+    $[3] = node;
+    $[4] = t0;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  // ...
+
+  // Scope @5 - memoized (sentinel check)
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = new Class();
+    $[6] = t2;
+  }
+  return t2;
+}
+```
+
+The `new Class(...)` inside the loop has no memoization guards because scope @4 was pruned. The `new Class()` outside the loop retains its memoization via scope @5.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/19-flattenScopesWithHooksOrUseHIR.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/19-flattenScopesWithHooksOrUseHIR.md
new file mode 100644
index 00000000000..ff34df45211
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/19-flattenScopesWithHooksOrUseHIR.md
@@ -0,0 +1,143 @@
+# flattenScopesWithHooksOrUseHIR
+
+## File
+`src/ReactiveScopes/FlattenScopesWithHooksOrUseHIR.ts`
+
+## Purpose
+This pass removes (flattens) reactive scopes that transitively contain hook calls or `use()` operator calls. The key insight is that:
+
+1. **Hooks cannot be called conditionally** - wrapping them in a memoized scope would make them conditionally called based on whether the cache is valid
+2. **The `use()` operator** - while it can be called conditionally in source code, React requires it to be called consistently if the component needs the returned value. Memoizing a scope containing `use()` would also make it conditionally called.
+
+By running reactive scope inference first (agnostic of hooks), the compiler knows which values "construct together" in the same scope. The pass then removes ALL memoization for scopes containing hook/use calls to ensure they are always executed unconditionally.
+
+## Input Invariants
+- HIR must have reactive scope terminals already built (pass runs after `BuildReactiveScopeTerminalsHIR`)
+- Blocks are visited in order (the pass iterates through `fn.body.blocks`)
+- Scope terminals have a `block` (body of the scope) and `fallthrough` (block after the scope)
+- Type inference has run so that `getHookKind()` and `isUseOperator()` can identify hooks and use() calls
+
+## Output Guarantees
+- All scopes that transitively contained a hook or `use()` call are either:
+  - Converted to `LabelTerminal` - if the scope body is trivial (just the hook call and a goto)
+  - Converted to `PrunedScopeTerminal` - if the scope body contains other instructions besides the hook call
+- The `PrunedScopeTerminal` still tracks the original scope information for downstream passes but will not generate memoization code
+- The control flow structure is preserved (same blocks, same fallthroughs)
+
+## Algorithm
+
+### Phase 1: Identify Scopes Containing Hook/Use Calls
+1. Maintain a stack `activeScopes` of currently "open" reactive scopes
+2. Iterate through all blocks in order
+3. When entering a block:
+   - Remove any scopes from `activeScopes` whose fallthrough equals the current block (those scopes have ended)
+4. For each instruction in the block:
+   - If it's a `CallExpression` or `MethodCall` and the callee is a hook or use operator:
+     - Add all currently active scopes to the `prune` list
+     - Clear `activeScopes` (these scopes are now marked for pruning)
+5. If the block's terminal is a `scope`:
+   - Push it onto `activeScopes`
+
+### Phase 2: Prune Identified Scopes
+For each block ID in `prune`:
+1. Get the scope terminal
+2. Check if the scope body is trivial (single instruction + goto to fallthrough):
+   - If trivial: Convert to `LabelTerminal` (will be removed by `PruneUnusedLabels`)
+   - If non-trivial: Convert to `PrunedScopeTerminal` (preserves scope info but skips memoization)
+
+## Key Data Structures
+
+```typescript
+// Stack tracking currently open scopes
+activeScopes: Array<{block: BlockId; fallthrough: BlockId}>
+
+// List of block IDs whose scope terminals should be pruned
+prune: Array<BlockId>
+
+// Terminal types used
+LabelTerminal: {kind: 'label', block, fallthrough, id, loc}
+PrunedScopeTerminal: {kind: 'pruned-scope', block, fallthrough, scope, id, loc}
+ReactiveScopeTerminal: {kind: 'scope', block, fallthrough, scope, id, loc}
+```
+
+## Edge Cases
+
+### Nested Scopes
+When a hook is found in an inner scope, ALL enclosing scopes are also pruned (the hook call would become conditional if any outer scope were memoized).
+
+### Method Call Hooks
+Handles both `CallExpression` (e.g., `useHook(...)`) and `MethodCall` (e.g., `obj.useHook(...)`).
+
+### Trivial Hook-Only Scopes
+If a scope exists just for a hook call (single instruction + goto), it's converted to a `LabelTerminal` which is a simpler structure that gets cleaned up by later passes.
+
+### Multiple Hooks in Sequence
+Once the first hook is encountered, all active scopes are pruned and cleared, so subsequent hooks in outer scopes still work correctly.
+
+## TODOs
+None explicitly marked in the source file.
+
+## Example
+
+### Fixture: `nested-scopes-hook-call.js`
+
+**Input:**
+```javascript
+function component(props) {
+  let x = [];
+  let y = [];
+  y.push(useHook(props.foo));
+  x.push(y);
+  return x;
+}
+```
+
+**Before FlattenScopesWithHooksOrUseHIR:**
+```
+bb0:
+  [1] Scope @0 [1:22] block=bb6 fallthrough=bb7    // Outer scope for x
+bb6:
+  [2] $22 = Array []         // x = []
+  [3] StoreLocal x = $22
+  [4] Scope @1 [4:17] block=bb8 fallthrough=bb9   // Inner scope for y
+bb8:
+  [5] $25 = Array []         // y = []
+  [6] StoreLocal y = $25
+  ...
+  [10] $33 = Call useHook(...)  // <-- Hook call here!
+  [11] MethodCall y.push($33)
+```
+
+**After FlattenScopesWithHooksOrUseHIR:**
+```
+bb0:
+  [1] <pruned> Scope @0 [1:22] block=bb6 fallthrough=bb7   // PRUNED
+bb6:
+  [2] $22 = Array []
+  [3] StoreLocal x = $22
+  [4] <pruned> Scope @1 [4:17] block=bb8 fallthrough=bb9  // PRUNED
+bb8:
+  [5] $25 = Array []
+  [6] StoreLocal y = $25
+  ...
+  [12] Label block=bb10 fallthrough=bb11   // Hook call converted to label
+bb10:
+  [13] $33 = Call useHook(...)
+  [14] Goto bb11
+...
+```
+
+**Final Output (no memoization):**
+```javascript
+function component(props) {
+  const x = [];
+  const y = [];
+  y.push(useHook(props.foo));
+  x.push(y);
+  return x;
+}
+```
+
+Notice that:
+1. Both scope @0 and scope @1 are marked as `<pruned>` because the hook call is inside scope @1, which is inside scope @0
+2. The final output has no memoization wrappers - just the raw code
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/20-propagateScopeDependenciesHIR.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/20-propagateScopeDependenciesHIR.md
new file mode 100644
index 00000000000..88f9016f12e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/20-propagateScopeDependenciesHIR.md
@@ -0,0 +1,158 @@
+# propagateScopeDependenciesHIR
+
+## File
+`src/HIR/PropagateScopeDependenciesHIR.ts`
+
+## Purpose
+The `propagateScopeDependenciesHIR` pass is responsible for computing and assigning the **dependencies** for each reactive scope in the compiled function. Dependencies are the external values that a scope reads, which determine when the scope needs to re-execute. This is a critical step for memoization correctness - the compiler must track exactly which values a scope depends on so it can generate proper cache invalidation checks.
+
+The pass also populates:
+- `scope.dependencies` - The set of `ReactiveScopeDependency` objects the scope reads
+- `scope.declarations` - Values declared within the scope that are used outside it
+
+## Input Invariants
+- Reactive scopes must be established (pass runs after `BuildReactiveScopeTerminalsHIR`)
+- The function must be in SSA form
+- `InferMutationAliasingRanges` must have run to establish when values are being mutated
+- `InferReactivePlaces` marks which identifiers are reactive
+- Scope ranges have been aligned and normalized by earlier passes
+
+## Output Guarantees
+After this pass completes:
+
+1. Each `ReactiveScope.dependencies` contains the minimal set of dependencies that:
+   - Were declared before the scope started
+   - Are read within the scope
+   - Are not ref values (which are always mutable)
+   - Are not object methods (which get codegen'd back into object literals)
+
+2. Each `ReactiveScope.declarations` contains identifiers that:
+   - Are assigned within the scope
+   - Are used outside the scope (need to be exposed as scope outputs)
+
+3. Property load chains are resolved to their root identifiers with paths (e.g., `props.user.name` becomes `{identifier: props, path: ["user", "name"]}`)
+
+4. Optional chains are handled correctly, distinguishing between `a?.b` and `a.b` access types
+
+## Algorithm
+
+### Phase 1: Build Sidemaps
+
+1. **findTemporariesUsedOutsideDeclaringScope**: Identifies temporaries that are used outside the scope where they were declared (cannot be hoisted/reordered safely)
+
+2. **collectTemporariesSidemap**: Creates a mapping from temporary IdentifierIds to their source `ReactiveScopeDependency`. For example:
+   ```
+   $0 = LoadLocal 'a'
+   $1 = PropertyLoad $0.'b'
+   ```
+   Maps `$1.id` to `{identifier: a, path: [{property: 'b', optional: false}]}`
+
+3. **collectOptionalChainSidemap**: Traverses optional chain blocks to map temporaries within optional chains to their full optional dependency path
+
+4. **collectHoistablePropertyLoads**: Uses CFG analysis to determine which property loads can be safely hoisted
+
+### Phase 2: Collect Dependencies
+
+The `collectDependencies` function traverses the HIR, maintaining a stack of active scopes:
+
+1. **Scope Entry/Exit**: When entering a scope terminal, push a new dependency array. When exiting, propagate collected dependencies to parent scopes if valid.
+
+2. **Instruction Processing**: For each instruction:
+   - Declare the lvalue with its instruction id and current scope
+   - Visit operands to record them as potential dependencies
+   - Handle special cases like `StoreLocal` (tracks reassignments), `Destructure`, `PropertyLoad`, etc.
+
+3. **Dependency Validation** (`#checkValidDependency`):
+   - Skip ref values (`isRefValueType`)
+   - Skip object methods (`isObjectMethodType`)
+   - Only include if declared before scope start
+
+### Phase 3: Derive Minimal Dependencies
+
+For each scope, use `ReactiveScopeDependencyTreeHIR` to:
+1. Build a tree from hoistable property loads
+2. Add all collected dependencies to the tree
+3. Truncate dependencies at their maximal safe-to-evaluate subpath
+4. Derive the minimal set (removing redundant nested dependencies)
+
+## Key Data Structures
+
+### ReactiveScopeDependency
+```typescript
+type ReactiveScopeDependency = {
+  identifier: Identifier;        // Root identifier
+  reactive: boolean;             // Whether the value is reactive
+  path: DependencyPathEntry[];   // Chain of property accesses
+}
+```
+
+### DependencyPathEntry
+```typescript
+type DependencyPathEntry = {
+  property: PropertyLiteral;  // Property name
+  optional: boolean;          // Is this `?.` access?
+}
+```
+
+### DependencyCollectionContext
+Maintains:
+- `#declarations`: Map of DeclarationId to {id, scope} recording where each value was declared
+- `#reassignments`: Map of Identifier to latest assignment info
+- `#scopes`: Stack of currently active ReactiveScopes
+- `#dependencies`: Stack of dependency arrays (one per active scope)
+- `#temporaries`: Sidemap for resolving property loads
+
+### ReactiveScopeDependencyTreeHIR
+A tree structure for efficient dependency deduplication that stores hoistable objects, tracks access types, and computes minimal dependencies.
+
+## Edge Cases
+
+### Values Used Outside Declaring Scope
+If a temporary is used outside its declaring scope, it cannot be tracked in the sidemap because reordering the read would be invalid.
+
+### Ref.current Access
+Accessing `ref.current` is treated specially - the dependency is truncated to just `ref`.
+
+### Optional Chains
+Optional chains like `a?.b?.c` produce different dependency paths than `a.b.c`. The pass distinguishes them and may merge optional loads into unconditional ones when control flow proves the object is non-null.
+
+### Inner Functions
+Dependencies from inner functions are collected recursively but with special handling for context variables.
+
+### Phi Nodes
+When a value comes from multiple control flow paths, optional chain dependencies from phi operands are also visited.
+
+## TODOs
+1. Line 374-375: `// TODO(mofeiZ): understand optional chaining` - More documentation needed for optional chain handling
+
+## Example
+
+### Fixture: `reactive-control-dependency-if.js`
+
+**Input:**
+```javascript
+function Component(props) {
+  let x;
+  if (props.cond) {
+    x = 1;
+  } else {
+    x = 2;
+  }
+  return [x];
+}
+```
+
+**Before PropagateScopeDependenciesHIR:**
+```
+Scope scope @0 [12:15] dependencies=[] declarations=[] reassignments=[] block=bb9
+```
+
+**After PropagateScopeDependenciesHIR:**
+```
+Scope scope @0 [12:15] dependencies=[x$24:TPrimitive] declarations=[$26_@0] reassignments=[] block=bb9
+```
+
+The pass identified that:
+- The scope at `[x]` depends on `x$24` (the phi node result from the if/else branches)
+- Even though `x` is assigned to constants (1 or 2), its value depends on the reactive control flow condition `props.cond`
+- The scope declares `$26_@0` (the array output)
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/21-buildReactiveFunction.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/21-buildReactiveFunction.md
new file mode 100644
index 00000000000..d686b4061d7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/21-buildReactiveFunction.md
@@ -0,0 +1,180 @@
+# buildReactiveFunction
+
+## File
+`src/ReactiveScopes/BuildReactiveFunction.ts`
+
+## Purpose
+The `buildReactiveFunction` pass converts the compiler's HIR (High-level Intermediate Representation) from a **Control Flow Graph (CFG)** representation to a **tree-based ReactiveFunction** representation that is closer to an AST. This is a critical transformation in the React Compiler pipeline that:
+
+1. **Restores control flow constructs** - Reconstructs `if`, `while`, `for`, `switch`, and other control flow statements from the CFG's basic blocks and terminals
+2. **Eliminates phi nodes** - Replaces SSA phi nodes with compound value expressions (ternaries, logical expressions, sequence expressions)
+3. **Handles labeled break/continue** - Tracks control flow targets to emit explicit labeled `break` and `continue` statements when needed
+4. **Preserves reactive scope information** - Scope terminals are converted to `ReactiveScopeBlock` nodes in the tree
+
+## Input Invariants
+- HIR is in SSA form (variables have been renamed with unique identifiers)
+- Basic blocks are connected (valid predecessor/successor relationships)
+- Each block ends with a valid terminal
+- Phi nodes exist at merge points for values from different control flow paths
+- Reactive scopes have been constructed (`scope` terminals exist)
+- Scope dependencies are computed (`PropagateScopeDependenciesHIR` has run)
+
+## Output Guarantees
+- **Tree structure** - The output is a `ReactiveFunction` with a `body: ReactiveBlock` containing a tree of `ReactiveStatement` nodes
+- **No CFG structure** - Basic blocks are eliminated; control flow is represented through nested reactive terminals
+- **No phi nodes** - Value merges are represented as `ConditionalExpression`, `LogicalExpression`, or `SequenceExpression` values
+- **Labels emitted for all control flow** - Every terminal that can be a break/continue target has a label; unnecessary labels are removed by subsequent `PruneUnusedLabels` pass
+- **Each block emitted exactly once** - A block cannot be generated twice
+- **Scope blocks preserved** - `scope` terminals become `ReactiveScopeBlock` nodes
+
+## Algorithm
+
+### Core Classes
+
+1. **`Driver`** - Traverses blocks and emits ReactiveBlock arrays
+2. **`Context`** - Tracks state:
+   - `emitted: Set<BlockId>` - Which blocks have been generated
+   - `#scheduled: Set<BlockId>` - Blocks that will be emitted by parent constructs
+   - `#controlFlowStack: Array<ControlFlowTarget>` - Stack of active break/continue targets
+   - `scopeFallthroughs: Set<BlockId>` - Fallthroughs for scope blocks
+
+### Traversal Strategy
+
+1. Start at the entry block and call `traverseBlock(entryBlock)`
+2. For each block:
+   - Emit all instructions as `ReactiveInstructionStatement`
+   - Process the terminal based on its kind
+
+### Terminal Processing
+
+**Simple Terminals:**
+- `return`, `throw` - Emit directly as `ReactiveTerminal`
+- `unreachable` - No-op
+
+**Control Flow Terminals:**
+- `if` - Schedule fallthrough, recursively traverse consequent/alternate, emit `ReactiveIfTerminal`
+- `while`, `do-while`, `for`, `for-of`, `for-in` - Use `scheduleLoop()` which tracks continue targets
+- `switch` - Process cases in reverse order
+- `label` - Schedule fallthrough, traverse inner block
+
+**Value Terminals (expressions that produce values):**
+- `ternary`, `logical`, `optional`, `sequence` - Produce `ReactiveValue` compound expressions
+
+**Break/Continue:**
+- `goto` with `GotoVariant.Break` - Determine if break is implicit, unlabeled, or labeled
+- `goto` with `GotoVariant.Continue` - Determine continue type
+
+**Scope Terminals:**
+- `scope`, `pruned-scope` - Schedule fallthrough, traverse inner block, emit as `ReactiveScopeBlock`
+
+## Key Data Structures
+
+### ReactiveFunction
+```typescript
+type ReactiveFunction = {
+  loc: SourceLocation;
+  id: ValidIdentifierName | null;
+  params: Array<Place | SpreadPattern>;
+  generator: boolean;
+  async: boolean;
+  body: ReactiveBlock;
+  env: Environment;
+  directives: Array<string>;
+};
+```
+
+### ReactiveBlock
+```typescript
+type ReactiveBlock = Array<ReactiveStatement>;
+```
+
+### ReactiveStatement
+```typescript
+type ReactiveStatement =
+  | ReactiveInstructionStatement   // {kind: 'instruction', instruction}
+  | ReactiveTerminalStatement      // {kind: 'terminal', terminal, label}
+  | ReactiveScopeBlock             // {kind: 'scope', scope, instructions}
+  | PrunedReactiveScopeBlock;      // {kind: 'pruned-scope', ...}
+```
+
+### ReactiveValue (for compound expressions)
+```typescript
+type ReactiveValue =
+  | InstructionValue               // Regular instruction values
+  | ReactiveLogicalValue           // a && b, a || b, a ?? b
+  | ReactiveSequenceValue          // (a, b, c)
+  | ReactiveTernaryValue           // a ? b : c
+  | ReactiveOptionalCallValue;     // a?.b()
+```
+
+### ControlFlowTarget
+```typescript
+type ControlFlowTarget =
+  | {type: 'if'; block: BlockId; id: number}
+  | {type: 'switch'; block: BlockId; id: number}
+  | {type: 'case'; block: BlockId; id: number}
+  | {type: 'loop'; block: BlockId; continueBlock: BlockId; ...};
+```
+
+## Edge Cases
+
+### Nested Control Flow
+The scheduling mechanism handles arbitrarily nested control flow by pushing/popping from the control flow stack.
+
+### Value Blocks with Complex Expressions
+`SequenceExpression` handles cases where value blocks contain multiple instructions.
+
+### Scope Fallthroughs
+Breaks to scope fallthroughs are treated as implicit (no explicit break needed).
+
+### Catch Handlers
+Scheduled specially via `scheduleCatchHandler()` to prevent re-emission.
+
+### Unreachable Blocks
+The `reachable()` check prevents emitting unreachable blocks.
+
+## TODOs
+The code contains several `CompilerError.throwTodo()` calls for unsupported patterns:
+1. Optional chaining test blocks must end in `branch`
+2. Logical expression test blocks must end in `branch`
+3. Support for value blocks within try/catch statements
+4. Support for labeled statements combined with value blocks
+
+## Example
+
+### Fixture: `ternary-expression.js`
+
+**Input:**
+```javascript
+function ternary(props) {
+  const a = props.a && props.b ? props.c || props.d : (props.e ?? props.f);
+  const b = props.a ? (props.b && props.c ? props.d : props.e) : props.f;
+  return a ? b : null;
+}
+```
+
+**HIR (CFG with many basic blocks):**
+The HIR contains 33 basic blocks with `Ternary`, `Logical`, `Branch`, and `Goto` terminals, plus phi nodes at merge points.
+
+**ReactiveFunction Output (Tree):**
+```
+function ternary(props$62{reactive}) {
+  [1] $84 = Ternary
+    Sequence
+        [2] $66 = Logical
+          Sequence [...]
+          && Sequence [...]
+    ?
+      Sequence [...]  // props.c || props.d
+    :
+      Sequence [...]  // props.e ?? props.f
+  [40] StoreLocal a$99 = $98
+  ...
+  [82] return $145
+}
+```
+
+The transformation eliminates:
+- 33 basic blocks reduced to a single tree
+- Phi nodes replaced with nested `Ternary` and `Logical` value expressions
+- CFG edges replaced with tree nesting
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/22-pruneUnusedLabels.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/22-pruneUnusedLabels.md
new file mode 100644
index 00000000000..c7524ae5474
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/22-pruneUnusedLabels.md
@@ -0,0 +1,145 @@
+# pruneUnusedLabels
+
+## File
+`src/ReactiveScopes/PruneUnusedLabels.ts`
+
+## Purpose
+The `pruneUnusedLabels` pass optimizes control flow by:
+
+1. **Flattening labeled terminals** where the label is not reachable via a `break` or `continue` statement
+2. **Marking labels as implicit** for terminals where the label exists but is never targeted
+
+This pass removes unnecessary labeled blocks that were introduced during compilation but serve no control flow purpose in the final output. JavaScript labeled statements are only needed when there is a corresponding `break label` or `continue label` that targets them.
+
+## Input Invariants
+- The input is a `ReactiveFunction` (after conversion from HIR)
+- All `break` and `continue` terminals have:
+  - A `target` (BlockId) indicating which label they jump to
+  - A `targetKind` that is one of: `'implicit'`, `'labeled'`, or `'unlabeled'`
+- Each `ReactiveTerminalStatement` has an optional `label` field containing `id` and `implicit`
+- The pass runs after `assertWellFormedBreakTargets` which validates break/continue targets
+
+## Output Guarantees
+- Labeled terminals where the label is unreachable are flattened into their parent block
+- When flattening, trailing unlabeled `break` statements (that would just fall through) are removed
+- Labels that exist but are never targeted have their `implicit` flag set to `true`
+- Control flow semantics are preserved - only structurally unnecessary labels are removed
+
+## Algorithm
+
+The pass uses a two-phase approach with a single traversal:
+
+**Phase 1: Collect reachable labels**
+```typescript
+if ((terminal.kind === 'break' || terminal.kind === 'continue') &&
+    terminal.targetKind === 'labeled') {
+  state.add(terminal.target);  // Mark this label as reachable
+}
+```
+
+**Phase 2: Transform terminals**
+```typescript
+const isReachableLabel = stmt.label !== null && state.has(stmt.label.id);
+
+if (stmt.terminal.kind === 'label' && !isReachableLabel) {
+  // Flatten: extract block contents, removing trailing unlabeled break
+  const block = [...stmt.terminal.block];
+  const last = block.at(-1);
+  if (last?.kind === 'terminal' && last.terminal.kind === 'break' &&
+      last.terminal.target === null) {
+    block.pop();  // Remove trailing break
+  }
+  return {kind: 'replace-many', value: block};
+} else {
+  if (!isReachableLabel && stmt.label != null) {
+    stmt.label.implicit = true;  // Mark as implicit
+  }
+  return {kind: 'keep'};
+}
+```
+
+## Edge Cases
+
+### Trailing Break Removal
+When flattening a labeled block, if the last statement is an unlabeled break (`target === null`), it is removed since it would just fall through anyway.
+
+### Implicit vs Labeled Breaks
+Only breaks with `targetKind === 'labeled'` count toward label reachability. Implicit breaks (fallthrough) and unlabeled breaks don't make a label "used".
+
+### Continue Statements
+Both `break` and `continue` with labeled targets mark the label as reachable.
+
+### Non-Label Terminals with Labels
+Other terminal types (like `if`, `while`, `for`) can also have labels. If unreachable, these labels are marked implicit but the terminal is not flattened.
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `unconditional-break-label.js`
+
+**Input:**
+```javascript
+function foo(a) {
+  let x = 0;
+  bar: {
+    x = 1;
+    break bar;
+  }
+  return a + x;
+}
+```
+
+**Output (after full compilation):**
+```javascript
+function foo(a) {
+  return a + 1;
+}
+```
+
+The labeled block `bar: { ... }` is removed because after the pass runs, constant propagation and dead code elimination further simplify the code.
+
+### Fixture: `conditional-break-labeled.js`
+
+**Input:**
+```javascript
+function Component(props) {
+  const a = [];
+  a.push(props.a);
+  label: {
+    if (props.b) {
+      break label;
+    }
+    a.push(props.c);
+  }
+  a.push(props.d);
+  return a;
+}
+```
+
+**Output:**
+```javascript
+function Component(props) {
+  const $ = _c(5);
+  let a;
+  if ($[0] !== props.a || $[1] !== props.b ||
+      $[2] !== props.c || $[3] !== props.d) {
+    a = [];
+    a.push(props.a);
+    bb0: {
+      if (props.b) {
+        break bb0;
+      }
+      a.push(props.c);
+    }
+    a.push(props.d);
+    // ... cache updates
+  } else {
+    a = $[4];
+  }
+  return a;
+}
+```
+
+The labeled block `bb0: { ... }` is preserved because the `break bb0` inside the conditional targets this label.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/23-pruneNonEscapingScopes.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/23-pruneNonEscapingScopes.md
new file mode 100644
index 00000000000..ec2c10ea670
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/23-pruneNonEscapingScopes.md
@@ -0,0 +1,130 @@
+# pruneNonEscapingScopes
+
+## File
+`src/ReactiveScopes/PruneNonEscapingScopes.ts`
+
+## Purpose
+This pass prunes (removes) reactive scopes whose outputs do not "escape" the component and therefore do not need to be memoized. A value "escapes" in two ways:
+
+1. **Returned from the function** - The value is directly returned or transitively aliased by a return value
+2. **Passed to a hook** - Any value passed as an argument to a hook may be stored by React internally (e.g., the closure passed to `useEffect`)
+
+The key insight is that values which never escape the component boundary can be safely recreated on each render without affecting the behavior of consumers.
+
+## Input Invariants
+- The input is a `ReactiveFunction` after scope blocks have been identified
+- Reactive scopes have been assigned to instructions
+- The pass runs after `BuildReactiveFunction` and `PruneUnusedLabels`, before `PruneNonReactiveDependencies`
+
+## Output Guarantees
+- **Scopes with non-escaping outputs are removed** - Their instructions are inlined back into the parent scope/function body
+- **Scopes with escaping outputs are retained** - Values that escape via return or hook arguments remain memoized
+- **Transitive dependencies of escaping scopes are preserved** - If an escaping scope depends on a non-escaping value, that value's scope is also retained to prevent unnecessary invalidation
+- **`FinishMemoize` instructions are marked `pruned=true`** - When a scope is pruned, the associated memoization instructions are flagged
+
+## Algorithm
+
+### Phase 1: Build the Dependency Graph
+Using `CollectDependenciesVisitor`, build:
+- **Identifier nodes** - Each node tracks memoization level, dependencies, scopes, and whether ultimately memoized
+- **Scope nodes** - Each scope tracks its dependencies
+- **Escaping values** - Identifiers that escape via return or hook arguments
+
+### Phase 2: Classify Memoization Levels
+Each instruction value is classified:
+- `Memoized`: Arrays, objects, function calls, `new` expressions - always potentially aliasing
+- `Conditional`: Conditional/logical expressions, property loads - memoized only if dependencies are memoized
+- `Unmemoized`: JSX elements (when `memoizeJsxElements` is false), DeclareLocal
+- `Never`: Primitives, LoadGlobal, binary/unary expressions - can be cheaply compared
+
+### Phase 3: Compute Memoized Identifiers
+`computeMemoizedIdentifiers()` performs a graph traversal starting from escaping values:
+- For each escaping value, recursively visit its dependencies
+- Mark values and their scopes based on memoization level
+- When marking a scope, force-memoize all its dependencies
+
+### Phase 4: Prune Scopes
+`PruneScopesTransform` visits each scope block:
+- If any scope output is in the memoized set, keep the scope
+- If no outputs are memoized, replace the scope block with its inlined instructions
+
+## Edge Cases
+
+### Interleaved Mutations
+```javascript
+const a = [props.a];  // independently memoizable, non-escaping
+const b = [];
+const c = {};
+c.a = a;              // c captures a, but c doesn't escape
+b.push(props.b);      // b escapes via return
+return b;
+```
+Here `a` does not directly escape, but it is a dependency of the scope containing `b`. The algorithm correctly identifies that `a`'s scope must be preserved.
+
+### Hook Arguments Escape
+Values passed to hooks are treated as escaping because hooks may store references internally.
+
+### JSX Special Handling
+JSX elements are marked as `Unmemoized` by default because React.memo() can handle dynamic memoization.
+
+### noAlias Functions
+If a function signature indicates `noAlias === true`, its arguments are not treated as escaping.
+
+### Reassignments
+When a scope reassigns a variable, the scope is added as a dependency of that variable.
+
+## TODOs
+None explicitly in the source file.
+
+## Example
+
+### Fixture: `escape-analysis-non-escaping-interleaved-allocating-dependency.js`
+
+**Input:**
+```javascript
+function Component(props) {
+  const a = [props.a];
+
+  const b = [];
+  const c = {};
+  c.a = a;
+  b.push(props.b);
+
+  return b;
+}
+```
+
+**Output:**
+```javascript
+function Component(props) {
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== props.a) {
+    t0 = [props.a];
+    $[0] = props.a;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const a = t0;  // a is memoized even though it doesn't escape directly
+
+  let b;
+  if ($[2] !== a || $[3] !== props.b) {
+    b = [];
+    const c = {};      // c is NOT memoized - it doesn't escape
+    c.a = a;
+    b.push(props.b);
+    $[2] = a;
+    $[3] = props.b;
+    $[4] = b;
+  } else {
+    b = $[4];
+  }
+  return b;
+}
+```
+
+Key observations:
+- `a` is memoized because it's a dependency of the scope containing `b`
+- `c` is not separately memoized because it doesn't escape
+- `b` is memoized because it's returned
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/24-pruneNonReactiveDependencies.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/24-pruneNonReactiveDependencies.md
new file mode 100644
index 00000000000..c0b524918a1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/24-pruneNonReactiveDependencies.md
@@ -0,0 +1,138 @@
+# pruneNonReactiveDependencies
+
+## File
+`src/ReactiveScopes/PruneNonReactiveDependencies.ts`
+
+## Purpose
+This pass removes dependencies from reactive scopes that are guaranteed to be **non-reactive** (i.e., their values cannot change between renders). This optimization reduces unnecessary memoization invalidations by ensuring scopes only depend on values that can actually change.
+
+The pass complements `PropagateScopeDependencies`, which infers dependencies without considering reactivity. This subsequent pruning step filters out dependencies that are semantically constant.
+
+## Input Invariants
+- The function has been converted to a ReactiveFunction structure
+- `InferReactivePlaces` has annotated places with `{reactive: true}` where values can change
+- Each `ReactiveScopeBlock` has a `scope.dependencies` set populated by `PropagateScopeDependenciesHIR`
+- Type inference has run, so identifiers have type information for `isStableType` checks
+
+## Output Guarantees
+- **Non-reactive dependencies removed**: All dependencies in `scope.dependencies` are reactive after this pass
+- **Scope outputs marked reactive if needed**: If a scope has any reactive dependencies remaining, all its outputs are marked reactive
+- **Stable types remain non-reactive through property loads**: When loading properties from stable types (like `useReducer` dispatch functions), the result is not added to the reactive set
+
+## Algorithm
+
+### Phase 1: Collect Reactive Identifiers
+The `collectReactiveIdentifiers` helper builds the initial set of reactive identifiers by:
+1. Visiting all places in the ReactiveFunction
+2. Adding any place marked `{reactive: true}` to the set
+3. For pruned scopes, adding declarations that are not primitives and not stable ref types
+
+### Phase 2: Propagate Reactivity and Prune Dependencies
+The main `Visitor` class traverses the ReactiveFunction and:
+
+1. **For Instructions** - Propagates reactivity through data flow:
+   - `LoadLocal`: If source is reactive, mark the lvalue as reactive
+   - `StoreLocal`: If source value is reactive, mark both the local variable and lvalue as reactive
+   - `Destructure`: If source is reactive, mark all pattern operands as reactive (except stable types)
+   - `PropertyLoad`: If object is reactive AND result is not a stable type, mark result as reactive
+   - `ComputedLoad`: If object OR property is reactive, mark result as reactive
+
+2. **For Scopes** - Prunes non-reactive dependencies and propagates outputs:
+   - Delete each dependency from `scope.dependencies` if its identifier is not in the reactive set
+   - If any dependencies remain after pruning, mark all scope outputs as reactive
+
+### Key Insight: Stable Types
+The pass leverages `isStableType` to prevent reactivity from flowing through certain React-provided stable values:
+
+```typescript
+function isStableType(id: Identifier): boolean {
+  return (
+    isSetStateType(id) ||       // useState setter
+    isSetActionStateType(id) || // useActionState setter
+    isDispatcherType(id) ||     // useReducer dispatcher
+    isUseRefType(id) ||         // useRef result
+    isStartTransitionType(id) ||// useTransition startTransition
+    isSetOptimisticType(id)     // useOptimistic setter
+  );
+}
+```
+
+## Edge Cases
+
+### Unmemoized Values Spanning Hook Calls
+A value created before a hook call and mutated after cannot be memoized. However, if it's non-reactive, it still should not appear as a dependency of downstream scopes.
+
+### Stable Types from Reactive Containers
+When `useReducer` returns `[state, dispatch]`, `state` is reactive but `dispatch` is stable. The pass correctly handles this.
+
+### Pruned Scopes with Reactive Content
+The `CollectReactiveIdentifiers` pass also examines pruned scopes and adds their non-primitive, non-stable-ref declarations to the reactive set.
+
+### Transitive Reactivity Through Scopes
+When a scope retains at least one reactive dependency, ALL its outputs become reactive.
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `unmemoized-nonreactive-dependency-is-pruned-as-dependency.js`
+
+**Input:**
+```javascript
+function Component(props) {
+  const x = [];
+  useNoAlias();
+  mutate(x);
+
+  return <div>{x}</div>;
+}
+```
+
+**Before PruneNonReactiveDependencies:**
+```
+scope @2 dependencies=[x$15_@0:TObject<BuiltInArray>] declarations=[$23_@2]
+```
+
+**After PruneNonReactiveDependencies:**
+```
+scope @2 dependencies=[] declarations=[$23_@2]
+```
+
+The dependency on `x` is removed because `x` is created locally and therefore non-reactive.
+
+### Fixture: `useReducer-returned-dispatcher-is-non-reactive.js`
+
+**Input:**
+```javascript
+function f() {
+  const [state, dispatch] = useReducer();
+
+  const onClick = () => {
+    dispatch();
+  };
+
+  return <div onClick={onClick} />;
+}
+```
+
+**Generated Code:**
+```javascript
+function f() {
+  const $ = _c(1);
+  const [, dispatch] = useReducer();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const onClick = () => {
+      dispatch();
+    };
+    t0 = <div onClick={onClick} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+```
+
+The `onClick` function only captures `dispatch`, which is a stable type. Therefore, `onClick` is non-reactive, and the JSX element can be memoized with zero dependencies.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/25-pruneUnusedScopes.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/25-pruneUnusedScopes.md
new file mode 100644
index 00000000000..03ac3362ff3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/25-pruneUnusedScopes.md
@@ -0,0 +1,111 @@
+# pruneUnusedScopes
+
+## File
+`src/ReactiveScopes/PruneUnusedScopes.ts`
+
+## Purpose
+This pass converts reactive scopes that have no meaningful outputs into "pruned scopes". A pruned scope is no longer memoized - its instructions are executed unconditionally on every render. This optimization removes unnecessary memoization overhead for scopes that don't produce values that need to be cached.
+
+## Input Invariants
+- The input is a `ReactiveFunction` that has already been transformed into reactive scope form
+- Scopes have been created and have `declarations`, `reassignments`, and potentially `earlyReturnValue` populated
+- The pass is called after:
+  - `pruneUnusedLabels` - cleans up unnecessary labels
+  - `pruneNonEscapingScopes` - removes scopes whose outputs don't escape
+  - `pruneNonReactiveDependencies` - removes non-reactive dependencies from scopes
+- Scopes may already be marked as pruned by earlier passes
+
+## Output Guarantees
+Scopes that meet ALL of the following criteria are converted to `pruned-scope`:
+- No return statement within the scope
+- No reassignments (`scope.reassignments.size === 0`)
+- Either no declarations (`scope.declarations.size === 0`), OR all declarations "bubbled up" from inner scopes
+
+Pruned scopes:
+- Keep their original scope metadata (for debugging/tracking)
+- Keep their instructions intact
+- Will be executed unconditionally during codegen (no memoization check)
+
+## Algorithm
+
+The pass uses the visitor pattern with `ReactiveFunctionTransform`:
+
+1. **State Tracking**: A `State` object tracks whether a return statement was encountered:
+   ```typescript
+   type State = {
+     hasReturnStatement: boolean;
+   };
+   ```
+
+2. **Terminal Visitor** (`visitTerminal`): Checks if any terminal is a `return` statement
+
+3. **Scope Transform** (`transformScope`): For each scope:
+   - Creates a fresh state for this scope
+   - Recursively visits the scope's contents
+   - Checks pruning criteria:
+     - `!scopeState.hasReturnStatement` - no early return
+     - `scope.reassignments.size === 0` - no reassignments
+     - `scope.declarations.size === 0` OR `!hasOwnDeclaration(scopeBlock)` - no outputs
+
+4. **hasOwnDeclaration Helper**: Determines if a scope has "own" declarations vs declarations propagated from nested scopes
+
+## Edge Cases
+
+### Return Statements
+Scopes containing return statements are preserved because early returns need memoization to avoid re-executing the return check on every render.
+
+### Bubbled-Up Declarations
+When nested scopes are flattened or merged, their declarations may be propagated to parent scopes. The `hasOwnDeclaration` check ensures that parent scopes with only inherited declarations can still be pruned.
+
+### Reassignments
+Scopes with reassignments are kept because the reassignment represents a side effect that needs to be tracked for memoization.
+
+### Already-Pruned Scopes
+The pass operates on `ReactiveScopeBlock` (kind: 'scope'), not `PrunedReactiveScopeBlock`. Scopes already pruned by earlier passes are not revisited.
+
+### Interaction with Subsequent Passes
+The `MergeReactiveScopesThatInvalidateTogether` pass explicitly handles pruned scopes - it does not merge across them.
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `prune-scopes-whose-deps-invalidate-array.js`
+
+**Input:**
+```javascript
+function Component(props) {
+  const x = [];
+  useHook();
+  x.push(props.value);
+  const y = [x];
+  return [y];
+}
+```
+
+What happens:
+- The scope for `x` cannot be memoized because `useHook()` is called inside it
+- `FlattenScopesWithHooksOrUseHIR` marks scope @0 as `pruned-scope`
+- `PruneUnusedScopes` doesn't change it further since it's already pruned
+
+**Output (no memoization for x):**
+```javascript
+function Component(props) {
+  const x = [];
+  useHook();
+  x.push(props.value);
+  const y = [x];
+  return [y];
+}
+```
+
+### Key Insight
+
+The `pruneUnusedScopes` pass is part of a multi-pass pruning strategy:
+1. `FlattenScopesWithHooksOrUseHIR` - Prunes scopes that contain hook/use calls
+2. `pruneNonEscapingScopes` - Prunes scopes whose outputs don't escape
+3. `pruneNonReactiveDependencies` - Removes non-reactive dependencies
+4. **`pruneUnusedScopes`** - Prunes scopes with no remaining outputs
+
+This pass acts as a cleanup for scopes that became "empty" after previous pruning passes removed their outputs.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/26-mergeReactiveScopesThatInvalidateTogether.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/26-mergeReactiveScopesThatInvalidateTogether.md
new file mode 100644
index 00000000000..4ed964116bb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/26-mergeReactiveScopesThatInvalidateTogether.md
@@ -0,0 +1,213 @@
+# mergeReactiveScopesThatInvalidateTogether
+
+## File
+`src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts`
+
+## Purpose
+This pass is an optimization that reduces memoization overhead in the compiled output by merging reactive scopes that will always invalidate together. The pass operates on the ReactiveFunction representation and works in two main scenarios:
+
+1. **Consecutive Scopes**: When two scopes appear sequentially in the same reactive block with identical dependencies (or where the output of the first scope is the sole input to the second), they are merged into a single scope. This reduces the number of memo cache slots used and eliminates redundant dependency comparisons.
+
+2. **Nested Scopes**: When an inner scope has the same dependencies as its parent scope, the inner scope is flattened into the parent. Since PropagateScopeDependencies propagates dependencies upward, nested scopes can only have equal or fewer dependencies than their parents, never more. When they're equal, the inner scope always invalidates with the parent, making it safe and beneficial to flatten.
+
+## Input Invariants
+- The ReactiveFunction has already undergone scope dependency propagation (via `PropagateScopeDependencies`)
+- The function has been pruned of unused scopes (via `pruneNonReactiveDependencies` and `pruneUnusedScopes`)
+- Scopes have valid `dependencies`, `declarations`, `range`, and `reassignments` fields
+- The ReactiveFunction is in a valid structural state with properly formed blocks and instructions
+
+## Output Guarantees
+- **Fewer scopes**: Consecutive and nested scopes with identical dependencies are merged
+- **Valid scope ranges**: Merged scopes have their `range.end` updated to cover all merged instructions
+- **Updated declarations**: Scope declarations are updated to remove any that are no longer used after the merged scope
+- **Merged scope tracking**: The `scope.merged` set tracks which scope IDs were merged into each surviving scope
+- **Preserved semantics**: Only safe-to-memoize intermediate instructions are absorbed into merged scopes
+
+## Algorithm
+
+The pass operates in multiple phases:
+
+### Phase 1: Find Last Usage
+A visitor (`FindLastUsageVisitor`) collects the last usage instruction ID for each declaration:
+
+```typescript
+class FindLastUsageVisitor extends ReactiveFunctionVisitor<void> {
+  lastUsage: Map<DeclarationId, InstructionId> = new Map();
+
+  override visitPlace(id: InstructionId, place: Place, _state: void): void {
+    const previousUsage = this.lastUsage.get(place.identifier.declarationId);
+    const lastUsage =
+      previousUsage !== undefined
+        ? makeInstructionId(Math.max(previousUsage, id))
+        : id;
+    this.lastUsage.set(place.identifier.declarationId, lastUsage);
+  }
+}
+```
+
+### Phase 2: Transform (Nested Scope Flattening)
+The `transformScope` method flattens nested scopes with identical dependencies:
+
+```typescript
+override transformScope(
+  scopeBlock: ReactiveScopeBlock,
+  state: ReactiveScopeDependencies | null,
+): Transformed<ReactiveStatement> {
+  this.visitScope(scopeBlock, scopeBlock.scope.dependencies);
+  if (
+    state !== null &&
+    areEqualDependencies(state, scopeBlock.scope.dependencies)
+  ) {
+    return {kind: 'replace-many', value: scopeBlock.instructions};
+  } else {
+    return {kind: 'keep'};
+  }
+}
+```
+
+### Phase 3: Visit Block (Consecutive Scope Merging)
+Within `visitBlock`, the pass:
+1. First traverses nested blocks recursively
+2. Iterates through instructions, tracking merge candidates
+3. Determines if consecutive scopes can merge based on:
+   - Identical dependencies, OR
+   - Output of first scope is input to second scope (with always-invalidating types)
+4. Collects intermediate lvalues and ensures they're only used by the next scope
+5. Merges eligible scopes by combining instructions and updating range/declarations
+
+### Key Merging Conditions (`canMergeScopes`):
+```typescript
+function canMergeScopes(
+  current: ReactiveScopeBlock,
+  next: ReactiveScopeBlock,
+  temporaries: Map<DeclarationId, DeclarationId>,
+): boolean {
+  // Don't merge scopes with reassignments
+  if (current.scope.reassignments.size !== 0 || next.scope.reassignments.size !== 0) {
+    return false;
+  }
+  // Merge scopes whose dependencies are identical
+  if (areEqualDependencies(current.scope.dependencies, next.scope.dependencies)) {
+    return true;
+  }
+  // Merge scopes where outputs of previous are inputs of next
+  // (with always-invalidating type check)
+  // ...
+}
+```
+
+### Always-Invalidating Types:
+```typescript
+export function isAlwaysInvalidatingType(type: Type): boolean {
+  switch (type.kind) {
+    case 'Object': {
+      switch (type.shapeId) {
+        case BuiltInArrayId:
+        case BuiltInObjectId:
+        case BuiltInFunctionId:
+        case BuiltInJsxId: {
+          return true;
+        }
+      }
+      break;
+    }
+    case 'Function': {
+      return true;
+    }
+  }
+  return false;
+}
+```
+
+## Edge Cases
+
+### Terminals
+The pass does not merge across terminals (control flow boundaries).
+
+### Pruned Scopes
+Merging stops at pruned scopes.
+
+### Reassignments
+Scopes containing reassignments cannot be merged (side-effect ordering concerns).
+
+### Intermediate Reassignments
+Non-const StoreLocal instructions between scopes prevent merging.
+
+### Safe Intermediate Instructions
+Only certain instruction types are allowed between merged scopes: `BinaryExpression`, `ComputedLoad`, `JSXText`, `LoadGlobal`, `LoadLocal`, `Primitive`, `PropertyLoad`, `TemplateLiteral`, `UnaryExpression`, and const `StoreLocal`.
+
+### Lvalue Usage
+Intermediate values must be last-used at or before the next scope to allow merging.
+
+### Non-Invalidating Outputs
+If a scope's output may not change when inputs change (e.g., `foo(x) { return x < 10 }` returns same boolean for different x values), that scope cannot be a merge candidate for subsequent scopes.
+
+## TODOs
+```typescript
+/*
+ * TODO LeaveSSA: use IdentifierId for more precise tracking
+ * Using DeclarationId is necessary for compatible output but produces suboptimal results
+ * in cases where a scope defines a variable, but that version is never read and always
+ * overwritten later.
+ * see reassignment-separate-scopes.js for example
+ */
+lastUsage: Map<DeclarationId, InstructionId> = new Map();
+```
+
+## Example
+
+### Fixture: `merge-consecutive-scopes-deps-subset-of-decls.js`
+
+**Input:**
+```javascript
+import {useState} from 'react';
+
+function Component() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <button onClick={() => setCount(count - 1)}>Decrement</button>
+      <button onClick={() => setCount(count + 1)}>Increment</button>
+    </div>
+  );
+}
+```
+
+**After MergeReactiveScopesThatInvalidateTogether** (from `yarn snap -p merge-consecutive-scopes-deps-subset-of-decls.js -d`):
+```
+scope @1 [7:24] dependencies=[count$32:TPrimitive] declarations=[$51_@5] reassignments=[] {
+  [8] $35_@1 = Function @context[setCount$33, count$32]  // decrement callback
+  [10] $41 = JSXText "Decrement"
+  [12] $42_@2 = JSX <button onClick={$35_@1}>{$41}</button>
+  [15] $43_@3 = Function @context[setCount$33, count$32]  // increment callback
+  [17] $49 = JSXText "Increment"
+  [19] $50_@4 = JSX <button onClick={$43_@3}>{$49}</button>
+  [22] $51_@5 = JSX <div>{$42_@2}{$50_@4}</div>
+}
+```
+
+All scopes are merged because they share `count` as a dependency. Without merging, this would have separate scopes for each callback and button element.
+
+**Generated Code:**
+```javascript
+function Component() {
+  const $ = _c(2);
+  const [count, setCount] = useState(0);
+  let t0;
+  if ($[0] !== count) {
+    t0 = (
+      <div>
+        <button onClick={() => setCount(count - 1)}>Decrement</button>
+        <button onClick={() => setCount(count + 1)}>Increment</button>
+      </div>
+    );
+    $[0] = count;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+```
+
+The merged version uses only 2 cache slots instead of potentially 6-8.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/27-pruneAlwaysInvalidatingScopes.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/27-pruneAlwaysInvalidatingScopes.md
new file mode 100644
index 00000000000..38bbc0de313
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/27-pruneAlwaysInvalidatingScopes.md
@@ -0,0 +1,143 @@
+# pruneAlwaysInvalidatingScopes
+
+## File
+`src/ReactiveScopes/PruneAlwaysInvalidatingScopes.ts`
+
+## Purpose
+This pass identifies and prunes reactive scopes whose dependencies will *always* invalidate on every render, making memoization pointless. Specifically, it tracks values that are guaranteed to be new allocations (arrays, objects, JSX, new expressions) and checks if those values are used outside of any memoization scope. When a downstream scope depends on such an unmemoized always-invalidating value, the scope is pruned because it would re-execute on every render anyway.
+
+The optimization avoids wasted comparisons in the generated code. Without this pass, the compiler would emit dependency checks for scopes that will never cache-hit, adding runtime overhead with no benefit. By converting these scopes to `pruned-scope` nodes, the codegen emits the instructions inline without memoization guards.
+
+## Input Invariants
+- The pass expects a `ReactiveFunction` with scopes already formed
+- Scopes should have their `dependencies` populated with the identifiers they depend on
+- The pass runs after `MergeReactiveScopesThatInvalidateTogether`
+- Hook calls have already caused scope flattening via `FlattenScopesWithHooksOrUseHIR`
+
+## Output Guarantees
+- Scopes that depend on unmemoized always-invalidating values are converted to `pruned-scope` nodes
+- The `unmemoizedValues` set correctly propagates through `StoreLocal`/`LoadLocal` instructions
+- All declarations and reassignments within pruned scopes that are themselves always-invalidating are added to `unmemoizedValues`, enabling cascading pruning of downstream scopes
+
+## Algorithm
+
+The pass uses a `ReactiveFunctionTransform` visitor with two key methods:
+
+### 1. `transformInstruction` - Tracks always-invalidating values:
+
+```typescript
+switch (value.kind) {
+  case 'ArrayExpression':
+  case 'ObjectExpression':
+  case 'JsxExpression':
+  case 'JsxFragment':
+  case 'NewExpression': {
+    if (lvalue !== null) {
+      this.alwaysInvalidatingValues.add(lvalue.identifier);
+      if (!withinScope) {
+        this.unmemoizedValues.add(lvalue.identifier);  // Key: only if outside a scope
+      }
+    }
+    break;
+  }
+  // Also propagates through StoreLocal and LoadLocal
+}
+```
+
+### 2. `transformScope` - Prunes scopes with unmemoized dependencies:
+
+```typescript
+for (const dep of scopeBlock.scope.dependencies) {
+  if (this.unmemoizedValues.has(dep.identifier)) {
+    // Propagate unmemoized status to scope outputs
+    for (const [_, decl] of scopeBlock.scope.declarations) {
+      if (this.alwaysInvalidatingValues.has(decl.identifier)) {
+        this.unmemoizedValues.add(decl.identifier);
+      }
+    }
+    return {
+      kind: 'replace',
+      value: {
+        kind: 'pruned-scope',
+        scope: scopeBlock.scope,
+        instructions: scopeBlock.instructions,
+      },
+    };
+  }
+}
+```
+
+## Edge Cases
+
+### Function Calls Not Considered Always-Invalidating
+The pass optimistically assumes function calls may return primitives, so `makeArray()` doesn't trigger pruning even though it might return a new array.
+
+### Conditional Allocations
+Code like `x = cond ? [] : 42` doesn't trigger pruning because the value might be a primitive.
+
+### Propagation Through Locals
+The pass correctly tracks values through `StoreLocal` and `LoadLocal` to handle variable reassignments and loads.
+
+### Cascading Pruning
+When a scope is pruned, its always-invalidating outputs become unmemoized, potentially causing downstream scopes to be pruned as well.
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `prune-scopes-whose-deps-invalidate-array.js`
+
+**Input:**
+```javascript
+function Component(props) {
+  const x = [];
+  useHook();
+  x.push(props.value);
+  const y = [x];
+  return [y];
+}
+```
+
+**After PruneAlwaysInvalidatingScopes** (from `yarn snap -p prune-scopes-whose-deps-invalidate-array.js -d`):
+```
+<pruned> scope @0 [1:14] dependencies=[] declarations=[x$21_@0] reassignments=[] {
+  [2] $20_@0 = Array []
+  [3] StoreLocal Const x$21_@0 = $20_@0
+  [4] $23 = LoadGlobal import { useHook }
+  [6] $24_@1 = Call $23()       // Hook flattens scope
+  [7] break bb9 (implicit)
+  [8] $25_@0 = LoadLocal x$21_@0
+  [9] $26 = PropertyLoad $25_@0.push
+  [10] $27 = LoadLocal props$19
+  [11] $28 = PropertyLoad $27.value
+  [12] $29 = MethodCall $25_@0.$26($28)
+}
+[14] $30 = LoadLocal x$21_@0
+<pruned> scope @2 [15:23] dependencies=[x$21_@0:TObject<BuiltInArray>] declarations=[$35_@3] {
+  [16] $31_@2 = Array [$30]
+  [18] StoreLocal Const y$32 = $31_@2
+  [19] $34 = LoadLocal y$32
+  [21] $35_@3 = Array [$34]
+}
+[23] return $35_@3
+```
+
+Key observations:
+- Scope @0 is pruned because the hook call (`useHook()`) flattens it (hook rules prevent memoization around hooks)
+- `x` is an `ArrayExpression` created in the pruned scope @0, making it unmemoized
+- Scope @2 depends on `x$21_@0` which is unmemoized and always-invalidating (it's an array)
+- Therefore, scope @2 is also pruned - cascading pruning
+
+**Generated Code:**
+```javascript
+function Component(props) {
+  const x = [];
+  useHook();
+  x.push(props.value);
+  const y = [x];
+  return [y];
+}
+```
+
+The output matches the input because all memoization was pruned - the code runs unconditionally on every render.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/28-propagateEarlyReturns.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/28-propagateEarlyReturns.md
new file mode 100644
index 00000000000..7fd578eea77
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/28-propagateEarlyReturns.md
@@ -0,0 +1,183 @@
+# propagateEarlyReturns
+
+## File
+`src/ReactiveScopes/PropagateEarlyReturns.ts`
+
+## Purpose
+The `propagateEarlyReturns` pass ensures that reactive scopes (memoization blocks) correctly honor the control flow behavior of the original code, particularly when a function returns early from within a reactive scope. Without this transformation, if a component returned early on the previous render and the inputs have not changed, the cached memoization block would be skipped entirely, but the early return would not occur, causing incorrect behavior.
+
+The pass solves this by transforming `return` statements inside reactive scopes into assignments to a temporary variable followed by a labeled `break`. After the reactive scope completes, generated code checks whether the early return sentinel value was replaced with an actual return value; if so, the function returns that value.
+
+## Input Invariants
+1. **ReactiveFunction structure**: The input must be a `ReactiveFunction` with scopes already inferred (reactive scope blocks are already established)
+2. **Scope earlyReturnValue not set**: The pass expects `scopeBlock.scope.earlyReturnValue === null` for scopes it processes
+3. **Return statements within reactive scopes**: The pass specifically targets `return` terminal statements that appear within a `withinReactiveScope` context
+
+## Output Guarantees
+1. **Labeled scope blocks**: Top-level reactive scopes containing early returns are wrapped in a labeled block (e.g., `bb14: { ... }`)
+2. **Sentinel initialization**: At the start of each such scope, a temporary variable is initialized to `Symbol.for("react.early_return_sentinel")`
+3. **Return-to-break transformation**: All `return` statements inside the scope are replaced with:
+   - An assignment of the return value to the early return temporary
+   - A `break` to the scope's label
+4. **Early return declaration**: The temporary variable is registered as a declaration of the scope so it gets memoized
+5. **Post-scope check**: During codegen, an if-statement is added after the scope to check if the temporary differs from the sentinel and return it if so
+
+## Algorithm
+
+The pass uses a visitor pattern with a `ReactiveFunctionTransform` that tracks two pieces of state:
+
+```typescript
+type State = {
+  withinReactiveScope: boolean;  // Are we inside a reactive scope?
+  earlyReturnValue: ReactiveScope['earlyReturnValue'];  // Bubble up early return info
+};
+```
+
+### Key Steps:
+
+1. **visitScope** - When entering a reactive scope:
+   - Create an inner state with `withinReactiveScope: true`
+   - Traverse the scope's contents
+   - If any early returns were found (`earlyReturnValue !== null`):
+     - If this is the **outermost** scope (parent's `withinReactiveScope` is false):
+       - Store the early return info on the scope
+       - Add the temporary as a scope declaration
+       - Prepend sentinel initialization instructions
+       - Wrap the original instructions in a labeled block
+     - Otherwise, propagate the early return info to the parent scope
+
+2. **transformTerminal** - When encountering a `return` inside a reactive scope:
+   - Create or reuse an early return value identifier
+   - Replace the return with:
+     ```typescript
+     [
+       {kind: 'instruction', /* StoreLocal: reassign earlyReturnValue = returnValue */},
+       {kind: 'terminal', /* break to earlyReturnValue.label */}
+     ]
+     ```
+
+### Sentinel Initialization Code (synthesized at scope start):
+```typescript
+// Load Symbol.for and call it with the sentinel string
+let t0 = Symbol.for("react.early_return_sentinel");
+```
+
+## Edge Cases
+
+### Nested Reactive Scopes
+When early returns occur in nested scopes, only the **outermost** scope gets the labeled block wrapper. Inner scopes bubble their early return information up via `parentState.earlyReturnValue`.
+
+### Multiple Early Returns in Same Scope
+All returns share the same temporary variable and label. The first return found creates the identifier, subsequent returns reuse it.
+
+### Partial Early Returns
+When only some control flow paths return early (e.g., one branch returns, the other falls through), the sentinel check after the scope allows normal execution to continue if no early return occurred.
+
+### Already Processed Scopes
+If `scopeBlock.scope.earlyReturnValue !== null` on entry, the pass exits early without modification.
+
+### Returns Outside Reactive Scopes
+The pass only transforms returns where `state.withinReactiveScope === true`. Returns outside scopes are left unchanged.
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `early-return-within-reactive-scope.js`
+
+**Input:**
+```javascript
+function Component(props) {
+  let x = [];
+  if (props.cond) {
+    x.push(props.a);
+    return x;
+  } else {
+    return makeArray(props.b);
+  }
+}
+```
+
+**After PropagateEarlyReturns** (from `yarn snap -p early-return-within-reactive-scope.js -d`):
+```
+scope @0 [...] earlyReturn={id: #t34$34, label: 14} {
+  [0] $36 = LoadGlobal(global) Symbol
+  [0] $37 = PropertyLoad $36.for
+  [0] $38 = "react.early_return_sentinel"
+  [0] $35 = MethodCall $36.$37($38)
+  [0] StoreLocal Let #t34$34{reactive} = $35    // Initialize sentinel
+  bb14: {
+    [2] $19_@0 = Array []
+    [3] StoreLocal Const x$20_@0 = $19_@0
+    [4] $22{reactive} = LoadLocal props$18
+    [5] $23{reactive} = PropertyLoad $22.cond
+    [6] if ($23) {
+      [7] $24_@0 = LoadLocal x$20_@0
+      [8] $25 = PropertyLoad $24_@0.push
+      [9] $26 = LoadLocal props$18
+      [10] $27 = PropertyLoad $26.a
+      [11] $28 = MethodCall $24_@0.$25($27)
+      [12] $29 = LoadLocal x$20_@0
+      [0] StoreLocal Reassign #t34$34 = $29     // was: return x
+      [0] break bb14 (labeled)
+    } else {
+      [14] $30 = LoadGlobal import { makeArray }
+      [15] $31 = LoadLocal props$18
+      [16] $32 = PropertyLoad $31.b
+      scope @1 [...] {
+        [18] $33_@1 = Call $30($32)
+      }
+      [0] StoreLocal Reassign #t34$34 = $33_@1  // was: return makeArray(props.b)
+      [0] break bb14 (labeled)
+    }
+  }
+}
+```
+
+Key observations:
+- Scope @0 now has `earlyReturn={id: #t34$34, label: 14}`
+- Sentinel initialization code is prepended to the scope
+- The scope body is wrapped in `bb14: { ... }`
+- Both `return x` and `return makeArray(props.b)` are transformed to `StoreLocal Reassign + break bb14`
+
+**Generated Code:**
+```javascript
+function Component(props) {
+  const $ = _c(6);
+  let t0;
+  if ($[0] !== props.a || $[1] !== props.b || $[2] !== props.cond) {
+    t0 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const x = [];
+      if (props.cond) {
+        x.push(props.a);
+        t0 = x;
+        break bb0;
+      } else {
+        let t1;
+        if ($[4] !== props.b) {
+          t1 = makeArray(props.b);
+          $[4] = props.b;
+          $[5] = t1;
+        } else {
+          t1 = $[5];
+        }
+        t0 = t1;
+        break bb0;
+      }
+    }
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.cond;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  if (t0 !== Symbol.for("react.early_return_sentinel")) {
+    return t0;
+  }
+}
+```
+
+This transformation ensures that when inputs don't change, the cached return value is used and returned, preserving referential equality and correct early return behavior.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/29-promoteUsedTemporaries.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/29-promoteUsedTemporaries.md
new file mode 100644
index 00000000000..a08c2bf154e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/29-promoteUsedTemporaries.md
@@ -0,0 +1,203 @@
+# promoteUsedTemporaries
+
+## File
+`src/ReactiveScopes/PromoteUsedTemporaries.ts`
+
+## Purpose
+This pass promotes temporary variables (identifiers with no name) to named variables when they need to be referenced across scope boundaries or in code generation. Temporaries are intermediate values that the compiler creates during lowering; they are typically inlined at their use sites during codegen. However, some temporaries must be emitted as separate declarations - this pass identifies and names them.
+
+The pass ensures that:
+1. Scope dependencies and declarations have proper names for codegen
+2. Variables referenced across reactive scope boundaries are named
+3. JSX tag identifiers get special naming (`T0`, `T1`, etc.)
+4. Temporaries with interposing side-effects are promoted to preserve ordering
+
+## Input Invariants
+- The ReactiveFunction has undergone scope construction and dependency propagation
+- Identifiers may have `name === null` (temporaries) or be named
+- Scopes have `dependencies`, `declarations`, and `reassignments` populated
+- Pruned scopes are properly marked with `kind: 'pruned-scope'`
+
+## Output Guarantees
+- All scope dependencies have non-null names
+- All scope declarations have non-null names
+- JSX tag temporaries use uppercase naming (`T0`, `T1`, ...)
+- Regular temporaries use lowercase naming (`#t{id}`)
+- All instances of a promoted identifier share the same name (via DeclarationId tracking)
+- Temporaries with interposing mutating instructions are promoted to preserve source ordering
+
+## Algorithm
+
+The pass operates in four phases using visitor classes:
+
+### Phase 1: CollectPromotableTemporaries
+Collects information about which temporaries may need promotion:
+
+```typescript
+class CollectPromotableTemporaries {
+  // Tracks pruned scope declarations and whether they're used outside their scope
+  pruned: Map<DeclarationId, {activeScopes: Array<ScopeId>; usedOutsideScope: boolean}>
+
+  // Tracks identifiers used as JSX tags (need uppercase names)
+  tags: Set<DeclarationId>
+}
+```
+
+- When visiting a `JsxExpression`, adds the tag identifier to `tags`
+- When visiting a `PrunedScope`, records its declarations
+- Tracks when pruned declarations are used in different scopes
+
+### Phase 2: PromoteTemporaries
+Promotes temporaries that appear in positions requiring names:
+
+```typescript
+override visitScope(scopeBlock: ReactiveScopeBlock, state: State): void {
+  // Promote all dependencies without names
+  for (const dep of scopeBlock.scope.dependencies) {
+    if (identifier.name == null) {
+      promoteIdentifier(identifier, state);
+    }
+  }
+  // Promote all declarations without names
+  for (const [, declaration] of scopeBlock.scope.declarations) {
+    if (declaration.identifier.name == null) {
+      promoteIdentifier(declaration.identifier, state);
+    }
+  }
+}
+```
+
+Also promotes:
+- Function parameters without names
+- Pruned scope declarations used outside their scope
+
+### Phase 3: PromoteInterposedTemporaries
+Handles ordering-sensitive promotion:
+
+```typescript
+class PromoteInterposedTemporaries {
+  // Instructions that emit as statements can interpose between temp defs and uses
+  // If such an instruction occurs, mark pending temporaries as needing promotion
+
+  override visitInstruction(instruction: ReactiveInstruction, state: InterState): void {
+    // For instructions that become statements (calls, stores, etc.):
+    if (willBeStatement && !constStore) {
+      // Mark all pending temporaries as needing promotion
+      for (const [key, [ident, _]] of state.entries()) {
+        state.set(key, [ident, true]);  // Mark as needing promotion
+      }
+    }
+  }
+}
+```
+
+This preserves source ordering when side-effects occur between a temporary's definition and use.
+
+### Phase 4: PromoteAllInstancesOfPromotedTemporaries
+Ensures all instances of a promoted identifier share the same name:
+
+```typescript
+class PromoteAllInstancesOfPromotedTemporaries {
+  override visitPlace(_id: InstructionId, place: Place, state: State): void {
+    if (place.identifier.name === null &&
+        state.promoted.has(place.identifier.declarationId)) {
+      promoteIdentifier(place.identifier, state);
+    }
+  }
+}
+```
+
+### Naming Convention
+```typescript
+function promoteIdentifier(identifier: Identifier, state: State): void {
+  if (state.tags.has(identifier.declarationId)) {
+    promoteTemporaryJsxTag(identifier);  // Uses #T{id} for JSX tags
+  } else {
+    promoteTemporary(identifier);  // Uses #t{id} for regular temps
+  }
+  state.promoted.add(identifier.declarationId);
+}
+```
+
+## Edge Cases
+
+### JSX Tag Temporaries
+JSX tags require uppercase names to be valid JSX syntax. The pass tracks which temporaries are used as JSX tags and uses `T0`, `T1`, etc. instead of `t0`, `t1`.
+
+### Pruned Scope Declarations
+Declarations in pruned scopes are only promoted if they're actually used outside the pruned scope, avoiding unnecessary variable declarations.
+
+### Const vs Let Temporaries
+The pass tracks const identifiers specially - they don't need promotion for ordering purposes since they can't be mutated by interposing instructions.
+
+### Global Loads
+Values loaded from globals (and their property loads) are treated as const-like for promotion purposes.
+
+### Method Call Properties
+The property identifier in a method call is treated as const-like to avoid unnecessary promotion.
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `simple.js`
+
+**Input:**
+```javascript
+export default function foo(x, y) {
+  if (x) {
+    return foo(false, y);
+  }
+  return [y * 10];
+}
+```
+
+**Before PromoteUsedTemporaries:**
+```
+scope @0 [...] dependencies=[y$14] declarations=[$19_@0]
+scope @1 [...] dependencies=[$22] declarations=[$23_@1]
+```
+
+**After PromoteUsedTemporaries:**
+```
+scope @0 [...] dependencies=[y$14] declarations=[#t5$19_@0]
+scope @1 [...] dependencies=[#t9$22] declarations=[#t10$23_@1]
+```
+
+Key observations:
+- `$19_@0` is promoted to `#t5$19_@0` because it's a scope declaration
+- `$22` is promoted to `#t9$22` because it's a scope dependency
+- `$23_@1` is promoted to `#t10$23_@1` because it's a scope declaration
+- The `#t` prefix indicates this is a promoted temporary (later renamed by `renameVariables`)
+
+**Generated Code:**
+```javascript
+import { c as _c } from "react/compiler-runtime";
+export default function foo(x, y) {
+  const $ = _c(4);
+  if (x) {
+    let t0;
+    if ($[0] !== y) {
+      t0 = foo(false, y);
+      $[0] = y;
+      $[1] = t0;
+    } else {
+      t0 = $[1];
+    }
+    return t0;
+  }
+  const t0 = y * 10;
+  let t1;
+  if ($[2] !== t0) {
+    t1 = [t0];
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+```
+
+The promoted temporaries (`#t5`, `#t9`, `#t10`) become the named variables (`t0`, `t1`) in the output after `renameVariables` runs.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/30-renameVariables.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/30-renameVariables.md
new file mode 100644
index 00000000000..d643618d5a3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/30-renameVariables.md
@@ -0,0 +1,200 @@
+# renameVariables
+
+## File
+`src/ReactiveScopes/RenameVariables.ts`
+
+## Purpose
+This pass ensures that every named variable in the function has a unique name that doesn't conflict with other variables in the same block scope or with global identifiers. After scope construction and temporary promotion, variables from different source scopes may end up in the same reactive block - this pass resolves any naming conflicts.
+
+The pass also converts the `#t{id}` promoted temporary names into clean output names like `t0`, `t1`, etc.
+
+## Input Invariants
+- The ReactiveFunction has been through `promoteUsedTemporaries`
+- Variables may have names that conflict with:
+  - Other variables in the same or ancestor block scope
+  - Global identifiers referenced by the function
+  - Promoted temporaries with `#t{id}` or `#T{id}` naming
+- The function parameters have names (either from source or promoted)
+
+## Output Guarantees
+- Every named variable has a unique name within its scope
+- No variable shadows a global identifier referenced by the function
+- Promoted temporaries are renamed to `t0`, `t1`, ... (for regular temps)
+- Promoted JSX temporaries are renamed to `T0`, `T1`, ... (for JSX tags)
+- Conflicting source names get disambiguated with `$` suffix (e.g., `foo$0`, `foo$1`)
+- Returns a `Set<string>` of all unique variable names in the function
+
+## Algorithm
+
+### Phase 1: Collect Referenced Globals
+Uses `collectReferencedGlobals(fn)` to build a set of all global identifiers referenced by the function. Variable names must not conflict with these.
+
+### Phase 2: Rename with Scope Stack
+The `Scopes` class maintains:
+
+```typescript
+class Scopes {
+  #seen: Map<DeclarationId, IdentifierName> = new Map();  // Canonical name for each declaration
+  #stack: Array<Map<string, DeclarationId>> = [new Map()];  // Block scope stack
+  #globals: Set<string>;  // Global names to avoid
+  names: Set<ValidIdentifierName> = new Set();  // All assigned names
+}
+```
+
+### Renaming Logic
+```typescript
+visit(identifier: Identifier): void {
+  // Skip unnamed identifiers
+  if (originalName === null) return;
+
+  // If we've already named this declaration, reuse that name
+  const mappedName = this.#seen.get(identifier.declarationId);
+  if (mappedName !== undefined) {
+    identifier.name = mappedName;
+    return;
+  }
+
+  // Find a unique name
+  let name = originalName.value;
+  let id = 0;
+
+  // Promoted temporaries start with t0/T0
+  if (isPromotedTemporary(originalName.value)) {
+    name = `t${id++}`;
+  } else if (isPromotedJsxTemporary(originalName.value)) {
+    name = `T${id++}`;
+  }
+
+  // Increment until we find a unique name
+  while (this.#lookup(name) !== null || this.#globals.has(name)) {
+    if (isPromotedTemporary(...)) {
+      name = `t${id++}`;
+    } else if (isPromotedJsxTemporary(...)) {
+      name = `T${id++}`;
+    } else {
+      name = `${originalName.value}$${id++}`;  // foo$0, foo$1, etc.
+    }
+  }
+
+  identifier.name = makeIdentifierName(name);
+  this.#seen.set(identifier.declarationId, identifier.name);
+}
+```
+
+### Scope Management
+```typescript
+enter(fn: () => void): void {
+  this.#stack.push(new Map());
+  fn();
+  this.#stack.pop();
+}
+
+#lookup(name: string): DeclarationId | null {
+  // Search from innermost to outermost scope
+  for (let i = this.#stack.length - 1; i >= 0; i--) {
+    const entry = this.#stack[i].get(name);
+    if (entry !== undefined) return entry;
+  }
+  return null;
+}
+```
+
+### Visitor Pattern
+```typescript
+class Visitor extends ReactiveFunctionVisitor<Scopes> {
+  override visitBlock(block: ReactiveBlock, state: Scopes): void {
+    state.enter(() => {
+      this.traverseBlock(block, state);
+    });
+  }
+
+  override visitScope(scope: ReactiveScopeBlock, state: Scopes): void {
+    // Visit scope declarations first
+    for (const [_, declaration] of scope.scope.declarations) {
+      state.visit(declaration.identifier);
+    }
+    this.traverseScope(scope, state);
+  }
+
+  override visitPlace(id: InstructionId, place: Place, state: Scopes): void {
+    state.visit(place.identifier);
+  }
+}
+```
+
+## Edge Cases
+
+### Shadowed Variables
+When the compiler merges scopes that had shadowing in the source:
+```javascript
+function foo() {
+  const x = 1;
+  {
+    const x = 2;  // Shadowed in source
+  }
+}
+```
+If both `x` declarations end up in the same compiled scope, they become `x` and `x$0`.
+
+### Global Name Conflicts
+If a local variable would conflict with a referenced global:
+```javascript
+function foo() {
+  const Math = 1;  // Conflicts with global Math if used
+}
+```
+The local gets renamed to `Math$0` if `Math` global is referenced.
+
+### Nested Functions
+The pass recursively processes nested function expressions, entering a new scope for each function body.
+
+### Pruned Scopes
+Pruned scopes don't create a new block scope in the output - the pass traverses their instructions without entering a new scope level.
+
+### DeclarationId Consistency
+The pass uses `DeclarationId` to track which identifiers refer to the same variable, ensuring all references get the same renamed name.
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `simple.js`
+
+**Before RenameVariables:**
+```
+scope @0 [...] declarations=[#t5$19_@0]
+scope @1 [...] dependencies=[#t9$22] declarations=[#t10$23_@1]
+```
+
+**After RenameVariables:**
+```
+scope @0 [...] declarations=[t0$19_@0]
+scope @1 [...] dependencies=[t0$22] declarations=[t1$23_@1]
+```
+
+Key observations:
+- `#t5$19_@0` becomes `t0$19_@0` (first temporary in scope)
+- `#t9$22` becomes `t0$22` (first temporary in a different block scope)
+- `#t10$23_@1` becomes `t1$23_@1` (second temporary in that block)
+- The `#t` prefix is removed and sequential numbering is applied
+
+**Generated Code:**
+```javascript
+export default function foo(x, y) {
+  const $ = _c(4);
+  if (x) {
+    let t0;  // Was #t5
+    if ($[0] !== y) {
+      t0 = foo(false, y);
+      // ...
+    }
+    return t0;
+  }
+  const t0 = y * 10;  // Was #t9, reuses t0 since different block scope
+  let t1;  // Was #t10
+  // ...
+}
+```
+
+The pass produces clean, readable output with minimal variable names while avoiding conflicts.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/31-codegenReactiveFunction.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/31-codegenReactiveFunction.md
new file mode 100644
index 00000000000..a2132990ff9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/31-codegenReactiveFunction.md
@@ -0,0 +1,289 @@
+# codegenReactiveFunction
+
+## File
+`src/ReactiveScopes/CodegenReactiveFunction.ts`
+
+## Purpose
+This is the final pass that converts the ReactiveFunction representation back into a Babel AST. It generates the memoization code that makes React components and hooks efficient by:
+1. Creating the `useMemoCache` call to allocate cache slots
+2. Generating dependency comparisons to check if values have changed
+3. Emitting conditional blocks that skip computation when cached values are valid
+4. Storing computed values in the cache
+5. Loading cached values when dependencies haven't changed
+
+## Input Invariants
+- The ReactiveFunction has been through all prior passes
+- All identifiers that need names have been promoted and renamed
+- Reactive scopes have finalized `dependencies`, `declarations`, and `reassignments`
+- Early returns have been transformed with sentinel values (via `propagateEarlyReturns`)
+- Pruned scopes are marked with `kind: 'pruned-scope'`
+- Unique identifiers set is available to avoid naming conflicts
+
+## Output Guarantees
+- Returns a `CodegenFunction` with Babel AST `body`
+- All reactive scopes become if-else blocks checking dependencies
+- The `$` cache array is properly sized with `useMemoCache(n)`
+- Each dependency and output gets its own cache slot
+- Pruned scopes emit their instructions inline without memoization
+- Early returns use the sentinel pattern with post-scope checks
+- Statistics are collected: `memoSlotsUsed`, `memoBlocks`, `memoValues`, etc.
+
+## Algorithm
+
+### Entry Point: codegenFunction
+```typescript
+export function codegenFunction(fn: ReactiveFunction): Result<CodegenFunction, CompilerError> {
+  const cx = new Context(...);
+
+  // Optional: Fast Refresh source hash tracking
+  if (enableResetCacheOnSourceFileChanges) {
+    fastRefreshState = { cacheIndex: cx.nextCacheIndex, hash: sha256(source) };
+  }
+
+  const compiled = codegenReactiveFunction(cx, fn);
+
+  // Prepend useMemoCache call if any cache slots used
+  if (cacheCount !== 0) {
+    body.unshift(
+      t.variableDeclaration('const', [
+        t.variableDeclarator(
+          t.identifier('$'),
+          t.callExpression(t.identifier('useMemoCache'), [t.numericLiteral(cacheCount)])
+        )
+      ])
+    );
+  }
+
+  return compiled;
+}
+```
+
+### Context Class
+Tracks state during codegen:
+```typescript
+class Context {
+  #nextCacheIndex: number = 0;  // Allocates cache slots
+  #declarations: Set<DeclarationId> = new Set();  // Tracks declared variables
+  temp: Temporaries;  // Maps identifiers to their expressions
+  errors: CompilerError;
+
+  get nextCacheIndex(): number {
+    return this.#nextCacheIndex++;  // Returns and increments
+  }
+}
+```
+
+### codegenReactiveScope
+The core of memoization code generation:
+
+```typescript
+function codegenReactiveScope(cx: Context, statements: Array<t.Statement>,
+                              scope: ReactiveScope, block: ReactiveBlock): void {
+  const changeExpressions: Array<t.Expression> = [];
+  const cacheStoreStatements: Array<t.Statement> = [];
+  const cacheLoadStatements: Array<t.Statement> = [];
+
+  // 1. Generate dependency checks
+  for (const dep of scope.dependencies) {
+    const index = cx.nextCacheIndex;
+    changeExpressions.push(
+      t.binaryExpression('!==',
+        t.memberExpression(t.identifier('$'), t.numericLiteral(index), true),
+        codegenDependency(cx, dep)
+      )
+    );
+    cacheStoreStatements.push(
+      t.assignmentExpression('=', $[index], dep)
+    );
+  }
+
+  // 2. Generate output cache slots
+  for (const {identifier} of scope.declarations) {
+    const index = cx.nextCacheIndex;
+    // Declare variable if not already declared
+    if (!cx.hasDeclared(identifier)) {
+      statements.push(t.variableDeclaration('let', [t.variableDeclarator(name, null)]));
+    }
+    cacheLoads.push({name, index, value: name});
+  }
+
+  // 3. Build test condition
+  let testCondition = changeExpressions.reduce((acc, expr) =>
+    t.logicalExpression('||', acc, expr)
+  );
+
+  // 4. If no dependencies, use sentinel check
+  if (testCondition === null) {
+    testCondition = t.binaryExpression('===',
+      $[firstOutputIndex],
+      t.callExpression(Symbol.for, ['react.memo_cache_sentinel'])
+    );
+  }
+
+  // 5. Generate the memoization if-else
+  statements.push(
+    t.ifStatement(
+      testCondition,
+      computationBlock,  // Compute + store in cache
+      cacheLoadBlock     // Load from cache
+    )
+  );
+}
+```
+
+### Generated Structure
+For a scope with dependencies `[a, b]` and output `result`:
+
+```javascript
+let result;
+if ($[0] !== a || $[1] !== b) {
+  // Computation block
+  result = compute(a, b);
+
+  // Store dependencies
+  $[0] = a;
+  $[1] = b;
+
+  // Store output
+  $[2] = result;
+} else {
+  // Load from cache
+  result = $[2];
+}
+```
+
+### Early Return Handling
+When a scope has an early return (from `propagateEarlyReturns`):
+
+```typescript
+// Before scope: initialize sentinel
+t0 = Symbol.for("react.early_return_sentinel");
+
+// Scope generates labeled block
+bb0: {
+  // ... computation ...
+  if (cond) {
+    t0 = returnValue;
+    break bb0;
+  }
+}
+
+// After scope: check for early return
+if (t0 !== Symbol.for("react.early_return_sentinel")) {
+  return t0;
+}
+```
+
+### Pruned Scopes
+Pruned scopes emit their instructions inline without memoization:
+```typescript
+case 'pruned-scope': {
+  const scopeBlock = codegenBlockNoReset(cx, item.instructions);
+  statements.push(...scopeBlock.body);  // Inline, no memoization
+  break;
+}
+```
+
+## Edge Cases
+
+### Zero Dependencies
+Scopes with no dependencies use a sentinel value check instead:
+```javascript
+if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+  // First render only
+}
+```
+
+### Fast Refresh / HMR
+When `enableResetCacheOnSourceFileChanges` is enabled, the generated code includes a source hash check that resets the cache when the source changes:
+```javascript
+if ($[0] !== "source_hash_abc123") {
+  for (let $i = 0; $i < cacheCount; $i++) {
+    $[$i] = Symbol.for("react.memo_cache_sentinel");
+  }
+  $[0] = "source_hash_abc123";
+}
+```
+
+### Change Detection for Debugging
+When `enableChangeDetectionForDebugging` is configured, additional code is generated to detect when cached values unexpectedly change.
+
+### Labeled Breaks
+Control flow with labeled breaks (for early returns or loop exits) uses `codegenLabel` to generate consistent label names:
+```typescript
+function codegenLabel(id: BlockId): string {
+  return `bb${id}`;  // e.g., "bb0", "bb1"
+}
+```
+
+### Nested Functions
+Function expressions and object methods are recursively processed with their own contexts.
+
+### FBT/Internationalization
+Special handling for FBT operands ensures they're memoized in the same scope for correct internationalization behavior.
+
+## Statistics Collected
+```typescript
+type CodegenFunction = {
+  memoSlotsUsed: number;     // Total cache slots allocated
+  memoBlocks: number;        // Number of reactive scopes
+  memoValues: number;        // Total memoized values
+  prunedMemoBlocks: number;  // Scopes that were pruned
+  prunedMemoValues: number;  // Values in pruned scopes
+  hasInferredEffect: boolean;
+  hasFireRewrite: boolean;
+};
+```
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `simple.js`
+
+**Input:**
+```javascript
+export default function foo(x, y) {
+  if (x) {
+    return foo(false, y);
+  }
+  return [y * 10];
+}
+```
+
+**Generated Code:**
+```javascript
+import { c as _c } from "react/compiler-runtime";
+export default function foo(x, y) {
+  const $ = _c(4);  // Allocate 4 cache slots
+  if (x) {
+    let t0;
+    if ($[0] !== y) {           // Check dependency
+      t0 = foo(false, y);       // Compute
+      $[0] = y;                 // Store dependency
+      $[1] = t0;                // Store output
+    } else {
+      t0 = $[1];                // Load from cache
+    }
+    return t0;
+  }
+  const t0 = y * 10;
+  let t1;
+  if ($[2] !== t0) {            // Check dependency
+    t1 = [t0];                  // Compute
+    $[2] = t0;                  // Store dependency
+    $[3] = t1;                  // Store output
+  } else {
+    t1 = $[3];                  // Load from cache
+  }
+  return t1;
+}
+```
+
+Key observations:
+- `_c(4)` allocates 4 cache slots total
+- First scope uses slots 0-1: slot 0 for `y` dependency, slot 1 for `t0` output
+- Second scope uses slots 2-3: slot 2 for `t0` (the computed `y * 10`), slot 3 for `t1` (the array)
+- Each scope has an if-else structure: compute/store vs load
+- The memoization ensures referential equality of the returned array when `y` hasn't changed
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/32-transformFire.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/32-transformFire.md
new file mode 100644
index 00000000000..26ee425ceea
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/32-transformFire.md
@@ -0,0 +1,203 @@
+# transformFire
+
+## File
+`src/Transform/TransformFire.ts`
+
+## Purpose
+This pass transforms `fire(fn())` calls inside `useEffect` lambdas into calls to a `useFire` hook that provides stable function references. The `fire()` function is a React API that allows effect callbacks to call functions with their current values while maintaining stable effect dependencies.
+
+Without this transform, if an effect depends on a function that changes every render, the effect would re-run on every render. The `useFire` hook provides a stable wrapper that always calls the latest version of the function.
+
+## Input Invariants
+- The `enableFire` feature flag must be enabled
+- `fire()` calls must only appear inside `useEffect` lambdas
+- Each `fire()` call must have exactly one argument (a function call expression)
+- The function being fired must be consistent across all `fire()` calls in the same effect
+
+## Output Guarantees
+- All `fire(fn(...args))` calls are replaced with direct calls `fired_fn(...args)`
+- A `useFire(fn)` hook call is inserted before the `useEffect`
+- The fired function is stored in a temporary and captured by the effect
+- The original function `fn` is removed from the effect's captured context
+
+## Algorithm
+
+### Phase 1: Find Fire Calls
+```typescript
+function replaceFireFunctions(fn: HIRFunction, context: Context): void {
+  // For each useEffect call instruction:
+  //   1. Find all fire() calls in the effect lambda
+  //   2. Validate they have proper arguments
+  //   3. Track which functions are being fired
+
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      if (isUseEffectCall(instr)) {
+        const lambda = getEffectLambda(instr);
+        findAndReplaceFireCalls(lambda, fireFunctions);
+      }
+    }
+  }
+}
+```
+
+### Phase 2: Insert useFire Hooks
+For each function being fired, insert a `useFire` call:
+```typescript
+// Before:
+useEffect(() => {
+  fire(foo(props));
+}, [foo, props]);
+
+// After:
+const t0 = useFire(foo);
+useEffect(() => {
+  t0(props);
+}, [t0, props]);
+```
+
+### Phase 3: Replace Fire Calls
+Transform `fire(fn(...args))` to `firedFn(...args)`:
+```typescript
+// The fire() wrapper is removed
+// The inner function call uses the useFire'd version
+fire(foo(x, y))  →  t0(x, y)  // where t0 = useFire(foo)
+```
+
+### Phase 4: Validate No Remaining Fire Uses
+```typescript
+function ensureNoMoreFireUses(fn: HIRFunction, context: Context): void {
+  // Ensure all fire() uses have been transformed
+  // Report errors for any remaining fire() calls
+}
+```
+
+## Edge Cases
+
+### Fire Outside Effect
+`fire()` calls outside `useEffect` lambdas cause a validation error:
+```javascript
+// ERROR: fire() can only be used inside useEffect
+function Component() {
+  fire(callback());
+}
+```
+
+### Mixed Fire and Non-Fire Calls
+All calls to the same function must either all use `fire()` or none:
+```javascript
+// ERROR: Cannot mix fire() and non-fire calls
+useEffect(() => {
+  fire(foo(x));
+  foo(y);  // Error: foo is used with and without fire()
+});
+```
+
+### Multiple Arguments to Fire
+`fire()` accepts exactly one argument (the function call):
+```javascript
+// ERROR: fire() takes exactly one argument
+fire(foo, bar)  // Invalid
+fire()          // Invalid
+```
+
+### Nested Effects
+Fire calls in nested effects are validated separately:
+```javascript
+useEffect(() => {
+  useEffect(() => {  // Error: nested effects not allowed
+    fire(foo());
+  });
+});
+```
+
+### Deep Scope Handling
+The pass handles fire calls within deeply nested scopes inside effects:
+```javascript
+useEffect(() => {
+  if (cond) {
+    while (x) {
+      fire(foo(x));  // Still transformed correctly
+    }
+  }
+});
+```
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `transform-fire/basic.js`
+
+**Input:**
+```javascript
+// @enableFire
+function Component(props) {
+  const foo = (props_0) => {
+    console.log(props_0);
+  };
+  useEffect(() => {
+    fire(foo(props));
+  });
+  return null;
+}
+```
+
+**After TransformFire:**
+```
+bb0 (block):
+  [1] $25 = Function @context[] ...  // foo definition
+  [2] StoreLocal Const foo$32 = $25
+  [3] $45 = LoadGlobal import { useFire } from 'react/compiler-runtime'
+  [4] $46 = LoadLocal foo$32
+  [5] $47 = Call $45($46)  // useFire(foo)
+  [6] StoreLocal Const #t44$44 = $47
+  [7] $34 = LoadGlobal(global) useEffect
+  [8] $35 = Function @context[#t44$44, props$24] ...
+      <<anonymous>>():
+        [1] $37 = LoadLocal #t44$44  // Load the fired function
+        [2] $38 = LoadLocal props$24
+        [3] $39 = Call $37($38)      // Call it directly (no fire wrapper)
+        [4] Return Void
+  [9] Call $34($35)  // useEffect(lambda)
+  [10] Return null
+```
+
+**Generated Code:**
+```javascript
+import { useFire as _useFire } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(4);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (props_0) => {
+      console.log(props_0);
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const foo = t0;
+  const t1 = _useFire(foo);
+  let t2;
+  if ($[1] !== props || $[2] !== t1) {
+    t2 = () => {
+      t1(props);
+    };
+    $[1] = props;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  useEffect(t2);
+  return null;
+}
+```
+
+Key observations:
+- `useFire` is imported from `react/compiler-runtime`
+- `fire(foo(props))` becomes `t1(props)` where `t1 = _useFire(foo)`
+- The effect now depends on `t1` (stable) and `props` (reactive)
+- The original `foo` function is memoized and passed to `useFire`
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/33-lowerContextAccess.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/33-lowerContextAccess.md
new file mode 100644
index 00000000000..e91bd3ec8e8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/33-lowerContextAccess.md
@@ -0,0 +1,174 @@
+# lowerContextAccess
+
+## File
+`src/Optimization/LowerContextAccess.ts`
+
+## Purpose
+This pass optimizes `useContext` calls by generating selector functions that extract only the needed properties from the context. Instead of subscribing to the entire context object, components can subscribe to specific slices, enabling more granular re-rendering.
+
+When a component destructures specific properties from a context, this pass transforms the `useContext` call to use a selector-based API that only triggers re-renders when the selected properties change.
+
+## Input Invariants
+- The `lowerContextAccess` configuration must be set with:
+  - `source`: The module to import the lowered context hook from
+  - `importSpecifierName`: The name of the hook function
+- The function must use `useContext` with destructuring patterns
+- Only object destructuring patterns with identifier values are supported
+
+## Output Guarantees
+- `useContext(Ctx)` calls with destructuring are replaced with selector calls
+- A selector function is generated that extracts the needed properties
+- The return type is changed from object to array for positional access
+- Unused original `useContext` calls are removed by dead code elimination
+
+## Algorithm
+
+### Phase 1: Collect Context Access Patterns
+```typescript
+function lowerContextAccess(fn: HIRFunction, config: ExternalFunction): void {
+  const contextAccess: Map<IdentifierId, CallExpression> = new Map();
+  const contextKeys: Map<IdentifierId, Array<string>> = new Map();
+
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      // Find useContext calls
+      if (isUseContextCall(instr)) {
+        contextAccess.set(instr.lvalue.identifier.id, instr.value);
+      }
+
+      // Find destructuring patterns that access context results
+      if (isDestructure(instr) && contextAccess.has(instr.value.value.id)) {
+        const keys = extractPropertyKeys(instr.value.pattern);
+        contextKeys.set(instr.value.value.id, keys);
+      }
+    }
+  }
+}
+```
+
+### Phase 2: Generate Selector Functions
+For each context access with known keys:
+```typescript
+// Original:
+const {foo, bar} = useContext(MyContext);
+
+// Selector function generated:
+(ctx) => [ctx.foo, ctx.bar]
+```
+
+### Phase 3: Transform Context Calls
+```typescript
+// Before:
+$0 = useContext(MyContext)
+{foo, bar} = $0
+
+// After:
+$0 = useContext_withSelector(MyContext, (ctx) => [ctx.foo, ctx.bar])
+[foo, bar] = $0
+```
+
+### Phase 4: Update Destructuring
+Change object destructuring to array destructuring to match selector return:
+```typescript
+// Before: { foo: foo$15, bar: bar$16 } = $14
+// After:  [ foo$15, bar$16 ] = $14
+```
+
+## Edge Cases
+
+### Dynamic Property Access
+If context properties are accessed dynamically (not through destructuring), the optimization is skipped:
+```javascript
+const ctx = useContext(MyContext);
+const x = ctx[dynamicKey];  // Cannot optimize
+```
+
+### Spread in Destructuring
+Spread patterns prevent optimization:
+```javascript
+const {foo, ...rest} = useContext(MyContext);  // Cannot optimize
+```
+
+### Non-Identifier Values
+Only simple identifier destructuring is supported:
+```javascript
+const {foo: bar} = useContext(MyContext);  // Supported (rename)
+const {foo = defaultVal} = useContext(MyContext);  // Not supported
+```
+
+### Multiple Context Accesses
+Each `useContext` call is transformed independently:
+```javascript
+const {a} = useContext(CtxA);  // Transformed
+const {b} = useContext(CtxB);  // Transformed separately
+```
+
+### Hook Guards
+When `enableEmitHookGuards` is enabled, the selector function includes proper hook guard annotations.
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `lower-context-selector-simple.js`
+
+**Input:**
+```javascript
+// @lowerContextAccess
+function App() {
+  const {foo, bar} = useContext(MyContext);
+  return <Bar foo={foo} bar={bar} />;
+}
+```
+
+**After OptimizePropsMethodCalls (where lowering happens):**
+```
+bb0 (block):
+  [1] $12 = LoadGlobal(global) useContext  // Original (now unused)
+  [2] $13 = LoadGlobal(global) MyContext
+  [3] $22 = LoadGlobal import { useContext_withSelector } from 'react-compiler-runtime'
+  [4] $36 = Function @context[]
+      <<anonymous>>(#t23$30):
+        [1] $31 = LoadLocal #t23$30
+        [2] $32 = PropertyLoad $31.foo
+        [3] $33 = LoadLocal #t23$30
+        [4] $34 = PropertyLoad $33.bar
+        [5] $35 = Array [$32, $34]  // Return [foo, bar]
+        [6] Return $35
+  [5] $14 = Call $22($13, $36)  // useContext_withSelector(MyContext, selector)
+  [6] $17 = Destructure Const { foo: foo$15, bar: bar$16 } = $14
+  ...
+```
+
+**Generated Code:**
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useContext_withSelector } from "react-compiler-runtime";
+function App() {
+  const $ = _c(2);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (ctx) => [ctx.foo, ctx.bar];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const { foo, bar } = useContext_withSelector(MyContext, t0);
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <Bar foo={foo} bar={bar} />;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+```
+
+Key observations:
+- `useContext` is replaced with `useContext_withSelector`
+- A selector function `(ctx) => [ctx.foo, ctx.bar]` is generated
+- The selector function is memoized (first cache slot)
+- Only `foo` and `bar` properties are extracted, enabling granular subscriptions
+- The selector return type changes from object to array
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/34-optimizePropsMethodCalls.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/34-optimizePropsMethodCalls.md
new file mode 100644
index 00000000000..942076af170
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/34-optimizePropsMethodCalls.md
@@ -0,0 +1,132 @@
+# optimizePropsMethodCalls
+
+## File
+`src/Optimization/OptimizePropsMethodCalls.ts`
+
+## Purpose
+This pass converts method calls on the props object to regular function calls. Method calls like `props.onClick()` are transformed to `const t0 = props.onClick; t0()`. This normalization enables better analysis and optimization by the compiler.
+
+The transformation is important because method calls have different semantics than regular calls - the receiver (`props`) would normally be passed as `this` to the method. For React props, methods are typically just callback functions where `this` binding doesn't matter, so converting them to regular calls is safe and enables better memoization.
+
+## Input Invariants
+- The function has been through type inference
+- Props parameters are typed as `TObject<BuiltInProps>`
+
+## Output Guarantees
+- All `MethodCall` instructions where the receiver has props type are converted to `CallExpression`
+- The method property becomes the callee of the call
+- Arguments are preserved exactly
+
+## Algorithm
+
+```typescript
+export function optimizePropsMethodCalls(fn: HIRFunction): void {
+  for (const [, block] of fn.body.blocks) {
+    for (let i = 0; i < block.instructions.length; i++) {
+      const instr = block.instructions[i]!;
+
+      if (
+        instr.value.kind === 'MethodCall' &&
+        isPropsType(instr.value.receiver.identifier)
+      ) {
+        // Transform: props.onClick(arg)
+        // To: const t0 = props.onClick; t0(arg)
+        instr.value = {
+          kind: 'CallExpression',
+          callee: instr.value.property,  // The method becomes the callee
+          args: instr.value.args,
+          loc: instr.value.loc,
+        };
+      }
+    }
+  }
+}
+
+function isPropsType(identifier: Identifier): boolean {
+  return (
+    identifier.type.kind === 'Object' &&
+    identifier.type.shapeId === BuiltInPropsId
+  );
+}
+```
+
+## Edge Cases
+
+### Non-Props Method Calls
+Method calls on non-props objects are left unchanged:
+```javascript
+// Unchanged - array.map is not on props
+array.map(x => x * 2)
+
+// Unchanged - obj is not props
+obj.method()
+```
+
+### Props Type Detection
+The pass uses type information to identify props:
+```javascript
+function Component(props) {
+  // props has type TObject<BuiltInProps>
+  props.onClick();  // Transformed
+}
+
+function Regular(obj) {
+  // obj has unknown type
+  obj.onClick();  // Not transformed
+}
+```
+
+### Nested Props Access
+Only direct method calls on props are transformed:
+```javascript
+props.onClick();       // Transformed
+props.nested.onClick(); // Not transformed (receiver is props.nested, not props)
+```
+
+### Arrow Function Callbacks
+Works with any method on props:
+```javascript
+props.onChange(value);   // Transformed
+props.onSubmit(data);    // Transformed
+props.validate(input);   // Transformed
+```
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: Using props method
+
+**Input:**
+```javascript
+function Component(props) {
+  return <button onClick={() => props.onClick()} />;
+}
+```
+
+**Before OptimizePropsMethodCalls:**
+```
+[1] $5 = Function @context[props$1] ...
+    <<anonymous>>():
+      [1] $2 = LoadLocal props$1
+      [2] $3 = PropertyLoad $2.onClick
+      [3] $4 = MethodCall $2.$3()  // Method call on props
+      [4] Return Void
+```
+
+**After OptimizePropsMethodCalls:**
+```
+[1] $5 = Function @context[props$1] ...
+    <<anonymous>>():
+      [1] $2 = LoadLocal props$1
+      [2] $3 = PropertyLoad $2.onClick
+      [3] $4 = Call $3()  // Now a regular call
+      [4] Return Void
+```
+
+Key observations:
+- `MethodCall $2.$3()` becomes `Call $3()`
+- The property load (`$3 = PropertyLoad $2.onClick`) is preserved
+- The receiver (`$2`) is no longer part of the call
+- This enables the compiler to analyze `onClick` as a regular function
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/35-optimizeForSSR.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/35-optimizeForSSR.md
new file mode 100644
index 00000000000..34ba5b431f3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/35-optimizeForSSR.md
@@ -0,0 +1,187 @@
+# optimizeForSSR
+
+## File
+`src/Optimization/OptimizeForSSR.ts`
+
+## Purpose
+This pass applies Server-Side Rendering (SSR) specific optimizations. During SSR, React renders components to HTML strings without mounting them in the DOM. This means:
+
+1. **Effects don't run** - `useEffect` and `useLayoutEffect` are no-ops
+2. **Event handlers aren't needed** - There's no DOM to attach handlers to
+3. **State is never updated** - Components render once with initial state
+4. **Refs aren't attached** - There's no DOM to ref
+
+The pass leverages these SSR characteristics to inline and simplify code, removing unnecessary runtime overhead.
+
+## Input Invariants
+- The function has been through type inference
+- Hook types are properly identified (useState, useReducer, useEffect, etc.)
+- Function types for callbacks are properly inferred
+
+## Output Guarantees
+- `useState(initialValue)` is inlined to just `[initialValue, noop]`
+- `useReducer(reducer, initialArg, init?)` is inlined to `[init ? init(initialArg) : initialArg, noop]`
+- `useEffect` and `useLayoutEffect` calls are removed entirely
+- Event handler functions (functions that call setState) are replaced with empty functions
+- Ref-typed values are removed from JSX props
+
+## Algorithm
+
+### Phase 1: Identify Inlinable State
+```typescript
+const inlinedState = new Map<IdentifierId, InstructionValue>();
+
+for (const instr of block.instructions) {
+  if (isUseStateCall(instr)) {
+    // Store the initial value for inlining
+    inlinedState.set(instr.lvalue.id, {
+      kind: 'ArrayExpression',
+      elements: [initialValue, noopFunction],
+    });
+  }
+
+  if (isUseReducerCall(instr)) {
+    // Compute initial state and store for inlining
+    const initialState = init ? callInit(initialArg) : initialArg;
+    inlinedState.set(instr.lvalue.id, {
+      kind: 'ArrayExpression',
+      elements: [initialState, noopFunction],
+    });
+  }
+}
+```
+
+### Phase 2: Inline State Hooks
+Replace useState/useReducer with their computed initial values:
+```typescript
+// Before:
+$0 = useState(0)
+[state, setState] = $0
+
+// After (inlined):
+$0 = [0, () => {}]
+[state, setState] = $0
+```
+
+### Phase 3: Remove Effects
+```typescript
+if (isUseEffectCall(instr) || isUseLayoutEffectCall(instr)) {
+  // Remove the instruction entirely
+  block.instructions.splice(i, 1);
+}
+```
+
+### Phase 4: Identify and Neuter Event Handlers
+```typescript
+// Functions that capture and call setState are event handlers
+if (capturesSetState(functionExpr)) {
+  // Replace with empty function
+  instr.value = {
+    kind: 'FunctionExpression',
+    params: originalParams,
+    body: emptyBody,
+  };
+}
+```
+
+### Phase 5: Remove Ref Props
+```typescript
+if (isJSX(instr) && hasRefProp(instr)) {
+  // Remove ref={...} from JSX props
+  removeRefProp(instr.value);
+}
+```
+
+## Edge Cases
+
+### useState with Function Initializer
+When `useState` receives a function initializer, it must be called:
+```javascript
+// useState(() => expensive())
+// SSR: Call the initializer to get the value
+const [state] = [expensiveComputation(), noop];
+```
+
+### useReducer with Init Function
+The optional `init` function is called with `initialArg`:
+```javascript
+// useReducer(reducer, arg, init)
+// SSR: [init(arg), noop]
+```
+
+### Nested State Setters
+Functions that transitively call setState are also event handlers:
+```javascript
+function outer() {
+  function inner() {
+    setState(x);  // inner is event handler
+  }
+  inner();  // outer is also event handler
+}
+```
+
+### Conditional Event Handlers
+Event handler detection is conservative - if a function might call setState, it's treated as an event handler.
+
+### Refs in Nested Objects
+Only direct `ref` props on JSX are removed:
+```javascript
+<div ref={myRef} />           // ref removed
+<div config={{ref: myRef}} /> // ref NOT removed (nested)
+```
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `ssr/optimize-ssr.js`
+
+**Input:**
+```javascript
+function Component() {
+  const [state, setState] = useState(0);
+  const ref = useRef(null);
+  const onChange = (e) => {
+    setState(e.target.value);
+  };
+  useEffect(() => {
+    log(ref.current.value);
+  });
+  return <input value={state} onChange={onChange} ref={ref} />;
+}
+```
+
+**After SSR Optimization:**
+```javascript
+function Component() {
+  const $ = _c(1);
+  // useState inlined to [initialValue, noop]
+  const [state] = [0, () => {}];
+
+  // useRef returns object with current: null
+  const ref = { current: null };
+
+  // Event handler replaced with noop (it calls setState)
+  const onChange = () => {};
+
+  // useEffect removed entirely (no-op on SSR)
+
+  // ref prop removed from JSX
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <input value={state} onChange={onChange} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+```
+
+Key observations:
+- `useState(0)` becomes `[0, () => {}]` - no hook call
+- `useEffect(...)` is removed entirely
+- `onChange` is replaced with empty function since it called `setState`
+- `ref={ref}` prop is removed from JSX
+- SSR output is simpler and has less runtime overhead
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/36-outlineJSX.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/36-outlineJSX.md
new file mode 100644
index 00000000000..4131d38aef1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/36-outlineJSX.md
@@ -0,0 +1,224 @@
+# outlineJSX
+
+## File
+`src/Optimization/OutlineJsx.ts`
+
+## Purpose
+This pass outlines nested JSX elements into separate component functions. When a callback function contains JSX, this pass can extract that JSX into a new component, which enables:
+
+1. **Better code splitting** - Outlined components can be lazily loaded
+2. **Memoization at component boundaries** - React's reconciliation can skip unchanged subtrees
+3. **Reduced closure captures** - Outlined components receive props explicitly
+
+The pass specifically targets JSX within callbacks (like `.map()` callbacks) rather than top-level component returns.
+
+## Input Invariants
+- The `enableJsxOutlining` feature flag must be enabled
+- The function must be a React component or hook
+- JSX must appear within a nested function expression (callback)
+
+## Output Guarantees
+- Nested functions containing only JSX returns are extracted as separate components
+- The original callback is replaced with a call to the outlined component
+- Captured variables become explicit props to the outlined component
+- The outlined component is registered with the environment for emission
+
+## Algorithm
+
+### Phase 1: Identify Outlinable JSX
+```typescript
+function outlineJsxImpl(fn: HIRFunction, outlinedFns: Array<HIRFunction>): void {
+  for (const [, block] of fn.body.blocks) {
+    for (const instr of block.instructions) {
+      if (instr.value.kind === 'FunctionExpression') {
+        const innerFn = instr.value.loweredFunc.func;
+
+        // Check if function only returns JSX
+        if (canOutline(innerFn)) {
+          const outlined = createOutlinedComponent(innerFn);
+          outlinedFns.push(outlined);
+          replaceWithComponentCall(instr, outlined);
+        }
+      }
+    }
+  }
+}
+```
+
+### Phase 2: Check Outlinability
+```typescript
+function canOutline(fn: HIRFunction): boolean {
+  // Must have exactly one block with only JSX-related instructions
+  // Must end with returning JSX
+  // Must not have complex control flow
+
+  return (
+    fn.body.blocks.size === 1 &&
+    returnsJSX(fn) &&
+    !hasComplexControlFlow(fn)
+  );
+}
+```
+
+### Phase 3: Create Outlined Component
+```typescript
+function createOutlinedComponent(fn: HIRFunction): HIRFunction {
+  // Convert captured context to props
+  const props = fn.context.map(capture => ({
+    name: capture.identifier.name,
+    type: capture.identifier.type,
+  }));
+
+  // Create new component function
+  return {
+    ...fn,
+    params: [{kind: 'Identifier', name: 'props', ...}],
+    context: [],  // No captures - all via props
+  };
+}
+```
+
+### Phase 4: Replace Original Callback
+```typescript
+function replaceWithComponentCall(instr: Instruction, outlined: HIRFunction): void {
+  // Original: items.map(item => <Stringify item={item} />)
+  // Becomes: items.map(item => <OutlinedComponent item={item} />)
+
+  instr.value = {
+    kind: 'JSX',
+    tag: {kind: 'LoadGlobal', name: outlined.id},
+    props: capturedVariablesToProps(instr.value.context),
+  };
+}
+```
+
+### Phase 5: Register Outlined Functions
+```typescript
+export function outlineJSX(fn: HIRFunction): void {
+  const outlinedFns: Array<HIRFunction> = [];
+  outlineJsxImpl(fn, outlinedFns);
+
+  for (const outlinedFn of outlinedFns) {
+    fn.env.outlineFunction(outlinedFn, 'Component');
+  }
+}
+```
+
+## Edge Cases
+
+### Context Captures
+Variables captured by the callback become props:
+```javascript
+// Before:
+items.map(item => <Card key={item.id} user={currentUser} item={item} />)
+
+// After (outlined):
+function OutlinedCard(props) {
+  return <Card key={props.item.id} user={props.currentUser} item={props.item} />;
+}
+items.map(item => <OutlinedCard currentUser={currentUser} item={item} />)
+```
+
+### Complex Control Flow
+Callbacks with conditionals or loops are not outlined:
+```javascript
+// Not outlined - has conditional
+items.map(item => item.show ? <Card item={item} /> : null)
+```
+
+### Multiple JSX Returns
+Only single-JSX-return callbacks are outlined:
+```javascript
+// Not outlined - multiple potential returns
+items.map(item => {
+  if (item.type === 'a') return <TypeA item={item} />;
+  return <TypeB item={item} />;
+})
+```
+
+### Top-Level JSX
+Only JSX in nested callbacks is outlined, not component return values:
+```javascript
+function Component() {
+  return <div />;  // Not outlined - this is the component's return
+}
+```
+
+### Recursive Outlining
+The pass recursively processes outlined components to outline their nested JSX.
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `outlined-helper.js`
+
+**Input:**
+```javascript
+// @enableFunctionOutlining
+function Component(props) {
+  return (
+    <div>
+      {props.items.map(item => (
+        <Stringify key={item.id} item={item.name} />
+      ))}
+    </div>
+  );
+}
+```
+
+**After OutlineJSX:**
+```
+// Outlined component:
+function _outlined_Component$1(props) {
+  return <Stringify key={props.item.id} item={props.item.name} />;
+}
+
+// Original component modified:
+function Component(props) {
+  return (
+    <div>
+      {props.items.map(item => (
+        <_outlined_Component$1 item={item} />
+      ))}
+    </div>
+  );
+}
+```
+
+**Generated Code:**
+```javascript
+function _outlined_Component$1(props) {
+  const $ = _c(2);
+  const item = props.item;
+  let t0;
+  if ($[0] !== item.id || $[1] !== item.name) {
+    t0 = <Stringify key={item.id} item={item.name} />;
+    $[0] = item.id;
+    $[1] = item.name;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+function Component(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props.items) {
+    t0 = props.items.map((item) => <_outlined_Component$1 item={item} />);
+    $[0] = props.items;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return <div>{t0}</div>;
+}
+```
+
+Key observations:
+- The map callback JSX is extracted into `_outlined_Component$1`
+- The `item` variable becomes a prop instead of a closure capture
+- The outlined component gets its own memoization cache
+- This enables React to skip re-rendering unchanged list items
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/37-outlineFunctions.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/37-outlineFunctions.md
new file mode 100644
index 00000000000..6853c4625cc
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/37-outlineFunctions.md
@@ -0,0 +1,169 @@
+# outlineFunctions
+
+## File
+`src/Optimization/OutlineFunctions.ts`
+
+## Purpose
+This pass outlines pure function expressions that have no captured context into top-level helper functions. By moving these functions outside the component, they become truly static and can be shared across renders without any memoization overhead.
+
+A function with no captured context is completely self-contained - it only uses its parameters and globals. Such functions don't need to be recreated on each render and can be hoisted to module scope.
+
+## Input Invariants
+- The `enableFunctionOutlining` feature flag must be enabled
+- Functions must have `context.length === 0` (no captured variables)
+- Functions must be anonymous (no `id` property)
+- Functions must not be FBT macro operands (tracked by `fbtOperands` parameter)
+
+## Output Guarantees
+- Pure function expressions are replaced with `LoadGlobal` of the outlined function
+- Outlined functions are registered with the environment for emission
+- The original instruction is transformed to load the global
+
+## Algorithm
+
+```typescript
+export function outlineFunctions(
+  fn: HIRFunction,
+  fbtOperands: Set<IdentifierId>,
+): void {
+  for (const [, block] of fn.body.blocks) {
+    for (let i = 0; i < block.instructions.length; i++) {
+      const instr = block.instructions[i]!;
+
+      if (
+        instr.value.kind === 'FunctionExpression' &&
+        instr.value.loweredFunc.func.context.length === 0 &&
+        instr.value.loweredFunc.func.id === null &&
+        !fbtOperands.has(instr.lvalue.identifier.id)
+      ) {
+        // Outline this function
+        const outlinedId = fn.env.outlineFunction(
+          instr.value.loweredFunc.func,
+          'helper',
+        );
+
+        // Replace with LoadGlobal
+        instr.value = {
+          kind: 'LoadGlobal',
+          binding: {
+            kind: 'ModuleLocal',
+            name: outlinedId,
+          },
+          loc: instr.value.loc,
+        };
+      }
+    }
+  }
+}
+```
+
+## Edge Cases
+
+### Functions with Context
+Functions that capture variables are not outlined:
+```javascript
+function Component(props) {
+  const x = props.value;
+  const fn = () => x * 2;  // Captures x, not outlined
+}
+```
+
+### Named Functions
+Functions with explicit names are not outlined:
+```javascript
+const foo = function namedFn() { ... };  // Has id, not outlined
+```
+
+### FBT Operands
+Functions used as FBT operands cannot be outlined due to translation requirements:
+```javascript
+<fbt>
+  Hello <fbt:param name="user">{() => getName()}</fbt:param>
+</fbt>
+// The function cannot be outlined - FBT needs it inline
+```
+
+### Arrow Functions vs Function Expressions
+Both arrow functions and function expressions are candidates:
+```javascript
+const a = () => 1;           // Outlined if no context
+const b = function() {};     // Outlined if no context
+```
+
+### Recursive Functions
+Self-referencing functions cannot be outlined (they would have themselves in context):
+```javascript
+const fib = (n) => n <= 1 ? n : fib(n-1) + fib(n-2);  // References self
+```
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `outlined-helper.js`
+
+**Input:**
+```javascript
+// @enableFunctionOutlining
+function Component(props) {
+  return (
+    <div>
+      {props.items.map(item => (
+        <Stringify key={item.id} item={item.name} />
+      ))}
+    </div>
+  );
+}
+```
+
+**Analysis:**
+The map callback `item => <Stringify .../>` has one captured variable: nothing from the component (only uses `item` parameter). However, it receives `item` as a parameter, not from context.
+
+If we have a truly pure helper:
+```javascript
+// @enableFunctionOutlining
+function Component(props) {
+  const double = (x) => x * 2;  // No context, pure
+  return <div>{double(props.value)}</div>;
+}
+```
+
+**After OutlineFunctions:**
+```
+// Outlined to module scope:
+function _outlined_double$1(x) {
+  return x * 2;
+}
+
+// In component:
+[1] $1 = LoadGlobal _outlined_double$1  // Instead of FunctionExpression
+[2] StoreLocal Const double = $1
+```
+
+**Generated Code:**
+```javascript
+function _outlined_double$1(x) {
+  return x * 2;
+}
+
+function Component(props) {
+  const $ = _c(2);
+  const double = _outlined_double$1;  // Just a reference, no recreation
+  let t0;
+  if ($[0] !== props.value) {
+    t0 = <div>{double(props.value)}</div>;
+    $[0] = props.value;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+```
+
+Key observations:
+- The pure function is hoisted to module scope
+- The component just references the outlined function
+- No memoization needed for the function itself
+- Reduces runtime overhead by avoiding function recreation
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/38-memoizeFbtAndMacroOperandsInSameScope.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/38-memoizeFbtAndMacroOperandsInSameScope.md
new file mode 100644
index 00000000000..2d9aec60660
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/38-memoizeFbtAndMacroOperandsInSameScope.md
@@ -0,0 +1,231 @@
+# memoizeFbtAndMacroOperandsInSameScope
+
+## File
+`src/ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts`
+
+## Purpose
+This pass ensures that FBT (Facebook Translation) expressions and their operands are memoized within the same reactive scope. FBT is Facebook's internationalization system that requires special handling to ensure translations work correctly.
+
+The key insight is that FBT operands must be computed and frozen together with the FBT call itself. If operands were memoized in separate scopes, the translation system could receive stale operand values when only some inputs change.
+
+## Input Invariants
+- The function has been through type inference
+- FBT calls (`fbt`, `fbt.c`, `fbt:param`, etc.) are properly identified
+- Custom macros are configured in `fn.env.config.customMacros`
+- Reactive scope variables have been inferred
+
+## Output Guarantees
+- All operands of FBT calls are assigned to the same reactive scope as the FBT call
+- The `fbtOperands` set is returned for use by other passes (e.g., `outlineFunctions`)
+- Operand scope assignments use either transitive or shallow inlining based on macro definition
+
+## Algorithm
+
+### Phase 1: Collect Macro Kinds
+```typescript
+const macroKinds = new Map<Macro, MacroDefinition>([
+  ...Array.from(FBT_TAGS.entries()),  // Built-in fbt tags
+  ...(fn.env.config.customMacros ?? []).map(([name, def]) => [name, def]),
+]);
+```
+
+### Phase 2: Populate Macro Tags
+```typescript
+function populateMacroTags(
+  fn: HIRFunction,
+  macroKinds: Map<Macro, MacroDefinition>,
+): Map<IdentifierId, MacroDefinition> {
+  const macroTags = new Map();
+
+  for (const instr of allInstructions(fn)) {
+    if (isLoadGlobal(instr) || isPropertyLoad(instr)) {
+      const name = getName(instr);
+      if (macroKinds.has(name)) {
+        macroTags.set(instr.lvalue.id, macroKinds.get(name));
+      }
+    }
+  }
+
+  return macroTags;
+}
+```
+
+### Phase 3: Merge Macro Arguments
+```typescript
+function mergeMacroArguments(
+  fn: HIRFunction,
+  macroTags: Map<IdentifierId, MacroDefinition>,
+  macroKinds: Map<Macro, MacroDefinition>,
+): Set<IdentifierId> {
+  const macroValues = new Set<IdentifierId>();
+
+  for (const instr of allInstructions(fn)) {
+    if (isCall(instr) || isMethodCall(instr) || isJSX(instr)) {
+      const callee = getCallee(instr);
+      const macroDef = macroTags.get(callee.id);
+
+      if (macroDef !== undefined) {
+        // Mark all operands to be in same scope
+        for (const operand of getOperands(instr)) {
+          macroValues.add(operand.id);
+
+          // Merge scope to match macro call scope
+          if (macroDef.inlineLevel === InlineLevel.Transitive) {
+            mergeScopesTransitively(operand, instr.lvalue);
+          } else {
+            mergeScopes(operand, instr.lvalue);
+          }
+        }
+      }
+    }
+  }
+
+  return macroValues;
+}
+```
+
+### InlineLevel Types
+```typescript
+enum InlineLevel {
+  Shallow,     // Only merge direct operands
+  Transitive,  // Merge operands and their dependencies
+}
+```
+
+## Edge Cases
+
+### Nested FBT Params
+FBT params can be nested, and all levels must be in the same scope:
+```javascript
+<fbt>
+  Hello <fbt:param name="user">
+    <fbt:param name="firstName">{user.firstName}</fbt:param>
+  </fbt:param>
+</fbt>
+```
+
+### FBT with Complex Expressions
+Complex expressions as operands have their entire dependency chain merged:
+```javascript
+<fbt>
+  Count: <fbt:param name="count">{items.length * multiplier}</fbt:param>
+</fbt>
+// Both items.length and multiplier expressions are merged into fbt scope
+```
+
+### Custom Macros
+User-defined macros can specify their inlining behavior:
+```typescript
+customMacros: [
+  ['myMacro', { inlineLevel: InlineLevel.Transitive }],
+]
+```
+
+### Method Calls on FBT
+`fbt.param()`, `fbt.plural()`, etc. are handled as method calls:
+```javascript
+fbt(
+  fbt.param('count', items.length),  // MethodCall on fbt
+  'description'
+)
+```
+
+### JSX vs Call Syntax
+Both JSX and call syntax for FBT are handled:
+```javascript
+// JSX syntax
+<fbt desc="greeting">Hello</fbt>
+
+// Call syntax
+fbt('Hello', 'greeting')
+```
+
+## Built-in FBT Tags
+The pass recognizes these FBT constructs:
+- `fbt` / `fbt.c` - Main translation functions
+- `fbt:param` - Parameter substitution
+- `fbt:plural` - Plural handling
+- `fbt:enum` - Enumeration values
+- `fbt:name` - Name parameters
+- `fbt:pronoun` - Pronoun handling
+- `fbs` - Simple string translation
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `fbt/fbt-call.js`
+
+**Input:**
+```javascript
+function Component(props) {
+  const text = fbt(
+    `${fbt.param('count', props.count)} items`,
+    'Number of items'
+  );
+  return <div>{text}</div>;
+}
+```
+
+**Before MemoizeFbtAndMacroOperandsInSameScope:**
+```
+[1] $18 = LoadGlobal import fbt from 'fbt'
+[2] $19 = LoadGlobal import fbt from 'fbt'
+[3] $20_@0[3:8] = PropertyLoad $19.param
+[4] $21 = "(key) count"
+[5] $22 = LoadLocal props$17
+[6] $23 = PropertyLoad $22.count
+[7] $24_@0[3:8] = MethodCall $19.$20_@0($21, $23)  // fbt.param call
+[8] $25 = `${$24_@0} items`
+[9] $26 = "(description) Number of items"
+[10] $27_@1 = Call $18($25, $26)  // fbt call
+```
+
+**After MemoizeFbtAndMacroOperandsInSameScope:**
+```
+[1] $18_@1[1:11] = LoadGlobal import fbt from 'fbt'  // Merged to @1
+[2] $19 = LoadGlobal import fbt from 'fbt'
+[3] $20_@0[3:8] = PropertyLoad $19.param
+[4] $21 = "(key) count"
+[5] $22 = LoadLocal props$17
+[6] $23 = PropertyLoad $22.count
+[7] $24_@1[1:11] = MethodCall $19.$20_@0($21, $23)  // Merged to @1
+[8] $25_@1[1:11] = `${$24_@1} items`                // Merged to @1
+[9] $26_@1[1:11] = "(description) Number of items" // Merged to @1
+[10] $27_@1[1:11] = Call $18_@1($25_@1, $26_@1)     // Main fbt scope @1
+```
+
+**Generated Code:**
+```javascript
+function Component(props) {
+  const $ = _c(3);
+  let t0;
+  if ($[0] !== props.count) {
+    // All fbt operands computed in same memoization block
+    t0 = fbt(
+      `${fbt.param("count", props.count)} items`,
+      "Number of items"
+    );
+    $[0] = props.count;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const text = t0;
+  let t1;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <div>{text}</div>;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+```
+
+Key observations:
+- All FBT-related operations are in the same memoization scope `@1`
+- `fbt.param`, template literal, and `fbt` call are memoized together
+- This ensures the translation system receives consistent operand values
+- The entire translation is recomputed when any operand (`props.count`) changes
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/39-validateContextVariableLValues.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/39-validateContextVariableLValues.md
new file mode 100644
index 00000000000..abf519c69b9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/39-validateContextVariableLValues.md
@@ -0,0 +1,192 @@
+# validateContextVariableLValues
+
+## File
+`src/Validation/ValidateContextVariableLValues.ts`
+
+## Purpose
+This validation pass ensures that all load/store references to a given named identifier are consistent with the "kind" of that variable (normal local variable or context variable). Context variables are variables that are captured by closures and require special handling for correct closure semantics.
+
+The pass prevents mixing context variable operations (`DeclareContext`, `StoreContext`, `LoadContext`) with local variable operations (`DeclareLocal`, `StoreLocal`, `LoadLocal`, `Destructure`) on the same identifier.
+
+## Input Invariants
+- The function has been lowered to HIR
+- All instructions have been categorized by kind
+- Nested function expressions have been lowered
+
+## Validation Rules
+
+### Rule 1: Consistent Variable Kind
+All references to the same identifier must use consistent load/store operations:
+- Context variables must only use `DeclareContext`, `StoreContext`, `LoadContext`
+- Local variables must only use `DeclareLocal`, `StoreLocal`, `LoadLocal`
+
+**Error (Invariant violation):**
+```
+Expected all references to a variable to be consistently local or context references
+Identifier [place] is referenced as a [kind] variable, but was previously referenced as a [prev.kind] variable
+```
+
+### Rule 2: No Destructuring of Context Variables
+Context variables cannot be destructured using the `Destructure` instruction.
+
+**Error (Todo):**
+```
+Support destructuring of context variables
+```
+
+### Rule 3: Unhandled Instruction Variants
+If an instruction has lvalues that the pass does not handle, it throws a Todo error.
+
+**Error (Todo):**
+```
+ValidateContextVariableLValues: unhandled instruction variant
+Handle '[kind]' lvalues
+```
+
+## Algorithm
+
+### Phase 1: Initialize Tracking
+```typescript
+const identifierKinds: Map<IdentifierId, {place: Place, kind: 'local' | 'context' | 'destructure'}> = new Map();
+```
+
+### Phase 2: Visit All Instructions
+The pass iterates through all blocks and instructions, categorizing each based on its kind:
+
+```typescript
+for (const [, block] of fn.body.blocks) {
+  for (const instr of block.instructions) {
+    switch (value.kind) {
+      case 'DeclareContext':
+      case 'StoreContext':
+        visit(identifierKinds, value.lvalue.place, 'context');
+        break;
+      case 'LoadContext':
+        visit(identifierKinds, value.place, 'context');
+        break;
+      case 'StoreLocal':
+      case 'DeclareLocal':
+        visit(identifierKinds, value.lvalue.place, 'local');
+        break;
+      case 'LoadLocal':
+        visit(identifierKinds, value.place, 'local');
+        break;
+      case 'PostfixUpdate':
+      case 'PrefixUpdate':
+        visit(identifierKinds, value.lvalue, 'local');
+        break;
+      case 'Destructure':
+        for (const lvalue of eachPatternOperand(value.lvalue.pattern)) {
+          visit(identifierKinds, lvalue, 'destructure');
+        }
+        break;
+      case 'ObjectMethod':
+      case 'FunctionExpression':
+        // Recursively validate nested functions
+        validateContextVariableLValuesImpl(value.loweredFunc.func, identifierKinds);
+        break;
+    }
+  }
+}
+```
+
+### Phase 3: Check Consistency
+For each place visited, the `visit` function checks if the identifier was previously seen with a different kind:
+
+```typescript
+function visit(identifiers, place, kind) {
+  const prev = identifiers.get(place.identifier.id);
+  if (prev !== undefined) {
+    const wasContext = prev.kind === 'context';
+    const isContext = kind === 'context';
+    if (wasContext !== isContext) {
+      // Check for destructuring of context variable
+      if (prev.kind === 'destructure' || kind === 'destructure') {
+        CompilerError.throwTodo({
+          reason: `Support destructuring of context variables`,
+          ...
+        });
+      }
+      // Invariant violation: inconsistent variable kinds
+      CompilerError.invariant(false, {
+        reason: 'Expected all references to be consistently local or context references',
+        ...
+      });
+    }
+  }
+  identifiers.set(place.identifier.id, {place, kind});
+}
+```
+
+## Edge Cases
+
+### Nested Function Expressions
+The validation recursively processes nested function expressions and object methods, sharing the same `identifierKinds` map. This ensures that a variable captured by a nested function is consistently treated as a context variable throughout the entire function hierarchy.
+
+### Destructuring Patterns
+Each operand in a destructure pattern is visited individually, marked as 'destructure' kind. If the same identifier was previously used as a context variable, a Todo error is thrown since destructuring of context variables is not yet supported.
+
+### Update Expressions
+Both `PostfixUpdate` (e.g., `x++`) and `PrefixUpdate` (e.g., `++x`) are treated as local variable operations.
+
+## TODOs
+
+1. **Destructuring of context variables** - Currently not supported:
+   ```typescript
+   CompilerError.throwTodo({
+     reason: `Support destructuring of context variables`,
+     ...
+   });
+   ```
+
+2. **Unhandled instruction variants** - Some instruction types with lvalues may not be handled:
+   ```typescript
+   CompilerError.throwTodo({
+     reason: 'ValidateContextVariableLValues: unhandled instruction variant',
+     description: `Handle '${value.kind}' lvalues`,
+     ...
+   });
+   ```
+
+## Example
+
+### Fixture: `error.todo-for-of-loop-with-context-variable-iterator.js`
+
+**Input:**
+```javascript
+import {useHook} from 'shared-runtime';
+
+function Component(props) {
+  const data = useHook();
+  const items = [];
+  // NOTE: `item` is a context variable because it's reassigned and also referenced
+  // within a closure, the `onClick` handler of each item
+  for (let item of props.data) {
+    item = item ?? {}; // reassignment to force a context variable
+    items.push(
+      <div key={item.id} onClick={() => data.set(item)}>
+        {item.id}
+      </div>
+    );
+  }
+  return <div>{items}</div>;
+}
+```
+
+**Error:**
+```
+Todo: Support non-trivial for..of inits
+
+error.todo-for-of-loop-with-context-variable-iterator.ts:8:2
+   6 |   // NOTE: `item` is a context variable because it's reassigned and also referenced
+   7 |   // within a closure, the `onClick` handler of each item
+>  8 |   for (let item of props.data) {
+     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>  9 |     item = item ?? {}; // reassignment to force a context variable
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+...
+> 15 |   }
+     | ^^^^ Support non-trivial for..of inits
+```
+
+Note: This particular error comes from an earlier pass (lowering), but demonstrates the kind of context variable scenarios that this validation is designed to catch.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/40-validateUseMemo.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/40-validateUseMemo.md
new file mode 100644
index 00000000000..b1863d97338
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/40-validateUseMemo.md
@@ -0,0 +1,299 @@
+# validateUseMemo
+
+## File
+`src/Validation/ValidateUseMemo.ts`
+
+## Purpose
+This validation pass ensures that `useMemo()` callbacks follow React's requirements. The pass checks for several common mistakes that developers make when using `useMemo()`:
+
+1. Callbacks should not accept parameters (useMemo callbacks are called with no arguments)
+2. Callbacks should not be async or generator functions (must return a value synchronously)
+3. Callbacks should not reassign variables declared outside the callback (must be pure)
+4. Callbacks should return a value (useMemo is for computing values, not side effects)
+5. The result of useMemo should be used (not discarded)
+
+## Input Invariants
+- The function has been lowered to HIR
+- `useMemo` is either imported directly or accessed via `React.useMemo`
+- Function expressions have been lowered with their parameters and async/generator flags preserved
+
+## Validation Rules
+
+### Rule 1: No Parameters
+useMemo callbacks must not accept parameters.
+
+**Error:**
+```
+Error: useMemo() callbacks may not accept parameters
+
+useMemo() callbacks are called by React to cache calculations across re-renders. They should not take parameters. Instead, directly reference the props, state, or local variables needed for the computation.
+```
+
+### Rule 2: No Async or Generator Functions
+useMemo callbacks must synchronously return a value.
+
+**Error:**
+```
+Error: useMemo() callbacks may not be async or generator functions
+
+useMemo() callbacks are called once and must synchronously return a value.
+```
+
+### Rule 3: No Reassigning Outer Variables
+useMemo callbacks cannot reassign variables declared outside the callback.
+
+**Error:**
+```
+Error: useMemo() callbacks may not reassign variables declared outside of the callback
+
+useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function.
+```
+
+### Rule 4: Must Return a Value (when `validateNoVoidUseMemo` is enabled)
+useMemo callbacks should return a value.
+
+**Error:**
+```
+Error: useMemo() callbacks must return a value
+
+This useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects.
+```
+
+### Rule 5: Result Must Be Used (when `validateNoVoidUseMemo` is enabled)
+The result of useMemo should be used somewhere.
+
+**Error:**
+```
+Error: useMemo() result is unused
+
+This useMemo() value is unused. useMemo() is for computing and caching values, not for arbitrary side effects.
+```
+
+## Algorithm
+
+### Phase 1: Track useMemo References
+```typescript
+const useMemos = new Set<IdentifierId>();
+const react = new Set<IdentifierId>();
+const functions = new Map<IdentifierId, FunctionExpression>();
+const unusedUseMemos = new Map<IdentifierId, SourceLocation>();
+```
+
+The pass tracks:
+- Direct `useMemo` imports via `LoadGlobal`
+- `React` imports to detect `React.useMemo` pattern
+- Function expressions that might be useMemo callbacks
+- Unused useMemo results
+
+### Phase 2: Identify useMemo Calls
+```typescript
+for (const instr of block.instructions) {
+  switch (value.kind) {
+    case 'LoadGlobal':
+      if (value.binding.name === 'useMemo') {
+        useMemos.add(lvalue.identifier.id);
+      } else if (value.binding.name === 'React') {
+        react.add(lvalue.identifier.id);
+      }
+      break;
+    case 'PropertyLoad':
+      if (react.has(value.object.identifier.id) && value.property === 'useMemo') {
+        useMemos.add(lvalue.identifier.id);
+      }
+      break;
+    case 'CallExpression':
+    case 'MethodCall':
+      // Check if callee is useMemo
+      const callee = value.kind === 'CallExpression' ? value.callee : value.property;
+      if (useMemos.has(callee.identifier.id) && value.args.length > 0) {
+        // Validate the callback
+      }
+      break;
+  }
+}
+```
+
+### Phase 3: Validate Callback
+For each useMemo call, the pass retrieves the callback function expression and validates:
+
+```typescript
+const body = functions.get(arg.identifier.id);
+
+// Check for parameters
+if (body.loweredFunc.func.params.length > 0) {
+  errors.push("useMemo() callbacks may not accept parameters");
+}
+
+// Check for async/generator
+if (body.loweredFunc.func.async || body.loweredFunc.func.generator) {
+  errors.push("useMemo() callbacks may not be async or generator functions");
+}
+
+// Check for context variable reassignment
+validateNoContextVariableAssignment(body.loweredFunc.func, errors);
+
+// Check for return value (if config enabled)
+if (fn.env.config.validateNoVoidUseMemo) {
+  if (!hasNonVoidReturn(body.loweredFunc.func)) {
+    errors.push("useMemo() callbacks must return a value");
+  }
+}
+```
+
+### Phase 4: Validate No Context Variable Assignment
+```typescript
+function validateNoContextVariableAssignment(fn: HIRFunction, errors: CompilerError) {
+  const context = new Set(fn.context.map(place => place.identifier.id));
+  for (const block of fn.body.blocks.values()) {
+    for (const instr of block.instructions) {
+      if (value.kind === 'StoreContext') {
+        if (context.has(value.lvalue.place.identifier.id)) {
+          errors.push("Cannot reassign variable");
+        }
+      }
+    }
+  }
+}
+```
+
+### Phase 5: Check for Unused Results
+```typescript
+// Track which useMemo results are referenced
+for (const operand of eachInstructionValueOperand(value)) {
+  unusedUseMemos.delete(operand.identifier.id);
+}
+
+// At the end, report any unused useMemos
+for (const loc of unusedUseMemos.values()) {
+  errors.push("useMemo() result is unused");
+}
+```
+
+### Return Value Helper
+```typescript
+function hasNonVoidReturn(func: HIRFunction): boolean {
+  for (const [, block] of func.body.blocks) {
+    if (block.terminal.kind === 'return') {
+      if (block.terminal.returnVariant === 'Explicit' ||
+          block.terminal.returnVariant === 'Implicit') {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+```
+
+## Edge Cases
+
+### React.useMemo vs useMemo
+The pass handles both import styles:
+```javascript
+import {useMemo} from 'react';
+useMemo(() => x, [x]);
+
+import React from 'react';
+React.useMemo(() => x, [x]);
+```
+
+### Immediately Used Results
+Results that are used immediately don't trigger the "unused" warning:
+```javascript
+const x = useMemo(() => compute(), [dep]);
+return x; // x is used
+```
+
+### Void Return Detection
+The pass checks for explicit and implicit returns. A function with only `return;` statements (void returns) will trigger the "must return a value" error.
+
+### VoidUseMemo Errors as Logged Errors
+The void useMemo errors (no return value, unused result) are logged via `fn.env.logErrors()` rather than thrown immediately. This allows them to be treated differently (e.g., as warnings) based on configuration.
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `error.invalid-useMemo-callback-args.js`
+
+**Input:**
+```javascript
+function component(a, b) {
+  let x = useMemo(c => a, []);
+  return x;
+}
+```
+
+**Error:**
+```
+Error: useMemo() callbacks may not accept parameters
+
+useMemo() callbacks are called by React to cache calculations across re-renders. They should not take parameters. Instead, directly reference the props, state, or local variables needed for the computation.
+
+error.invalid-useMemo-callback-args.ts:2:18
+  1 | function component(a, b) {
+> 2 |   let x = useMemo(c => a, []);
+    |                   ^ Callbacks with parameters are not supported
+  3 |   return x;
+  4 | }
+```
+
+### Fixture: `error.invalid-useMemo-async-callback.js`
+
+**Input:**
+```javascript
+function component(a, b) {
+  let x = useMemo(async () => {
+    await a;
+  }, []);
+  return x;
+}
+```
+
+**Error:**
+```
+Error: useMemo() callbacks may not be async or generator functions
+
+useMemo() callbacks are called once and must synchronously return a value.
+
+error.invalid-useMemo-async-callback.ts:2:18
+  1 | function component(a, b) {
+> 2 |   let x = useMemo(async () => {
+    |                   ^^^^^^^^^^^^^
+> 3 |     await a;
+    | ^^^^^^^^^^^^
+> 4 |   }, []);
+    | ^^^^ Async and generator functions are not supported
+```
+
+### Fixture: `error.invalid-reassign-variable-in-usememo.js`
+
+**Input:**
+```javascript
+function Component() {
+  let x;
+  const y = useMemo(() => {
+    let z;
+    x = [];
+    z = true;
+    return z;
+  }, []);
+  return [x, y];
+}
+```
+
+**Error:**
+```
+Error: useMemo() callbacks may not reassign variables declared outside of the callback
+
+useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function.
+
+error.invalid-reassign-variable-in-usememo.ts:5:4
+  3 |   const y = useMemo(() => {
+  4 |     let z;
+> 5 |     x = [];
+    |     ^ Cannot reassign variable
+  6 |     z = true;
+  7 |     return z;
+  8 |   }, []);
+```
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/41-validateHooksUsage.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/41-validateHooksUsage.md
new file mode 100644
index 00000000000..0ed04666982
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/41-validateHooksUsage.md
@@ -0,0 +1,330 @@
+# validateHooksUsage
+
+## File
+`src/Validation/ValidateHooksUsage.ts`
+
+## Purpose
+This validation pass ensures that the function honors the [Rules of Hooks](https://react.dev/warnings/invalid-hook-call-warning). Specifically, it validates that:
+
+1. Hooks may only be called unconditionally (not in if statements, loops, etc.)
+2. Hooks cannot be used as first-class values (passed around, stored in variables, etc.)
+3. Hooks must be the same function on every render (no dynamic hooks)
+4. Hooks must be called at the top level, not within nested function expressions
+
+## Input Invariants
+- The function has been lowered to HIR
+- Global bindings have been resolved and typed
+- Nested function expressions have been lowered
+
+## Value Kinds Lattice
+
+The pass uses abstract interpretation with a lattice of value kinds:
+
+```typescript
+enum Kind {
+  Error,        // Hook already used in an invalid way (stop reporting)
+  KnownHook,    // Definitely a hook (from LoadGlobal with hook type)
+  PotentialHook, // Might be a hook (hook-like name but not from global)
+  Global,       // A global value that is not a hook
+  Local,        // A local variable
+}
+```
+
+The `joinKinds` function merges kinds, with earlier kinds taking precedence:
+- `Error` > `KnownHook` > `PotentialHook` > `Global` > `Local`
+
+## Validation Rules
+
+### Rule 1: No Conditional Hook Calls
+Hooks must always be called in a consistent order.
+
+**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)
+```
+
+### Rule 2: No Hooks as First-Class Values
+Known hooks may not be referenced as normal values (only called).
+
+**Error:**
+```
+Error: Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values
+```
+
+### Rule 3: No Dynamic Hooks
+Potential hooks (hook-like names from local scope) may change between renders.
+
+**Error:**
+```
+Error: Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+```
+
+### Rule 4: No Hooks in Nested Functions
+Hooks must be called at the top level of a component or custom hook.
+
+**Error:**
+```
+Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+Cannot call [hookKind] within a function expression
+```
+
+## Algorithm
+
+### Phase 1: Compute Unconditional Blocks
+```typescript
+const unconditionalBlocks = computeUnconditionalBlocks(fn);
+```
+Determines which blocks are guaranteed to execute on every render (not inside conditionals).
+
+### Phase 2: Initialize Tracking
+```typescript
+const valueKinds = new Map<IdentifierId, Kind>();
+
+// Initialize parameters
+for (const param of fn.params) {
+  const place = param.kind === 'Identifier' ? param : param.place;
+  const kind = getKindForPlace(place); // PotentialHook if hook-like name
+  setKind(place, kind);
+}
+```
+
+### Phase 3: Track Value Kinds Through Instructions
+
+For each instruction, the pass tracks how hook-ness flows through values:
+
+```typescript
+case 'LoadGlobal':
+  // Globals are the source of KnownHook
+  if (getHookKind(fn.env, instr.lvalue.identifier) != null) {
+    setKind(instr.lvalue, Kind.KnownHook);
+  } else {
+    setKind(instr.lvalue, Kind.Global);
+  }
+  break;
+
+case 'PropertyLoad':
+  // Hook-like property of Global -> KnownHook
+  // Hook-like property of Local -> PotentialHook
+  // Property of KnownHook -> KnownHook (if hook-like name)
+  const objectKind = getKindForPlace(value.object);
+  const isHookProperty = isHookName(value.property);
+  // Determine kind based on object kind and property name
+  break;
+
+case 'CallExpression':
+  const calleeKind = getKindForPlace(value.callee);
+  const isHookCallee = calleeKind === Kind.KnownHook || calleeKind === Kind.PotentialHook;
+
+  if (isHookCallee && !unconditionalBlocks.has(block.id)) {
+    recordConditionalHookError(value.callee);
+  } else if (calleeKind === Kind.PotentialHook) {
+    recordDynamicHookUsageError(value.callee);
+  }
+  break;
+```
+
+### Phase 4: Check for Invalid Hook References
+
+When a `KnownHook` is used as an operand (not as a callee), it's an error:
+
+```typescript
+function visitPlace(place: Place): void {
+  const kind = valueKinds.get(place.identifier.id);
+  if (kind === Kind.KnownHook) {
+    recordInvalidHookUsageError(place);
+  }
+}
+```
+
+### Phase 5: Validate Nested Function Expressions
+
+Recursively check that nested functions don't call hooks:
+
+```typescript
+function visitFunctionExpression(errors: CompilerError, fn: HIRFunction) {
+  for (const instr of allInstructions(fn)) {
+    if (isCall(instr)) {
+      const callee = getCallee(instr);
+      const hookKind = getHookKind(fn.env, callee.identifier);
+      if (hookKind != null) {
+        errors.push({
+          reason: 'Hooks must be called at the top level...',
+          description: `Cannot call ${hookKind} within a function expression`,
+        });
+      }
+    }
+    // Recursively check nested functions
+    if (isFunctionExpression(instr)) {
+      visitFunctionExpression(errors, instr.value.loweredFunc.func);
+    }
+  }
+}
+```
+
+### Phi Node Handling
+
+For phi nodes (control flow join points), the pass joins the kinds of all operands:
+
+```typescript
+for (const phi of block.phis) {
+  let kind = isHookName(phi.place.identifier.name) ? Kind.PotentialHook : Kind.Local;
+  for (const [, operand] of phi.operands) {
+    const operandKind = valueKinds.get(operand.identifier.id);
+    if (operandKind !== undefined) {
+      kind = joinKinds(kind, operandKind);
+    }
+  }
+  valueKinds.set(phi.place.identifier.id, kind);
+}
+```
+
+## Edge Cases
+
+### Optional Calls
+Optional calls like `useHook?.()` are treated as conditional:
+```javascript
+const result = useHook?.(); // Error: conditional hook call
+```
+
+### Property Access on Hooks
+Hook-like properties of known hooks are also known hooks:
+```javascript
+const useFoo = useHook.useFoo; // useFoo is KnownHook
+useFoo(); // Must be called unconditionally
+```
+
+### Destructuring from Global
+Destructuring hook-like names from a global creates known hooks:
+```javascript
+const {useState} = React; // useState is KnownHook
+```
+
+### Hook-Like Names from Local Variables
+Hook-like names from local variables are potential hooks:
+```javascript
+const obj = createObject();
+const useFoo = obj.useFoo; // PotentialHook
+useFoo(); // Error: dynamic hook
+```
+
+### Error Deduplication
+The pass deduplicates errors by source location, and once an error is recorded for a place, it's marked as `Kind.Error` to prevent further errors for the same place.
+
+## TODOs
+
+1. **Fixpoint iteration for loops** - The pass currently skips phi operands whose value is unknown (which can occur in loops). A follow-up could expand this to fixpoint iteration:
+   ```typescript
+   // NOTE: we currently skip operands whose value is unknown
+   // (which can only occur for functions with loops), we may
+   // cause us to miss invalid code in some cases. We should
+   // expand this to a fixpoint iteration in a follow-up.
+   ```
+
+## Example
+
+### Fixture: `rules-of-hooks/error.invalid-hook-if-consequent.js`
+
+**Input:**
+```javascript
+function Component(props) {
+  let x = null;
+  if (props.cond) {
+    x = useHook();
+  }
+  return x;
+}
+```
+
+**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)
+
+error.invalid-hook-if-consequent.ts:4:8
+  2 |   let x = null;
+  3 |   if (props.cond) {
+> 4 |     x = useHook();
+    |         ^^^^^^^ Hooks must always be called in a consistent order...
+  5 |   }
+  6 |   return x;
+```
+
+### Fixture: `rules-of-hooks/error.invalid-hook-as-prop.js`
+
+**Input:**
+```javascript
+function Component({useFoo}) {
+  useFoo();
+}
+```
+
+**Error:**
+```
+Error: Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks
+
+error.invalid-hook-as-prop.ts:2:2
+  1 | function Component({useFoo}) {
+> 2 |   useFoo();
+    |   ^^^^^^ Hooks must be the same function on every render...
+  3 | }
+```
+
+### Fixture: `rules-of-hooks/error.invalid-hook-in-nested-function-expression-object-expression.js`
+
+**Input:**
+```javascript
+function Component() {
+  'use memo';
+  const f = () => {
+    const x = {
+      outer() {
+        const g = () => {
+          const y = {
+            inner() {
+              return useFoo();
+            },
+          };
+          return y;
+        };
+      },
+    };
+    return x;
+  };
+}
+```
+
+**Error:**
+```
+Error: Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)
+
+Cannot call hook within a function expression.
+
+error.invalid-hook-in-nested-function-expression-object-expression.ts:10:21
+   8 |           const y = {
+   9 |             inner() {
+> 10 |               return useFoo();
+     |                      ^^^^^^ Hooks must be called at the top level...
+  11 |             },
+  12 |           };
+```
+
+### Fixture: `rules-of-hooks/error.invalid-hook-optionalcall.js`
+
+**Input:**
+```javascript
+function Component() {
+  const {result} = useConditionalHook?.() ?? {};
+  return result;
+}
+```
+
+**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)
+
+error.invalid-hook-optionalcall.ts:2:19
+  1 | function Component() {
+> 2 |   const {result} = useConditionalHook?.() ?? {};
+    |                    ^^^^^^^^^^^^^^^^^^ Hooks must always be called in a consistent order...
+  3 |   return result;
+```
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/42-validateNoCapitalizedCalls.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/42-validateNoCapitalizedCalls.md
new file mode 100644
index 00000000000..70038be14e2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/42-validateNoCapitalizedCalls.md
@@ -0,0 +1,233 @@
+# validateNoCapitalizedCalls
+
+## File
+`src/Validation/ValidateNoCapitalizedCalls.ts`
+
+## Purpose
+This validation pass ensures that capitalized functions are not called directly in a component. In React, capitalized functions are conventionally reserved for components, which should be invoked via JSX syntax rather than direct function calls.
+
+Direct calls to capitalized functions can cause issues because:
+1. Components may contain hooks, and calling them directly violates the Rules of Hooks
+2. The React runtime expects components to be rendered via JSX for proper reconciliation
+3. Direct calls bypass React's rendering lifecycle and state management
+
+This validation is opt-in and controlled by the `validateNoCapitalizedCalls` configuration option.
+
+## Input Invariants
+- The function has been lowered to HIR
+- Global bindings have been resolved
+- The `validateNoCapitalizedCalls` configuration option is enabled (via pragma or config)
+
+## Validation Rules
+
+### Rule 1: No Direct Calls to Capitalized Globals
+Capitalized global functions (not in the allowlist) cannot be called directly.
+
+**Error:**
+```
+Error: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config
+
+[FunctionName] may be a component.
+```
+
+### Rule 2: No Direct Method Calls to Capitalized Properties
+Capitalized methods on objects cannot be called directly.
+
+**Error:**
+```
+Error: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config
+
+[MethodName] may be a component.
+```
+
+## Algorithm
+
+### Phase 1: Build Allowlist
+```typescript
+const ALLOW_LIST = new Set([
+  ...DEFAULT_GLOBALS.keys(),           // Built-in globals (Array, Object, etc.)
+  ...(envConfig.validateNoCapitalizedCalls ?? []),  // User-configured allowlist
+]);
+
+const hookPattern = envConfig.hookPattern != null
+  ? new RegExp(envConfig.hookPattern)
+  : null;
+
+const isAllowed = (name: string): boolean => {
+  return ALLOW_LIST.has(name) ||
+         (hookPattern != null && hookPattern.test(name));
+};
+```
+
+### Phase 2: Track Capitalized Globals and Properties
+```typescript
+const capitalLoadGlobals = new Map<IdentifierId, string>();
+const capitalizedProperties = new Map<IdentifierId, string>();
+```
+
+### Phase 3: Scan Instructions
+```typescript
+for (const instr of block.instructions) {
+  switch (value.kind) {
+    case 'LoadGlobal':
+      // Track capitalized globals (excluding CONSTANTS)
+      if (
+        value.binding.name !== '' &&
+        /^[A-Z]/.test(value.binding.name) &&
+        !(value.binding.name.toUpperCase() === value.binding.name) &&
+        !isAllowed(value.binding.name)
+      ) {
+        capitalLoadGlobals.set(lvalue.identifier.id, value.binding.name);
+      }
+      break;
+
+    case 'CallExpression':
+      // Check if calling a tracked capitalized global
+      const calleeName = capitalLoadGlobals.get(value.callee.identifier.id);
+      if (calleeName != null) {
+        CompilerError.throwInvalidReact({
+          reason: 'Capitalized functions are reserved for components...',
+          description: `${calleeName} may be a component`,
+          ...
+        });
+      }
+      break;
+
+    case 'PropertyLoad':
+      // Track capitalized properties
+      if (typeof value.property === 'string' && /^[A-Z]/.test(value.property)) {
+        capitalizedProperties.set(lvalue.identifier.id, value.property);
+      }
+      break;
+
+    case 'MethodCall':
+      // Check if calling a tracked capitalized property
+      const propertyName = capitalizedProperties.get(value.property.identifier.id);
+      if (propertyName != null) {
+        errors.push({
+          reason: 'Capitalized functions are reserved for components...',
+          description: `${propertyName} may be a component`,
+          ...
+        });
+      }
+      break;
+  }
+}
+```
+
+## Edge Cases
+
+### ALL_CAPS Constants
+Functions with names that are entirely uppercase (like `CONSTANTS`) are not flagged:
+```javascript
+const x = MY_CONSTANT(); // Not an error - all caps indicates a constant, not a component
+const y = MyComponent(); // Error - PascalCase indicates a component
+```
+
+### Built-in Globals
+The default globals from `DEFAULT_GLOBALS` are automatically allowlisted:
+```javascript
+const arr = Array(5);    // OK - Array is a built-in
+const obj = Object.create(null);  // OK - Object is a built-in
+```
+
+### User-Configured Allowlist
+Users can allowlist specific functions via configuration:
+```typescript
+validateNoCapitalizedCalls: ['MyUtility', 'SomeFactory']
+```
+
+### Hook Patterns
+Functions matching the configured hook pattern are allowed even if capitalized:
+```typescript
+// With hookPattern: 'React\\$use.*'
+const x = React$useState(); // Allowed if it matches the hook pattern
+```
+
+### Method Calls vs Function Calls
+Both direct function calls and method calls on objects are checked:
+```javascript
+MyComponent();           // Error - direct call
+someObject.MyComponent(); // Error - method call
+```
+
+### Chained Property Access
+Only the immediate property being called is checked:
+```javascript
+a.b.MyComponent(); // Only checks if MyComponent is capitalized
+```
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `error.capitalized-function-call.js`
+
+**Input:**
+```javascript
+// @validateNoCapitalizedCalls
+function Component() {
+  const x = SomeFunc();
+
+  return x;
+}
+```
+
+**Error:**
+```
+Error: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config
+
+SomeFunc may be a component.
+
+error.capitalized-function-call.ts:3:12
+  1 | // @validateNoCapitalizedCalls
+  2 | function Component() {
+> 3 |   const x = SomeFunc();
+    |             ^^^^^^^^^^ Capitalized functions are reserved for components...
+  4 |
+  5 |   return x;
+  6 | }
+```
+
+### Fixture: `error.capitalized-method-call.js`
+
+**Input:**
+```javascript
+// @validateNoCapitalizedCalls
+function Component() {
+  const x = someGlobal.SomeFunc();
+
+  return x;
+}
+```
+
+**Error:**
+```
+Error: Capitalized functions are reserved for components, which must be invoked with JSX. If this is a component, render it with JSX. Otherwise, ensure that it has no hook calls and rename it to begin with a lowercase letter. Alternatively, if you know for a fact that this function is not a component, you can allowlist it via the compiler config
+
+SomeFunc may be a component.
+
+error.capitalized-method-call.ts:3:12
+  1 | // @validateNoCapitalizedCalls
+  2 | function Component() {
+> 3 |   const x = someGlobal.SomeFunc();
+    |             ^^^^^^^^^^^^^^^^^^^^^ Capitalized functions are reserved for components...
+  4 |
+  5 |   return x;
+  6 | }
+```
+
+### Fixture: `capitalized-function-allowlist.js` (No Error)
+
+**Input:**
+```javascript
+// @validateNoCapitalizedCalls:["SomeFunc"]
+function Component() {
+  const x = SomeFunc();
+  return x;
+}
+```
+
+**Output:**
+Compiles successfully because `SomeFunc` is in the allowlist.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/43-validateLocalsNotReassignedAfterRender.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/43-validateLocalsNotReassignedAfterRender.md
new file mode 100644
index 00000000000..3c6b16d2fb9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/43-validateLocalsNotReassignedAfterRender.md
@@ -0,0 +1,321 @@
+# validateLocalsNotReassignedAfterRender
+
+## File
+`src/Validation/ValidateLocalsNotReassignedAfterRender.ts`
+
+## Purpose
+This validation pass prevents a category of bugs where a closure captures a binding from one render but does not update when the binding is reassigned in a later render.
+
+When the React Compiler memoizes a function, that function captures bindings at the time of creation. If the function is reused across renders (because its dependencies haven't changed), any reassignments to captured variables will affect the wrong binding version. This can cause inconsistent behavior that's difficult to debug.
+
+The pass detects when:
+1. A local variable is reassigned within a function expression
+2. That function expression escapes (e.g., passed to useEffect, used as event handler)
+3. The reassignment would occur after render completes (in effects or async callbacks)
+
+## Input Invariants
+- The function has been lowered to HIR
+- Effects have been inferred for all operands (`operand.effect !== Effect.Unknown`)
+- Function signatures have been analyzed for `noAlias` properties
+
+## Validation Rules
+
+### Rule 1: No Reassignment After Render
+Variables cannot be reassigned in functions that escape to be called after render.
+
+**Error:**
+```
+Error: Cannot reassign variable after render completes
+
+Reassigning `[variable]` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
+```
+
+### Rule 2: No Reassignment in Async Functions
+Variables cannot be reassigned within async functions (async functions always execute after render).
+
+**Error:**
+```
+Error: Cannot reassign variable in async function
+
+Reassigning a variable in an async function can cause inconsistent behavior on subsequent renders. Consider using state instead.
+```
+
+## Algorithm
+
+### Phase 1: Track Context Variables
+Context variables are variables declared in the outer component/hook that are captured by inner functions:
+
+```typescript
+const contextVariables = new Set<IdentifierId>();
+
+// For DeclareContext in the main function, add to tracking
+case 'DeclareContext':
+  if (!isFunctionExpression) {
+    contextVariables.add(value.lvalue.place.identifier.id);
+  }
+  break;
+```
+
+### Phase 2: Detect Reassigning Functions
+The pass tracks which functions contain reassignments to context variables:
+
+```typescript
+const reassigningFunctions = new Map<IdentifierId, Place>();
+
+case 'FunctionExpression':
+case 'ObjectMethod':
+  // Recursively check if the function reassigns context variables
+  let reassignment = getContextReassignment(
+    value.loweredFunc.func,
+    contextVariables,
+    true,  // isFunctionExpression
+    isAsync || value.loweredFunc.func.async
+  );
+
+  // Also check if any captured functions reassign
+  if (reassignment === null) {
+    for (const operand of eachInstructionValueOperand(value)) {
+      const fromOperand = reassigningFunctions.get(operand.identifier.id);
+      if (fromOperand !== undefined) {
+        reassignment = fromOperand;
+        break;
+      }
+    }
+  }
+
+  if (reassignment !== null) {
+    // If async, error immediately
+    if (isAsync || value.loweredFunc.func.async) {
+      throw new CompilerError("Cannot reassign variable in async function");
+    }
+    // Otherwise, track this function as reassigning
+    reassigningFunctions.set(lvalue.identifier.id, reassignment);
+  }
+  break;
+```
+
+### Phase 3: Detect Reassignment in Function Expression
+Within a function expression, a `StoreContext` to a context variable is a reassignment:
+
+```typescript
+case 'StoreContext':
+  if (isFunctionExpression) {
+    if (contextVariables.has(value.lvalue.place.identifier.id)) {
+      return value.lvalue.place;  // Found a reassignment
+    }
+  } else {
+    // In main function, just track the context variable
+    contextVariables.add(value.lvalue.place.identifier.id);
+  }
+  break;
+```
+
+### Phase 4: Propagate Reassignment Through Data Flow
+Reassigning functions flow through local/context stores:
+
+```typescript
+case 'StoreLocal':
+case 'StoreContext':
+  const reassignment = reassigningFunctions.get(value.value.identifier.id);
+  if (reassignment !== undefined) {
+    reassigningFunctions.set(value.lvalue.place.identifier.id, reassignment);
+    reassigningFunctions.set(lvalue.identifier.id, reassignment);
+  }
+  break;
+
+case 'LoadLocal':
+  const reassignment = reassigningFunctions.get(value.place.identifier.id);
+  if (reassignment !== undefined) {
+    reassigningFunctions.set(lvalue.identifier.id, reassignment);
+  }
+  break;
+```
+
+### Phase 5: Check Escape Points
+When a reassigning function is used as an operand with `Effect.Freeze`, it means the function escapes (e.g., passed to a hook, used as a prop):
+
+```typescript
+for (const operand of operands) {
+  const reassignment = reassigningFunctions.get(operand.identifier.id);
+  if (reassignment !== undefined) {
+    if (operand.effect === Effect.Freeze) {
+      // Function escapes - this is an error
+      return reassignment;
+    } else {
+      // Function doesn't escape yet, propagate to lvalues
+      for (const lval of eachInstructionLValue(instr)) {
+        reassigningFunctions.set(lval.identifier.id, reassignment);
+      }
+    }
+  }
+}
+```
+
+### Phase 6: Check Terminal Operands
+Reassigning functions used in terminal operands (like return) also escape:
+
+```typescript
+for (const operand of eachTerminalOperand(block.terminal)) {
+  const reassignment = reassigningFunctions.get(operand.identifier.id);
+  if (reassignment !== undefined) {
+    return reassignment;
+  }
+}
+```
+
+### NoAlias Optimization
+For function calls with `noAlias` signatures, only the callee needs to be checked (not all arguments):
+
+```typescript
+if (value.kind === 'CallExpression') {
+  const signature = getFunctionCallSignature(fn.env, value.callee.identifier.type);
+  if (signature?.noAlias) {
+    operands = [value.callee];  // Only check the callee
+  }
+}
+```
+
+## Edge Cases
+
+### Nested Async Functions
+Async functions are always detected as problematic, regardless of nesting level:
+```javascript
+function Component() {
+  let x = 0;
+  const f = async () => {
+    const g = () => {
+      x = 1;  // Error: in async context
+    };
+  };
+}
+```
+
+### Function Composition
+If a reassigning function is captured by another function, that outer function is also marked as reassigning:
+```javascript
+function Component() {
+  let x = 0;
+  const reassign = () => { x = 1; };
+  const wrapper = () => { reassign(); };
+  useEffect(wrapper);  // Error: wrapper contains reassign
+}
+```
+
+### NoAlias Functions
+Functions with `noAlias` signatures don't let their arguments escape, so passing a reassigning function to them is safe:
+```javascript
+function Component() {
+  let x = 0;
+  const f = () => { x = 1; };
+  console.log(f);  // OK: console.log has noAlias, f doesn't escape
+}
+```
+
+### Direct Effect Usage
+The most common case is passing a reassigning function to useEffect:
+```javascript
+function Component() {
+  let local;
+  const reassign = () => { local = 'new value'; };
+  useEffect(() => { reassign(); }, []);  // Error
+}
+```
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `error.invalid-reassign-local-variable-in-effect.js`
+
+**Input:**
+```javascript
+import {useEffect} from 'react';
+
+function Component() {
+  let local;
+
+  const reassignLocal = newValue => {
+    local = newValue;
+  };
+
+  const onMount = newValue => {
+    reassignLocal('hello');
+
+    if (local === newValue) {
+      // Without React Compiler, `reassignLocal` is freshly created
+      // on each render, capturing a binding to the latest `local`,
+      // such that invoking reassignLocal will reassign the same
+      // binding that we are observing in the if condition, and
+      // we reach this branch
+      console.log('`local` was updated!');
+    } else {
+      // With React Compiler enabled, `reassignLocal` is only created
+      // once, capturing a binding to `local` in that render pass.
+      // Therefore, calling `reassignLocal` will reassign the wrong
+      // version of `local`, and not update the binding we are checking
+      // in the if condition.
+      throw new Error('`local` not updated!');
+    }
+  };
+
+  useEffect(() => {
+    onMount();
+  }, [onMount]);
+
+  return 'ok';
+}
+```
+
+**Error:**
+```
+Error: Cannot reassign variable after render completes
+
+Reassigning `local` after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-reassign-local-variable-in-effect.ts:7:4
+   5 |
+   6 |   const reassignLocal = newValue => {
+>  7 |     local = newValue;
+     |     ^^^^^ Cannot reassign `local` after render completes
+   8 |   };
+   9 |
+  10 |   const onMount = newValue => {
+```
+
+### Fixture: `error.invalid-reassign-local-variable-in-async-callback.js`
+
+**Input:**
+```javascript
+function Component() {
+  let value = null;
+  const reassign = async () => {
+    await foo().then(result => {
+      // Reassigning a local variable in an async function is *always* mutating
+      // after render, so this should error regardless of where this ends up
+      // getting called
+      value = result;
+    });
+  };
+
+  const onClick = async () => {
+    await reassign();
+  };
+  return <div onClick={onClick}>Click</div>;
+}
+```
+
+**Error:**
+```
+Error: Cannot reassign variable in async function
+
+Reassigning a variable in an async function can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-reassign-local-variable-in-async-callback.ts:8:6
+   6 |       // after render, so this should error regardless of where this ends up
+   7 |       // getting called
+>  8 |       value = result;
+     |       ^^^^^ Cannot reassign `value`
+   9 |     });
+  10 |   };
+```
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/44-validateNoSetStateInRender.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/44-validateNoSetStateInRender.md
new file mode 100644
index 00000000000..81009cb17fb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/44-validateNoSetStateInRender.md
@@ -0,0 +1,133 @@
+# validateNoSetStateInRender
+
+## File
+`src/Validation/ValidateNoSetStateInRender.ts`
+
+## Purpose
+Validates that a component does not unconditionally call `setState` during render, which would cause an infinite update loop. This pass is conservative and may miss some cases (false negatives) but avoids false positives.
+
+## Input Invariants
+- Operates on HIRFunction (pre-reactive scope inference)
+- Must run before reactive scope inference
+- Uses `computeUnconditionalBlocks` to determine which blocks always execute
+
+## Validation Rules
+This pass detects two types of violations:
+
+1. **Unconditional setState in render**: Calling `setState` (or a function that transitively calls setState) in a block that always executes during render.
+
+2. **setState inside useMemo**: Calling `setState` inside a `useMemo` callback, which can cause infinite loops when the memo's dependencies change.
+
+### Error Messages
+
+**For unconditional setState in render:**
+```
+Error: Cannot call setState during render
+
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state
+```
+
+**For setState in useMemo:**
+```
+Error: Calling setState from useMemo may trigger an infinite loop
+
+Each time the memo callback is evaluated it will change state. This can cause a memoization dependency to change, running the memo function again and causing an infinite loop. Instead of setting state in useMemo(), prefer deriving the value during render.
+```
+
+## Algorithm
+1. Compute the set of unconditional blocks using post-dominator analysis
+2. Initialize a set `unconditionalSetStateFunctions` to track functions that unconditionally call setState
+3. Traverse all blocks and instructions:
+   - **LoadLocal/StoreLocal**: Propagate setState tracking through variable assignments and loads
+   - **FunctionExpression/ObjectMethod**: Recursively check if the function unconditionally calls setState. If so, add the function's lvalue to the tracking set
+   - **StartMemoize/FinishMemoize**: Track when inside a manual memoization block (useMemo/useCallback)
+   - **CallExpression**: Check if the callee is a setState function or tracked setter:
+     - If inside a memoize block, emit a useMemo-specific error
+     - If in an unconditional block, emit a render-time setState error
+
+### Key Helper: `computeUnconditionalBlocks`
+Uses post-dominator tree analysis to find blocks that always execute when the function runs. The analysis ignores throw statements since hooks only need consistent ordering for normal execution paths.
+
+## Edge Cases
+
+### Conditional setState is allowed
+```javascript
+// This is valid - setState is conditional
+if (someCondition) {
+  setState(newValue);
+}
+```
+
+### Transitive detection through functions
+```javascript
+// Detected - setTrue unconditionally calls setState
+const setTrue = () => setState(true);
+setTrue(); // Error here
+```
+
+### False negative: setState in data structures
+```javascript
+// NOT detected - setState stored in array then extracted
+const [state, setState] = useState(false);
+const x = [setState];
+const y = x.pop();
+y(); // No error, but will cause infinite loop
+```
+
+### Feature flag: enableUseKeyedState
+When enabled, the error message suggests using `useKeyedState(initialState, key)` as an alternative pattern for resetting state when dependencies change.
+
+## TODOs
+None in source code.
+
+## Example
+
+### Fixture: `error.invalid-unconditional-set-state-in-render.js`
+
+**Input:**
+```javascript
+// @validateNoSetStateInRender
+function Component(props) {
+  const [x, setX] = useState(0);
+  const aliased = setX;
+
+  setX(1);
+  aliased(2);
+
+  return x;
+}
+```
+
+**Error:**
+```
+Found 2 errors:
+
+Error: Cannot call setState during render
+
+Calling setState during render may trigger an infinite loop.
+* To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders
+* To derive data from other state/props, compute the derived data during render without using state.
+
+error.invalid-unconditional-set-state-in-render.ts:6:2
+  4 |   const aliased = setX;
+  5 |
+> 6 |   setX(1);
+    |   ^^^^ Found setState() in render
+  7 |   aliased(2);
+  8 |
+  9 |   return x;
+
+Error: Cannot call setState during render
+
+...
+
+error.invalid-unconditional-set-state-in-render.ts:7:2
+   5 |
+   6 |   setX(1);
+>  7 |   aliased(2);
+     |   ^^^^^^^ Found setState() in render
+```
+
+**Why it fails:** Both `setX(1)` and `aliased(2)` are unconditionally called during render. The pass tracks that `aliased` is assigned from `setX`, so calling `aliased()` is also detected as a setState call.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/45-validateNoDerivedComputationsInEffects.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/45-validateNoDerivedComputationsInEffects.md
new file mode 100644
index 00000000000..467a1a21480
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/45-validateNoDerivedComputationsInEffects.md
@@ -0,0 +1,141 @@
+# validateNoDerivedComputationsInEffects
+
+## File
+`src/Validation/ValidateNoDerivedComputationsInEffects.ts`
+
+## Purpose
+Validates that `useEffect` is not used for derived computations that could and should be performed during render. This catches a common anti-pattern where developers use effects to synchronize derived state, which causes unnecessary re-renders and complexity.
+
+See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state
+
+## Input Invariants
+- Operates on HIRFunction (pre-reactive scope inference)
+- Effect hooks must be identified (`isUseEffectHookType`)
+- setState functions must be identified (`isSetStateType`)
+
+## Validation Rules
+The pass detects when an effect:
+1. Has a dependency array (2nd argument)
+2. The effect function only captures the dependencies and setState functions
+3. The effect calls setState with a value derived solely from the dependencies
+4. The effect has no control flow (loops with back edges)
+
+When detected, it produces:
+```
+Error: 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)
+```
+
+## Algorithm
+1. **Collection Phase**: Traverse all instructions to collect:
+   - `candidateDependencies`: Map of ArrayExpression identifiers (potential deps arrays)
+   - `functions`: Map of FunctionExpression identifiers (potential effect callbacks)
+   - `locals`: Map of LoadLocal sources for identifier resolution
+
+2. **Detection Phase**: When a `useEffect` call is found with 2 arguments:
+   - Look up the effect function and dependencies array
+   - Verify all dependency array elements are identifiers
+   - Call `validateEffect()` on the effect function
+
+3. **Effect Validation** (`validateEffect`):
+   - Check that the effect only captures dependencies or setState functions
+   - Check that all dependencies are actually used in the effect
+   - Skip if any block has a back edge (loop)
+   - Track data flow through instructions:
+     - `LoadLocal`: Propagate dependency tracking
+     - `PropertyLoad`, `BinaryExpression`, `TemplateLiteral`, `CallExpression`, `MethodCall`: Aggregate dependencies from operands
+   - When `setState` is called with a single argument that depends on ALL effect dependencies, record the location
+   - If any dependency is used in a terminal operand (control flow), abort validation
+   - Push errors for all recorded setState locations
+
+### Value Tracking
+The pass maintains a `values` map from `IdentifierId` to `Array<IdentifierId>` tracking which effect dependencies each value derives from. When setState is called, if the argument derives from all dependencies, it's flagged as a derived computation.
+
+## Edge Cases
+
+### Allowed: Effects with side effects
+```javascript
+// Valid - effect captures external values, not just deps
+useEffect(() => {
+  logToServer(firstName);
+  setFullName(firstName);
+}, [firstName]);
+```
+
+### Allowed: Effects with loops
+```javascript
+// Valid - has control flow, not a simple derivation
+useEffect(() => {
+  let result = '';
+  for (const item of items) {
+    result += item;
+  }
+  setResult(result);
+}, [items]);
+```
+
+### Allowed: Effects with conditional setState
+```javascript
+// Valid - setState is conditional on control flow
+useEffect(() => {
+  if (condition) {
+    setFullName(firstName + lastName);
+  }
+}, [firstName, lastName]);
+```
+
+### Not detected: Subset of dependencies
+```javascript
+// Not flagged - only uses firstName, not lastName
+useEffect(() => {
+  setResult(firstName);
+}, [firstName, lastName]);
+```
+
+## TODOs
+None in source code.
+
+## Example
+
+### Fixture: `error.invalid-derived-computation-in-effect.js`
+
+**Input:**
+```javascript
+// @validateNoDerivedComputationsInEffects
+import {useEffect, useState} from 'react';
+
+function BadExample() {
+  const [firstName, setFirstName] = useState('Taylor');
+  const [lastName, setLastName] = useState('Swift');
+
+  // Avoid: redundant state and unnecessary Effect
+  const [fullName, setFullName] = useState('');
+  useEffect(() => {
+    setFullName(firstName + ' ' + lastName);
+  }, [firstName, lastName]);
+
+  return <div>{fullName}</div>;
+}
+```
+
+**Error:**
+```
+Found 1 error:
+
+Error: 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)
+
+error.invalid-derived-computation-in-effect.ts:11:4
+   9 |   const [fullName, setFullName] = useState('');
+  10 |   useEffect(() => {
+> 11 |     setFullName(firstName + ' ' + lastName);
+     |     ^^^^^^^^^^^ Values derived from props and state should be calculated during render, not in an effect.
+  12 |   }, [firstName, lastName]);
+  13 |
+  14 |   return <div>{fullName}</div>;
+```
+
+**Why it fails:** The effect computes `fullName` purely from `firstName` and `lastName` (the dependencies) and then sets state. This is a derived computation that should be calculated during render:
+
+```javascript
+// Correct approach
+const fullName = firstName + ' ' + lastName;
+```
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/46-validateNoSetStateInEffects.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/46-validateNoSetStateInEffects.md
new file mode 100644
index 00000000000..2772aeb238b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/46-validateNoSetStateInEffects.md
@@ -0,0 +1,150 @@
+# validateNoSetStateInEffects
+
+## File
+`src/Validation/ValidateNoSetStateInEffects.ts`
+
+## Purpose
+Validates against calling `setState` synchronously in the body of an effect (`useEffect`, `useLayoutEffect`, `useInsertionEffect`), while allowing `setState` in callbacks scheduled by the effect. Synchronous setState in effects triggers cascading re-renders which hurts performance.
+
+See: https://react.dev/learn/you-might-not-need-an-effect
+
+## Input Invariants
+- Operates on HIRFunction (pre-reactive scope inference)
+- Effect hooks must be identified (`isUseEffectHookType`, `isUseLayoutEffectHookType`, `isUseInsertionEffectHookType`)
+- setState functions must be identified (`isSetStateType`)
+- Only runs when `outputMode === 'lint'`
+
+## Validation Rules
+This pass detects synchronous setState calls within effect bodies:
+
+**Standard error message:**
+```
+Error: Calling setState synchronously within an effect can trigger cascading renders
+
+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:
+* Update external systems with the latest state from React.
+* Subscribe for updates from some external system, calling setState in a callback function when external state changes.
+
+Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended.
+```
+
+**Verbose error message** (when `enableVerboseNoSetStateInEffect` is enabled):
+Provides more detailed guidance about specific anti-patterns like non-local derived data, derived event patterns, and force update patterns.
+
+## Algorithm
+1. **Main function traversal**: Build a map `setStateFunctions` tracking which identifiers are setState functions
+2. For each instruction:
+   - **LoadLocal/StoreLocal**: Propagate setState tracking through variable assignments
+   - **FunctionExpression**: Check if the function synchronously calls setState by recursively calling `getSetStateCall()`. If so, track the function as a setState-calling function
+   - **useEffectEvent call**: If the argument is a function that calls setState, track the return value as a setState function
+   - **useEffect/useLayoutEffect/useInsertionEffect call**: Check if the callback argument is tracked as calling setState. If so, emit an error
+
+3. **`getSetStateCall()` helper**: Recursively analyzes a function to find synchronous setState calls:
+   - Tracks ref-derived values when `enableAllowSetStateFromRefsInEffects` is enabled
+   - Propagates setState tracking through local variables
+   - Returns the Place of the setState call if found, null otherwise
+
+### Ref-derived setState exception
+When `enableAllowSetStateFromRefsInEffects` is enabled, the pass allows setState calls where:
+- The value being set is derived from a ref (`useRef` or `ref.current`)
+- The block containing setState is controlled by a ref-dependent condition
+
+This allows patterns like storing initial layout measurements from refs in state.
+
+## Edge Cases
+
+### Allowed: setState in callbacks
+```javascript
+// Valid - setState in event callback, not synchronous
+useEffect(() => {
+  const handler = () => {
+    setState(newValue);
+  };
+  window.addEventListener('resize', handler);
+  return () => window.removeEventListener('resize', handler);
+}, []);
+```
+
+### Transitive detection
+```javascript
+// Detected - transitive through function calls
+const f = () => setState(value);
+const g = () => f();
+useEffect(() => {
+  g(); // Error: calls setState transitively
+});
+```
+
+### useEffectEvent tracking
+```javascript
+// Detected - useEffectEvent that calls setState is tracked
+const handler = useEffectEvent(() => {
+  setState(value);
+});
+useEffect(() => {
+  handler(); // Error: handler calls setState
+});
+```
+
+### Allowed: Ref-derived state (with flag)
+```javascript
+// Valid when enableAllowSetStateFromRefsInEffects is true
+const ref = useRef(null);
+useEffect(() => {
+  const width = ref.current.offsetWidth;
+  setWidth(width); // Allowed - derived from ref
+}, []);
+```
+
+## TODOs
+From the source code:
+```typescript
+/*
+ * TODO: once we support multiple locations per error, we should link to the
+ * original Place in the case that setStateFunction.has(callee)
+ */
+```
+
+## Example
+
+### Fixture: `invalid-setState-in-useEffect-transitive.js`
+
+**Input:**
+```javascript
+// @loggerTestOnly @validateNoSetStateInEffects @outputMode:"lint"
+import {useEffect, useState} from 'react';
+
+function Component() {
+  const [state, setState] = useState(0);
+  const f = () => {
+    setState(s => s + 1);
+  };
+  const g = () => {
+    f();
+  };
+  useEffect(() => {
+    g();
+  });
+  return state;
+}
+```
+
+**Error:**
+```
+Error: Calling setState synchronously within an effect can trigger cascading renders
+
+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:
+* Update external systems with the latest state from React.
+* Subscribe for updates from some external system, calling setState in a callback function when external state changes.
+
+Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended.
+
+invalid-setState-in-useEffect-transitive.ts:13:4
+  11 |   };
+  12 |   useEffect(() => {
+> 13 |     g();
+     |     ^ Avoid calling setState() directly within an effect
+  14 |   });
+```
+
+**Why it fails:** Even though `setState` is not called directly in the effect, the pass traces through `g()` -> `f()` -> `setState()` and detects that the effect synchronously triggers a state update.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/47-validateNoJSXInTryStatement.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/47-validateNoJSXInTryStatement.md
new file mode 100644
index 00000000000..f23c343dfbf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/47-validateNoJSXInTryStatement.md
@@ -0,0 +1,167 @@
+# validateNoJSXInTryStatement
+
+## File
+`src/Validation/ValidateNoJSXInTryStatement.ts`
+
+## Purpose
+Validates that JSX is not created within a try block. Developers may incorrectly assume that wrapping JSX in try/catch will catch rendering errors, but React does not immediately render components when JSX is created - JSX is just a description of UI that will be rendered later. Error boundaries should be used instead.
+
+See: https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
+
+## Input Invariants
+- Operates on HIRFunction (pre-reactive scope inference)
+- Blocks are traversed in order
+- Only runs when `outputMode === 'lint'`
+
+## Validation Rules
+The pass errors when `JsxExpression` or `JsxFragment` instructions are found within a try block.
+
+**Error message:**
+```
+Error: Avoid constructing JSX within try/catch
+
+React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary.
+```
+
+### Important distinction
+- JSX in a **try block**: Error
+- JSX in a **catch block** (not nested in outer try): Allowed
+- JSX in a **catch block** (nested in outer try): Error
+
+## Algorithm
+1. Maintain a stack `activeTryBlocks` of currently active try statement handler block IDs
+2. For each block:
+   - Remove the current block from `activeTryBlocks` if it matches a handler (we've exited the try scope)
+   - If `activeTryBlocks` is not empty (we're inside a try block):
+     - Check each instruction for `JsxExpression` or `JsxFragment`
+     - If found, push an error
+   - If the block's terminal is a `try` terminal, push its handler block ID to `activeTryBlocks`
+
+### Block tracking with `retainWhere`
+The `retainWhere` utility is used to remove the current block from `activeTryBlocks` at the start of each block. When we reach a catch handler block, it gets removed from the active list, allowing JSX in catch blocks (unless there's an outer try).
+
+## Edge Cases
+
+### Allowed: JSX in catch (no outer try)
+```javascript
+// Valid - catch block is not inside a try
+function Component() {
+  try {
+    doSomething();
+  } catch {
+    return <ErrorMessage />; // OK
+  }
+}
+```
+
+### Error: JSX in catch with outer try
+```javascript
+// Error - catch is inside outer try
+function Component() {
+  try {
+    try {
+      doSomething();
+    } catch {
+      return <ErrorMessage />; // Error!
+    }
+  } catch {
+    return null;
+  }
+}
+```
+
+### Error: JSX assigned in try
+```javascript
+// Error - JSX creation is in try block
+function Component() {
+  let el;
+  try {
+    el = <div />; // Error here
+  } catch {
+    return null;
+  }
+  return el;
+}
+```
+
+### Finally blocks
+The validation currently has TODOs for handling try/catch/finally properly. Files like `error.todo-invalid-jsx-in-try-with-finally.js` indicate these are known unsupported cases.
+
+## TODOs
+Based on fixture naming patterns:
+- `error.todo-invalid-jsx-in-try-with-finally.js` - Try blocks with finally clauses
+- `error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.js` - Nested try/catch in try with finally
+
+## Example
+
+### Fixture: `invalid-jsx-in-try-with-catch.js`
+
+**Input:**
+```javascript
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
+function Component(props) {
+  let el;
+  try {
+    el = <div />;
+  } catch {
+    return null;
+  }
+  return el;
+}
+```
+
+**Error:**
+```
+Error: Avoid constructing JSX within try/catch
+
+React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary.
+
+invalid-jsx-in-try-with-catch.ts:5:9
+  3 |   let el;
+  4 |   try {
+> 5 |     el = <div />;
+    |          ^^^^^^^ Avoid constructing JSX within try/catch
+  6 |   } catch {
+  7 |     return null;
+  8 |   }
+```
+
+**Why it fails:** The `<div />` JSX element is created inside a try block. If the developer expects this to catch errors from rendering the div, they will be surprised - the try/catch will only catch errors from creating the JSX object (which is rare), not from React actually rendering it later. The correct approach is to use an error boundary component to catch rendering errors.
+
+### Fixture: `invalid-jsx-in-catch-in-outer-try-with-catch.js`
+
+**Input:**
+```javascript
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  let el;
+  try {
+    let value;
+    try {
+      value = identity(props.foo);
+    } catch {
+      el = <div value={value} />;
+    }
+  } catch {
+    return null;
+  }
+  return el;
+}
+```
+
+**Error:**
+```
+Error: Avoid constructing JSX within try/catch
+
+...
+
+invalid-jsx-in-catch-in-outer-try-with-catch.ts:11:11
+   9 |       value = identity(props.foo);
+  10 |     } catch {
+> 11 |       el = <div value={value} />;
+     |            ^^^^^^^^^^^^^^^^^^^^^ Avoid constructing JSX within try/catch
+```
+
+**Why it fails:** Even though the JSX is in a catch block, that catch block is itself inside an outer try block. The outer try's catch won't catch rendering errors from the JSX any more than the inner try would.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/48-validateNoImpureValuesInRender.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/48-validateNoImpureValuesInRender.md
new file mode 100644
index 00000000000..af4216313ff
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/48-validateNoImpureValuesInRender.md
@@ -0,0 +1,180 @@
+# validateNoImpureValuesInRender
+
+## File
+`src/Validation/ValidateNoImpureValuesInRender.ts`
+
+## Purpose
+This validation pass ensures that impure values (values derived from non-deterministic function calls) are not used in render output. Impure values can produce unstable results that update unpredictably when the component re-renders, violating React's requirement that components be pure and idempotent.
+
+The pass tracks values produced by impure functions (like `Date.now()`, `Math.random()`, `performance.now()`) and errors if those values flow into JSX props, component return values, or other render-time contexts.
+
+## Input Invariants
+- The function has been through effect inference
+- Aliasing effects have been computed on instructions
+- `Impure` effects mark values from non-deterministic sources
+- `Render` effects mark values used in render context
+
+## Validation Rules
+The pass produces errors when:
+
+1. **Impure value in render context**: A value marked with an `Impure` effect flows into a position marked with a `Render` effect
+2. **Impure function returns in render**: A function that returns an impure value is called during render
+
+Error messages produced:
+- Category: `ImpureValues`
+- Reason: "Cannot access impure value during render"
+- Description: "Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render."
+
+The error points to two locations:
+1. Where the impure value is used in render (e.g., as a JSX prop)
+2. Where the impure value originates (e.g., the `Date.now()` call)
+
+## Algorithm
+
+### Phase 1: Infer Impure Values
+The pass iterates over all instructions to build a map of which identifiers contain impure values:
+
+```typescript
+function inferImpureValues(
+  fn: HIRFunction,
+  impure: Map<IdentifierId, ImpureEffect>,
+  impureFunctions: Map<IdentifierId, ImpuritySignature>,
+  cache: FunctionCache,
+): ImpuritySignature
+```
+
+The algorithm uses a fixed-point iteration that propagates impurity through data flow:
+
+1. **Process phi nodes**: If any operand of a phi is impure, the phi result is impure
+2. **Process effects**: For each instruction's effects:
+   - `Impure` effect: Mark the destination identifier as impure
+   - `Alias/Assign/Capture/CreateFrom/ImmutableCapture`: Propagate impurity from source to destination
+   - `CreateFunction`: Recursively analyze function expressions
+   - `Apply`: When calling a function with an impurity signature, propagate impurity to call results
+
+3. **Control flow sensitivity**: The pass also considers control-flow dominators to detect impure values that flow through conditional branches
+
+### Phase 2: Validate Render Effects
+After impurity inference converges, the pass validates all `Render` effects:
+
+```typescript
+function validateRenderEffect(effect: RenderEffect): void {
+  const impureEffect = impure.get(effect.place.identifier.id);
+  if (impureEffect != null) {
+    // Emit error
+  }
+}
+```
+
+### Special Cases
+- Values stored in refs (`isUseRefType`) are allowed to be impure since refs are not rendered
+- JSX elements are excluded from impurity propagation (`isJsxType`)
+
+## Edge Cases
+
+### Impure Values Through Helper Functions
+If a helper function returns an impure value and is called during render, both the call site and the original impure source are reported:
+
+```javascript
+function Component() {
+  const now = () => Date.now();  // Source of impurity
+  const render = () => {
+    return <div>{now()}</div>;   // Error: impure value in render
+  };
+  return <div>{render()}</div>;  // Error: impure value in render
+}
+```
+
+### Indirect Impurity Through Mutation
+When an impure value is captured into another value through mutation, the destination becomes impure:
+
+```javascript
+function Component() {
+  const obj = {};
+  obj.time = Date.now();  // obj becomes impure
+  return <Foo obj={obj} />;  // Error
+}
+```
+
+### Phi Node Propagation
+Impurity propagates through control flow merges:
+
+```javascript
+function Component({cond}) {
+  let x;
+  if (cond) {
+    x = Date.now();  // Impure path
+  } else {
+    x = 0;           // Pure path
+  }
+  return <Foo x={x} />;  // Error: x may be impure
+}
+```
+
+## TODOs
+From the source file:
+
+```typescript
+/**
+ * TODO: consider propagating impurity for assignments/mutations that
+ * are controlled by an impure value.
+ *
+ * Example: This should error since we know the semantics of array.push,
+ * it's a definite Mutate and definite Capture, not maybemutate+maybecapture:
+ *
+ * let x = [];
+ * if (Date.now() < START_DATE) {
+ *   x.push(1);
+ * }
+ * return <Foo x={x} />
+ */
+```
+
+## Example
+
+### Fixture: `error.invalid-impure-functions-in-render.js`
+
+**Input:**
+```javascript
+// @validateNoImpureFunctionsInRender
+
+function Component() {
+  const date = Date.now();
+  const now = performance.now();
+  const rand = Math.random();
+  return <Foo date={date} now={now} rand={rand} />;
+}
+```
+
+**Error:**
+```
+Found 3 errors:
+
+Error: Cannot access impure value during render
+
+Calling an impure function can produce unstable results that update unpredictably
+when the component happens to re-render.
+(https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+
+error.invalid-impure-functions-in-render.ts:7:20
+  5 |   const now = performance.now();
+  6 |   const rand = Math.random();
+> 7 |   return <Foo date={date} now={now} rand={rand} />;
+    |                     ^^^^ Cannot access impure value during render
+  8 | }
+
+error.invalid-impure-functions-in-render.ts:4:15
+  2 |
+  3 | function Component() {
+> 4 |   const date = Date.now();
+    |                ^^^^^^^^^^ `Date.now` is an impure function.
+  5 |   const now = performance.now();
+
+Error: Cannot access impure value during render
+...
+```
+
+Key observations:
+- Each impure function call (`Date.now`, `performance.now`, `Math.random`) produces a separate error
+- The error shows both the usage location (in JSX) and the source location (the impure call)
+- The pass is enabled via the `@validateNoImpureFunctionsInRender` pragma
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/49-validateNoRefAccessInRender.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/49-validateNoRefAccessInRender.md
new file mode 100644
index 00000000000..680f096937f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/49-validateNoRefAccessInRender.md
@@ -0,0 +1,268 @@
+# validateNoRefAccessInRender
+
+## File
+`src/Validation/ValidateNoRefAccessInRender.ts`
+
+## Purpose
+This validation pass ensures that React refs are not mutated during render. Refs are mutable containers for values that are not needed for rendering. Accessing or mutating `ref.current` during render can cause components to not update as expected because React does not track ref mutations.
+
+The pass validates both direct ref mutations at the component level and ref mutations inside functions that are called during render.
+
+## Input Invariants
+- The function has been through type inference
+- Ref types are properly identified (`useRef` return values)
+- Function expressions have been lowered
+
+## Validation Rules
+The pass produces errors for:
+
+1. **Direct ref mutation in render**: Assigning to `ref.current` at the top level of a component
+2. **Ref mutation in render helper**: Mutating a ref inside a function that is called during render
+3. **Duplicate ref initialization**: Initializing a ref more than once within null-guard blocks
+
+**Exception - Null-guard initialization pattern**: The pass allows a single initialization of `ref.current` inside an `if (ref.current == null)` block. This is a common pattern for lazy initialization:
+
+```javascript
+// ALLOWED - null-guard initialization
+if (ref.current == null) {
+  ref.current = expensiveComputation();
+}
+```
+
+Error messages produced:
+- Category: `Refs`
+- Reason: "Cannot access refs during render"
+- Messages:
+  - "Cannot update ref during render"
+  - "Ref is initialized more than once during render"
+  - "Ref was first initialized here" (for duplicate initialization)
+
+## Algorithm
+
+### Phase 1: Initialize Ref Tracking
+Track refs from function parameters and context (captured variables):
+
+```typescript
+for (const param of fn.params) {
+  if (isUseRefType(place.identifier)) {
+    refs.set(place.identifier.id, {kind: 'Ref', refId: makeRefId()});
+  }
+}
+```
+
+### Phase 2: Single Forward Pass
+Process all blocks in order, tracking:
+- `refs`: Map of identifier IDs to ref information
+- `nullables`: Set of identifiers known to be null/undefined
+- `guards`: Map of comparison results (e.g., `ref.current == null`)
+- `safeBlocks`: Map of blocks where null-guard allows initialization
+- `refMutatingFunctions`: Map of function identifiers that mutate refs
+
+### Phase 3: Process Instructions
+For each instruction, handle:
+
+```typescript
+switch (value.kind) {
+  case 'PropertyLoad': {
+    // Track ref.current access
+    if (objRef?.kind === 'Ref' && value.property === 'current') {
+      refs.set(lvalue.identifier.id, {kind: 'RefValue', refId: objRef.refId});
+    }
+    break;
+  }
+  case 'PropertyStore': {
+    // Check for ref mutation
+    if (isRef && isCurrentProperty && !isNullGuardInit) {
+      if (isTopLevel) {
+        errors.pushDiagnostic(makeRefMutationError(instr.loc));
+      }
+      return mutation;
+    }
+    break;
+  }
+  case 'FunctionExpression': {
+    // Recursively validate with isTopLevel=false
+    const mutation = validateFunction(..., false, errors);
+    if (mutation != null) {
+      refMutatingFunctions.set(lvalue.identifier.id, mutation);
+    }
+    break;
+  }
+  case 'CallExpression': {
+    // Check if calling a ref-mutating function
+    if (refMutatingFunctions.has(callee.identifier.id) && isTopLevel) {
+      errors.pushDiagnostic(makeRefMutationError(mutationInfo.loc));
+    }
+    break;
+  }
+}
+```
+
+### Phase 4: Guard Detection and Propagation
+When encountering an `if` terminal with a null-guard condition:
+
+```typescript
+if (block.terminal.kind === 'if') {
+  const guard = guards.get(block.terminal.test.identifier.id);
+  if (guard != null) {
+    // For equality checks (==, ===), consequent is safe
+    // For inequality checks (!=, !==), alternate is safe
+    const safeBlock = guard.isEquality
+      ? block.terminal.consequent
+      : block.terminal.alternate;
+    // Propagate safety through control flow
+  }
+}
+```
+
+## Edge Cases
+
+### Null-Guard Initialization Pattern (Allowed)
+```javascript
+function Component() {
+  const ref = useRef(null);
+  if (ref.current == null) {
+    ref.current = computeValue();  // OK - first initialization
+  }
+  return <div />;
+}
+```
+
+### Duplicate Initialization (Error)
+```javascript
+function Component() {
+  const ref = useRef(null);
+  if (ref.current == null) {
+    ref.current = value1;  // First init - tracked
+  }
+  if (ref.current == null) {
+    ref.current = value2;  // Error: duplicate initialization
+  }
+}
+```
+
+### Negated Null Check
+The pass correctly handles negated null checks:
+```javascript
+if (ref.current !== null) {
+  // NOT safe for initialization
+} else {
+  // Safe for initialization (ref.current is null here)
+}
+```
+
+### Ref Mutation in Called Function
+```javascript
+function Component(props) {
+  const ref = useRef(null);
+  const renderItem = item => {
+    ref.current = item;  // Mutation tracked in function
+    return <Item item={item} />;
+  };
+  // Error: calling function that mutates ref during render
+  return <List>{props.items.map(renderItem)}</List>;
+}
+```
+
+### Ref Mutation in Event Handler (Allowed)
+```javascript
+function Component() {
+  const ref = useRef(null);
+  const onClick = () => {
+    ref.current = value;  // OK - not called during render
+  };
+  return <button onClick={onClick} />;  // onClick is passed, not called
+}
+```
+
+### Arbitrary Comparison Values (Error)
+Only `null` or `undefined` comparisons are recognized as null guards:
+```javascript
+const DEFAULT_VALUE = 1;
+if (ref.current == DEFAULT_VALUE) {
+  ref.current = 1;  // Error: not a null guard
+}
+```
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `error.invalid-disallow-mutating-ref-in-render.js`
+
+**Input:**
+```javascript
+// @validateRefAccessDuringRender
+function Component() {
+  const ref = useRef(null);
+  ref.current = false;
+
+  return <button ref={ref} />;
+}
+```
+
+**Error:**
+```
+Found 1 error:
+
+Error: Cannot access refs during render
+
+React refs are values that are not needed for rendering. Refs should only be
+accessed outside of render, such as in event handlers or effects. Accessing a
+ref value (the `current` property) during render can cause your component not
+to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-disallow-mutating-ref-in-render.ts:4:2
+  2 | function Component() {
+  3 |   const ref = useRef(null);
+> 4 |   ref.current = false;
+    |   ^^^^^^^^^^^ Cannot update ref during render
+  5 |
+  6 |   return <button ref={ref} />;
+  7 | }
+```
+
+### Fixture: `error.invalid-ref-in-callback-invoked-during-render.js`
+
+**Input:**
+```javascript
+// @validateRefAccessDuringRender
+function Component(props) {
+  const ref = useRef(null);
+  const renderItem = item => {
+    const current = ref.current;
+    return <Foo item={item} current={current} />;
+  };
+  return <Items>{props.items.map(item => renderItem(item))}</Items>;
+}
+```
+
+**Error:**
+```
+Found 1 error:
+
+Error: Cannot access ref value during render
+
+React refs are values that are not needed for rendering...
+
+error.invalid-ref-in-callback-invoked-during-render.ts:6:37
+  4 |   const renderItem = item => {
+  5 |     const current = ref.current;
+> 6 |     return <Foo item={item} current={current} />;
+    |                                      ^^^^^^^ Ref value is used during render
+  7 |   };
+  8 |   return <Items>{props.items.map(item => renderItem(item))}</Items>;
+
+error.invalid-ref-in-callback-invoked-during-render.ts:5:20
+  3 |   const ref = useRef(null);
+  4 |   const renderItem = item => {
+> 5 |     const current = ref.current;
+    |                     ^^^^^^^^^^^ Ref is initially accessed
+```
+
+Key observations:
+- Direct mutation at render level is an immediate error
+- Functions that mutate refs are tracked; errors occur when those functions are called at render level
+- The null-guard pattern allows a single initialization
+- The pass distinguishes between refs (`useRef` return type) and ref values (`.current` property)
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/50-validateNoFreezingKnownMutableFunctions.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/50-validateNoFreezingKnownMutableFunctions.md
new file mode 100644
index 00000000000..32f69e39ee3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/50-validateNoFreezingKnownMutableFunctions.md
@@ -0,0 +1,285 @@
+# validateNoFreezingKnownMutableFunctions
+
+## File
+`src/Validation/ValidateNoFreezingKnownMutableFunctions.ts`
+
+## Purpose
+This validation pass ensures that functions with known mutations (functions that mutate captured local variables) are not passed where a frozen value is expected. Frozen contexts include JSX props, hook arguments, and return values from hooks.
+
+The key insight is that a function which mutates captured variables is effectively a mutable value itself. Unlike a mutable array (which a receiver can choose not to mutate), there is no way for the receiver of a function to prevent the mutation from happening when the function is called. Therefore, passing such functions to props or hooks violates React's expectation that rendered values are immutable.
+
+## Input Invariants
+- The function has been through aliasing effect inference
+- `aliasingEffects` on FunctionExpression values have been computed
+- `Mutate` and `MutateTransitive` effects identify definite mutations to captured variables
+
+## Validation Rules
+The pass produces errors when:
+
+1. **Mutable function passed as JSX prop**: A function that mutates a captured variable is passed as a prop to a JSX element
+2. **Mutable function passed to hook**: A function that mutates a captured variable is passed as an argument to a hook
+3. **Mutable function returned from hook**: A function that mutates a captured variable is returned from a hook
+
+**Exception - Ref mutations**: Functions that mutate refs (`isRefOrRefLikeMutableType`) are allowed, since refs are mutable by design and not tracked for rendering purposes.
+
+Error messages produced:
+- Category: `Immutability`
+- Reason: "Cannot modify local variables after render completes"
+- Description: "This argument is a function which may reassign or mutate [variable] after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead"
+- Messages:
+  - "This function may (indirectly) reassign or modify [variable] after render"
+  - "This modifies [variable]"
+
+## Algorithm
+
+### Phase 1: Track Context Mutation Effects
+The pass maintains a map from identifier IDs to their associated mutation effects:
+
+```typescript
+const contextMutationEffects: Map<
+  IdentifierId,
+  Extract<AliasingEffect, {kind: 'Mutate'} | {kind: 'MutateTransitive'}>
+> = new Map();
+```
+
+### Phase 2: Single Forward Pass
+Process all blocks in order, handling specific instruction types:
+
+```typescript
+for (const block of fn.body.blocks.values()) {
+  for (const instr of block.instructions) {
+    switch (value.kind) {
+      case 'LoadLocal': {
+        // Propagate mutation effect from source to loaded value
+        const effect = contextMutationEffects.get(value.place.identifier.id);
+        if (effect != null) {
+          contextMutationEffects.set(lvalue.identifier.id, effect);
+        }
+        break;
+      }
+      case 'StoreLocal': {
+        // Propagate mutation effect to both lvalue and stored variable
+        const effect = contextMutationEffects.get(value.value.identifier.id);
+        if (effect != null) {
+          contextMutationEffects.set(lvalue.identifier.id, effect);
+          contextMutationEffects.set(value.lvalue.place.identifier.id, effect);
+        }
+        break;
+      }
+      case 'FunctionExpression': {
+        // Check function's aliasing effects for context mutations
+        if (value.loweredFunc.func.aliasingEffects != null) {
+          const context = new Set(
+            value.loweredFunc.func.context.map(p => p.identifier.id)
+          );
+          for (const effect of value.loweredFunc.func.aliasingEffects) {
+            if (effect.kind === 'Mutate' || effect.kind === 'MutateTransitive') {
+              // Mark function as mutable if it mutates a context variable
+              if (context.has(effect.value.identifier.id) &&
+                  !isRefOrRefLikeMutableType(effect.value.identifier.type)) {
+                contextMutationEffects.set(lvalue.identifier.id, effect);
+              }
+            }
+          }
+        }
+        break;
+      }
+      default: {
+        // Check all operands for freeze effect violations
+        for (const operand of eachInstructionValueOperand(value)) {
+          visitOperand(operand);  // Check if mutable function is being frozen
+        }
+      }
+    }
+  }
+}
+```
+
+### Phase 3: Validate Freeze Effects
+When an operand has a `Freeze` effect, check if it's a known mutable function:
+
+```typescript
+function visitOperand(operand: Place): void {
+  if (operand.effect === Effect.Freeze) {
+    const effect = contextMutationEffects.get(operand.identifier.id);
+    if (effect != null) {
+      // Emit error with both usage location and mutation location
+      errors.pushDiagnostic(
+        CompilerDiagnostic.create({
+          category: ErrorCategory.Immutability,
+          reason: 'Cannot modify local variables after render completes',
+          description: `This argument is a function which may reassign or mutate ${variable} after render...`,
+        })
+        .withDetails({loc: operand.loc, message: 'This function may...'})
+        .withDetails({loc: effect.value.loc, message: 'This modifies...'})
+      );
+    }
+  }
+}
+```
+
+## Edge Cases
+
+### Function Passed as JSX Prop (Error)
+```javascript
+function Component() {
+  const cache = new Map();
+  const fn = () => {
+    cache.set('key', 'value');  // Mutates captured variable
+  };
+  return <Foo fn={fn} />;  // Error: fn is frozen but mutates cache
+}
+```
+
+### Function Passed to Hook (Error)
+```javascript
+function useFoo() {
+  const cache = new Map();
+  useHook(() => {
+    cache.set('key', 'value');  // Error: function mutates cache
+  });
+}
+```
+
+### Function Returned from Hook (Error)
+```javascript
+function useFoo() {
+  useHook();  // For hook inference
+  const cache = new Map();
+  return () => {
+    cache.set('key', 'value');  // Error: returned function mutates cache
+  };
+}
+```
+
+### Ref Mutation (Allowed)
+```javascript
+function Component() {
+  const ref = useRef(null);
+  const fn = () => {
+    ref.current = value;  // OK: refs are mutable by design
+  };
+  return <Foo fn={fn} />;  // Allowed
+}
+```
+
+### Conditional Mutations
+The pass only errors on definite mutations (`Mutate`, `MutateTransitive`), not conditional mutations (`MutateConditionally`, `MutateTransitiveConditionally`). However, if a function already has a known mutation effect, conditional mutations will propagate that effect:
+
+```javascript
+function Component(cond) {
+  const cache = new Map();
+  const fn = () => {
+    cache.set('a', 1);  // Definite mutation
+  };
+  const fn2 = fn;  // fn2 inherits mutation effect
+  return <Foo fn={fn2} />;  // Error
+}
+```
+
+### Nested Function Expressions
+Mutation effects propagate through assignments:
+
+```javascript
+function Component() {
+  const cache = new Map();
+  const inner = () => cache.set('key', 'value');
+  const outer = inner;  // outer inherits mutation effect
+  return <Foo fn={outer} />;  // Error
+}
+```
+
+## TODOs
+None in the source file.
+
+## Example
+
+### Fixture: `error.invalid-pass-mutable-function-as-prop.js`
+
+**Input:**
+```javascript
+// @validateNoFreezingKnownMutableFunctions
+function Component() {
+  const cache = new Map();
+  const fn = () => {
+    cache.set('key', 'value');
+  };
+  return <Foo fn={fn} />;
+}
+```
+
+**Error:**
+```
+Found 1 error:
+
+Error: Cannot modify local variables after render completes
+
+This argument is a function which may reassign or mutate `cache` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-pass-mutable-function-as-prop.ts:7:18
+  5 |     cache.set('key', 'value');
+  6 |   };
+> 7 |   return <Foo fn={fn} />;
+    |                   ^^ This function may (indirectly) reassign or modify `cache` after render
+  8 | }
+  9 |
+
+error.invalid-pass-mutable-function-as-prop.ts:5:4
+  3 |   const cache = new Map();
+  4 |   const fn = () => {
+> 5 |     cache.set('key', 'value');
+    |     ^^^^^ This modifies `cache`
+  6 |   };
+  7 |   return <Foo fn={fn} />;
+  8 | }
+```
+
+### Fixture: `error.invalid-hook-function-argument-mutates-local-variable.js`
+
+**Input:**
+```javascript
+// @validateNoFreezingKnownMutableFunctions
+
+function useFoo() {
+  const cache = new Map();
+  useHook(() => {
+    cache.set('key', 'value');
+  });
+}
+```
+
+**Error:**
+```
+Found 1 error:
+
+Error: Cannot modify local variables after render completes
+
+This argument is a function which may reassign or mutate `cache` after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.
+
+error.invalid-hook-function-argument-mutates-local-variable.ts:5:10
+  3 | function useFoo() {
+  4 |   const cache = new Map();
+> 5 |   useHook(() => {
+    |           ^^^^^^^
+> 6 |     cache.set('key', 'value');
+    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 7 |   });
+    | ^^^^ This function may (indirectly) reassign or modify `cache` after render
+  8 | }
+  9 |
+
+error.invalid-hook-function-argument-mutates-local-variable.ts:6:4
+  4 |   const cache = new Map();
+  5 |   useHook(() => {
+> 6 |     cache.set('key', 'value');
+    |     ^^^^^ This modifies `cache`
+  7 |   });
+  8 | }
+  9 |
+```
+
+Key observations:
+- The pass detects functions that mutate captured local variables (not refs)
+- Errors show both where the function is used (frozen) and where the mutation occurs
+- The validation prevents inconsistent re-render behavior by catching mutations that happen after render
+- The suggestion to "use state instead" guides users toward the correct React pattern
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/51-validateExhaustiveDependencies.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/51-validateExhaustiveDependencies.md
new file mode 100644
index 00000000000..15e3c7af2db
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/51-validateExhaustiveDependencies.md
@@ -0,0 +1,376 @@
+# validateExhaustiveDependencies
+
+## File
+`src/Validation/ValidateExhaustiveDependencies.ts`
+
+## Purpose
+This validation pass ensures that manual memoization (useMemo, useCallback) and effect hooks (useEffect, useLayoutEffect) have correct dependency arrays. The pass compares developer-specified dependencies against the actual values referenced within the memoized function or effect callback to detect:
+
+1. **Missing dependencies**: Values used in the function that are not listed in the dependency array, causing the memoized value or effect to update less frequently than expected
+2. **Extra dependencies**: Values listed in the dependency array that are not actually used, causing unnecessary re-computation or effect re-runs
+3. **Overly precise dependencies**: Dependencies that access deeper property paths than what is actually used (e.g., `x.y.z` when only `x.y` is accessed)
+
+The goal is to ensure that auto-memoization by the compiler will not substantially change program behavior.
+
+## Input Invariants
+- The function has been through `StartMemoize` and `FinishMemoize` instruction insertion
+- Manual dependency arrays have been parsed and associated with memoization blocks
+- Reactive identifiers have been computed
+- Optional chaining paths have been analyzed
+
+## Validation Rules
+The pass produces errors for:
+
+1. **Missing dependency in useMemo/useCallback**: A reactive value is used but not listed in deps
+2. **Extra dependency in useMemo/useCallback**: A value is listed but not used
+3. **Missing dependency in useEffect**: A value used in the effect callback is not in the deps array
+4. **Extra dependency in useEffect**: A value in deps is not used in the callback
+5. **Overly precise dependency**: The manual dep accesses a deeper path than what's actually used
+6. **Global as dependency**: Module-level values should not be listed as dependencies
+7. **useEffectEvent in dependency array**: Functions from useEffectEvent must not be in deps
+
+**Exception - Optional dependencies**: Non-reactive values of stable types (refs, setState) or primitive types are optional and don't need to be listed.
+
+Error messages produced:
+- Categories: `MemoDependencies` or `EffectExhaustiveDependencies`
+- Reasons:
+  - "Found missing memoization dependencies"
+  - "Found extra memoization dependencies"
+  - "Found missing/extra memoization dependencies"
+  - "Found missing effect dependencies"
+  - "Found extra effect dependencies"
+  - "Found missing/extra effect dependencies"
+- Messages:
+  - "Missing dependency `{dep}`"
+  - "Unnecessary dependency `{dep}`"
+  - "Overly precise dependency `{manual}`, use `{inferred}` instead"
+  - "Functions returned from `useEffectEvent` must not be included in the dependency array"
+  - "Values declared outside of a component/hook should not be listed as dependencies"
+
+## Algorithm
+
+### Phase 1: Collect Reactive Identifiers
+Scan all instructions to identify which identifiers are reactive:
+
+```typescript
+function collectReactiveIdentifiersHIR(fn: HIRFunction): Set<IdentifierId> {
+  const reactive = new Set<IdentifierId>();
+  for (const block of fn.body.blocks.values()) {
+    for (const instr of block.instructions) {
+      for (const lvalue of eachInstructionLValue(instr)) {
+        if (lvalue.reactive) {
+          reactive.add(lvalue.identifier.id);
+        }
+      }
+      // ... also check operands
+    }
+  }
+  return reactive;
+}
+```
+
+### Phase 2: Find Optional Places
+Identify places that are within optional chaining expressions:
+
+```typescript
+function findOptionalPlaces(fn: HIRFunction): Map<IdentifierId, boolean> {
+  // Walks through optional terminals to track which identifiers
+  // are accessed via optional chaining (?.property)
+}
+```
+
+### Phase 3: Collect Dependencies
+The core algorithm processes each block, tracking:
+- `temporaries`: Map of identifier IDs to their dependency information
+- `locals`: Set of identifiers declared within the current scope
+- `dependencies`: Set of inferred dependencies
+
+```typescript
+function collectDependencies(
+  fn: HIRFunction,
+  temporaries: Map<IdentifierId, Temporary>,
+  callbacks: {
+    onStartMemoize: (...) => void;
+    onFinishMemoize: (...) => void;
+    onEffect: (...) => void;
+  },
+  isFunctionExpression: boolean,
+): Temporary {
+  for (const block of fn.body.blocks.values()) {
+    // Process phi nodes - merge dependencies from control flow
+    for (const phi of block.phis) {
+      // Aggregate dependencies from all operands
+    }
+
+    for (const instr of block.instructions) {
+      switch (value.kind) {
+        case 'LoadLocal':
+        case 'LoadContext':
+          // Track dependency path through the temporary
+          break;
+        case 'PropertyLoad':
+          // Extend dependency path: x -> x.y
+          break;
+        case 'FunctionExpression':
+          // Recursively collect dependencies from nested function
+          break;
+        case 'StartMemoize':
+          // Begin tracking dependencies for this memo block
+          break;
+        case 'FinishMemoize':
+          // Validate collected dependencies against manual deps
+          break;
+        case 'CallExpression':
+        case 'MethodCall':
+          // Check for effect hooks and validate their deps
+          break;
+      }
+    }
+  }
+}
+```
+
+### Phase 4: Validate Dependencies
+Compare inferred dependencies against manual dependencies:
+
+```typescript
+function validateDependencies(
+  inferred: Array<InferredDependency>,
+  manualDependencies: Array<ManualMemoDependency>,
+  reactive: Set<IdentifierId>,
+  ...
+): CompilerDiagnostic | null {
+  // Sort and deduplicate inferred dependencies
+  // For each inferred dep, check if there's a matching manual dep
+  // For each manual dep, check if it corresponds to an inferred dep
+  // Report missing and extra dependencies
+}
+```
+
+### Dependency Matching Rules
+- If `x.y.z` is inferred, `x`, `x.y`, or `x.y.z` are valid manual deps
+- Optional chaining is handled: `x?.y` inferred can match `x.y` manual (ignoring optionals)
+- Stable types (refs, setState) that are non-reactive are optional
+- Global values should not be in dependency arrays
+- useEffectEvent return values should not be in dependency arrays
+
+## Edge Cases
+
+### Overly Precise Dependency (Error)
+```javascript
+const a = useMemo(() => {
+  return x?.y.z?.a;
+}, [x?.y.z?.a.b]);  // Error: should be [x?.y.z?.a]
+```
+
+### Unnecessary Dependencies (Error)
+```javascript
+const f = useMemo(() => {
+  return [];
+}, [x, y.z, GLOBAL]);  // Error: all deps are unnecessary
+```
+
+### Reactive Stable Type (Error)
+```javascript
+const ref1 = useRef(null);
+const ref2 = useRef(null);
+const ref = z ? ref1 : ref2;  // ref is reactive (depends on z)
+const cb = useMemo(() => {
+  return () => ref.current;
+}, []);  // Error: missing dep 'ref' (reactive even though stable type)
+```
+
+### useEffectEvent in Dependencies (Error)
+```javascript
+const effectEvent = useEffectEvent(() => log(x));
+useEffect(() => {
+  effectEvent();
+}, [effectEvent]);  // Error: useEffectEvent returns should not be in deps
+```
+
+### Effect with Missing and Extra Dependencies (Error)
+```javascript
+useEffect(() => {
+  log(x, z);
+}, [x, y]);  // Error: missing z, extra y
+```
+
+### Valid Dependency Specifications
+```javascript
+// All valid - deps cover or exceed what's used
+const b = useMemo(() => x.y.z?.a, [x.y.z.a]);  // OK
+const d = useMemo(() => x?.y?.[(console.log(y), z?.b)], [x?.y, y, z?.b]);  // OK
+const e = useMemo(() => { e.push(x); return e; }, [x]);  // OK
+```
+
+## Configuration
+The validation can be configured via compiler options:
+
+```typescript
+// For useMemo/useCallback
+validateExhaustiveMemoizationDependencies: boolean
+
+// For useEffect and similar
+validateExhaustiveEffectDependencies: 'off' | 'all' | 'missing-only' | 'extra-only'
+```
+
+The `missing-only` and `extra-only` modes allow validating only one category of errors.
+
+## TODOs
+From the source file:
+
+```typescript
+/**
+ * TODO: Invalid, Complex Deps
+ *
+ * Handle cases where the user deps were not simple identifiers + property chains.
+ * We try to detect this in ValidateUseMemo but we miss some cases. The problem
+ * is that invalid forms can be value blocks or function calls that don't get
+ * removed by DCE, leaving a structure like:
+ *
+ * StartMemoize
+ * t0 = <value to memoize>
+ * ...non-DCE'd code for manual deps...
+ * FinishMemoize decl=t0
+ */
+```
+
+## Example
+
+### Fixture: `error.invalid-exhaustive-deps.js`
+
+**Input:**
+```javascript
+// @validateExhaustiveMemoizationDependencies @validateRefAccessDuringRender:false
+import {useMemo} from 'react';
+
+function Component({x, y, z}) {
+  const a = useMemo(() => {
+    return x?.y.z?.a;
+    // error: too precise
+  }, [x?.y.z?.a.b]);
+  const f = useMemo(() => {
+    return [];
+    // error: unnecessary
+  }, [x, y.z, z?.y?.a, UNUSED_GLOBAL]);
+  const ref1 = useRef(null);
+  const ref2 = useRef(null);
+  const ref = z ? ref1 : ref2;
+  const cb = useMemo(() => {
+    return () => ref.current;
+    // error: ref is a stable type but reactive
+  }, []);
+  return <Stringify results={[a, f, cb]} />;
+}
+```
+
+**Error:**
+```
+Found 4 errors:
+
+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-exhaustive-deps.ts:7:11
+  5 | function Component({x, y, z}) {
+  6 |   const a = useMemo(() => {
+> 7 |     return x?.y.z?.a;
+    |            ^^^^^^^^^ Missing dependency `x?.y.z?.a`
+  8 |     // error: too precise
+  9 |   }, [x?.y.z?.a.b]);
+
+error.invalid-exhaustive-deps.ts:9:6
+> 9 |   }, [x?.y.z?.a.b]);
+    |       ^^^^^^^^^^^ Overly precise dependency `x?.y.z?.a.b`, use `x?.y.z?.a` instead
+
+Inferred dependencies: `[x?.y.z?.a]`
+
+Error: Found extra memoization dependencies
+...
+error.invalid-exhaustive-deps.ts:31:6
+> 31 |   }, [x, y.z, z?.y?.a, UNUSED_GLOBAL]);
+     |       ^ Unnecessary dependency `x`
+...
+     |                        ^^^^^^^^^^^^^ Unnecessary dependency `UNUSED_GLOBAL`. Values declared outside of a component/hook should not be listed as dependencies as the component will not re-render if they change
+
+Inferred dependencies: `[]`
+
+Error: Found missing memoization dependencies
+...
+error.invalid-exhaustive-deps.ts:37:13
+> 37 |       return ref.current;
+     |              ^^^ Missing dependency `ref`. Refs, setState functions, and other "stable" values generally do not need to be added as dependencies, but this variable may change over time to point to different values
+
+Inferred dependencies: `[ref]`
+```
+
+### Fixture: `error.invalid-exhaustive-effect-deps.js`
+
+**Input:**
+```javascript
+// @validateExhaustiveEffectDependencies:"all"
+import {useEffect} from 'react';
+
+function Component({x, y, z}) {
+  // error: missing dep - x
+  useEffect(() => {
+    log(x);
+  }, []);
+
+  // error: extra dep - y
+  useEffect(() => {
+    log(x);
+  }, [x, y]);
+
+  // error: missing dep - z; extra dep - y
+  useEffect(() => {
+    log(x, z);
+  }, [x, y]);
+}
+```
+
+**Error:**
+```
+Found 4 errors:
+
+Error: Found missing effect dependencies
+
+Missing dependencies can cause an effect to fire less often than it should.
+
+error.invalid-exhaustive-effect-deps.ts:7:8
+> 7 |     log(x);
+    |         ^ Missing dependency `x`
+
+Inferred dependencies: `[x]`
+
+Error: Found extra effect dependencies
+
+Extra dependencies can cause an effect to fire more often than it should, resulting in performance problems such as excessive renders and side effects.
+
+error.invalid-exhaustive-effect-deps.ts:13:9
+> 13 |   }, [x, y]);
+     |          ^ Unnecessary dependency `y`
+
+Inferred dependencies: `[x]`
+
+Error: Found missing/extra effect dependencies
+...
+error.invalid-exhaustive-effect-deps.ts:17:11
+> 17 |     log(x, z);
+     |            ^ Missing dependency `z`
+
+error.invalid-exhaustive-effect-deps.ts:18:9
+> 18 |   }, [x, y]);
+     |          ^ Unnecessary dependency `y`
+
+Inferred dependencies: `[x, z]`
+```
+
+Key observations:
+- The pass validates both useMemo/useCallback and useEffect dependency arrays
+- Dependencies are inferred by analyzing actual value usage within the function
+- Optional chaining paths are tracked and included in dependency paths
+- Reactive stable types (like conditionally assigned refs) must still be listed
+- Globals and useEffectEvent returns should not be in dependency arrays
+- The validation provides fix suggestions showing the inferred correct dependencies
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/52-validateMemoizedEffectDependencies.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/52-validateMemoizedEffectDependencies.md
new file mode 100644
index 00000000000..81d78a39111
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/52-validateMemoizedEffectDependencies.md
@@ -0,0 +1,93 @@
+# validateMemoizedEffectDependencies
+
+## File
+`src/Validation/ValidateMemoizedEffectDependencies.ts`
+
+## Purpose
+Validates that all known effect dependencies (for `useEffect`, `useLayoutEffect`, and `useInsertionEffect`) are properly memoized. This prevents a common bug where unmemoized effect dependencies can cause infinite re-render loops or other unexpected behavior.
+
+## Input Invariants
+- Operates on ReactiveFunction (post-reactive scope inference)
+- Reactive scopes have been assigned to values that need memoization
+- Must run after scope inference but before codegen
+
+## Validation Rules
+This pass checks two conditions:
+
+1. **Unmemoized dependencies with assigned scopes**: Disallows effect dependencies that should be memoized (have a reactive scope assigned) but where that reactive scope does not exist in the output. This catches cases where a reactive scope was pruned, such as when it spans a hook call.
+
+2. **Mutable dependencies at effect call site**: Disallows effect dependencies whose mutable range encompasses the effect call. This catches values that the compiler knows may be mutated after the effect is set up.
+
+When either condition is violated, the pass produces:
+```
+Compilation Skipped: React Compiler has skipped optimizing this component because
+the effect dependencies could not be memoized. Unmemoized effect dependencies can
+trigger an infinite loop or other unexpected behavior
+```
+
+## Algorithm
+1. Traverse the reactive function using a visitor pattern
+2. Track all scopes that exist in the AST by adding them to a `Set<ScopeId>` during `visitScope`
+3. Only record a scope if its dependencies are also memoized (transitive memoization check)
+4. When visiting an instruction that is an effect hook call (`useEffect`, `useLayoutEffect`, `useInsertionEffect`) with at least 2 arguments (function + deps array):
+   - Check if the dependency array is mutable at the call site using `isMutable()`
+   - Check if the dependency array's scope exists using `isUnmemoized()`
+   - If either check fails, push an error
+
+### Key Helper Functions
+
+**isEffectHook(identifier)**: Returns true if the identifier is `useEffect`, `useLayoutEffect`, or `useInsertionEffect`.
+
+**isUnmemoized(operand, scopes)**: Returns true if the operand has a scope assigned (`operand.scope != null`) but that scope doesn't exist in the set of valid scopes.
+
+## Edge Cases
+- Only validates effects with 2+ arguments (ignores effects without dependency arrays)
+- Transitive memoization: A scope is only considered valid if all its dependencies are also memoized
+- Merged scopes are tracked together with their primary scope
+
+## TODOs
+From the source code:
+```typescript
+// TODO: isMutable is not safe to call here as it relies on identifier mutableRange
+// which is no longer valid at this point in the pipeline
+```
+
+## Example
+
+### Fixture: `error.invalid-useEffect-dep-not-memoized.js`
+
+**Input:**
+```javascript
+// @validateMemoizedEffectDependencies
+import {useEffect} from 'react';
+
+function Component(props) {
+  const data = {};
+  useEffect(() => {
+    console.log(props.value);
+  }, [data]);
+  mutate(data);
+  return data;
+}
+```
+
+**Error:**
+```
+Found 1 error:
+
+Compilation Skipped: React Compiler has skipped optimizing this component because
+the effect dependencies could not be memoized. Unmemoized effect dependencies can
+trigger an infinite loop or other unexpected behavior
+
+error.invalid-useEffect-dep-not-memoized.ts:6:2
+   4 | function Component(props) {
+   5 |   const data = {};
+>  6 |   useEffect(() => {
+     |   ^^^^^^^^^^^^^^^^^
+>  7 |     console.log(props.value);
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>  8 |   }, [data]);
+     | ^^^^^^^^^^^^^
+```
+
+**Why it fails:** The `data` object is mutated after the `useEffect` call, which extends its mutable range past the effect. This means `data` cannot be safely memoized as an effect dependency because it might change after the effect is set up.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/53-validatePreservedManualMemoization.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/53-validatePreservedManualMemoization.md
new file mode 100644
index 00000000000..fa78c2b9f2b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/53-validatePreservedManualMemoization.md
@@ -0,0 +1,152 @@
+# validatePreservedManualMemoization
+
+## File
+`src/Validation/ValidatePreservedManualMemoization.ts`
+
+## Purpose
+Validates that all explicit manual memoization (`useMemo`/`useCallback`) from the original source code is accurately preserved in the compiled output. This ensures that values the developer intended to be memoized remain memoized after compilation.
+
+## Input Invariants
+- Operates on ReactiveFunction (post-reactive scope inference)
+- Manual memoization markers (`StartMemoize`/`FinishMemoize`) are present from earlier passes
+- Scopes have been assigned and merged as appropriate
+
+## Validation Rules
+This pass validates three conditions:
+
+### 1. Dependencies not mutated later
+Validates that dependencies of manual memoization are not mutated after the memoization call:
+```
+Existing memoization could not be preserved. This dependency may be modified later
+```
+
+### 2. Inferred dependencies match source
+Validates that the compiler's inferred dependencies match the manually specified dependencies:
+```
+Existing memoization could not be preserved. The inferred dependencies did not match
+the manually specified dependencies, which could cause the value to change more or
+less frequently than expected. The inferred dependency was `X`, but the source
+dependencies were [Y, Z].
+```
+
+### 3. Output value is memoized
+Validates that the memoized value actually ends up in a reactive scope:
+```
+Existing memoization could not be preserved. This value was memoized in source but
+not in compilation output
+```
+
+## Algorithm
+
+### State Management
+The visitor tracks:
+- `scopes: Set<ScopeId>` - All completed reactive scopes
+- `prunedScopes: Set<ScopeId>` - Scopes that were pruned
+- `temporaries: Map<IdentifierId, ManualMemoDependency>` - Temporary variable mappings
+- `manualMemoState: ManualMemoBlockState | null` - Current manual memoization context
+
+### ManualMemoBlockState
+```typescript
+type ManualMemoBlockState = {
+  reassignments: Map<DeclarationId, Set<Identifier>>;  // Track inlined useMemo reassignments
+  loc: SourceLocation;                                   // Source location for errors
+  decls: Set<DeclarationId>;                             // Declarations within the memo block
+  depsFromSource: Array<ManualMemoDependency> | null;   // Original deps from source
+  manualMemoId: number;                                  // Unique ID for this memoization
+};
+```
+
+### Processing Flow
+
+1. **On `StartMemoize` instruction:**
+   - Validate that dependencies' scopes have completed (not mutated later)
+   - Initialize `manualMemoState` with source dependencies
+   - Push error if any dependency's scope hasn't completed yet
+
+2. **During memo block (between Start/Finish):**
+   - Track all declarations made within the block
+   - Track reassignments for inlined useMemo handling
+   - Record property loads and temporaries
+
+3. **On scope completion:**
+   - Validate each scope dependency against source dependencies using `compareDeps()`
+   - An inferred dependency matches if:
+     - Root identifiers are the same (same named variable)
+     - Paths are identical, OR
+     - Inferred path is more specific (not involving `.current` refs)
+
+4. **On `FinishMemoize` instruction:**
+   - Validate that the memoized value is in a completed scope
+   - Handle inlined useMemo with reassignment tracking
+   - Push error if value is unmemoized
+
+### Dependency Comparison Results
+```typescript
+enum CompareDependencyResult {
+  Ok = 0,                    // Dependencies match
+  RootDifference = 1,        // Different root variables
+  PathDifference = 2,        // Different property paths
+  Subpath = 3,               // Inferred is less specific
+  RefAccessDifference = 4,   // ref.current access differs
+}
+```
+
+## Edge Cases
+
+### Inlined useMemo Handling
+When useMemo is inlined, it produces `let` declarations followed by reassignments. The pass tracks these reassignments to ensure all code paths produce memoized values.
+
+### Ref Access
+Special handling for `.current` property access on refs. Since `ref_prev === ref_new` does not imply `ref_prev.current === ref_new.current`, the pass is strict about ref access differences.
+
+### More Specific Dependencies
+If the compiler infers a more specific dependency (e.g., `obj.prop.value` instead of `obj`), this is acceptable as long as it doesn't involve ref access.
+
+## TODOs
+None found in the source.
+
+## Example
+
+### Fixture: `error.preserve-use-memo-ref-missing-reactive.ts`
+
+**Input:**
+```javascript
+// @validatePreserveExistingMemoizationGuarantees
+import {useCallback, useRef} from 'react';
+
+function useFoo({cond}) {
+  const ref1 = useRef<undefined | (() => undefined)>();
+  const ref2 = useRef<undefined | (() => undefined)>();
+  const ref = cond ? ref1 : ref2;
+
+  return useCallback(() => {
+    if (ref != null) {
+      ref.current();
+    }
+  }, []);
+}
+```
+
+**Error:**
+```
+Found 1 error:
+
+Compilation Skipped: Existing memoization could not be preserved
+
+React Compiler has skipped optimizing this component because the existing manual
+memoization could not be preserved. The inferred dependencies did not match the
+manually specified dependencies, which could cause the value to change more or
+less frequently than expected. The inferred dependency was `ref`, but the source
+dependencies were []. Inferred dependency not present in source.
+
+error.preserve-use-memo-ref-missing-reactive.ts:9:21
+>  9 |   return useCallback(() => {
+     |                      ^^^^^^^
+> 10 |     if (ref != null) {
+> 11 |       ref.current();
+> 12 |     }
+> 13 |   }, []);
+     | ^^^^ Could not preserve existing manual memoization
+```
+
+**Why it fails:** The callback uses `ref` which is conditionally assigned based on `cond`. The compiler infers `ref` as a dependency, but the source specifies an empty dependency array `[]`. This mismatch means the memoization cannot be preserved as-is.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/54-validateStaticComponents.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/54-validateStaticComponents.md
new file mode 100644
index 00000000000..5f0db16794a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/54-validateStaticComponents.md
@@ -0,0 +1,153 @@
+# validateStaticComponents
+
+## File
+`src/Validation/ValidateStaticComponents.ts`
+
+## Purpose
+Validates that components used in JSX are not created dynamically during render. Components created during render will have their state reset on every re-render because React sees them as new component types each time. This is a common React anti-pattern that causes bugs and poor performance.
+
+## Input Invariants
+- Operates on HIRFunction (pre-reactive transformation)
+- All instructions and phi nodes are present
+- JSX expressions have been lowered to `JsxExpression` instruction values
+
+## Validation Rules
+When a JSX element uses a component that was dynamically created during render, the pass produces:
+```
+Cannot create components during render. Components created during render will reset
+their state each time they are created. Declare components outside of render
+```
+
+The error includes two locations:
+1. Where the component is used in JSX
+2. Where the component was originally created
+
+### What constitutes "dynamically created"?
+The following instruction kinds mark a value as dynamically created:
+- `FunctionExpression` - An inline function definition
+- `NewExpression` - A `new` constructor call
+- `MethodCall` - A method call that returns a value
+- `CallExpression` - A function call that returns a value
+
+## Algorithm
+
+1. Create a `Map<IdentifierId, SourceLocation>` called `knownDynamicComponents` to track identifiers whose values are dynamically created
+
+2. Iterate through all blocks in evaluation order
+
+3. For each block, first process phi nodes:
+   - If any phi operand is in `knownDynamicComponents`, add the phi result to the map
+   - This propagates dynamic-ness through control flow joins
+
+4. For each instruction in the block:
+   - **FunctionExpression, NewExpression, MethodCall, CallExpression**: Add the lvalue to `knownDynamicComponents` with its source location
+   - **LoadLocal**: If the loaded value is dynamic, mark the lvalue as dynamic
+   - **StoreLocal**: If the stored value is dynamic, mark both the lvalue and the store target as dynamic
+   - **JsxExpression**: If the JSX tag is an identifier that is in `knownDynamicComponents`, push a diagnostic error
+
+5. Return the collected errors
+
+### Data Flow Tracking
+The pass tracks how dynamic values flow through the program:
+- Through variable assignments (`StoreLocal`, `LoadLocal`)
+- Through phi nodes (conditional assignments)
+- Into JSX component positions
+
+## Edge Cases
+
+### Conditionally Assigned Components
+```javascript
+function Example({cond}) {
+  let Component;
+  if (cond) {
+    Component = createComponent();  // Dynamic!
+  } else {
+    Component = OtherComponent;     // Static
+  }
+  return <Component />;  // Error: Component may be dynamic
+}
+```
+The phi node joins the conditional paths, and since one path is dynamic, the result is considered dynamic.
+
+### Component Returned from Hooks/Functions
+```javascript
+function Example() {
+  const Component = useCreateComponent();  // CallExpression - dynamic
+  return <Component />;  // Error
+}
+```
+
+### Factory Functions
+```javascript
+function Example() {
+  const Component = createComponent();  // CallExpression - dynamic
+  return <Component />;  // Error
+}
+```
+
+### Safe Patterns (No Error)
+```javascript
+// Component defined outside render
+const MyComponent = () => <div />;
+
+function Example() {
+  return <MyComponent />;  // OK - not created during render
+}
+```
+
+## TODOs
+None found in the source.
+
+## Example
+
+### Fixture: `static-components/invalid-dynamically-construct-component-in-render.js`
+
+**Input:**
+```javascript
+// @validateStaticComponents
+function Example(props) {
+  const Component = createComponent();
+  return <Component />;
+}
+```
+
+**Error (from logs):**
+```json
+{
+  "kind": "CompileError",
+  "detail": {
+    "options": {
+      "category": "StaticComponents",
+      "reason": "Cannot create components during render",
+      "description": "Components created during render will reset their state each time they are created. Declare components outside of render",
+      "details": [
+        {
+          "kind": "error",
+          "loc": { "start": { "line": 4, "column": 10 } },
+          "message": "This component is created during render"
+        },
+        {
+          "kind": "error",
+          "loc": { "start": { "line": 3, "column": 20 } },
+          "message": "The component is created during render here"
+        }
+      ]
+    }
+  }
+}
+```
+
+**Why it fails:** The `createComponent()` call creates a new component type on every render. When this component is used in JSX, React will see a different component type each time, causing the component to unmount and remount (losing all state) on every render.
+
+### Fixture: `static-components/invalid-dynamically-constructed-component-function.js`
+
+**Input:**
+```javascript
+// @validateStaticComponents
+function Example(props) {
+  const Component = () => <div />;
+  return <Component />;
+}
+```
+
+**Why it fails:** Even though this looks like a simple component definition, it creates a new function (and thus a new component type) on every render. The fix is to move the component definition outside of `Example`.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/55-validateSourceLocations.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/55-validateSourceLocations.md
new file mode 100644
index 00000000000..b10017d8711
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/55-validateSourceLocations.md
@@ -0,0 +1,199 @@
+# validateSourceLocations
+
+## File
+`src/Validation/ValidateSourceLocations.ts`
+
+## Purpose
+**IMPORTANT: This validation is intended for unit tests only, not production use.**
+
+Validates that important source locations from the original code are preserved in the generated AST. This ensures that code coverage instrumentation tools (like Istanbul) can properly map back to the original source code for accurate coverage reports.
+
+## Input Invariants
+- Operates on the original Babel AST (`NodePath<FunctionDeclaration | ArrowFunctionExpression | FunctionExpression>`)
+- Operates on the generated CodegenFunction output
+- Must run after code generation
+
+## Validation Rules
+The pass checks that "important" source locations (as defined by Istanbul's instrumentation requirements) are preserved in the generated output.
+
+### Two types of errors:
+
+1. **Missing location:**
+```
+Important source location missing in generated code. Source location for [NodeType]
+is missing in the generated output. This can cause coverage instrumentation to fail
+to track this code properly, resulting in inaccurate coverage reports.
+```
+
+2. **Wrong node type:**
+```
+Important source location has wrong node type in generated code. Source location for
+[ExpectedType] exists in the generated output but with wrong node type(s): [ActualTypes].
+This can cause coverage instrumentation to fail to track this code properly.
+```
+
+### Important Node Types
+The following node types are considered important for coverage tracking:
+```typescript
+const IMPORTANT_INSTRUMENTED_TYPES = new Set([
+  'ArrowFunctionExpression',
+  'AssignmentPattern',
+  'ObjectMethod',
+  'ExpressionStatement',
+  'BreakStatement',
+  'ContinueStatement',
+  'ReturnStatement',
+  'ThrowStatement',
+  'TryStatement',
+  'VariableDeclarator',
+  'IfStatement',
+  'ForStatement',
+  'ForInStatement',
+  'ForOfStatement',
+  'WhileStatement',
+  'DoWhileStatement',
+  'SwitchStatement',
+  'SwitchCase',
+  'WithStatement',
+  'FunctionDeclaration',
+  'FunctionExpression',
+  'LabeledStatement',
+  'ConditionalExpression',
+  'LogicalExpression',
+  'VariableDeclaration',
+  'Identifier',
+]);
+```
+
+### Strict Node Types
+For these types, both the location AND node type must match:
+- `VariableDeclaration`
+- `VariableDeclarator`
+- `Identifier`
+
+## Algorithm
+
+### Step 1: Collect Important Original Locations
+Traverse the original AST and collect locations from nodes whose types are in `IMPORTANT_INSTRUMENTED_TYPES`:
+- Skip nodes that are manual memoization calls (`useMemo`/`useCallback`) since the compiler intentionally removes these
+- Build a map from location key to `{loc, nodeTypes}`
+
+### Step 2: Collect Generated Locations
+Recursively traverse the generated AST (main function body + outlined functions) and collect all locations with their node types.
+
+### Step 3: Validate Preservation
+For each important original location:
+- If the location is completely missing in generated output, report an error
+- For strict node types, verify the specific node type is present
+- Handle cases where a generated location has a different node type
+
+### Location Key Format
+Locations are compared using a string key:
+```typescript
+function locationKey(loc: SourceLocation): string {
+  return `${loc.start.line}:${loc.start.column}-${loc.end.line}:${loc.end.column}`;
+}
+```
+
+## Edge Cases
+
+### Manual Memoization Removal
+The compiler intentionally removes `useMemo` and `useCallback` calls (replacing them with compiler-generated memoization). These are detected and exempted from validation:
+```typescript
+function isManualMemoization(node: Node): boolean {
+  // Checks for useMemo/useCallback or React.useMemo/React.useCallback
+}
+```
+
+### Outlined Functions
+The validation also checks locations in outlined functions (functions extracted by the compiler for optimization purposes).
+
+### Multiple Node Types at Same Location
+Multiple node types can share the same location (e.g., a `VariableDeclarator` and its `Identifier` child). The pass tracks all node types for each location.
+
+## TODOs
+From the file documentation:
+> There's one big gotcha with this validation: it only works if the "important" original nodes are not optimized away by the compiler.
+>
+> When that scenario happens, we should just update the fixture to not include a node that has no corresponding node in the generated AST due to being completely removed during compilation.
+
+## Example
+
+### Fixture: `error.todo-missing-source-locations.js`
+
+**Input:**
+```javascript
+// @validateSourceLocations
+import {useEffect, useCallback} from 'react';
+
+function Component({prop1, prop2}) {
+  const x = prop1 + prop2;
+  const y = x * 2;
+  const arr = [x, y];
+  const obj = {x, y};
+  let destA, destB;
+  if (y > 5) {
+    [destA, destB] = arr;
+  }
+
+  const [a, b] = arr;
+  const {x: c, y: d} = obj;
+  let sound;
+
+  if (y > 10) {
+    sound = 'woof';
+  } else {
+    sound = 'meow';
+  }
+
+  useEffect(() => {
+    if (a > 10) {
+      console.log(a);
+      console.log(sound);
+      console.log(destA, destB);
+    }
+  }, [a, sound, destA, destB]);
+
+  const foo = useCallback(() => {
+    return a + b;
+  }, [a, b]);
+
+  function bar() {
+    return (c + d) * 2;
+  }
+
+  console.log('Hello, world!');
+
+  return [y, foo, bar];
+}
+```
+
+**Error (partial):**
+```
+Found 25 errors:
+
+Todo: Important source location missing in generated code
+Source location for Identifier is missing in the generated output...
+
+error.todo-missing-source-locations.ts:4:9
+> 4 | function Component({prop1, prop2}) {
+    |          ^^^^^^^^^
+
+Todo: Important source location missing in generated code
+Source location for VariableDeclaration is missing in the generated output...
+
+error.todo-missing-source-locations.ts:9:2
+>  9 |   let destA, destB;
+     |   ^^^^^^^^^^^^^^^^^
+
+Todo: Important source location missing in generated code
+Source location for ExpressionStatement is missing in the generated output...
+
+error.todo-missing-source-locations.ts:11:4
+> 11 |     [destA, destB] = arr;
+     |     ^^^^^^^^^^^^^^^^^^^^^
+```
+
+**Why it fails:** The compiler transforms the code significantly, and many original source locations are not preserved in the output. This causes coverage tools to lose track of which lines were executed.
+
+**Note:** This fixture is prefixed with `error.todo-` indicating this is a known limitation that needs to be addressed.
diff --git a/compiler/packages/babel-plugin-react-compiler/docs/passes/README.md b/compiler/packages/babel-plugin-react-compiler/docs/passes/README.md
new file mode 100644
index 00000000000..cafee2287ca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/docs/passes/README.md
@@ -0,0 +1,305 @@
+# React Compiler Passes Documentation
+
+This directory contains detailed documentation for each pass in the React Compiler pipeline. The compiler transforms React components and hooks to add automatic memoization.
+
+## High-Level Architecture
+
+```
+                    ┌─────────────────────────────────────────────────────────────┐
+                    │                     COMPILATION PIPELINE                      │
+                    └─────────────────────────────────────────────────────────────┘
+                                              │
+                                              ▼
+┌─────────────────────────────────────────────────────────────────────────────────────┐
+│  PHASE 1: HIR CONSTRUCTION                                                          │
+│  ┌─────────┐                                                                        │
+│  │  Babel  │──▶ lower ──▶ enterSSA ──▶ eliminateRedundantPhi                        │
+│  │   AST   │              │                                                         │
+│  └─────────┘              ▼                                                         │
+│                     ┌──────────┐                                                    │
+│                     │   HIR    │  (Control Flow Graph in SSA Form)                  │
+│                     └──────────┘                                                    │
+└─────────────────────────────────────────────────────────────────────────────────────┘
+                                              │
+                                              ▼
+┌─────────────────────────────────────────────────────────────────────────────────────┐
+│  PHASE 2: OPTIMIZATION                                                              │
+│                                                                                     │
+│  constantPropagation ──▶ deadCodeElimination ──▶ instructionReordering              │
+│                                                                                     │
+└─────────────────────────────────────────────────────────────────────────────────────┘
+                                              │
+                                              ▼
+┌─────────────────────────────────────────────────────────────────────────────────────┐
+│  PHASE 3: TYPE & EFFECT INFERENCE                                                   │
+│                                                                                     │
+│  inferTypes ──▶ analyseFunctions ──▶ inferMutationAliasingEffects                   │
+│                                              │                                      │
+│                                              ▼                                      │
+│                         inferMutationAliasingRanges ──▶ inferReactivePlaces         │
+│                                                                                     │
+└─────────────────────────────────────────────────────────────────────────────────────┘
+                                              │
+                                              ▼
+┌─────────────────────────────────────────────────────────────────────────────────────┐
+│  PHASE 4: REACTIVE SCOPE CONSTRUCTION                                               │
+│                                                                                     │
+│  inferReactiveScopeVariables ──▶ alignMethodCallScopes ──▶ alignObjectMethodScopes  │
+│              │                                                                      │
+│              ▼                                                                      │
+│  alignReactiveScopesToBlockScopesHIR ──▶ mergeOverlappingReactiveScopesHIR          │
+│              │                                                                      │
+│              ▼                                                                      │
+│  buildReactiveScopeTerminalsHIR ──▶ flattenReactiveLoopsHIR                         │
+│              │                                                                      │
+│              ▼                                                                      │
+│  flattenScopesWithHooksOrUseHIR ──▶ propagateScopeDependenciesHIR                   │
+│                                                                                     │
+└─────────────────────────────────────────────────────────────────────────────────────┘
+                                              │
+                                              ▼
+┌─────────────────────────────────────────────────────────────────────────────────────┐
+│  PHASE 5: HIR → REACTIVE FUNCTION                                                   │
+│                                                                                     │
+│                           buildReactiveFunction                                     │
+│                                    │                                                │
+│                                    ▼                                                │
+│                         ┌───────────────────┐                                       │
+│                         │ ReactiveFunction  │  (Tree Structure)                     │
+│                         └───────────────────┘                                       │
+│                                                                                     │
+└─────────────────────────────────────────────────────────────────────────────────────┘
+                                              │
+                                              ▼
+┌─────────────────────────────────────────────────────────────────────────────────────┐
+│  PHASE 6: REACTIVE FUNCTION OPTIMIZATION                                            │
+│                                                                                     │
+│  pruneUnusedLabels ──▶ pruneNonEscapingScopes ──▶ pruneNonReactiveDependencies      │
+│              │                                                                      │
+│              ▼                                                                      │
+│  pruneUnusedScopes ──▶ mergeReactiveScopesThatInvalidateTogether                    │
+│              │                                                                      │
+│              ▼                                                                      │
+│  pruneAlwaysInvalidatingScopes ──▶ propagateEarlyReturns ──▶ promoteUsedTemporaries │
+│                                                                                     │
+└─────────────────────────────────────────────────────────────────────────────────────┘
+                                              │
+                                              ▼
+┌─────────────────────────────────────────────────────────────────────────────────────┐
+│  PHASE 7: CODE GENERATION                                                           │
+│                                                                                     │
+│  renameVariables ──▶ codegenReactiveFunction                                        │
+│                              │                                                      │
+│                              ▼                                                      │
+│                      ┌─────────────┐                                                │
+│                      │  Babel AST  │  (With Memoization)                            │
+│                      └─────────────┘                                                │
+│                                                                                     │
+└─────────────────────────────────────────────────────────────────────────────────────┘
+```
+
+## Pass Categories
+
+### HIR Construction & SSA (1-3)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 1 | [lower](01-lower.md) | `HIR/BuildHIR.ts` | Convert Babel AST to HIR control-flow graph |
+| 2 | [enterSSA](02-enterSSA.md) | `SSA/EnterSSA.ts` | Convert to Static Single Assignment form |
+| 3 | [eliminateRedundantPhi](03-eliminateRedundantPhi.md) | `SSA/EliminateRedundantPhi.ts` | Remove unnecessary phi nodes |
+
+### Optimization (4-5)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 4 | [constantPropagation](04-constantPropagation.md) | `Optimization/ConstantPropagation.ts` | Sparse conditional constant propagation |
+| 5 | [deadCodeElimination](05-deadCodeElimination.md) | `Optimization/DeadCodeElimination.ts` | Remove unreferenced instructions |
+
+### Type Inference (6)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 6 | [inferTypes](06-inferTypes.md) | `TypeInference/InferTypes.ts` | Constraint-based type unification |
+
+### Mutation/Aliasing Inference (7-10)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 7 | [analyseFunctions](07-analyseFunctions.md) | `Inference/AnalyseFunctions.ts` | Analyze nested function effects |
+| 8 | [inferMutationAliasingEffects](08-inferMutationAliasingEffects.md) | `Inference/InferMutationAliasingEffects.ts` | Infer mutation/aliasing via abstract interpretation |
+| 9 | [inferMutationAliasingRanges](09-inferMutationAliasingRanges.md) | `Inference/InferMutationAliasingRanges.ts` | Compute mutable ranges from effects |
+| 10 | [inferReactivePlaces](10-inferReactivePlaces.md) | `Inference/InferReactivePlaces.ts` | Mark reactive places (props, hooks, derived) |
+
+### Reactive Scope Variables (11-12)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 11 | [inferReactiveScopeVariables](11-inferReactiveScopeVariables.md) | `ReactiveScopes/InferReactiveScopeVariables.ts` | Group co-mutating variables into scopes |
+| 12 | [rewriteInstructionKindsBasedOnReassignment](12-rewriteInstructionKindsBasedOnReassignment.md) | `SSA/RewriteInstructionKindsBasedOnReassignment.ts` | Convert SSA loads to context loads for reassigned vars |
+
+### Scope Alignment (13-15)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 13 | [alignMethodCallScopes](13-alignMethodCallScopes.md) | `ReactiveScopes/AlignMethodCallScopes.ts` | Align method call scopes with receivers |
+| 14 | [alignObjectMethodScopes](14-alignObjectMethodScopes.md) | `ReactiveScopes/AlignObjectMethodScopes.ts` | Align object method scopes |
+| 15 | [alignReactiveScopesToBlockScopesHIR](15-alignReactiveScopesToBlockScopesHIR.md) | `ReactiveScopes/AlignReactiveScopesToBlockScopesHIR.ts` | Align to control-flow block boundaries |
+
+### Scope Construction (16-18)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 16 | [mergeOverlappingReactiveScopesHIR](16-mergeOverlappingReactiveScopesHIR.md) | `HIR/MergeOverlappingReactiveScopesHIR.ts` | Merge overlapping scopes |
+| 17 | [buildReactiveScopeTerminalsHIR](17-buildReactiveScopeTerminalsHIR.md) | `HIR/BuildReactiveScopeTerminalsHIR.ts` | Insert scope terminals into CFG |
+| 18 | [flattenReactiveLoopsHIR](18-flattenReactiveLoopsHIR.md) | `ReactiveScopes/FlattenReactiveLoopsHIR.ts` | Prune scopes inside loops |
+
+### Scope Flattening & Dependencies (19-20)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 19 | [flattenScopesWithHooksOrUseHIR](19-flattenScopesWithHooksOrUseHIR.md) | `ReactiveScopes/FlattenScopesWithHooksOrUseHIR.ts` | Prune scopes containing hooks |
+| 20 | [propagateScopeDependenciesHIR](20-propagateScopeDependenciesHIR.md) | `HIR/PropagateScopeDependenciesHIR.ts` | Derive minimal scope dependencies |
+
+### HIR → Reactive Conversion (21)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 21 | [buildReactiveFunction](21-buildReactiveFunction.md) | `ReactiveScopes/BuildReactiveFunction.ts` | Convert CFG to tree structure |
+
+### Reactive Function Pruning (22-25)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 22 | [pruneUnusedLabels](22-pruneUnusedLabels.md) | `ReactiveScopes/PruneUnusedLabels.ts` | Remove unused labels |
+| 23 | [pruneNonEscapingScopes](23-pruneNonEscapingScopes.md) | `ReactiveScopes/PruneNonEscapingScopes.ts` | Remove non-escaping scopes |
+| 24 | [pruneNonReactiveDependencies](24-pruneNonReactiveDependencies.md) | `ReactiveScopes/PruneNonReactiveDependencies.ts` | Remove non-reactive dependencies |
+| 25 | [pruneUnusedScopes](25-pruneUnusedScopes.md) | `ReactiveScopes/PruneUnusedScopes.ts` | Remove empty scopes |
+
+### Scope Optimization (26-28)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 26 | [mergeReactiveScopesThatInvalidateTogether](26-mergeReactiveScopesThatInvalidateTogether.md) | `ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts` | Merge co-invalidating scopes |
+| 27 | [pruneAlwaysInvalidatingScopes](27-pruneAlwaysInvalidatingScopes.md) | `ReactiveScopes/PruneAlwaysInvalidatingScopes.ts` | Prune always-invalidating scopes |
+| 28 | [propagateEarlyReturns](28-propagateEarlyReturns.md) | `ReactiveScopes/PropagateEarlyReturns.ts` | Handle early returns in scopes |
+
+### Codegen Preparation (29-31)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 29 | [promoteUsedTemporaries](29-promoteUsedTemporaries.md) | `ReactiveScopes/PromoteUsedTemporaries.ts` | Promote temps to named vars |
+| 30 | [renameVariables](30-renameVariables.md) | `ReactiveScopes/RenameVariables.ts` | Ensure unique variable names |
+| 31 | [codegenReactiveFunction](31-codegenReactiveFunction.md) | `ReactiveScopes/CodegenReactiveFunction.ts` | Generate final Babel AST |
+
+### Transformations (32-38)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 32 | [transformFire](32-transformFire.md) | `Transform/TransformFire.ts` | Transform `fire()` calls in effects |
+| 33 | [lowerContextAccess](33-lowerContextAccess.md) | `Optimization/LowerContextAccess.ts` | Optimize context access with selectors |
+| 34 | [optimizePropsMethodCalls](34-optimizePropsMethodCalls.md) | `Optimization/OptimizePropsMethodCalls.ts` | Normalize props method calls |
+| 35 | [optimizeForSSR](35-optimizeForSSR.md) | `Optimization/OptimizeForSSR.ts` | SSR-specific optimizations |
+| 36 | [outlineJSX](36-outlineJSX.md) | `Optimization/OutlineJsx.ts` | Outline JSX to components |
+| 37 | [outlineFunctions](37-outlineFunctions.md) | `Optimization/OutlineFunctions.ts` | Outline pure functions |
+| 38 | [memoizeFbtAndMacroOperandsInSameScope](38-memoizeFbtAndMacroOperandsInSameScope.md) | `ReactiveScopes/MemoizeFbtAndMacroOperandsInSameScope.ts` | Keep FBT operands together |
+
+### Validation (39-55)
+
+| # | Pass | File | Description |
+|---|------|------|-------------|
+| 39 | [validateContextVariableLValues](39-validateContextVariableLValues.md) | `Validation/ValidateContextVariableLValues.ts` | Variable reference consistency |
+| 40 | [validateUseMemo](40-validateUseMemo.md) | `Validation/ValidateUseMemo.ts` | useMemo callback requirements |
+| 41 | [validateHooksUsage](41-validateHooksUsage.md) | `Validation/ValidateHooksUsage.ts` | Rules of Hooks |
+| 42 | [validateNoCapitalizedCalls](42-validateNoCapitalizedCalls.md) | `Validation/ValidateNoCapitalizedCalls.ts` | Component vs function calls |
+| 43 | [validateLocalsNotReassignedAfterRender](43-validateLocalsNotReassignedAfterRender.md) | `Validation/ValidateLocalsNotReassignedAfterRender.ts` | Variable mutation safety |
+| 44 | [validateNoSetStateInRender](44-validateNoSetStateInRender.md) | `Validation/ValidateNoSetStateInRender.ts` | No setState during render |
+| 45 | [validateNoDerivedComputationsInEffects](45-validateNoDerivedComputationsInEffects.md) | `Validation/ValidateNoDerivedComputationsInEffects.ts` | Effect optimization hints |
+| 46 | [validateNoSetStateInEffects](46-validateNoSetStateInEffects.md) | `Validation/ValidateNoSetStateInEffects.ts` | Effect performance |
+| 47 | [validateNoJSXInTryStatement](47-validateNoJSXInTryStatement.md) | `Validation/ValidateNoJSXInTryStatement.ts` | Error boundary usage |
+| 48 | [validateNoImpureValuesInRender](48-validateNoImpureValuesInRender.md) | `Validation/ValidateNoImpureValuesInRender.ts` | Impure value isolation |
+| 49 | [validateNoRefAccessInRender](49-validateNoRefAccessInRender.md) | `Validation/ValidateNoRefAccessInRender.ts` | Ref access constraints |
+| 50 | [validateNoFreezingKnownMutableFunctions](50-validateNoFreezingKnownMutableFunctions.md) | `Validation/ValidateNoFreezingKnownMutableFunctions.ts` | Mutable function isolation |
+| 51 | [validateExhaustiveDependencies](51-validateExhaustiveDependencies.md) | `Validation/ValidateExhaustiveDependencies.ts` | Dependency array completeness |
+| 52 | [validateMemoizedEffectDependencies](52-validateMemoizedEffectDependencies.md) | `Validation/ValidateMemoizedEffectDependencies.ts` | Effect scope memoization |
+| 53 | [validatePreservedManualMemoization](53-validatePreservedManualMemoization.md) | `Validation/ValidatePreservedManualMemoization.ts` | Manual memo preservation |
+| 54 | [validateStaticComponents](54-validateStaticComponents.md) | `Validation/ValidateStaticComponents.ts` | Component identity stability |
+| 55 | [validateSourceLocations](55-validateSourceLocations.md) | `Validation/ValidateSourceLocations.ts` | Source location preservation |
+
+## Key Data Structures
+
+### HIR (High-level Intermediate Representation)
+
+The compiler converts source code to HIR for analysis. Key types:
+
+- **HIRFunction**: A function being compiled
+  - `body.blocks`: Map of BasicBlocks (control flow graph)
+  - `context`: Captured variables from outer scope
+  - `params`: Function parameters
+  - `returns`: The function's return place
+
+- **BasicBlock**: A sequence of instructions with a terminal
+  - `instructions`: Array of Instructions
+  - `terminal`: Control flow (return, branch, etc.)
+  - `phis`: Phi nodes for SSA
+
+- **Instruction**: A single operation
+  - `lvalue`: The place being assigned to
+  - `value`: The instruction kind (CallExpression, FunctionExpression, etc.)
+  - `effects`: Array of AliasingEffects
+
+- **Place**: A reference to a value
+  - `identifier.id`: Unique IdentifierId
+  - `effect`: How the place is used (read, mutate, etc.)
+
+### ReactiveFunction
+
+After HIR is analyzed, it's converted to ReactiveFunction:
+
+- Tree structure instead of CFG
+- Contains ReactiveScopes that define memoization boundaries
+- Each scope has dependencies and declarations
+
+### AliasingEffects
+
+Effects describe data flow and operations:
+
+- **Capture/Alias**: Value relationships
+- **Mutate/MutateTransitive**: Mutation tracking
+- **Freeze**: Immutability marking
+- **Render**: JSX usage context
+- **Create/CreateFunction**: Value creation
+
+## Feature Flags
+
+Many passes are controlled by feature flags in `Environment.ts`:
+
+| Flag | Enables Pass |
+|------|--------------|
+| `enableFire` | transformFire |
+| `lowerContextAccess` | lowerContextAccess |
+| `enableJsxOutlining` | outlineJSX |
+| `enableFunctionOutlining` | outlineFunctions |
+| `validateNoSetStateInRender` | validateNoSetStateInRender |
+| `enableUseMemoCacheInterop` | Preserves manual memoization |
+
+## Running Tests
+
+```bash
+# Run all tests
+yarn snap
+
+# Run specific fixture
+yarn snap -p <fixture-name>
+
+# Run with debug output (shows all passes)
+yarn snap -p <fixture-name> -d
+
+# Update expected outputs
+yarn snap -u
+```
+
+## Further Reading
+
+- [MUTABILITY_ALIASING_MODEL.md](../../src/Inference/MUTABILITY_ALIASING_MODEL.md): Detailed aliasing model docs
+- [Pipeline.ts](../../src/Entrypoint/Pipeline.ts): Pass ordering and orchestration
+- [HIR.ts](../../src/HIR/HIR.ts): Core data structure definitions

From e9cca30b184f0d1faac8ee70e75c62886a7fc3ad Mon Sep 17 00:00:00 2001
From: Joe Savona <joesavona@fb.com>
Date: Fri, 23 Jan 2026 11:07:42 -0800
Subject: [PATCH 3/6] [compiler] Fix invariant error for optional chaining in
 try/catch
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Optional chaining and other value blocks within try/catch blocks were throwing an Invariant error ("Unexpected terminal in optional") instead of the expected Todo error. This caused hard failures instead of graceful bailouts.

The issue occurred because DropManualMemoization and ValidateExhaustiveDependencies ran before BuildReactiveFunction, and encountered `maybe-throw` terminals in their switch statements without a handler, falling through to the invariant case.

Fixed by adding explicit `maybe-throw` cases in both files that throw the proper Todo error with the message "Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement".

Also renamed the existing bug test to reflect it's now correctly handled:
- error.bug-invariant-unexpected-terminal-in-optional → error.todo-optional-chaining-within-try-catch

Closes #35570
---
 .../src/Inference/DropManualMemoization.ts    |  8 ++++
 .../ValidateExhaustiveDependencies.ts         |  8 ++++
 ...ing-within-try-catch-in-callback.expect.md | 37 +++++++++++++++++++
 ...l-chaining-within-try-catch-in-callback.js | 11 ++++++
 ...ional-chaining-within-try-catch.expect.md} |  6 +--
 ...odo-optional-chaining-within-try-catch.js} |  0
 6 files changed, 67 insertions(+), 3 deletions(-)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-chaining-within-try-catch-in-callback.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-chaining-within-try-catch-in-callback.js
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.bug-invariant-unexpected-terminal-in-optional.expect.md => error.todo-optional-chaining-within-try-catch.expect.md} (58%)
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.bug-invariant-unexpected-terminal-in-optional.js => error.todo-optional-chaining-within-try-catch.js} (100%)

diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts
index 647562aee59..d6232a2fe83 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/DropManualMemoization.ts
@@ -583,6 +583,14 @@ function findOptionalPlaces(fn: HIRFunction): Set<IdentifierId> {
             testBlock = fn.body.blocks.get(terminal.fallthrough)!;
             break;
           }
+          case 'maybe-throw': {
+            CompilerError.throwTodo({
+              reason: `Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement`,
+              description: null,
+              loc: terminal.loc,
+              suggestions: null,
+            });
+          }
           default: {
             CompilerError.invariant(false, {
               reason: `Unexpected terminal in optional`,
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateExhaustiveDependencies.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateExhaustiveDependencies.ts
index e72de6c3a3e..a5d4f75c85e 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateExhaustiveDependencies.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateExhaustiveDependencies.ts
@@ -1016,6 +1016,14 @@ export function findOptionalPlaces(
             testBlock = fn.body.blocks.get(terminal.block)!;
             break;
           }
+          case 'maybe-throw': {
+            CompilerError.throwTodo({
+              reason: `Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement`,
+              description: null,
+              loc: terminal.loc,
+              suggestions: null,
+            });
+          }
           default: {
             CompilerError.simpleInvariant(false, {
               reason: `Unexpected terminal in optional`,
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-chaining-within-try-catch-in-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-chaining-within-try-catch-in-callback.expect.md
new file mode 100644
index 00000000000..b450e1bf854
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-chaining-within-try-catch-in-callback.expect.md
@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const callback = async () => {
+    try {
+      const result = await fetch(props.url);
+      return result?.error;
+    } catch (e) {
+      return null;
+    }
+  };
+  return callback;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement
+
+error.todo-optional-chaining-within-try-catch-in-callback.ts:5:13
+  3 |     try {
+  4 |       const result = await fetch(props.url);
+> 5 |       return result?.error;
+    |              ^^^^^^ Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement
+  6 |     } catch (e) {
+  7 |       return null;
+  8 |     }
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-chaining-within-try-catch-in-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-chaining-within-try-catch-in-callback.js
new file mode 100644
index 00000000000..659602e8c12
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-chaining-within-try-catch-in-callback.js
@@ -0,0 +1,11 @@
+function Component(props) {
+  const callback = async () => {
+    try {
+      const result = await fetch(props.url);
+      return result?.error;
+    } catch (e) {
+      return null;
+    }
+  };
+  return callback;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-unexpected-terminal-in-optional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-chaining-within-try-catch.expect.md
similarity index 58%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-unexpected-terminal-in-optional.expect.md
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-chaining-within-try-catch.expect.md
index 30b95149263..ba59f47826f 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-unexpected-terminal-in-optional.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-chaining-within-try-catch.expect.md
@@ -19,13 +19,13 @@ const Foo = ({json}) => {
 ```
 Found 1 error:
 
-Invariant: Unexpected terminal in optional
+Todo: Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement
 
-error.bug-invariant-unexpected-terminal-in-optional.ts:3:16
+error.todo-optional-chaining-within-try-catch.ts:3:16
   1 | const Foo = ({json}) => {
   2 |   try {
 > 3 |     const foo = JSON.parse(json)?.foo;
-    |                 ^^^^ Unexpected maybe-throw in optional
+    |                 ^^^^ Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement
   4 |     return <span>{foo}</span>;
   5 |   } catch {
   6 |     return null;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-unexpected-terminal-in-optional.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-chaining-within-try-catch.js
similarity index 100%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-invariant-unexpected-terminal-in-optional.js
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-chaining-within-try-catch.js

From 26d580b79ef2a73c5b40eea90bb32edfb41fbb6e Mon Sep 17 00:00:00 2001
From: Joe Savona <joesavona@fb.com>
Date: Fri, 23 Jan 2026 11:07:42 -0800
Subject: [PATCH 4/6] [commit] Fix for nested optional chaining within other
 value blocks

Fixes a longstanding issue where we didn't support code like `useFoo(value?.bar(), value?.bar()) ?? {}` - we would attempt to construct a ReactiveFunction, recursively processing the blocks, but the inner optional `value?.bar()` wouldn't match with what the outer optional was expecting to find. It's a one-line fix!

Note: memoization in the examples is not ideal, but i've confirmed that it is not strictly related to the optional issue.
---
 .../ReactiveScopes/BuildReactiveFunction.ts   |   2 +-
 ...ith-nullish-coalesce-with-method.expect.md | 109 ++++++++++++++
 ...nals-with-nullish-coalesce-with-method.tsx |  20 +++
 ...-optionals-with-nullish-coalesce.expect.md |  53 +++++++
 ...chained-optionals-with-nullish-coalesce.ts |  17 +++
 ...onal-ternary-logical-with-method.expect.md | 135 ++++++++++++++++++
 ...d-optional-ternary-logical-with-method.tsx |  34 +++++
 ...-nested-optional-ternary-logical.expect.md |  64 +++++++++
 .../deeply-nested-optional-ternary-logical.ts |  24 ++++
 ...ional-call-chain-in-logical-expr.expect.md |  37 -----
 ...o-optional-call-chain-in-ternary.expect.md |  37 -----
 ...nside-optional-chain-with-method.expect.md | 122 ++++++++++++++++
 ...ical-inside-optional-chain-with-method.tsx |  22 +++
 .../logical-inside-optional-chain.expect.md   |  60 ++++++++
 .../compiler/logical-inside-optional-chain.ts |  23 +++
 ...-in-ternary-branches-with-method.expect.md | 134 +++++++++++++++++
 ...ionals-in-ternary-branches-with-method.tsx |  23 +++
 ...le-optionals-in-ternary-branches.expect.md |  61 ++++++++
 .../multiple-optionals-in-ternary-branches.ts |  24 ++++
 ...hain-in-logical-expr-with-method.expect.md |  85 +++++++++++
 ...call-chain-in-logical-expr-with-method.tsx |  19 +++
 ...ional-call-chain-in-logical-expr.expect.md |  40 ++++++
 ...=> optional-call-chain-in-logical-expr.ts} |   1 +
 ...all-chain-in-ternary-with-method.expect.md |  87 +++++++++++
 ...onal-call-chain-in-ternary-with-method.tsx |  19 +++
 .../optional-call-chain-in-ternary.expect.md  |  40 ++++++
 ...y.ts => optional-call-chain-in-ternary.ts} |   1 +
 ...l-inside-logical-and-with-method.expect.md | 108 ++++++++++++++
 ...ptional-inside-logical-and-with-method.tsx |  20 +++
 .../optional-inside-logical-and.expect.md     |  53 +++++++
 .../compiler/optional-inside-logical-and.ts   |  17 +++
 ...al-inside-logical-or-with-method.expect.md |  92 ++++++++++++
 ...optional-inside-logical-or-with-method.tsx |  20 +++
 .../optional-inside-logical-or.expect.md      |  53 +++++++
 .../compiler/optional-inside-logical-or.ts    |  17 +++
 ...-optional-consequent-with-method.expect.md | 135 ++++++++++++++++++
 ...inside-optional-consequent-with-method.tsx |  24 ++++
 ...rnary-inside-optional-consequent.expect.md |  56 ++++++++
 .../ternary-inside-optional-consequent.ts     |  21 +++
 39 files changed, 1834 insertions(+), 75 deletions(-)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-optionals-with-nullish-coalesce-with-method.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-optionals-with-nullish-coalesce-with-method.tsx
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-optionals-with-nullish-coalesce.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-optionals-with-nullish-coalesce.ts
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-optional-ternary-logical-with-method.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-optional-ternary-logical-with-method.tsx
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-optional-ternary-logical.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-optional-ternary-logical.ts
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-logical-expr.expect.md
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-ternary.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-inside-optional-chain-with-method.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-inside-optional-chain-with-method.tsx
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-inside-optional-chain.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-inside-optional-chain.ts
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-optionals-in-ternary-branches-with-method.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-optionals-in-ternary-branches-with-method.tsx
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-optionals-in-ternary-branches.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-optionals-in-ternary-branches.ts
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-logical-expr-with-method.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-logical-expr-with-method.tsx
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-logical-expr.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.todo-optional-call-chain-in-logical-expr.ts => optional-call-chain-in-logical-expr.ts} (95%)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-ternary-with-method.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-ternary-with-method.tsx
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-ternary.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.todo-optional-call-chain-in-ternary.ts => optional-call-chain-in-ternary.ts} (95%)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-and-with-method.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-and-with-method.tsx
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-and.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-and.ts
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-or-with-method.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-or-with-method.tsx
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-or.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-or.ts
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-inside-optional-consequent-with-method.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-inside-optional-consequent-with-method.tsx
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-inside-optional-consequent.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-inside-optional-consequent.ts

diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/BuildReactiveFunction.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/BuildReactiveFunction.ts
index 2e8584050eb..2574116234a 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/BuildReactiveFunction.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/BuildReactiveFunction.ts
@@ -1104,7 +1104,7 @@ class Driver {
         loc,
       };
       return {
-        block: init.fallthrough,
+        block: final.block,
         value: sequence,
         place: final.place,
         id: final.id,
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-optionals-with-nullish-coalesce-with-method.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-optionals-with-nullish-coalesce-with-method.expect.md
new file mode 100644
index 00000000000..a770e7aa9f8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-optionals-with-nullish-coalesce-with-method.expect.md
@@ -0,0 +1,109 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+// Test chained optional property access with nullish coalescing and method call
+function Component(props: {obj: {a?: {b?: {getC(): string}}} | null}) {
+  'use memo';
+  const result = props.obj?.a?.b?.getC() ?? 'default';
+  return <Stringify value={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{obj: {a: {b: {getC: () => 'deep'}}}}],
+  sequentialRenders: [
+    {obj: {a: {b: {getC: () => 'deep'}}}},
+    {obj: null},
+    {obj: {a: null}},
+    {obj: {a: {b: null}}},
+    {obj: {a: {b: {getC: () => 'other'}}}},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+// Test chained optional property access with nullish coalescing and method call
+function Component(props) {
+  "use memo";
+  const $ = _c(4);
+  let t0;
+  if ($[0] !== props.obj?.a?.b) {
+    t0 = props.obj?.a?.b?.getC() ?? "default";
+    $[0] = props.obj?.a?.b;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const result = t0;
+  let t1;
+  if ($[2] !== result) {
+    t1 = <Stringify value={result} />;
+    $[2] = result;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      obj: {
+        a: {
+          b: {
+            getC: () => {
+              return "deep";
+            },
+          },
+        },
+      },
+    },
+  ],
+  sequentialRenders: [
+    {
+      obj: {
+        a: {
+          b: {
+            getC: () => {
+              return "deep";
+            },
+          },
+        },
+      },
+    },
+    { obj: null },
+    { obj: { a: null } },
+    { obj: { a: { b: null } } },
+    {
+      obj: {
+        a: {
+          b: {
+            getC: () => {
+              return "other";
+            },
+          },
+        },
+      },
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":"deep"}</div>
+<div>{"value":"default"}</div>
+<div>{"value":"default"}</div>
+<div>{"value":"default"}</div>
+<div>{"value":"other"}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-optionals-with-nullish-coalesce-with-method.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-optionals-with-nullish-coalesce-with-method.tsx
new file mode 100644
index 00000000000..9c4048e8c83
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-optionals-with-nullish-coalesce-with-method.tsx
@@ -0,0 +1,20 @@
+import {Stringify} from 'shared-runtime';
+
+// Test chained optional property access with nullish coalescing and method call
+function Component(props: {obj: {a?: {b?: {getC(): string}}} | null}) {
+  'use memo';
+  const result = props.obj?.a?.b?.getC() ?? 'default';
+  return <Stringify value={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{obj: {a: {b: {getC: () => 'deep'}}}}],
+  sequentialRenders: [
+    {obj: {a: {b: {getC: () => 'deep'}}}},
+    {obj: null},
+    {obj: {a: null}},
+    {obj: {a: {b: null}}},
+    {obj: {a: {b: {getC: () => 'other'}}}},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-optionals-with-nullish-coalesce.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-optionals-with-nullish-coalesce.expect.md
new file mode 100644
index 00000000000..8b8dce7597d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-optionals-with-nullish-coalesce.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// Test chained optional property access with nullish coalescing
+function Component(props: {obj: {a?: {b?: {c: string}}} | null}) {
+  'use memo';
+  return props.obj?.a?.b?.c ?? 'default';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{obj: {a: {b: {c: 'deep'}}}}],
+  sequentialRenders: [
+    {obj: {a: {b: {c: 'deep'}}}},
+    {obj: null},
+    {obj: {a: null}},
+    {obj: {a: {b: null}}},
+    {obj: {a: {b: {c: 'other'}}}},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+// Test chained optional property access with nullish coalescing
+function Component(props) {
+  "use memo";
+  return props.obj?.a?.b?.c ?? "default";
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ obj: { a: { b: { c: "deep" } } } }],
+  sequentialRenders: [
+    { obj: { a: { b: { c: "deep" } } } },
+    { obj: null },
+    { obj: { a: null } },
+    { obj: { a: { b: null } } },
+    { obj: { a: { b: { c: "other" } } } },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) "deep"
+"default"
+"default"
+"default"
+"other"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-optionals-with-nullish-coalesce.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-optionals-with-nullish-coalesce.ts
new file mode 100644
index 00000000000..20852905f60
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/chained-optionals-with-nullish-coalesce.ts
@@ -0,0 +1,17 @@
+// Test chained optional property access with nullish coalescing
+function Component(props: {obj: {a?: {b?: {c: string}}} | null}) {
+  'use memo';
+  return props.obj?.a?.b?.c ?? 'default';
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{obj: {a: {b: {c: 'deep'}}}}],
+  sequentialRenders: [
+    {obj: {a: {b: {c: 'deep'}}}},
+    {obj: null},
+    {obj: {a: null}},
+    {obj: {a: {b: null}}},
+    {obj: {a: {b: {c: 'other'}}}},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-optional-ternary-logical-with-method.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-optional-ternary-logical-with-method.expect.md
new file mode 100644
index 00000000000..b58187a1754
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-optional-ternary-logical-with-method.expect.md
@@ -0,0 +1,135 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+// Test deeply nested: optional in ternary condition with logical fallback using method calls
+function Component(props: {
+  value: {getFlag(): boolean; getData(): string} | null;
+  fallback: string;
+}) {
+  'use memo';
+  const value = props.value;
+  const result = (value?.getFlag() ? value?.getData() : null) ?? props.fallback;
+  return <Stringify value={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      value: {getFlag: () => true, getData: () => 'success'},
+      fallback: 'default',
+    },
+  ],
+  sequentialRenders: [
+    {
+      value: {getFlag: () => true, getData: () => 'success'},
+      fallback: 'default',
+    },
+    {
+      value: {getFlag: () => false, getData: () => 'success'},
+      fallback: 'default',
+    },
+    {value: null, fallback: 'default'},
+    {value: {getFlag: () => true, getData: () => 'other'}, fallback: 'default'},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+// Test deeply nested: optional in ternary condition with logical fallback using method calls
+function Component(props) {
+  "use memo";
+  const $ = _c(5);
+
+  const value = props.value;
+  let t0;
+  if ($[0] !== props.fallback || $[1] !== value) {
+    t0 = (value?.getFlag() ? value?.getData() : null) ?? props.fallback;
+    $[0] = props.fallback;
+    $[1] = value;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const result = t0;
+  let t1;
+  if ($[3] !== result) {
+    t1 = <Stringify value={result} />;
+    $[3] = result;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      value: {
+        getFlag: () => {
+          return true;
+        },
+        getData: () => {
+          return "success";
+        },
+      },
+      fallback: "default",
+    },
+  ],
+
+  sequentialRenders: [
+    {
+      value: {
+        getFlag: () => {
+          return true;
+        },
+        getData: () => {
+          return "success";
+        },
+      },
+      fallback: "default",
+    },
+    {
+      value: {
+        getFlag: () => {
+          return false;
+        },
+        getData: () => {
+          return "success";
+        },
+      },
+      fallback: "default",
+    },
+    { value: null, fallback: "default" },
+    {
+      value: {
+        getFlag: () => {
+          return true;
+        },
+        getData: () => {
+          return "other";
+        },
+      },
+      fallback: "default",
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":"success"}</div>
+<div>{"value":"default"}</div>
+<div>{"value":"default"}</div>
+<div>{"value":"other"}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-optional-ternary-logical-with-method.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-optional-ternary-logical-with-method.tsx
new file mode 100644
index 00000000000..64f21291ee0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-optional-ternary-logical-with-method.tsx
@@ -0,0 +1,34 @@
+import {Stringify} from 'shared-runtime';
+
+// Test deeply nested: optional in ternary condition with logical fallback using method calls
+function Component(props: {
+  value: {getFlag(): boolean; getData(): string} | null;
+  fallback: string;
+}) {
+  'use memo';
+  const value = props.value;
+  const result = (value?.getFlag() ? value?.getData() : null) ?? props.fallback;
+  return <Stringify value={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      value: {getFlag: () => true, getData: () => 'success'},
+      fallback: 'default',
+    },
+  ],
+  sequentialRenders: [
+    {
+      value: {getFlag: () => true, getData: () => 'success'},
+      fallback: 'default',
+    },
+    {
+      value: {getFlag: () => false, getData: () => 'success'},
+      fallback: 'default',
+    },
+    {value: null, fallback: 'default'},
+    {value: {getFlag: () => true, getData: () => 'other'}, fallback: 'default'},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-optional-ternary-logical.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-optional-ternary-logical.expect.md
new file mode 100644
index 00000000000..cdaaae8c647
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-optional-ternary-logical.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+// Test deeply nested: optional in ternary condition with logical fallback
+function Component(props: {
+  value: {flag: boolean; data: string} | null;
+  fallback: string;
+}) {
+  'use memo';
+  const value = props.value;
+  return (value?.flag ? value?.data : null) ?? props.fallback;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: {flag: true, data: 'success'}, fallback: 'default'}],
+  sequentialRenders: [
+    // flag true, returns data
+    {value: {flag: true, data: 'success'}, fallback: 'default'},
+    // flag false, ternary returns null, falls back
+    {value: {flag: false, data: 'success'}, fallback: 'default'},
+    // value is null, value?.flag is undefined/falsy, ternary returns null, falls back
+    {value: null, fallback: 'default'},
+    // different data value
+    {value: {flag: true, data: 'other'}, fallback: 'default'},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+// Test deeply nested: optional in ternary condition with logical fallback
+function Component(props) {
+  "use memo";
+
+  const value = props.value;
+  return (value?.flag ? value?.data : null) ?? props.fallback;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: { flag: true, data: "success" }, fallback: "default" }],
+  sequentialRenders: [
+    // flag true, returns data
+    { value: { flag: true, data: "success" }, fallback: "default" },
+    // flag false, ternary returns null, falls back
+    { value: { flag: false, data: "success" }, fallback: "default" },
+    // value is null, value?.flag is undefined/falsy, ternary returns null, falls back
+    { value: null, fallback: "default" },
+    // different data value
+    { value: { flag: true, data: "other" }, fallback: "default" },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) "success"
+"default"
+"default"
+"other"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-optional-ternary-logical.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-optional-ternary-logical.ts
new file mode 100644
index 00000000000..6c86f93e53f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/deeply-nested-optional-ternary-logical.ts
@@ -0,0 +1,24 @@
+// Test deeply nested: optional in ternary condition with logical fallback
+function Component(props: {
+  value: {flag: boolean; data: string} | null;
+  fallback: string;
+}) {
+  'use memo';
+  const value = props.value;
+  return (value?.flag ? value?.data : null) ?? props.fallback;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: {flag: true, data: 'success'}, fallback: 'default'}],
+  sequentialRenders: [
+    // flag true, returns data
+    {value: {flag: true, data: 'success'}, fallback: 'default'},
+    // flag false, ternary returns null, falls back
+    {value: {flag: false, data: 'success'}, fallback: 'default'},
+    // value is null, value?.flag is undefined/falsy, ternary returns null, falls back
+    {value: null, fallback: 'default'},
+    // different data value
+    {value: {flag: true, data: 'other'}, fallback: 'default'},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-logical-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-logical-expr.expect.md
deleted file mode 100644
index 38bb5800a82..00000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-logical-expr.expect.md
+++ /dev/null
@@ -1,37 +0,0 @@
-
-## Input
-
-```javascript
-import {useNoAlias} from 'shared-runtime';
-
-function useFoo(props: {value: {x: string; y: string} | null}) {
-  const value = props.value;
-  return useNoAlias(value?.x, value?.y) ?? {};
-}
-
-export const FIXTURE_ENTRYPONT = {
-  fn: useFoo,
-  props: [{value: null}],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Todo: Unexpected terminal kind `optional` for logical test block
-
-error.todo-optional-call-chain-in-logical-expr.ts:5:30
-  3 | function useFoo(props: {value: {x: string; y: string} | null}) {
-  4 |   const value = props.value;
-> 5 |   return useNoAlias(value?.x, value?.y) ?? {};
-    |                               ^^^^^^^^ Unexpected terminal kind `optional` for logical test block
-  6 | }
-  7 |
-  8 | export const FIXTURE_ENTRYPONT = {
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-ternary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-ternary.expect.md
deleted file mode 100644
index 897b29ce6a5..00000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-ternary.expect.md
+++ /dev/null
@@ -1,37 +0,0 @@
-
-## Input
-
-```javascript
-import {useNoAlias} from 'shared-runtime';
-
-function useFoo(props: {value: {x: string; y: string} | null}) {
-  const value = props.value;
-  return useNoAlias(value?.x, value?.y) ? {} : null;
-}
-
-export const FIXTURE_ENTRYPONT = {
-  fn: useFoo,
-  props: [{value: null}],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Todo: Unexpected terminal kind `optional` for ternary test block
-
-error.todo-optional-call-chain-in-ternary.ts:5:30
-  3 | function useFoo(props: {value: {x: string; y: string} | null}) {
-  4 |   const value = props.value;
-> 5 |   return useNoAlias(value?.x, value?.y) ? {} : null;
-    |                               ^^^^^^^^ Unexpected terminal kind `optional` for ternary test block
-  6 | }
-  7 |
-  8 | export const FIXTURE_ENTRYPONT = {
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-inside-optional-chain-with-method.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-inside-optional-chain-with-method.expect.md
new file mode 100644
index 00000000000..f4c4f11d7a7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-inside-optional-chain-with-method.expect.md
@@ -0,0 +1,122 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+// Test logical expression as part of optional chain base with method call
+function Component(props: {
+  a: {x: {getY(): string} | null} | null;
+  b: {x: {getY(): string}} | null;
+}) {
+  'use memo';
+  const result = (props.a || props.b)?.x?.getY();
+  return <Stringify value={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: null, b: {x: {getY: () => 'found'}}}],
+  sequentialRenders: [
+    {a: null, b: {x: {getY: () => 'found'}}},
+    {a: {x: {getY: () => 'first'}}, b: {x: {getY: () => 'second'}}},
+    {a: null, b: null},
+    {a: {x: null}, b: {x: {getY: () => 'second'}}},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+// Test logical expression as part of optional chain base with method call
+function Component(props) {
+  "use memo";
+  const $ = _c(5);
+  let t0;
+  if ($[0] !== props.a || $[1] !== props.b) {
+    t0 = (props.a || props.b)?.x?.getY();
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const result = t0;
+  let t1;
+  if ($[3] !== result) {
+    t1 = <Stringify value={result} />;
+    $[3] = result;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      a: null,
+      b: {
+        x: {
+          getY: () => {
+            return "found";
+          },
+        },
+      },
+    },
+  ],
+  sequentialRenders: [
+    {
+      a: null,
+      b: {
+        x: {
+          getY: () => {
+            return "found";
+          },
+        },
+      },
+    },
+    {
+      a: {
+        x: {
+          getY: () => {
+            return "first";
+          },
+        },
+      },
+      b: {
+        x: {
+          getY: () => {
+            return "second";
+          },
+        },
+      },
+    },
+    { a: null, b: null },
+    {
+      a: { x: null },
+      b: {
+        x: {
+          getY: () => {
+            return "second";
+          },
+        },
+      },
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":"found"}</div>
+<div>{"value":"first"}</div>
+<div>{}</div>
+<div>{}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-inside-optional-chain-with-method.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-inside-optional-chain-with-method.tsx
new file mode 100644
index 00000000000..a733574aa1f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-inside-optional-chain-with-method.tsx
@@ -0,0 +1,22 @@
+import {Stringify} from 'shared-runtime';
+
+// Test logical expression as part of optional chain base with method call
+function Component(props: {
+  a: {x: {getY(): string} | null} | null;
+  b: {x: {getY(): string}} | null;
+}) {
+  'use memo';
+  const result = (props.a || props.b)?.x?.getY();
+  return <Stringify value={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: null, b: {x: {getY: () => 'found'}}}],
+  sequentialRenders: [
+    {a: null, b: {x: {getY: () => 'found'}}},
+    {a: {x: {getY: () => 'first'}}, b: {x: {getY: () => 'second'}}},
+    {a: null, b: null},
+    {a: {x: null}, b: {x: {getY: () => 'second'}}},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-inside-optional-chain.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-inside-optional-chain.expect.md
new file mode 100644
index 00000000000..d0eed0ad01a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-inside-optional-chain.expect.md
@@ -0,0 +1,60 @@
+
+## Input
+
+```javascript
+// Test logical expression as part of optional chain base
+function Component(props: {
+  a: {x: {y: string} | null} | null;
+  b: {x: {y: string}} | null;
+}) {
+  'use memo';
+  return (props.a || props.b)?.x?.y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: null, b: {x: {y: 'found'}}}],
+  sequentialRenders: [
+    // a is null, uses b
+    {a: null, b: {x: {y: 'found'}}},
+    // a is truthy, uses a
+    {a: {x: {y: 'first'}}, b: {x: {y: 'second'}}},
+    // both null
+    {a: null, b: null},
+    // a is truthy but a.x is null
+    {a: {x: null}, b: {x: {y: 'second'}}},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+// Test logical expression as part of optional chain base
+function Component(props) {
+  "use memo";
+  return (props.a || props.b)?.x?.y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: null, b: { x: { y: "found" } } }],
+  sequentialRenders: [
+    // a is null, uses b
+    { a: null, b: { x: { y: "found" } } },
+    // a is truthy, uses a
+    { a: { x: { y: "first" } }, b: { x: { y: "second" } } },
+    // both null
+    { a: null, b: null },
+    // a is truthy but a.x is null
+    { a: { x: null }, b: { x: { y: "second" } } },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) "found"
+"first"
+
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-inside-optional-chain.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-inside-optional-chain.ts
new file mode 100644
index 00000000000..74a5ff88afd
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/logical-inside-optional-chain.ts
@@ -0,0 +1,23 @@
+// Test logical expression as part of optional chain base
+function Component(props: {
+  a: {x: {y: string} | null} | null;
+  b: {x: {y: string}} | null;
+}) {
+  'use memo';
+  return (props.a || props.b)?.x?.y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: null, b: {x: {y: 'found'}}}],
+  sequentialRenders: [
+    // a is null, uses b
+    {a: null, b: {x: {y: 'found'}}},
+    // a is truthy, uses a
+    {a: {x: {y: 'first'}}, b: {x: {y: 'second'}}},
+    // both null
+    {a: null, b: null},
+    // a is truthy but a.x is null
+    {a: {x: null}, b: {x: {y: 'second'}}},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-optionals-in-ternary-branches-with-method.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-optionals-in-ternary-branches-with-method.expect.md
new file mode 100644
index 00000000000..244bcb5d813
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-optionals-in-ternary-branches-with-method.expect.md
@@ -0,0 +1,134 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+// Test optional chaining with method calls in both branches of a ternary
+function Component(props: {
+  a: {getX(): string} | null;
+  b: {getY(): string} | null;
+  cond: boolean;
+}) {
+  'use memo';
+  const result = props.cond ? props.a?.getX() : props.b?.getY();
+  return <Stringify value={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {getX: () => 'hello'}, b: {getY: () => 'world'}, cond: true}],
+  sequentialRenders: [
+    {a: {getX: () => 'hello'}, b: {getY: () => 'world'}, cond: true},
+    {a: {getX: () => 'hello'}, b: {getY: () => 'world'}, cond: false},
+    {a: null, b: {getY: () => 'world'}, cond: true},
+    {a: {getX: () => 'hello'}, b: null, cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+// Test optional chaining with method calls in both branches of a ternary
+function Component(props) {
+  "use memo";
+  const $ = _c(6);
+  let t0;
+  if ($[0] !== props.a || $[1] !== props.b || $[2] !== props.cond) {
+    t0 = props.cond ? props.a?.getX() : props.b?.getY();
+    $[0] = props.a;
+    $[1] = props.b;
+    $[2] = props.cond;
+    $[3] = t0;
+  } else {
+    t0 = $[3];
+  }
+  const result = t0;
+  let t1;
+  if ($[4] !== result) {
+    t1 = <Stringify value={result} />;
+    $[4] = result;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      a: {
+        getX: () => {
+          return "hello";
+        },
+      },
+      b: {
+        getY: () => {
+          return "world";
+        },
+      },
+      cond: true,
+    },
+  ],
+  sequentialRenders: [
+    {
+      a: {
+        getX: () => {
+          return "hello";
+        },
+      },
+      b: {
+        getY: () => {
+          return "world";
+        },
+      },
+      cond: true,
+    },
+    {
+      a: {
+        getX: () => {
+          return "hello";
+        },
+      },
+      b: {
+        getY: () => {
+          return "world";
+        },
+      },
+      cond: false,
+    },
+    {
+      a: null,
+      b: {
+        getY: () => {
+          return "world";
+        },
+      },
+      cond: true,
+    },
+    {
+      a: {
+        getX: () => {
+          return "hello";
+        },
+      },
+      b: null,
+      cond: false,
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":"hello"}</div>
+<div>{"value":"world"}</div>
+<div>{}</div>
+<div>{}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-optionals-in-ternary-branches-with-method.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-optionals-in-ternary-branches-with-method.tsx
new file mode 100644
index 00000000000..e7a685cdb3d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-optionals-in-ternary-branches-with-method.tsx
@@ -0,0 +1,23 @@
+import {Stringify} from 'shared-runtime';
+
+// Test optional chaining with method calls in both branches of a ternary
+function Component(props: {
+  a: {getX(): string} | null;
+  b: {getY(): string} | null;
+  cond: boolean;
+}) {
+  'use memo';
+  const result = props.cond ? props.a?.getX() : props.b?.getY();
+  return <Stringify value={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {getX: () => 'hello'}, b: {getY: () => 'world'}, cond: true}],
+  sequentialRenders: [
+    {a: {getX: () => 'hello'}, b: {getY: () => 'world'}, cond: true},
+    {a: {getX: () => 'hello'}, b: {getY: () => 'world'}, cond: false},
+    {a: null, b: {getY: () => 'world'}, cond: true},
+    {a: {getX: () => 'hello'}, b: null, cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-optionals-in-ternary-branches.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-optionals-in-ternary-branches.expect.md
new file mode 100644
index 00000000000..44d76d3dce4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-optionals-in-ternary-branches.expect.md
@@ -0,0 +1,61 @@
+
+## Input
+
+```javascript
+// Test optional chaining in both branches of a ternary
+function Component(props: {
+  a: {x: string} | null;
+  b: {y: string} | null;
+  cond: boolean;
+}) {
+  'use memo';
+  return props.cond ? props.a?.x : props.b?.y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {x: 'hello'}, b: {y: 'world'}, cond: true}],
+  sequentialRenders: [
+    // cond=true, picks a?.x -> 'hello'
+    {a: {x: 'hello'}, b: {y: 'world'}, cond: true},
+    // cond=false, picks b?.y -> 'world'
+    {a: {x: 'hello'}, b: {y: 'world'}, cond: false},
+    // cond=true, a=null, picks a?.x -> undefined
+    {a: null, b: {y: 'world'}, cond: true},
+    // cond=false, b=null, picks b?.y -> undefined
+    {a: {x: 'hello'}, b: null, cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+// Test optional chaining in both branches of a ternary
+function Component(props) {
+  "use memo";
+  return props.cond ? props.a?.x : props.b?.y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: { x: "hello" }, b: { y: "world" }, cond: true }],
+  sequentialRenders: [
+    // cond=true, picks a?.x -> 'hello'
+    { a: { x: "hello" }, b: { y: "world" }, cond: true },
+    // cond=false, picks b?.y -> 'world'
+    { a: { x: "hello" }, b: { y: "world" }, cond: false },
+    // cond=true, a=null, picks a?.x -> undefined
+    { a: null, b: { y: "world" }, cond: true },
+    // cond=false, b=null, picks b?.y -> undefined
+    { a: { x: "hello" }, b: null, cond: false },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) "hello"
+"world"
+
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-optionals-in-ternary-branches.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-optionals-in-ternary-branches.ts
new file mode 100644
index 00000000000..b9d9a95a096
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/multiple-optionals-in-ternary-branches.ts
@@ -0,0 +1,24 @@
+// Test optional chaining in both branches of a ternary
+function Component(props: {
+  a: {x: string} | null;
+  b: {y: string} | null;
+  cond: boolean;
+}) {
+  'use memo';
+  return props.cond ? props.a?.x : props.b?.y;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {x: 'hello'}, b: {y: 'world'}, cond: true}],
+  sequentialRenders: [
+    // cond=true, picks a?.x -> 'hello'
+    {a: {x: 'hello'}, b: {y: 'world'}, cond: true},
+    // cond=false, picks b?.y -> 'world'
+    {a: {x: 'hello'}, b: {y: 'world'}, cond: false},
+    // cond=true, a=null, picks a?.x -> undefined
+    {a: null, b: {y: 'world'}, cond: true},
+    // cond=false, b=null, picks b?.y -> undefined
+    {a: {x: 'hello'}, b: null, cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-logical-expr-with-method.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-logical-expr-with-method.expect.md
new file mode 100644
index 00000000000..1374cb9e641
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-logical-expr-with-method.expect.md
@@ -0,0 +1,85 @@
+
+## Input
+
+```javascript
+import {Stringify, useIdentity} from 'shared-runtime';
+
+function useFoo(props: {value: {getX(): string; getY(): string} | null}) {
+  'use memo';
+  const value = props.value;
+  const result = useIdentity({x: value?.getX(), y: value?.getY()}) ?? {};
+  return <Stringify value={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{value: null}],
+  sequentialRenders: [
+    {value: null},
+    {value: {getX: () => 'x1', getY: () => 'y1'}},
+    {value: {getX: () => 'x2', getY: () => 'y2'}},
+    {value: null},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify, useIdentity } from "shared-runtime";
+
+function useFoo(props) {
+  "use memo";
+  const $ = _c(2);
+
+  const value = props.value;
+  const result = useIdentity({ x: value?.getX(), y: value?.getY() }) ?? {};
+  let t0;
+  if ($[0] !== result) {
+    t0 = <Stringify value={result} />;
+    $[0] = result;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ value: null }],
+  sequentialRenders: [
+    { value: null },
+    {
+      value: {
+        getX: () => {
+          return "x1";
+        },
+        getY: () => {
+          return "y1";
+        },
+      },
+    },
+    {
+      value: {
+        getX: () => {
+          return "x2";
+        },
+        getY: () => {
+          return "y2";
+        },
+      },
+    },
+    { value: null },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":{}}</div>
+<div>{"value":{"x":"x1","y":"y1"}}</div>
+<div>{"value":{"x":"x2","y":"y2"}}</div>
+<div>{"value":{}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-logical-expr-with-method.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-logical-expr-with-method.tsx
new file mode 100644
index 00000000000..201e331af3c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-logical-expr-with-method.tsx
@@ -0,0 +1,19 @@
+import {Stringify, useIdentity} from 'shared-runtime';
+
+function useFoo(props: {value: {getX(): string; getY(): string} | null}) {
+  'use memo';
+  const value = props.value;
+  const result = useIdentity({x: value?.getX(), y: value?.getY()}) ?? {};
+  return <Stringify value={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{value: null}],
+  sequentialRenders: [
+    {value: null},
+    {value: {getX: () => 'x1', getY: () => 'y1'}},
+    {value: {getX: () => 'x2', getY: () => 'y2'}},
+    {value: null},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-logical-expr.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-logical-expr.expect.md
new file mode 100644
index 00000000000..01bac6d1a06
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-logical-expr.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+import {useNoAlias} from 'shared-runtime';
+
+function useFoo(props: {value: {x: string; y: string} | null}) {
+  'use memo';
+  const value = props.value;
+  return useNoAlias(value?.x, value?.y) ?? {};
+}
+
+export const FIXTURE_ENTRYPONT = {
+  fn: useFoo,
+  props: [{value: null}],
+};
+
+```
+
+## Code
+
+```javascript
+import { useNoAlias } from "shared-runtime";
+
+function useFoo(props) {
+  "use memo";
+
+  const value = props.value;
+  return useNoAlias(value?.x, value?.y) ?? {};
+}
+
+export const FIXTURE_ENTRYPONT = {
+  fn: useFoo,
+  props: [{ value: null }],
+};
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-logical-expr.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-logical-expr.ts
similarity index 95%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-logical-expr.ts
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-logical-expr.ts
index b96f6aefad5..8219fe66a80 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-logical-expr.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-logical-expr.ts
@@ -1,6 +1,7 @@
 import {useNoAlias} from 'shared-runtime';
 
 function useFoo(props: {value: {x: string; y: string} | null}) {
+  'use memo';
   const value = props.value;
   return useNoAlias(value?.x, value?.y) ?? {};
 }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-ternary-with-method.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-ternary-with-method.expect.md
new file mode 100644
index 00000000000..ccb21503619
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-ternary-with-method.expect.md
@@ -0,0 +1,87 @@
+
+## Input
+
+```javascript
+import {Stringify, useIdentity} from 'shared-runtime';
+
+function useFoo(props: {value: {getX(): string; getY(): string} | null}) {
+  'use memo';
+  const value = props.value;
+  const result = useIdentity({x: value?.getX(), y: value?.getY()}) ? {} : null;
+  return <Stringify value={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{value: null}],
+  sequentialRenders: [
+    {value: null},
+    {value: {getX: () => 'x1', getY: () => 'y1'}},
+    {value: {getX: () => 'x2', getY: () => 'y2'}},
+    {value: null},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify, useIdentity } from "shared-runtime";
+
+function useFoo(props) {
+  "use memo";
+  const $ = _c(2);
+
+  const value = props.value;
+  const result = useIdentity({ x: value?.getX(), y: value?.getY() })
+    ? {}
+    : null;
+  let t0;
+  if ($[0] !== result) {
+    t0 = <Stringify value={result} />;
+    $[0] = result;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{ value: null }],
+  sequentialRenders: [
+    { value: null },
+    {
+      value: {
+        getX: () => {
+          return "x1";
+        },
+        getY: () => {
+          return "y1";
+        },
+      },
+    },
+    {
+      value: {
+        getX: () => {
+          return "x2";
+        },
+        getY: () => {
+          return "y2";
+        },
+      },
+    },
+    { value: null },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":{}}</div>
+<div>{"value":{}}</div>
+<div>{"value":{}}</div>
+<div>{"value":{}}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-ternary-with-method.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-ternary-with-method.tsx
new file mode 100644
index 00000000000..e2107ec4046
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-ternary-with-method.tsx
@@ -0,0 +1,19 @@
+import {Stringify, useIdentity} from 'shared-runtime';
+
+function useFoo(props: {value: {getX(): string; getY(): string} | null}) {
+  'use memo';
+  const value = props.value;
+  const result = useIdentity({x: value?.getX(), y: value?.getY()}) ? {} : null;
+  return <Stringify value={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [{value: null}],
+  sequentialRenders: [
+    {value: null},
+    {value: {getX: () => 'x1', getY: () => 'y1'}},
+    {value: {getX: () => 'x2', getY: () => 'y2'}},
+    {value: null},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-ternary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-ternary.expect.md
new file mode 100644
index 00000000000..e9ae4a18093
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-ternary.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+import {useNoAlias} from 'shared-runtime';
+
+function useFoo(props: {value: {x: string; y: string} | null}) {
+  'use memo';
+  const value = props.value;
+  return useNoAlias(value?.x, value?.y) ? {} : null;
+}
+
+export const FIXTURE_ENTRYPONT = {
+  fn: useFoo,
+  props: [{value: null}],
+};
+
+```
+
+## Code
+
+```javascript
+import { useNoAlias } from "shared-runtime";
+
+function useFoo(props) {
+  "use memo";
+
+  const value = props.value;
+  return useNoAlias(value?.x, value?.y) ? {} : null;
+}
+
+export const FIXTURE_ENTRYPONT = {
+  fn: useFoo,
+  props: [{ value: null }],
+};
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-ternary.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-ternary.ts
similarity index 95%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-ternary.ts
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-ternary.ts
index ac5302da00c..90e2db730d6 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-optional-call-chain-in-ternary.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-call-chain-in-ternary.ts
@@ -1,6 +1,7 @@
 import {useNoAlias} from 'shared-runtime';
 
 function useFoo(props: {value: {x: string; y: string} | null}) {
+  'use memo';
   const value = props.value;
   return useNoAlias(value?.x, value?.y) ? {} : null;
 }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-and-with-method.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-and-with-method.expect.md
new file mode 100644
index 00000000000..41b799275bf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-and-with-method.expect.md
@@ -0,0 +1,108 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+// Test optional chaining inside logical AND (&&) with method calls
+function Component(props: {value: {getX(): string} | null; enabled: boolean}) {
+  'use memo';
+  const value = props.value;
+  const result = props.enabled && value?.getX();
+  return <Stringify value={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: {getX: () => 'hello'}, enabled: true}],
+  sequentialRenders: [
+    {value: {getX: () => 'hello'}, enabled: true},
+    {value: {getX: () => 'hello'}, enabled: false},
+    {value: null, enabled: true},
+    {value: {getX: () => 'world'}, enabled: true},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+// Test optional chaining inside logical AND (&&) with method calls
+function Component(props) {
+  "use memo";
+  const $ = _c(5);
+
+  const value = props.value;
+  let t0;
+  if ($[0] !== props.enabled || $[1] !== value) {
+    t0 = props.enabled && value?.getX();
+    $[0] = props.enabled;
+    $[1] = value;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const result = t0;
+  let t1;
+  if ($[3] !== result) {
+    t1 = <Stringify value={result} />;
+    $[3] = result;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      value: {
+        getX: () => {
+          return "hello";
+        },
+      },
+      enabled: true,
+    },
+  ],
+  sequentialRenders: [
+    {
+      value: {
+        getX: () => {
+          return "hello";
+        },
+      },
+      enabled: true,
+    },
+    {
+      value: {
+        getX: () => {
+          return "hello";
+        },
+      },
+      enabled: false,
+    },
+    { value: null, enabled: true },
+    {
+      value: {
+        getX: () => {
+          return "world";
+        },
+      },
+      enabled: true,
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":"hello"}</div>
+<div>{"value":false}</div>
+<div>{}</div>
+<div>{"value":"world"}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-and-with-method.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-and-with-method.tsx
new file mode 100644
index 00000000000..689fbe8e27f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-and-with-method.tsx
@@ -0,0 +1,20 @@
+import {Stringify} from 'shared-runtime';
+
+// Test optional chaining inside logical AND (&&) with method calls
+function Component(props: {value: {getX(): string} | null; enabled: boolean}) {
+  'use memo';
+  const value = props.value;
+  const result = props.enabled && value?.getX();
+  return <Stringify value={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: {getX: () => 'hello'}, enabled: true}],
+  sequentialRenders: [
+    {value: {getX: () => 'hello'}, enabled: true},
+    {value: {getX: () => 'hello'}, enabled: false},
+    {value: null, enabled: true},
+    {value: {getX: () => 'world'}, enabled: true},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-and.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-and.expect.md
new file mode 100644
index 00000000000..86e478d74bf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-and.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// Test optional chaining inside logical AND (&&)
+function Component(props: {value: {x: string} | null; enabled: boolean}) {
+  'use memo';
+  const value = props.value;
+  return props.enabled && value?.x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: {x: 'hello'}, enabled: true}],
+  sequentialRenders: [
+    {value: {x: 'hello'}, enabled: true},
+    {value: {x: 'hello'}, enabled: false},
+    {value: null, enabled: true},
+    {value: {x: 'world'}, enabled: true},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+// Test optional chaining inside logical AND (&&)
+function Component(props) {
+  "use memo";
+
+  const value = props.value;
+  return props.enabled && value?.x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: { x: "hello" }, enabled: true }],
+  sequentialRenders: [
+    { value: { x: "hello" }, enabled: true },
+    { value: { x: "hello" }, enabled: false },
+    { value: null, enabled: true },
+    { value: { x: "world" }, enabled: true },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) "hello"
+false
+
+"world"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-and.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-and.ts
new file mode 100644
index 00000000000..4fee7ffd965
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-and.ts
@@ -0,0 +1,17 @@
+// Test optional chaining inside logical AND (&&)
+function Component(props: {value: {x: string} | null; enabled: boolean}) {
+  'use memo';
+  const value = props.value;
+  return props.enabled && value?.x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: {x: 'hello'}, enabled: true}],
+  sequentialRenders: [
+    {value: {x: 'hello'}, enabled: true},
+    {value: {x: 'hello'}, enabled: false},
+    {value: null, enabled: true},
+    {value: {x: 'world'}, enabled: true},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-or-with-method.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-or-with-method.expect.md
new file mode 100644
index 00000000000..b0b2821c0ca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-or-with-method.expect.md
@@ -0,0 +1,92 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+// Test optional chaining inside logical OR (||) with method calls
+function Component(props: {value: {getX(): string} | null; fallback: string}) {
+  'use memo';
+  const value = props.value;
+  const result = value?.getX() || props.fallback;
+  return <Stringify value={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: null, fallback: 'default'}],
+  sequentialRenders: [
+    {value: null, fallback: 'default'},
+    {value: {getX: () => 'hello'}, fallback: 'default'},
+    {value: {getX: () => ''}, fallback: 'default'},
+    {value: null, fallback: 'other'},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+// Test optional chaining inside logical OR (||) with method calls
+function Component(props) {
+  "use memo";
+  const $ = _c(5);
+
+  const value = props.value;
+  let t0;
+  if ($[0] !== props.fallback || $[1] !== value) {
+    t0 = value?.getX() || props.fallback;
+    $[0] = props.fallback;
+    $[1] = value;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const result = t0;
+  let t1;
+  if ($[3] !== result) {
+    t1 = <Stringify value={result} />;
+    $[3] = result;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: null, fallback: "default" }],
+  sequentialRenders: [
+    { value: null, fallback: "default" },
+    {
+      value: {
+        getX: () => {
+          return "hello";
+        },
+      },
+      fallback: "default",
+    },
+    {
+      value: {
+        getX: () => {
+          return "";
+        },
+      },
+      fallback: "default",
+    },
+    { value: null, fallback: "other" },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":"default"}</div>
+<div>{"value":"hello"}</div>
+<div>{"value":"default"}</div>
+<div>{"value":"other"}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-or-with-method.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-or-with-method.tsx
new file mode 100644
index 00000000000..9997f2ec065
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-or-with-method.tsx
@@ -0,0 +1,20 @@
+import {Stringify} from 'shared-runtime';
+
+// Test optional chaining inside logical OR (||) with method calls
+function Component(props: {value: {getX(): string} | null; fallback: string}) {
+  'use memo';
+  const value = props.value;
+  const result = value?.getX() || props.fallback;
+  return <Stringify value={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: null, fallback: 'default'}],
+  sequentialRenders: [
+    {value: null, fallback: 'default'},
+    {value: {getX: () => 'hello'}, fallback: 'default'},
+    {value: {getX: () => ''}, fallback: 'default'},
+    {value: null, fallback: 'other'},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-or.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-or.expect.md
new file mode 100644
index 00000000000..c7fa6f5bbca
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-or.expect.md
@@ -0,0 +1,53 @@
+
+## Input
+
+```javascript
+// Test optional chaining inside logical OR (||)
+function Component(props: {value: {x: string} | null; fallback: string}) {
+  'use memo';
+  const value = props.value;
+  return value?.x || props.fallback;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: null, fallback: 'default'}],
+  sequentialRenders: [
+    {value: null, fallback: 'default'},
+    {value: {x: 'hello'}, fallback: 'default'},
+    {value: {x: ''}, fallback: 'default'},
+    {value: null, fallback: 'other'},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+// Test optional chaining inside logical OR (||)
+function Component(props) {
+  "use memo";
+
+  const value = props.value;
+  return value?.x || props.fallback;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: null, fallback: "default" }],
+  sequentialRenders: [
+    { value: null, fallback: "default" },
+    { value: { x: "hello" }, fallback: "default" },
+    { value: { x: "" }, fallback: "default" },
+    { value: null, fallback: "other" },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) "default"
+"hello"
+"default"
+"other"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-or.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-or.ts
new file mode 100644
index 00000000000..0a0ede14f26
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/optional-inside-logical-or.ts
@@ -0,0 +1,17 @@
+// Test optional chaining inside logical OR (||)
+function Component(props: {value: {x: string} | null; fallback: string}) {
+  'use memo';
+  const value = props.value;
+  return value?.x || props.fallback;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: null, fallback: 'default'}],
+  sequentialRenders: [
+    {value: null, fallback: 'default'},
+    {value: {x: 'hello'}, fallback: 'default'},
+    {value: {x: ''}, fallback: 'default'},
+    {value: null, fallback: 'other'},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-inside-optional-consequent-with-method.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-inside-optional-consequent-with-method.expect.md
new file mode 100644
index 00000000000..d854b451bbf
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-inside-optional-consequent-with-method.expect.md
@@ -0,0 +1,135 @@
+
+## Input
+
+```javascript
+import {Stringify} from 'shared-runtime';
+
+// Test ternary expression producing the value used in optional chaining with method call
+function Component(props: {
+  a: {getX(): string} | null;
+  b: {getX(): string} | null;
+  cond: boolean;
+}) {
+  'use memo';
+  const obj = props.cond ? props.a : props.b;
+  const result = obj?.getX();
+  return <Stringify value={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {getX: () => 'a'}, b: {getX: () => 'b'}, cond: true}],
+  sequentialRenders: [
+    {a: {getX: () => 'a'}, b: {getX: () => 'b'}, cond: true},
+    {a: {getX: () => 'a'}, b: {getX: () => 'b'}, cond: false},
+    {a: null, b: {getX: () => 'b'}, cond: true},
+    {a: {getX: () => 'a'}, b: null, cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { Stringify } from "shared-runtime";
+
+// Test ternary expression producing the value used in optional chaining with method call
+function Component(props) {
+  "use memo";
+  const $ = _c(4);
+
+  const obj = props.cond ? props.a : props.b;
+  let t0;
+  if ($[0] !== obj) {
+    t0 = obj?.getX();
+    $[0] = obj;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const result = t0;
+  let t1;
+  if ($[2] !== result) {
+    t1 = <Stringify value={result} />;
+    $[2] = result;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      a: {
+        getX: () => {
+          return "a";
+        },
+      },
+      b: {
+        getX: () => {
+          return "b";
+        },
+      },
+      cond: true,
+    },
+  ],
+  sequentialRenders: [
+    {
+      a: {
+        getX: () => {
+          return "a";
+        },
+      },
+      b: {
+        getX: () => {
+          return "b";
+        },
+      },
+      cond: true,
+    },
+    {
+      a: {
+        getX: () => {
+          return "a";
+        },
+      },
+      b: {
+        getX: () => {
+          return "b";
+        },
+      },
+      cond: false,
+    },
+    {
+      a: null,
+      b: {
+        getX: () => {
+          return "b";
+        },
+      },
+      cond: true,
+    },
+    {
+      a: {
+        getX: () => {
+          return "a";
+        },
+      },
+      b: null,
+      cond: false,
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"value":"a"}</div>
+<div>{"value":"b"}</div>
+<div>{}</div>
+<div>{}</div>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-inside-optional-consequent-with-method.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-inside-optional-consequent-with-method.tsx
new file mode 100644
index 00000000000..de37973a580
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-inside-optional-consequent-with-method.tsx
@@ -0,0 +1,24 @@
+import {Stringify} from 'shared-runtime';
+
+// Test ternary expression producing the value used in optional chaining with method call
+function Component(props: {
+  a: {getX(): string} | null;
+  b: {getX(): string} | null;
+  cond: boolean;
+}) {
+  'use memo';
+  const obj = props.cond ? props.a : props.b;
+  const result = obj?.getX();
+  return <Stringify value={result} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {getX: () => 'a'}, b: {getX: () => 'b'}, cond: true}],
+  sequentialRenders: [
+    {a: {getX: () => 'a'}, b: {getX: () => 'b'}, cond: true},
+    {a: {getX: () => 'a'}, b: {getX: () => 'b'}, cond: false},
+    {a: null, b: {getX: () => 'b'}, cond: true},
+    {a: {getX: () => 'a'}, b: null, cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-inside-optional-consequent.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-inside-optional-consequent.expect.md
new file mode 100644
index 00000000000..3f302c43d16
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-inside-optional-consequent.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+// Test ternary expression producing the value used in optional chaining
+function Component(props: {
+  a: {x: string} | null;
+  b: {x: string} | null;
+  cond: boolean;
+}) {
+  'use memo';
+  const obj = props.cond ? props.a : props.b;
+  return obj?.x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {x: 'a'}, b: {x: 'b'}, cond: true}],
+  sequentialRenders: [
+    {a: {x: 'a'}, b: {x: 'b'}, cond: true}, // picks a -> 'a'
+    {a: {x: 'a'}, b: {x: 'b'}, cond: false}, // picks b -> 'b'
+    {a: null, b: {x: 'b'}, cond: true}, // picks a (null) -> undefined
+    {a: {x: 'a'}, b: null, cond: false}, // picks b (null) -> undefined
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+// Test ternary expression producing the value used in optional chaining
+function Component(props) {
+  "use memo";
+
+  const obj = props.cond ? props.a : props.b;
+  return obj?.x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: { x: "a" }, b: { x: "b" }, cond: true }],
+  sequentialRenders: [
+    { a: { x: "a" }, b: { x: "b" }, cond: true }, // picks a -> 'a'
+    { a: { x: "a" }, b: { x: "b" }, cond: false }, // picks b -> 'b'
+    { a: null, b: { x: "b" }, cond: true }, // picks a (null) -> undefined
+    { a: { x: "a" }, b: null, cond: false }, // picks b (null) -> undefined
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) "a"
+"b"
+
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-inside-optional-consequent.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-inside-optional-consequent.ts
new file mode 100644
index 00000000000..1c31d8a4ef9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ternary-inside-optional-consequent.ts
@@ -0,0 +1,21 @@
+// Test ternary expression producing the value used in optional chaining
+function Component(props: {
+  a: {x: string} | null;
+  b: {x: string} | null;
+  cond: boolean;
+}) {
+  'use memo';
+  const obj = props.cond ? props.a : props.b;
+  return obj?.x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: {x: 'a'}, b: {x: 'b'}, cond: true}],
+  sequentialRenders: [
+    {a: {x: 'a'}, b: {x: 'b'}, cond: true}, // picks a -> 'a'
+    {a: {x: 'a'}, b: {x: 'b'}, cond: false}, // picks b -> 'b'
+    {a: null, b: {x: 'b'}, cond: true}, // picks a (null) -> undefined
+    {a: {x: 'a'}, b: null, cond: false}, // picks b (null) -> undefined
+  ],
+};

From 717abffa53bee5f45c5c2bd25bd98f3ea21bb2da Mon Sep 17 00:00:00 2001
From: Joe Savona <joesavona@fb.com>
Date: Fri, 23 Jan 2026 11:07:42 -0800
Subject: [PATCH 5/6] [compiler] Improve impurity/ref validation

# Summary

note: This implements the idea discussed in https://github.com/reactwg/react/discussions/389#discussioncomment-14252280

This is a large PR that significantly changes our impurity and ref validation to address multiple issues. The goal is to reduce false positives and make the errors we do report more actionable.

## Validating Against Impure Values In Render

Currently we create `Impure` effects for impure functions like `Date.now()` or `Math.random()`, and then throw if the effect is reachable during render. However, impurity is a property of the resulting value: if the value isn't accessed during render then it's okay: maybe you're console-logging the time while debugging (fine), or storing the impure value into a ref and only accessing it in an effect or event handler (totally ok).

This PR updates to validate that impure values are not transitively consumed during render, building on the new effects system: rather than look at instruction types, we use effects like `Capture a -> b`, `Impure a`, and `Render b` to determine how impure values are introduced and where they flow through the program. We're intentionally conservative, and do _not_ propagate impurity through MaybeCapture effects, which is used for functions we don't have signatures for. This means that things like `identity(performance.now())` drop the impurity. This feels like a good compromise since it means we have very high confidence in the errors that we report and can always add increased strictness later as our confidence increases.

An example error:

```
Error: Cannot access impure value during render

Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).

error.invalid-impure-value-in-render-helper.ts:5:17
  3 |   const now = () => Date.now();
  4 |   const render = () => {
> 5 |     return <div>{now()}</div>;
    |                  ^^^^^ Cannot access impure value during render
  6 |   };
  7 |   return <div>{render()}</div>;
  8 | }

error.invalid-impure-value-in-render-helper.ts:3:20
  1 | // @validateNoImpureFunctionsInRender
  2 | function Component() {
> 3 |   const now = () => Date.now();
    |                     ^^^^^^^^^^ `Date.now` is an impure function.
  4 |   const render = () => {
  5 |     return <div>{now()}</div>;
  6 |   };
```

Impure values are allowed to flow into refs, meaning that we now allow `useRef(Date.now())` or `useRef(localFunctionThatReturnsMathDotRandom())` which would have errored previously. The next PR reuses this improved impurity tracking to validate ref access in render as well.

## Refs Now Treated As Impure Values in Render

Reading a ref now produces an `Impure` effect, and reading refs in render is validated using the above validation against impure values in render. The error category and message is customized for refs, we're just reusing the validation implementation. This means you get consistent results for `performance.now()` as for `ref.current`. A nice consistency win.

## Simplified writing-ref validation

Now that _reading_ a ref in render is validated using the impure values infra, I also dramatically simplified ValidateNoRefAccessInRender to focus solely on validation against _writing_ refs during render. It was harder to use the new effects infra for this since we intentionally do not record ref mutations as a `Mutate` effect. So for now, the pass switches on InstructionValue variants. We continue to support the `if (ref.current == null) { ref.current = <init> }` pattern and reasonable variants of it. We're conservative about what we consider to be a write of a ref - `foo(ref)` now assumes you're not mutating rather than the inverse.

# Takeaways

* Impure-values-in-render logic is more conservative about what it considers an error (ie to users it appears more persmissive). We follow clearly identifiable (and if we wanted traceable/explainable) paths from impure sources through to where they are rendered. We allow many more cases than before, notably `x = foo(ref)` optimistically assumes you don't read the ref. Concretely, this follows from not tracking impure values across MaybeCapture effects.
* No-writing-refs-in-render is also more conservative about what it counts as a write, appearing to users as allowing more cases. We look for very direct evidence of writing to refs, ie `ref.current = <value>` or `ref.current.property = <value>`, and allow potential writes through eg `writeToRef(ref, value)`.
---
 compiler/CHANGELOG.md                         |    4 +
 .../src/Entrypoint/Pipeline.ts                |   17 +-
 .../src/HIR/Globals.ts                        |  220 ++-
 .../src/HIR/HIR.ts                            |   36 +-
 .../src/HIR/HIRBuilder.ts                     |    2 +-
 .../src/HIR/ObjectShape.ts                    |   25 +-
 .../src/HIR/PrintHIR.ts                       |   12 +-
 .../src/HIR/TypeSchema.ts                     |   23 +-
 .../src/Inference/AliasingEffects.ts          |   20 +-
 .../src/Inference/ControlDominators.ts        |   12 +-
 .../Inference/InferMutationAliasingEffects.ts |  193 ++-
 .../Inference/InferMutationAliasingRanges.ts  |  183 ++-
 .../src/Utils/utils.ts                        |    8 +
 .../ValidateNoImpureFunctionsInRender.ts      |   59 -
 .../ValidateNoImpureValuesInRender.ts         |  396 ++++++
 .../Validation/ValidateNoRefAccessInRender.md |  137 ++
 .../Validation/ValidateNoRefAccessInRender.ts | 1189 +++++------------
 .../Validation/ValidateNoSetStateInEffects.ts |    8 +-
 ...-mutate-object-with-ref-function.expect.md |   51 +
 ...render-mutate-object-with-ref-function.js} |    4 +
 .../capture-ref-for-mutation.expect.md        |   74 +
 ...ation.tsx => capture-ref-for-mutation.tsx} |    4 +
 ...ing-function-in-rendered-object.expect.md} |    8 +
 ...-returning-function-in-rendered-object.js} |    4 +
 ...global-in-component-tag-function.expect.md |    7 +-
 ...assign-global-in-component-tag-function.js |    1 +
 ...or.assign-global-in-jsx-children.expect.md |    7 +-
 .../error.assign-global-in-jsx-children.js    |    1 +
 .../error.capture-ref-for-mutation.expect.md  |   64 -
 .../compiler/error.hook-ref-value.expect.md   |   14 +-
 ...invalid-access-ref-during-render.expect.md |   12 +-
 ...valid-access-ref-in-reducer-init.expect.md |   13 +-
 ...or.invalid-access-ref-in-reducer.expect.md |   37 +-
 ...-mutate-object-with-ref-function.expect.md |   37 -
 ...-access-ref-in-state-initializer.expect.md |   37 +-
 ...-callback-invoked-during-render-.expect.md |   22 +-
 ...tating-refs-in-render-transitive.expect.md |   16 +-
 ...-in-render-indirect-via-mutation.expect.md |   52 +
 ...nctions-in-render-indirect-via-mutation.js |   16 +
 ...ions-in-render-via-function-call.expect.md |   50 +
 ...e-functions-in-render-via-function-call.js |   14 +
 ...n-render-via-render-helper-typed.expect.md |   51 +
 ...tions-in-render-via-render-helper-typed.js |   14 +
 ...valid-impure-functions-in-render.expect.md |   42 +-
 ...id-impure-value-in-render-helper.expect.md |   66 +
 ...r.invalid-impure-value-in-render-helper.js |    8 +
 ...ror.invalid-pass-ref-to-function.expect.md |   34 -
 .../error.invalid-pass-ref-to-function.js     |    6 -
 ...d-ref-prop-in-render-destructure.expect.md |   12 +-
 ...ref-prop-in-render-property-load.expect.md |   12 +-
 ....invalid-ref-access-render-unary.expect.md |   50 +-
 ...n-callback-invoked-during-render.expect.md |   26 +-
 ...lid-ref-initialization-unary-not.expect.md |   16 +-
 ...error.invalid-ref-value-as-props.expect.md |    4 +-
 ...d-set-and-read-ref-during-render.expect.md |   19 +-
 ...ef-nested-property-during-render.expect.md |   19 +-
 ...f-added-to-dep-without-type-info.expect.md |   53 -
 ...-use-ref-added-to-dep-without-type-info.js |   13 -
 ...ror.ref-initialization-arbitrary.expect.md |   14 +-
 .../error.ref-initialization-call-2.expect.md |   41 -
 .../error.ref-initialization-call.expect.md   |   41 -
 .../error.ref-initialization-linear.expect.md |   10 +-
 .../error.ref-initialization-nonif.expect.md  |   22 +-
 ...ref-initialization-post-access-2.expect.md |   42 -
 .../compiler/error.ref-optional.expect.md     |    4 +-
 ...-component-event-handler-wrapper.expect.md |   69 -
 ...f-value-in-event-handler-wrapper.expect.md |   55 -
 ...ified-later-preserve-memoization.expect.md |    2 +-
 ...ia-function-preserve-memoization.expect.md |   12 +-
 ...operty-dont-preserve-memoization.expect.md |    2 +-
 ...alidate-mutate-ref-arg-in-render.expect.md |   39 -
 .../error.invalid-exhaustive-deps.expect.md   |    2 +-
 .../error.invalid-exhaustive-deps.js          |    2 +-
 ...ure-functions-in-render-indirect.expect.md |   56 +
 .../impure-functions-in-render-indirect.js    |   15 +
 ...ns-in-render-via-function-call-2.expect.md |   64 +
 ...functions-in-render-via-function-call-2.js |   19 +
 ...utate-after-useeffect-ref-access.expect.md |    2 +-
 ...valid-impure-functions-in-render.expect.md |   42 +-
 ...utate-after-useeffect-ref-access.expect.md |    2 +-
 .../compiler/pass-ref-to-function.expect.md   |   45 +
 .../fixtures/compiler/pass-ref-to-function.js |   11 +
 ....maybe-mutable-ref-not-preserved.expect.md |   42 -
 .../error.useMemo-with-refs.flow.expect.md    |   37 -
 .../maybe-mutable-ref-not-preserved.expect.md |   59 +
 ....ts => maybe-mutable-ref-not-preserved.ts} |    4 +
 .../useMemo-with-refs.flow.expect.md          |   52 +
 ...refs.flow.js => useMemo-with-refs.flow.js} |    0
 .../ref-initialization-call-2.expect.md       |   46 +
 ...call-2.js => ref-initialization-call-2.js} |    4 +
 .../ref-initialization-call.expect.md         |   46 +
 ...ion-call.js => ref-initialization-call.js} |    4 +
 ...ref-initialization-post-access-2.expect.md |   49 +
 ...js => ref-initialization-post-access-2.js} |    4 +
 ...-component-event-handler-wrapper.expect.md |  121 ++
 ...ustom-component-event-handler-wrapper.tsx} |    4 +-
 ...f-value-in-event-handler-wrapper.expect.md |   83 ++
 ...=> ref-value-in-event-handler-wrapper.tsx} |    4 +-
 .../compiler/return-ref-callback.expect.md    |   14 +-
 .../fixtures/compiler/return-ref-callback.js  |    6 +-
 ...lout-validate-ref-current-access.expect.md |   38 +-
 ...f-added-to-dep-without-type-info.expect.md |   59 +
 .../use-ref-added-to-dep-without-type-info.js |   14 +
 ...ions-in-render-via-render-helper.expect.md |   51 +
 ...e-functions-in-render-via-render-helper.js |   15 +
 .../valid-use-impure-value-in-ref.expect.md   |   49 +
 .../compiler/valid-use-impure-value-in-ref.js |    8 +
 ...alidate-mutate-ref-arg-in-render.expect.md |   51 +
 ...s => validate-mutate-ref-arg-in-render.js} |    2 +
 .../__tests__/ImpureFunctionCallsRule-test.ts |    6 +-
 .../__tests__/NoRefAccessInRender-tests.ts    |    2 +-
 111 files changed, 3168 insertions(+), 1853 deletions(-)
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoImpureFunctionsInRender.ts
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoImpureValuesInRender.ts
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccessInRender.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/access-ref-in-render-mutate-object-with-ref-function.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.invalid-access-ref-in-render-mutate-object-with-ref-function.js => access-ref-in-render-mutate-object-with-ref-function.js} (61%)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-mutation.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.capture-ref-for-mutation.tsx => capture-ref-for-mutation.tsx} (82%)
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{allow-assigning-ref-accessing-function-to-object-property-if-not-mutated.expect.md => capturing-ref-returning-function-in-rendered-object.expect.md} (80%)
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{allow-assigning-ref-accessing-function-to-object-property-if-not-mutated.js => capturing-ref-returning-function-in-rendered-object.js} (72%)
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-mutation.expect.md
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-render-mutate-object-with-ref-function.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-indirect-via-mutation.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-indirect-via-mutation.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-function-call.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-function-call.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-render-helper-typed.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-render-helper-typed.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-value-in-render-helper.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-value-in-render-helper.js
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.expect.md
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.js
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.expect.md
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.js
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call-2.expect.md
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call.expect.md
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access-2.expect.md
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-custom-component-event-handler-wrapper.expect.md
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-event-handler-wrapper.expect.md
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/impure-functions-in-render-indirect.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/impure-functions-in-render-indirect.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/impure-functions-in-render-via-function-call-2.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/impure-functions-in-render-via-function-call-2.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/pass-ref-to-function.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/pass-ref-to-function.js
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.expect.md
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-mutable-ref-not-preserved.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/{error.maybe-mutable-ref-not-preserved.ts => maybe-mutable-ref-not-preserved.ts} (69%)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-refs.flow.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/{error.useMemo-with-refs.flow.js => useMemo-with-refs.flow.js} (100%)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-initialization-call-2.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.ref-initialization-call-2.js => ref-initialization-call-2.js} (58%)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-initialization-call.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.ref-initialization-call.js => ref-initialization-call.js} (59%)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-initialization-post-access-2.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.ref-initialization-post-access-2.js => ref-initialization-post-access-2.js} (61%)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-value-in-custom-component-event-handler-wrapper.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.ref-value-in-custom-component-event-handler-wrapper.tsx => ref-value-in-custom-component-event-handler-wrapper.tsx} (84%)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-value-in-event-handler-wrapper.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.ref-value-in-event-handler-wrapper.tsx => ref-value-in-event-handler-wrapper.tsx} (74%)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-ref-added-to-dep-without-type-info.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-ref-added-to-dep-without-type-info.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-uncertain-impure-functions-in-render-via-render-helper.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-uncertain-impure-functions-in-render-via-render-helper.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-use-impure-value-in-ref.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-use-impure-value-in-ref.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-mutate-ref-arg-in-render.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.validate-mutate-ref-arg-in-render.js => validate-mutate-ref-arg-in-render.js} (75%)

diff --git a/compiler/CHANGELOG.md b/compiler/CHANGELOG.md
index 32e21efba0c..0ff36d9459c 100644
--- a/compiler/CHANGELOG.md
+++ b/compiler/CHANGELOG.md
@@ -1,3 +1,7 @@
+## Pending
+
+* Improve impurity and ref validation, reducing false positives [#35298](https://github.com/facebook/react/pull/35298) by [@josephsavona](https://github.com/josephsavona)
+
 ## 19.1.0-rc.2 (May 14, 2025)
 
 ## babel-plugin-react-compiler
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts
index 30d66522715..d579968e178 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts
@@ -96,7 +96,6 @@ import {propagateScopeDependenciesHIR} from '../HIR/PropagateScopeDependenciesHI
 import {outlineJSX} from '../Optimization/OutlineJsx';
 import {optimizePropsMethodCalls} from '../Optimization/OptimizePropsMethodCalls';
 import {transformFire} from '../Transform';
-import {validateNoImpureFunctionsInRender} from '../Validation/ValidateNoImpureFunctionsInRender';
 import {validateStaticComponents} from '../Validation/ValidateStaticComponents';
 import {validateNoFreezingKnownMutableFunctions} from '../Validation/ValidateNoFreezingKnownMutableFunctions';
 import {inferMutationAliasingEffects} from '../Inference/InferMutationAliasingEffects';
@@ -107,6 +106,7 @@ import {nameAnonymousFunctions} from '../Transform/NameAnonymousFunctions';
 import {optimizeForSSR} from '../Optimization/OptimizeForSSR';
 import {validateExhaustiveDependencies} from '../Validation/ValidateExhaustiveDependencies';
 import {validateSourceLocations} from '../Validation/ValidateSourceLocations';
+import {validateNoImpureValuesInRender} from '../Validation/ValidateNoImpureValuesInRender';
 
 export type CompilerPipelineValue =
   | {kind: 'ast'; name: string; value: CodegenFunction}
@@ -271,10 +271,6 @@ function runWithEnvironment(
       assertValidMutableRanges(hir);
     }
 
-    if (env.config.validateRefAccessDuringRender) {
-      validateNoRefAccessInRender(hir).unwrap();
-    }
-
     if (env.config.validateNoSetStateInRender) {
       validateNoSetStateInRender(hir).unwrap();
     }
@@ -296,8 +292,15 @@ function runWithEnvironment(
       env.logErrors(validateNoJSXInTryStatement(hir));
     }
 
-    if (env.config.validateNoImpureFunctionsInRender) {
-      validateNoImpureFunctionsInRender(hir).unwrap();
+    if (
+      env.config.validateNoImpureFunctionsInRender ||
+      env.config.validateRefAccessDuringRender
+    ) {
+      validateNoImpureValuesInRender(hir).unwrap();
+    }
+
+    if (env.config.validateRefAccessDuringRender) {
+      validateNoRefAccessInRender(hir).unwrap();
     }
 
     validateNoFreezingKnownMutableFunctions(hir).unwrap();
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts
index 441b5d5452a..e13f27caf12 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts
@@ -38,7 +38,7 @@ import {
   addObject,
 } from './ObjectShape';
 import {BuiltInType, ObjectType, PolyType} from './Types';
-import {TypeConfig} from './TypeSchema';
+import {AliasingSignatureConfig, TypeConfig} from './TypeSchema';
 import {assertExhaustive} from '../Utils/utils';
 import {isHookName} from './Environment';
 import {CompilerError, SourceLocation} from '..';
@@ -626,11 +626,136 @@ const TYPED_GLOBALS: Array<[string, BuiltInType]> = [
   // TODO: rest of Global objects
 ];
 
+const createRenderHookAliasing: (
+  reason: ValueReason,
+) => AliasingSignatureConfig = reason => ({
+  receiver: '@receiver',
+  params: [],
+  rest: '@rest',
+  returns: '@returns',
+  temporaries: [],
+  effects: [
+    // Freeze the arguments
+    {
+      kind: 'Freeze',
+      value: '@rest',
+      reason: ValueReason.HookCaptured,
+    },
+    // Render the arguments
+    {
+      kind: 'Render',
+      place: '@rest',
+    },
+    // Returns a frozen value
+    {
+      kind: 'Create',
+      into: '@returns',
+      value: ValueKind.Frozen,
+      reason,
+    },
+    // May alias any arguments into the return
+    {
+      kind: 'Alias',
+      from: '@rest',
+      into: '@returns',
+    },
+  ],
+});
+
+const EffectHookAliasing: AliasingSignatureConfig = {
+  receiver: '@receiver',
+  params: ['@fn', '@deps'],
+  rest: '@rest',
+  returns: '@returns',
+  temporaries: ['@effect'],
+  effects: [
+    // Freezes the function and deps
+    {
+      kind: 'Freeze',
+      value: '@rest',
+      reason: ValueReason.Effect,
+    },
+    {
+      kind: 'Freeze',
+      value: '@fn',
+      reason: ValueReason.Effect,
+    },
+    {
+      kind: 'Freeze',
+      value: '@deps',
+      reason: ValueReason.Effect,
+    },
+    // Deps are accessed during render
+    {
+      kind: 'Render',
+      place: '@deps',
+    },
+    // Internally creates an effect object that captures the function and deps
+    {
+      kind: 'Create',
+      into: '@effect',
+      value: ValueKind.Frozen,
+      reason: ValueReason.KnownReturnSignature,
+    },
+    // The effect stores the function and dependencies
+    {
+      kind: 'Capture',
+      from: '@rest',
+      into: '@effect',
+    },
+    {
+      kind: 'Capture',
+      from: '@fn',
+      into: '@effect',
+    },
+    // Returns undefined
+    {
+      kind: 'Create',
+      into: '@returns',
+      value: ValueKind.Primitive,
+      reason: ValueReason.KnownReturnSignature,
+    },
+  ],
+};
+
 /*
  * TODO(mofeiZ): We currently only store rest param effects for hooks.
  * now that FeatureFlag `enableTreatHooksAsFunctions` is removed we can
  * use positional params too (?)
  */
+const useEffectEvent = addHook(
+  DEFAULT_SHAPES,
+  {
+    positionalParams: [],
+    restParam: Effect.Freeze,
+    returnType: {
+      kind: 'Function',
+      return: {kind: 'Poly'},
+      shapeId: BuiltInEffectEventId,
+      isConstructor: false,
+    },
+    calleeEffect: Effect.Read,
+    hookKind: 'useEffectEvent',
+    // Frozen because it should not mutate any locally-bound values
+    returnValueKind: ValueKind.Frozen,
+    aliasing: {
+      receiver: '@receiver',
+      params: ['@value'],
+      rest: null,
+      returns: '@return',
+      temporaries: [],
+      effects: [
+        {
+          kind: 'Freeze',
+          value: '@value',
+          reason: ValueReason.HookCaptured,
+        },
+        {kind: 'Assign', from: '@value', into: '@return'},
+      ],
+    },
+  },
+  BuiltInUseEffectEventId,
+);
 const REACT_APIS: Array<[string, BuiltInType]> = [
   [
     'useContext',
@@ -644,6 +769,7 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
         hookKind: 'useContext',
         returnValueKind: ValueKind.Frozen,
         returnValueReason: ValueReason.Context,
+        aliasing: createRenderHookAliasing(ValueReason.Context),
       },
       BuiltInUseContextHookId,
     ),
@@ -658,6 +784,7 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
       hookKind: 'useState',
       returnValueKind: ValueKind.Frozen,
       returnValueReason: ValueReason.State,
+      aliasing: createRenderHookAliasing(ValueReason.State),
     }),
   ],
   [
@@ -670,6 +797,7 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
       hookKind: 'useActionState',
       returnValueKind: ValueKind.Frozen,
       returnValueReason: ValueReason.State,
+      aliasing: createRenderHookAliasing(ValueReason.HookCaptured),
     }),
   ],
   [
@@ -682,6 +810,7 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
       hookKind: 'useReducer',
       returnValueKind: ValueKind.Frozen,
       returnValueReason: ValueReason.ReducerState,
+      aliasing: createRenderHookAliasing(ValueReason.ReducerState),
     }),
   ],
   [
@@ -693,6 +822,22 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
       calleeEffect: Effect.Read,
       hookKind: 'useRef',
       returnValueKind: ValueKind.Mutable,
+      aliasing: {
+        receiver: '@receiver',
+        params: [],
+        rest: '@rest',
+        returns: '@return',
+        temporaries: [],
+        effects: [
+          {
+            kind: 'Create',
+            into: '@return',
+            value: ValueKind.Mutable,
+            reason: ValueReason.KnownReturnSignature,
+          },
+          {kind: 'Capture', from: '@rest', into: '@return'},
+        ],
+      },
     }),
   ],
   [
@@ -715,6 +860,7 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
       calleeEffect: Effect.Read,
       hookKind: 'useMemo',
       returnValueKind: ValueKind.Frozen,
+      aliasing: createRenderHookAliasing(ValueReason.HookCaptured),
     }),
   ],
   [
@@ -722,10 +868,16 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
     addHook(DEFAULT_SHAPES, {
       positionalParams: [],
       restParam: Effect.Freeze,
-      returnType: {kind: 'Poly'},
+      returnType: {
+        kind: 'Function',
+        isConstructor: false,
+        return: {kind: 'Poly'},
+        shapeId: null,
+      },
       calleeEffect: Effect.Read,
       hookKind: 'useCallback',
       returnValueKind: ValueKind.Frozen,
+      aliasing: createRenderHookAliasing(ValueReason.HookCaptured),
     }),
   ],
   [
@@ -739,41 +891,7 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
         calleeEffect: Effect.Read,
         hookKind: 'useEffect',
         returnValueKind: ValueKind.Frozen,
-        aliasing: {
-          receiver: '@receiver',
-          params: [],
-          rest: '@rest',
-          returns: '@returns',
-          temporaries: ['@effect'],
-          effects: [
-            // Freezes the function and deps
-            {
-              kind: 'Freeze',
-              value: '@rest',
-              reason: ValueReason.Effect,
-            },
-            // Internally creates an effect object that captures the function and deps
-            {
-              kind: 'Create',
-              into: '@effect',
-              value: ValueKind.Frozen,
-              reason: ValueReason.KnownReturnSignature,
-            },
-            // The effect stores the function and dependencies
-            {
-              kind: 'Capture',
-              from: '@rest',
-              into: '@effect',
-            },
-            // Returns undefined
-            {
-              kind: 'Create',
-              into: '@returns',
-              value: ValueKind.Primitive,
-              reason: ValueReason.KnownReturnSignature,
-            },
-          ],
-        },
+        aliasing: EffectHookAliasing,
       },
       BuiltInUseEffectHookId,
     ),
@@ -789,6 +907,7 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
         calleeEffect: Effect.Read,
         hookKind: 'useLayoutEffect',
         returnValueKind: ValueKind.Frozen,
+        aliasing: EffectHookAliasing,
       },
       BuiltInUseLayoutEffectHookId,
     ),
@@ -804,6 +923,7 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
         calleeEffect: Effect.Read,
         hookKind: 'useInsertionEffect',
         returnValueKind: ValueKind.Frozen,
+        aliasing: EffectHookAliasing,
       },
       BuiltInUseInsertionEffectHookId,
     ),
@@ -817,6 +937,7 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
       calleeEffect: Effect.Read,
       hookKind: 'useTransition',
       returnValueKind: ValueKind.Frozen,
+      aliasing: createRenderHookAliasing(ValueReason.HookCaptured),
     }),
   ],
   [
@@ -829,6 +950,7 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
       hookKind: 'useOptimistic',
       returnValueKind: ValueKind.Frozen,
       returnValueReason: ValueReason.State,
+      aliasing: createRenderHookAliasing(ValueReason.HookCaptured),
     }),
   ],
   [
@@ -842,6 +964,7 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
         returnType: {kind: 'Poly'},
         calleeEffect: Effect.Read,
         returnValueKind: ValueKind.Frozen,
+        aliasing: createRenderHookAliasing(ValueReason.HookCaptured),
       },
       BuiltInUseOperatorId,
     ),
@@ -866,27 +989,8 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
       BuiltInFireId,
     ),
   ],
-  [
-    'useEffectEvent',
-    addHook(
-      DEFAULT_SHAPES,
-      {
-        positionalParams: [],
-        restParam: Effect.Freeze,
-        returnType: {
-          kind: 'Function',
-          return: {kind: 'Poly'},
-          shapeId: BuiltInEffectEventId,
-          isConstructor: false,
-        },
-        calleeEffect: Effect.Read,
-        hookKind: 'useEffectEvent',
-        // Frozen because it should not mutate any locally-bound values
-        returnValueKind: ValueKind.Frozen,
-      },
-      BuiltInUseEffectEventId,
-    ),
-  ],
+  ['useEffectEvent', useEffectEvent],
+  ['experimental_useEffectEvent', useEffectEvent],
   ['AUTODEPS', addObject(DEFAULT_SHAPES, BuiltInAutodepsId, [])],
 ];
 
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
index c396f6b0881..9e8dae0abd0 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
@@ -1879,7 +1879,15 @@ export function isRefValueType(id: Identifier): boolean {
 }
 
 export function isUseRefType(id: Identifier): boolean {
-  return id.type.kind === 'Object' && id.type.shapeId === 'BuiltInUseRefId';
+  return isUseRefType_(id.type);
+}
+
+export function isUseRefType_(type: Type): boolean {
+  return (
+    (type.kind === 'Object' && type.shapeId === 'BuiltInUseRefId') ||
+    (type.kind === 'Phi' &&
+      type.operands.some(operand => isUseRefType_(operand)))
+  );
 }
 
 export function isUseStateType(id: Identifier): boolean {
@@ -1890,6 +1898,13 @@ export function isJsxType(type: Type): boolean {
   return type.kind === 'Object' && type.shapeId === 'BuiltInJsx';
 }
 
+export function isJsxOrJsxUnionType(type: Type): boolean {
+  return (
+    (type.kind === 'Object' && type.shapeId === 'BuiltInJsx') ||
+    (type.kind === 'Phi' && type.operands.some(op => isJsxOrJsxUnionType(op)))
+  );
+}
+
 export function isRefOrRefValue(id: Identifier): boolean {
   return isUseRefType(id) || isRefValueType(id);
 }
@@ -2058,4 +2073,23 @@ export function getHookKindForType(
   return null;
 }
 
+export function areEqualSourceLocations(
+  loc1: SourceLocation,
+  loc2: SourceLocation,
+): boolean {
+  if (typeof loc1 === 'symbol' || typeof loc2 === 'symbol') {
+    return false;
+  }
+  return (
+    loc1.filename === loc2.filename &&
+    loc1.identifierName === loc2.identifierName &&
+    loc1.start.line === loc2.start.line &&
+    loc1.start.column === loc2.start.column &&
+    loc1.start.index === loc2.start.index &&
+    loc1.end.line === loc2.end.line &&
+    loc1.end.column === loc2.end.column &&
+    loc1.end.index === loc2.end.index
+  );
+}
+
 export * from './Types';
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIRBuilder.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIRBuilder.ts
index d3ecb2abdcd..1a2a56a7f79 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIRBuilder.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIRBuilder.ts
@@ -988,7 +988,7 @@ export function createTemporaryPlace(
     identifier: makeTemporaryIdentifier(env.nextIdentifierId, loc),
     reactive: false,
     effect: Effect.Unknown,
-    loc: GeneratedSource,
+    loc,
   };
 }
 
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts
index c92f9e55623..1ea88272d8c 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {CompilerError} from '../CompilerError';
+import {CompilerError, ErrorCategory} from '../CompilerError';
 import {AliasingEffect, AliasingSignature} from '../Inference/AliasingEffects';
 import {assertExhaustive} from '../Utils/utils';
 import {
@@ -190,14 +190,22 @@ function parseAliasingSignatureConfig(
           };
         }
         case 'Impure': {
-          const place = lookup(effect.place);
+          const into = lookup(effect.into);
           return {
             kind: 'Impure',
+            into,
+            category: ErrorCategory.Purity,
+            description: effect.description,
+            reason: effect.reason,
+            sourceMessage: effect.sourceMessage,
+            usageMessage: effect.usageMessage,
+          };
+        }
+        case 'Render': {
+          const place = lookup(effect.place);
+          return {
+            kind: 'Render',
             place,
-            error: CompilerError.throwTodo({
-              reason: 'Support impure effect declarations',
-              loc: GeneratedSource,
-            }),
           };
         }
         case 'Apply': {
@@ -1513,6 +1521,11 @@ export const DefaultNonmutatingHook = addHook(
           value: '@rest',
           reason: ValueReason.HookCaptured,
         },
+        // Render the arguments
+        {
+          kind: 'Render',
+          place: '@rest',
+        },
         // Returns a frozen value
         {
           kind: 'Create',
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts
index 71fb4c43b33..0fcbb8c4de4 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts
@@ -983,15 +983,7 @@ export function printAliasingEffect(effect: AliasingEffect): string {
           return `...${printPlaceForAliasEffect(arg.place)}`;
         })
         .join(', ');
-      let signature = '';
-      if (effect.signature != null) {
-        if (effect.signature.aliasing != null) {
-          signature = printAliasingSignature(effect.signature.aliasing);
-        } else {
-          signature = JSON.stringify(effect.signature, null, 2);
-        }
-      }
-      return `Apply ${printPlaceForAliasEffect(effect.into)} = ${receiverCallee}(${args})${signature != '' ? '\n     ' : ''}${signature}`;
+      return `Apply ${printPlaceForAliasEffect(effect.into)} = ${receiverCallee}(${args})`;
     }
     case 'Freeze': {
       return `Freeze ${printPlaceForAliasEffect(effect.value)} ${effect.reason}`;
@@ -1009,7 +1001,7 @@ export function printAliasingEffect(effect: AliasingEffect): string {
       return `MutateGlobal ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.reason)}`;
     }
     case 'Impure': {
-      return `Impure ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.reason)}`;
+      return `Impure ${printPlaceForAliasEffect(effect.into)} reason=${effect.reason} description=${effect.description}`;
     }
     case 'Render': {
       return `Render ${printPlaceForAliasEffect(effect.place)}`;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/TypeSchema.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/TypeSchema.ts
index eeaaebf7a39..a88d70aa7e4 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/TypeSchema.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/TypeSchema.ts
@@ -185,11 +185,29 @@ export const ApplyEffectSchema: z.ZodType<ApplyEffectConfig> = z.object({
 
 export type ImpureEffectConfig = {
   kind: 'Impure';
-  place: string;
+  into: string;
+  reason: string;
+  description: string;
+  sourceMessage: string;
+  usageMessage: string;
 };
 
 export const ImpureEffectSchema: z.ZodType<ImpureEffectConfig> = z.object({
   kind: z.literal('Impure'),
+  into: LifetimeIdSchema,
+  reason: z.string(),
+  description: z.string(),
+  sourceMessage: z.string(),
+  usageMessage: z.string(),
+});
+
+export type RenderEffectConfig = {
+  kind: 'Render';
+  place: string;
+};
+
+export const RenderEffectSchema: z.ZodType<RenderEffectConfig> = z.object({
+  kind: z.literal('Render'),
   place: LifetimeIdSchema,
 });
 
@@ -204,7 +222,8 @@ export type AliasingEffectConfig =
   | ImpureEffectConfig
   | MutateEffectConfig
   | MutateTransitiveConditionallyConfig
-  | ApplyEffectConfig;
+  | ApplyEffectConfig
+  | RenderEffectConfig;
 
 export const AliasingEffectSchema: z.ZodType<AliasingEffectConfig> = z.union([
   FreezeEffectSchema,
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/AliasingEffects.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/AliasingEffects.ts
index 7f30e25a5c0..ce13cf0c3e0 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Inference/AliasingEffects.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/AliasingEffects.ts
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {CompilerDiagnostic} from '../CompilerError';
+import {CompilerDiagnostic, ErrorCategory} from '../CompilerError';
 import {
   FunctionExpression,
   GeneratedSource,
@@ -162,7 +162,15 @@ export type AliasingEffect =
   /**
    * Indicates a side-effect that is not safe during render
    */
-  | {kind: 'Impure'; place: Place; error: CompilerDiagnostic}
+  | {
+      kind: 'Impure';
+      into: Place;
+      category: ErrorCategory;
+      reason: string;
+      description: string;
+      usageMessage: string;
+      sourceMessage: string;
+    }
   /**
    * Indicates that a given place is accessed during render. Used to distingush
    * hook arguments that are known to be called immediately vs those used for
@@ -222,6 +230,14 @@ export function hashEffect(effect: AliasingEffect): string {
       return [effect.kind, effect.value.identifier.id, effect.reason].join(':');
     }
     case 'Impure':
+      return [
+        effect.kind,
+        effect.into.identifier.id,
+        effect.reason,
+        effect.description,
+        effect.usageMessage,
+        effect.sourceMessage,
+      ].join(':');
     case 'Render': {
       return [effect.kind, effect.place.identifier.id].join(':');
     }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/ControlDominators.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/ControlDominators.ts
index 1fab651947a..b6fd85cd054 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Inference/ControlDominators.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/ControlDominators.ts
@@ -8,7 +8,7 @@
 import {BlockId, computePostDominatorTree, HIRFunction, Place} from '../HIR';
 import {PostDominator} from '../HIR/Dominator';
 
-export type ControlDominators = (id: BlockId) => boolean;
+export type ControlDominators = (id: BlockId) => Place | null;
 
 /**
  * Returns an object that lazily calculates whether particular blocks are controlled
@@ -23,7 +23,7 @@ export function createControlDominators(
   });
   const postDominatorFrontierCache = new Map<BlockId, Set<BlockId>>();
 
-  function isControlledBlock(id: BlockId): boolean {
+  function isControlledBlock(id: BlockId): Place | null {
     let controlBlocks = postDominatorFrontierCache.get(id);
     if (controlBlocks === undefined) {
       controlBlocks = postDominatorFrontier(fn, postDominators, id);
@@ -35,24 +35,24 @@ export function createControlDominators(
         case 'if':
         case 'branch': {
           if (isControlVariable(controlBlock.terminal.test)) {
-            return true;
+            return controlBlock.terminal.test;
           }
           break;
         }
         case 'switch': {
           if (isControlVariable(controlBlock.terminal.test)) {
-            return true;
+            return controlBlock.terminal.test;
           }
           for (const case_ of controlBlock.terminal.cases) {
             if (case_.test !== null && isControlVariable(case_.test)) {
-              return true;
+              return case_.test;
             }
           }
           break;
         }
       }
     }
-    return false;
+    return null;
   }
 
   return isControlledBlock;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts
index 4a027b87b6a..98ab8a03a52 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts
@@ -27,11 +27,12 @@ import {
   InstructionKind,
   InstructionValue,
   isArrayType,
-  isJsxType,
+  isJsxOrJsxUnionType,
   isMapType,
   isPrimitiveType,
   isRefOrRefValue,
   isSetType,
+  isUseRefType,
   makeIdentifierId,
   Phi,
   Place,
@@ -70,6 +71,7 @@ import {
   MutationReason,
 } from './AliasingEffects';
 import {ErrorCategory} from '../CompilerError';
+import {REF_ERROR_DESCRIPTION} from '../Validation/ValidateNoRefAccessInRender';
 
 const DEBUG = false;
 
@@ -569,14 +571,32 @@ function inferBlock(
       terminal.effects = effects.length !== 0 ? effects : null;
     }
   } else if (terminal.kind === 'return') {
+    terminal.effects = [
+      context.internEffect({
+        kind: 'Alias',
+        from: terminal.value,
+        into: context.fn.returns,
+      }),
+    ];
     if (!context.isFuctionExpression) {
-      terminal.effects = [
+      terminal.effects.push(
         context.internEffect({
           kind: 'Freeze',
           value: terminal.value,
           reason: ValueReason.JsxCaptured,
         }),
-      ];
+      );
+    }
+    if (
+      context.fn.fnType === 'Component' ||
+      isJsxOrJsxUnionType(context.fn.returns.identifier.type)
+    ) {
+      terminal.effects.push(
+        context.internEffect({
+          kind: 'Render',
+          place: terminal.value,
+        }),
+      );
     }
   }
 }
@@ -749,17 +769,7 @@ function applyEffect(
       break;
     }
     case 'ImmutableCapture': {
-      const kind = state.kind(effect.from).kind;
-      switch (kind) {
-        case ValueKind.Global:
-        case ValueKind.Primitive: {
-          // no-op: we don't need to track data flow for copy types
-          break;
-        }
-        default: {
-          effects.push(effect);
-        }
-      }
+      effects.push(effect);
       break;
     }
     case 'CreateFrom': {
@@ -1061,6 +1071,17 @@ function applyEffect(
             reason: new Set(fromValue.reason),
           });
           state.define(effect.into, value);
+          applyEffect(
+            context,
+            state,
+            {
+              kind: 'ImmutableCapture',
+              from: effect.from,
+              into: effect.into,
+            },
+            initialized,
+            effects,
+          );
           break;
         }
         default: {
@@ -1072,6 +1093,8 @@ function applyEffect(
       break;
     }
     case 'Apply': {
+      effects.push(effect);
+
       const functionValues = state.values(effect.function);
       if (
         functionValues.length === 1 &&
@@ -1966,6 +1989,11 @@ function computeSignatureForInstruction(
           value: ValueKind.Primitive,
           reason: ValueReason.Other,
         });
+        effects.push({
+          kind: 'ImmutableCapture',
+          from: value.object,
+          into: lvalue,
+        });
       } else {
         effects.push({
           kind: 'CreateFrom',
@@ -1973,6 +2001,20 @@ function computeSignatureForInstruction(
           into: lvalue,
         });
       }
+      if (
+        env.config.validateRefAccessDuringRender &&
+        isUseRefType(value.object.identifier)
+      ) {
+        effects.push({
+          kind: 'Impure',
+          into: lvalue,
+          category: ErrorCategory.Refs,
+          reason: `Cannot access ref value during render`,
+          description: REF_ERROR_DESCRIPTION,
+          sourceMessage: `Ref is initially accessed`,
+          usageMessage: `Ref value is used during render`,
+        });
+      }
       break;
     }
     case 'PropertyStore':
@@ -2137,6 +2179,15 @@ function computeSignatureForInstruction(
           into: lvalue,
         });
       }
+      if (value.children != null) {
+        // Children are typically called during render, not used as an event/effect callback
+        for (const child of value.children) {
+          effects.push({
+            kind: 'Render',
+            place: child,
+          });
+        }
+      }
       if (value.kind === 'JsxExpression') {
         if (value.tag.kind === 'Identifier') {
           // Tags are render function, by definition they're called during render
@@ -2145,29 +2196,17 @@ function computeSignatureForInstruction(
             place: value.tag,
           });
         }
-        if (value.children != null) {
-          // Children are typically called during render, not used as an event/effect callback
-          for (const child of value.children) {
-            effects.push({
-              kind: 'Render',
-              place: child,
-            });
-          }
-        }
         for (const prop of value.props) {
-          if (
-            prop.kind === 'JsxAttribute' &&
-            prop.place.identifier.type.kind === 'Function' &&
-            (isJsxType(prop.place.identifier.type.return) ||
-              (prop.place.identifier.type.return.kind === 'Phi' &&
-                prop.place.identifier.type.return.operands.some(operand =>
-                  isJsxType(operand),
-                )))
-          ) {
-            // Any props which return jsx are assumed to be called during render
+          const place =
+            prop.kind === 'JsxAttribute' ? prop.place : prop.argument;
+          if (isUseRefType(place.identifier)) {
+            continue;
+          }
+          if (place.identifier.type.kind !== 'Function') {
+            // Functions are checked independently
             effects.push({
               kind: 'Render',
-              place: prop.place,
+              place,
             });
           }
         }
@@ -2203,6 +2242,11 @@ function computeSignatureForInstruction(
             value: ValueKind.Primitive,
             reason: ValueReason.Other,
           });
+          effects.push({
+            kind: 'ImmutableCapture',
+            from: value.value,
+            into: place,
+          });
         } else if (patternItem.kind === 'Identifier') {
           effects.push({
             kind: 'CreateFrom',
@@ -2384,15 +2428,46 @@ function computeSignatureForInstruction(
       });
       break;
     }
+    case 'BinaryExpression': {
+      effects.push({
+        kind: 'Create',
+        into: lvalue,
+        value: ValueKind.Primitive,
+        reason: ValueReason.Other,
+      });
+      effects.push({
+        kind: 'ImmutableCapture',
+        into: lvalue,
+        from: value.left,
+      });
+      effects.push({
+        kind: 'ImmutableCapture',
+        into: lvalue,
+        from: value.right,
+      });
+      break;
+    }
+    case 'UnaryExpression': {
+      effects.push({
+        kind: 'Create',
+        into: lvalue,
+        value: ValueKind.Primitive,
+        reason: ValueReason.Other,
+      });
+      effects.push({
+        kind: 'ImmutableCapture',
+        into: lvalue,
+        from: value.value,
+      });
+      break;
+    }
     case 'TaggedTemplateExpression':
-    case 'BinaryExpression':
     case 'Debugger':
     case 'JSXText':
     case 'MetaProperty':
     case 'Primitive':
     case 'RegExpLiteral':
     case 'TemplateLiteral':
-    case 'UnaryExpression':
     case 'UnsupportedNode': {
       effects.push({
         kind: 'Create',
@@ -2423,7 +2498,7 @@ function computeEffectsForLegacySignature(
   lvalue: Place,
   receiver: Place,
   args: Array<Place | SpreadPattern | Hole>,
-  loc: SourceLocation,
+  _loc: SourceLocation,
 ): Array<AliasingEffect> {
   const returnValueReason = signature.returnValueReason ?? ValueReason.Other;
   const effects: Array<AliasingEffect> = [];
@@ -2436,20 +2511,18 @@ function computeEffectsForLegacySignature(
   if (signature.impure && state.env.config.validateNoImpureFunctionsInRender) {
     effects.push({
       kind: 'Impure',
-      place: receiver,
-      error: CompilerDiagnostic.create({
-        category: ErrorCategory.Purity,
-        reason: 'Cannot call impure function during render',
-        description:
-          (signature.canonicalName != null
-            ? `\`${signature.canonicalName}\` is an impure function. `
-            : '') +
-          'Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)',
-      }).withDetails({
-        kind: 'error',
-        loc,
-        message: 'Cannot call impure function',
-      }),
+      into: lvalue,
+      category: ErrorCategory.Purity,
+      reason: 'Cannot access impure value during render',
+      description:
+        'Calling an impure function can produce unstable results that update ' +
+        'unpredictably when the component happens to re-render. ' +
+        '(https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)',
+      sourceMessage:
+        signature.canonicalName != null
+          ? `\`${signature.canonicalName}\` is an impure function.`
+          : 'This function is impure',
+      usageMessage: 'Cannot access impure value during render',
     });
   }
   if (signature.knownIncompatible != null && state.env.enableValidations) {
@@ -2748,7 +2821,23 @@ function computeEffectsForSignature(
         }
         break;
       }
-      case 'Impure':
+      case 'Impure': {
+        if (env.config.validateNoImpureFunctionsInRender) {
+          const values = substitutions.get(effect.into.identifier.id) ?? [];
+          for (const value of values) {
+            effects.push({
+              kind: effect.kind,
+              into: value,
+              category: effect.category,
+              reason: effect.reason,
+              description: effect.description,
+              sourceMessage: effect.sourceMessage,
+              usageMessage: effect.usageMessage,
+            });
+          }
+        }
+        break;
+      }
       case 'MutateFrozen':
       case 'MutateGlobal': {
         const values = substitutions.get(effect.place.identifier.id) ?? [];
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingRanges.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingRanges.ts
index 43148dc4c67..73d8782dd95 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingRanges.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingRanges.ts
@@ -19,6 +19,8 @@ import {
   ValueReason,
   Place,
   isPrimitiveType,
+  isUseRefType,
+  isJsxOrJsxUnionType,
 } from '../HIR/HIR';
 import {
   eachInstructionLValue,
@@ -28,6 +30,9 @@ import {
 import {assertExhaustive, getOrInsertWith} from '../Utils/utils';
 import {Err, Ok, Result} from '../Utils/Result';
 import {AliasingEffect, MutationReason} from './AliasingEffects';
+import {printIdentifier, printType} from '../HIR/PrintHIR';
+
+const DEBUG = false;
 
 /**
  * This pass builds an abstract model of the heap and interprets the effects of the
@@ -104,7 +109,6 @@ export function inferMutationAliasingRanges(
     reason: MutationReason | null;
   }> = [];
   const renders: Array<{index: number; place: Place}> = [];
-
   let index = 0;
 
   const errors = new CompilerError();
@@ -197,14 +201,12 @@ export function inferMutationAliasingRanges(
           });
         } else if (
           effect.kind === 'MutateFrozen' ||
-          effect.kind === 'MutateGlobal' ||
-          effect.kind === 'Impure'
+          effect.kind === 'MutateGlobal'
         ) {
           errors.pushDiagnostic(effect.error);
           functionEffects.push(effect);
         } else if (effect.kind === 'Render') {
           renders.push({index: index++, place: effect.place});
-          functionEffects.push(effect);
         }
       }
     }
@@ -214,10 +216,6 @@ export function inferMutationAliasingRanges(
         state.assign(index, from, into);
       }
     }
-    if (block.terminal.kind === 'return') {
-      state.assign(index++, block.terminal.value, fn.returns);
-    }
-
     if (
       (block.terminal.kind === 'maybe-throw' ||
         block.terminal.kind === 'return') &&
@@ -227,23 +225,31 @@ export function inferMutationAliasingRanges(
         if (effect.kind === 'Alias') {
           state.assign(index++, effect.from, effect.into);
         } else {
-          CompilerError.invariant(effect.kind === 'Freeze', {
-            reason: `Unexpected '${effect.kind}' effect for MaybeThrow terminal`,
-            description: null,
-            details: [
-              {
-                kind: 'error',
-                loc: block.terminal.loc,
-                message: null,
-              },
-            ],
-          });
+          CompilerError.invariant(
+            effect.kind === 'Freeze' || effect.kind === 'Render',
+            {
+              reason: `Unexpected '${effect.kind}' effect for MaybeThrow terminal`,
+              description: null,
+              details: [
+                {
+                  kind: 'error',
+                  loc: block.terminal.loc,
+                  message: null,
+                },
+              ],
+            },
+          );
         }
       }
     }
   }
 
   for (const mutation of mutations) {
+    if (DEBUG) {
+      console.log(
+        `[${mutation.index}] mutate ${printIdentifier(mutation.place.identifier)}`,
+      );
+    }
     state.mutate(
       mutation.index,
       mutation.place.identifier,
@@ -255,8 +261,16 @@ export function inferMutationAliasingRanges(
       errors,
     );
   }
+  if (DEBUG) {
+    console.log(state.debug());
+  }
   for (const render of renders) {
-    state.render(render.index, render.place.identifier, errors);
+    if (DEBUG) {
+      console.log(
+        `[${render.index}] render ${printIdentifier(render.place.identifier)}`,
+      );
+    }
+    state.render(render.index, render.place, errors);
   }
   for (const param of [...fn.context, ...fn.params]) {
     const place = param.kind === 'Identifier' ? param : param.place;
@@ -383,17 +397,7 @@ export function inferMutationAliasingRanges(
             break;
           }
           case 'Apply': {
-            CompilerError.invariant(false, {
-              reason: `[AnalyzeFunctions] Expected Apply effects to be replaced with more precise effects`,
-              description: null,
-              details: [
-                {
-                  kind: 'error',
-                  loc: effect.function.loc,
-                  message: null,
-                },
-              ],
-            });
+            break;
           }
           case 'MutateTransitive':
           case 'MutateConditionally':
@@ -515,6 +519,13 @@ export function inferMutationAliasingRanges(
   const ignoredErrors = new CompilerError();
   for (const param of [...fn.params, ...fn.context, fn.returns]) {
     const place = param.kind === 'Identifier' ? param : param.place;
+    const node = state.nodes.get(place.identifier);
+    if (node != null && node.render != null) {
+      functionEffects.push({
+        kind: 'Render',
+        place: place,
+      });
+    }
     tracked.push(place);
   }
   for (const into of tracked) {
@@ -568,7 +579,10 @@ export function inferMutationAliasingRanges(
     }
   }
 
-  if (errors.hasAnyErrors() && !isFunctionExpression) {
+  if (
+    errors.hasAnyErrors() &&
+    (!isFunctionExpression || isJsxOrJsxUnionType(fn.returns.identifier.type))
+  ) {
     return Err(errors);
   }
   return Ok(functionEffects);
@@ -577,7 +591,6 @@ export function inferMutationAliasingRanges(
 function appendFunctionErrors(errors: CompilerError, fn: HIRFunction): void {
   for (const effect of fn.aliasingEffects ?? []) {
     switch (effect.kind) {
-      case 'Impure':
       case 'MutateFrozen':
       case 'MutateGlobal': {
         errors.pushDiagnostic(effect.error);
@@ -612,10 +625,74 @@ type Node = {
     | {kind: 'Object'}
     | {kind: 'Phi'}
     | {kind: 'Function'; function: HIRFunction};
+  render: Place | null;
 };
+
+function _printNode(node: Node): string {
+  const out: Array<string> = [];
+  debugNode(out, node);
+  return out.join('\n');
+}
+function debugNode(out: Array<string>, node: Node): void {
+  out.push(
+    printIdentifier(node.id) +
+      printType(node.id.type) +
+      ` lastMutated=[${node.lastMutated}]`,
+  );
+  if (node.transitive != null) {
+    out.push(`  transitive=${node.transitive.kind}`);
+  }
+  if (node.local != null) {
+    out.push(`  local=${node.local.kind}`);
+  }
+  if (node.mutationReason != null) {
+    out.push(`  mutationReason=${node.mutationReason?.kind}`);
+  }
+  const edges: Array<{
+    index: number;
+    direction: '<=' | '=>';
+    kind: string;
+    id: Identifier;
+  }> = [];
+  for (const [alias, index] of node.createdFrom) {
+    edges.push({index, direction: '<=', kind: 'createFrom', id: alias});
+  }
+  for (const [alias, index] of node.aliases) {
+    edges.push({index, direction: '<=', kind: 'alias', id: alias});
+  }
+  for (const [alias, index] of node.maybeAliases) {
+    edges.push({index, direction: '<=', kind: 'alias?', id: alias});
+  }
+  for (const [alias, index] of node.captures) {
+    edges.push({index, direction: '<=', kind: 'capture', id: alias});
+  }
+  for (const edge of node.edges) {
+    edges.push({
+      index: edge.index,
+      direction: '=>',
+      kind: edge.kind,
+      id: edge.node,
+    });
+  }
+  edges.sort((a, b) => a.index - b.index);
+  for (const edge of edges) {
+    out.push(
+      `  [${edge.index}] ${edge.direction} ${edge.kind} ${printIdentifier(edge.id)}`,
+    );
+  }
+}
+
 class AliasingState {
   nodes: Map<Identifier, Node> = new Map();
 
+  debug(): string {
+    const items: Array<string> = [];
+    for (const [_id, node] of this.nodes) {
+      debugNode(items, node);
+    }
+    return items.join('\n');
+  }
+
   create(place: Place, value: Node['value']): void {
     this.nodes.set(place.identifier, {
       id: place.identifier,
@@ -629,6 +706,7 @@ class AliasingState {
       lastMutated: 0,
       mutationReason: null,
       value,
+      render: null,
     });
   }
 
@@ -681,9 +759,9 @@ class AliasingState {
     }
   }
 
-  render(index: number, start: Identifier, errors: CompilerError): void {
+  render(index: number, start: Place, errors: CompilerError): void {
     const seen = new Set<Identifier>();
-    const queue: Array<Identifier> = [start];
+    const queue: Array<Identifier> = [start.identifier];
     while (queue.length !== 0) {
       const current = queue.pop()!;
       if (seen.has(current)) {
@@ -691,11 +769,34 @@ class AliasingState {
       }
       seen.add(current);
       const node = this.nodes.get(current);
-      if (node == null || node.transitive != null || node.local != null) {
+      if (node == null || isUseRefType(node.id)) {
+        if (DEBUG) {
+          console.log(`  render ${printIdentifier(current)}: skip mutated/ref`);
+        }
         continue;
       }
-      if (node.value.kind === 'Function') {
-        appendFunctionErrors(errors, node.value.function);
+      if (
+        node.local == null &&
+        node.transitive == null &&
+        node.value.kind === 'Function'
+      ) {
+        const returns = node.value.function.returns;
+        if (
+          isJsxType(returns.identifier.type) ||
+          (returns.identifier.type.kind === 'Phi' &&
+            returns.identifier.type.operands.some(operand =>
+              isJsxType(operand),
+            ))
+        ) {
+          appendFunctionErrors(errors, node.value.function);
+        }
+        if (DEBUG) {
+          console.log(`  render ${printIdentifier(current)}: skip function`);
+        }
+        continue;
+      }
+      if (node.render == null) {
+        node.render = start;
       }
       for (const [alias, when] of node.createdFrom) {
         if (when >= index) {
@@ -709,6 +810,12 @@ class AliasingState {
         }
         queue.push(alias);
       }
+      for (const [alias, when] of node.maybeAliases) {
+        if (when >= index) {
+          continue;
+        }
+        queue.push(alias);
+      }
       for (const [capture, when] of node.captures) {
         if (when >= index) {
           continue;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Utils/utils.ts b/compiler/packages/babel-plugin-react-compiler/src/Utils/utils.ts
index 897614015f5..32f5d6f40f2 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Utils/utils.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Utils/utils.ts
@@ -167,6 +167,14 @@ export function Set_filter<T>(
   return result;
 }
 
+export function Set_subtract<T>(
+  source: ReadonlySet<T>,
+  other: Iterable<T>,
+): Set<T> {
+  const otherSet = other instanceof Set ? other : new Set(other);
+  return Set_filter(source, item => !otherSet.has(item));
+}
+
 export function hasNode<T>(
   input: NodePath<T | null | undefined>,
 ): input is NodePath<NonNullable<T>> {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoImpureFunctionsInRender.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoImpureFunctionsInRender.ts
deleted file mode 100644
index ca0612d80ce..00000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoImpureFunctionsInRender.ts
+++ /dev/null
@@ -1,59 +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 {CompilerDiagnostic, CompilerError} from '..';
-import {ErrorCategory} from '../CompilerError';
-import {HIRFunction} from '../HIR';
-import {getFunctionCallSignature} from '../Inference/InferMutationAliasingEffects';
-import {Result} from '../Utils/Result';
-
-/**
- * Checks that known-impure functions are not called during render. Examples of invalid functions to
- * call during render are `Math.random()` and `Date.now()`. Users may extend this set of
- * impure functions via a module type provider and specifying functions with `impure: true`.
- *
- * TODO: add best-effort analysis of functions which are called during render. We have variations of
- * this in several of our validation passes and should unify those analyses into a reusable helper
- * and use it here.
- */
-export function validateNoImpureFunctionsInRender(
-  fn: HIRFunction,
-): Result<void, CompilerError> {
-  const errors = new CompilerError();
-  for (const [, block] of fn.body.blocks) {
-    for (const instr of block.instructions) {
-      const value = instr.value;
-      if (value.kind === 'MethodCall' || value.kind == 'CallExpression') {
-        const callee =
-          value.kind === 'MethodCall' ? value.property : value.callee;
-        const signature = getFunctionCallSignature(
-          fn.env,
-          callee.identifier.type,
-        );
-        if (signature != null && signature.impure === true) {
-          errors.pushDiagnostic(
-            CompilerDiagnostic.create({
-              category: ErrorCategory.Purity,
-              reason: 'Cannot call impure function during render',
-              description:
-                (signature.canonicalName != null
-                  ? `\`${signature.canonicalName}\` is an impure function. `
-                  : '') +
-                'Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent)',
-              suggestions: null,
-            }).withDetails({
-              kind: 'error',
-              loc: callee.loc,
-              message: 'Cannot call impure function',
-            }),
-          );
-        }
-      }
-    }
-  }
-  return errors.asResult();
-}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoImpureValuesInRender.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoImpureValuesInRender.ts
new file mode 100644
index 00000000000..59ba0df86b4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoImpureValuesInRender.ts
@@ -0,0 +1,396 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {CompilerDiagnostic, CompilerError} from '..';
+import {
+  areEqualSourceLocations,
+  HIRFunction,
+  IdentifierId,
+  InstructionId,
+  isJsxType,
+  isUseRefType,
+} from '../HIR';
+import {AliasingEffect, hashEffect} from '../Inference/AliasingEffects';
+import {createControlDominators} from '../Inference/ControlDominators';
+import {isMutable} from '../ReactiveScopes/InferReactiveScopeVariables';
+import {Err, Ok, Result} from '../Utils/Result';
+import {getOrInsertWith} from '../Utils/utils';
+
+type ImpureEffect = Extract<AliasingEffect, {kind: 'Impure'}>;
+type RenderEffect = Extract<AliasingEffect, {kind: 'Render'}>;
+type FunctionCache = Map<HIRFunction, Map<string, ImpuritySignature>>;
+type ImpuritySignature = {
+  effects: Map<IdentifierId, ImpureEffect>;
+  error: CompilerError;
+  returns: IdentifierId;
+};
+
+export function validateNoImpureValuesInRender(
+  fn: HIRFunction,
+): Result<void, CompilerError> {
+  const impure = new Map<IdentifierId, ImpureEffect>();
+  const impureFunctions = new Map<IdentifierId, ImpuritySignature>();
+  const result = inferImpureValues(fn, impure, impureFunctions, new Map());
+
+  if (result.error.hasAnyErrors()) {
+    return Err(result.error);
+  }
+  return Ok(undefined);
+}
+
+function inferFunctionExpressionMemo(
+  fn: HIRFunction,
+  impure: Map<IdentifierId, ImpureEffect>,
+  impureFunctions: Map<IdentifierId, ImpuritySignature>,
+  cache: FunctionCache,
+): ImpuritySignature {
+  const key = fn.context
+    .map(
+      place =>
+        `${place.identifier.id}:${impure.has(place.identifier.id)}:${Array.from(
+          impureFunctions.get(place.identifier.id)?.effects ?? new Map(),
+        )
+          .map(([id, effect]) => `${id}=>${effect.into.identifier.id}`)
+          .join(',')}`,
+    )
+    .join(',');
+  return getOrInsertWith(
+    getOrInsertWith(cache, fn, () => new Map()),
+    key,
+    () => inferImpureValues(fn, impure, impureFunctions, cache),
+  );
+}
+
+function processEffects(
+  id: InstructionId,
+  effects: Array<AliasingEffect>,
+  impure: Map<IdentifierId, ImpureEffect>,
+  impureFunctions: Map<IdentifierId, ImpuritySignature>,
+  cache: FunctionCache,
+): boolean {
+  let hasChanges = false;
+  const rendered: Set<IdentifierId> = new Set();
+  for (const effect of effects) {
+    if (effect.kind === 'Render') {
+      rendered.add(effect.place.identifier.id);
+    }
+  }
+  for (const effect of effects) {
+    switch (effect.kind) {
+      case 'Alias':
+      case 'Assign':
+      case 'Capture':
+      case 'CreateFrom':
+      case 'ImmutableCapture': {
+        const sourceEffect = impure.get(effect.from.identifier.id);
+        if (
+          sourceEffect != null &&
+          !impure.has(effect.into.identifier.id) &&
+          !rendered.has(effect.from.identifier.id) &&
+          !isUseRefType(effect.into.identifier) &&
+          !isJsxType(effect.into.identifier.type)
+        ) {
+          impure.set(effect.into.identifier.id, sourceEffect);
+          hasChanges = true;
+        }
+        if (
+          sourceEffect == null &&
+          (effect.kind === 'Assign' || effect.kind === 'Capture') &&
+          !impure.has(effect.from.identifier.id) &&
+          !rendered.has(effect.from.identifier.id) &&
+          !isUseRefType(effect.from.identifier) &&
+          isMutable({id}, effect.into)
+        ) {
+          const destinationEffect = impure.get(effect.into.identifier.id);
+          if (destinationEffect != null) {
+            impure.set(effect.from.identifier.id, destinationEffect);
+            hasChanges = true;
+          }
+        }
+        if (
+          (effect.kind === 'Alias' ||
+            effect.kind === 'Assign' ||
+            effect.kind === 'ImmutableCapture') &&
+          !rendered.has(effect.into.identifier.id) &&
+          !isJsxType(effect.into.identifier.type)
+        ) {
+          const functionEffect = impureFunctions.get(effect.from.identifier.id);
+          if (
+            functionEffect != null &&
+            !impureFunctions.has(effect.into.identifier.id)
+            /*
+             * TODO: check if the function signature has changed (should be rare)
+             * ||
+             *   !areEqualFunctionSignatures(
+             *     impureFunctions.get(effect.into.identifier.id)!.effects,
+             *     functionEffect.effects,
+             *   )
+             */
+          ) {
+            impureFunctions.set(effect.into.identifier.id, functionEffect);
+            hasChanges = true;
+          }
+        }
+        break;
+      }
+      case 'Impure': {
+        if (!impure.has(effect.into.identifier.id)) {
+          impure.set(effect.into.identifier.id, effect);
+          hasChanges = true;
+        }
+        break;
+      }
+      case 'Render': {
+        break;
+      }
+      case 'CreateFunction': {
+        const result = inferFunctionExpressionMemo(
+          effect.function.loweredFunc.func,
+          impure,
+          impureFunctions,
+          cache,
+        );
+        if (result.error.hasAnyErrors()) {
+          break;
+        }
+        const previousResult = impureFunctions.get(effect.into.identifier.id);
+        if (
+          previousResult == null ||
+          !areEqualFunctionSignatures(result.effects, previousResult.effects)
+        ) {
+          impureFunctions.set(effect.into.identifier.id, result);
+          hasChanges = true;
+        }
+        break;
+      }
+      case 'Apply': {
+        const functionSignature = impureFunctions.get(
+          effect.function.identifier.id,
+        );
+        if (functionSignature != null) {
+          for (const [id, functionEffect] of functionSignature.effects) {
+            if (!impure.has(id)) {
+              impure.set(id, functionEffect);
+              hasChanges = true;
+            }
+            if (
+              id === functionSignature.returns &&
+              !impure.has(effect.into.identifier.id)
+            ) {
+              impure.set(effect.into.identifier.id, functionEffect);
+              hasChanges = true;
+            }
+          }
+        }
+        break;
+      }
+      case 'MaybeAlias':
+      case 'Create':
+      case 'Freeze':
+      case 'Mutate':
+      case 'MutateConditionally':
+      case 'MutateFrozen':
+      case 'MutateGlobal':
+      case 'MutateTransitive':
+      case 'MutateTransitiveConditionally': {
+        break;
+      }
+    }
+  }
+  return hasChanges;
+}
+
+function inferImpureValues(
+  fn: HIRFunction,
+  impure: Map<IdentifierId, ImpureEffect>,
+  impureFunctions: Map<IdentifierId, ImpuritySignature>,
+  cache: FunctionCache,
+): ImpuritySignature {
+  const getBlockControl = createControlDominators(fn, place => {
+    return impure.has(place.identifier.id);
+  });
+
+  let hasChanges = false;
+  let iterations = 0;
+  do {
+    hasChanges = false;
+
+    if (iterations++ > 100) {
+      throw new Error('too many iterations');
+    }
+
+    for (const block of fn.body.blocks.values()) {
+      for (const phi of block.phis) {
+        if (impure.has(phi.place.identifier.id)) {
+          // Already marked impure on a previous pass
+          continue;
+        }
+        let impureEffect = null;
+        for (const [, operand] of phi.operands) {
+          const operandEffect = impure.get(operand.identifier.id);
+          if (operandEffect != null) {
+            impureEffect = operandEffect;
+            break;
+          }
+        }
+        if (impureEffect != null) {
+          impure.set(phi.place.identifier.id, impureEffect);
+          hasChanges = true;
+        } else {
+          for (const [pred] of phi.operands) {
+            const predControl = getBlockControl(pred);
+            if (predControl != null) {
+              const predEffect = impure.get(predControl.identifier.id);
+              if (predEffect != null) {
+                impure.set(phi.place.identifier.id, predEffect);
+                hasChanges = true;
+                break;
+              }
+            }
+          }
+        }
+      }
+
+      /**
+       * TODO: consider propagating impurity for assignments/mutations that
+       * are controlled by an impure value.
+       *
+       * ```
+       * const controlPlace = getBlockControl(block.id);
+       * const controlImpureEffect =
+       *   controlPlace != null ? impure.get(controlPlace.identifier.id) : null;
+       * ```
+       *
+       * Example
+       *
+       * This should error since we know the semantics of array.push, it's a definite
+       * Mutate and definite Capture, not maybemutate+maybecapture:
+       *
+       * ```
+       * let x = [];
+       * if (Date.now() < START_DATE) {
+       *   x.push(1);
+       * }
+       * return <Foo x={x} />
+       * ```
+       */
+      for (const instr of block.instructions) {
+        hasChanges =
+          processEffects(
+            instr.id,
+            instr.effects ?? [],
+            impure,
+            impureFunctions,
+            cache,
+          ) || hasChanges;
+      }
+      if (block.terminal.kind === 'return' && block.terminal.effects != null) {
+        hasChanges =
+          processEffects(
+            block.terminal.id,
+            block.terminal.effects,
+            impure,
+            impureFunctions,
+            cache,
+          ) || hasChanges;
+      }
+    }
+  } while (hasChanges);
+
+  fn.env.logger?.debugLogIRs?.({
+    kind: 'debug',
+    name: 'ValidateNoImpureValuesInRender',
+    value: JSON.stringify(Array.from(impure.keys()).sort(), null, 2),
+  });
+  fn.env.logger?.debugLogIRs?.({
+    kind: 'debug',
+    name: 'ValidateNoImpureValuesInRender (function)',
+    value: JSON.stringify(Array.from(impureFunctions.keys()).sort(), null, 2),
+  });
+
+  const error = new CompilerError();
+  function validateRenderEffect(effect: RenderEffect): void {
+    let impureEffect = impure.get(effect.place.identifier.id);
+    if (impureEffect == null) {
+      const functionSignature = impureFunctions.get(effect.place.identifier.id);
+      impureEffect = functionSignature?.effects.get(functionSignature.returns);
+    }
+    if (impureEffect == null) {
+      return;
+    }
+    const diagnostic = CompilerDiagnostic.create({
+      category: impureEffect.category,
+      reason: impureEffect.reason,
+      description: impureEffect.description,
+    }).withDetails({
+      kind: 'error',
+      loc: effect.place.loc,
+      message: impureEffect.usageMessage,
+    });
+    if (!areEqualSourceLocations(effect.place.loc, impureEffect.into.loc)) {
+      diagnostic.withDetails({
+        kind: 'error',
+        loc: impureEffect.into.loc,
+        message: impureEffect.sourceMessage,
+      });
+    }
+    error.pushDiagnostic(diagnostic);
+  }
+  for (const block of fn.body.blocks.values()) {
+    for (const instr of block.instructions) {
+      const value = instr.value;
+      if (
+        value.kind === 'FunctionExpression' ||
+        value.kind === 'ObjectMethod'
+      ) {
+        const result = inferFunctionExpressionMemo(
+          value.loweredFunc.func,
+          impure,
+          impureFunctions,
+          cache,
+        );
+        if (result.error.hasAnyErrors()) {
+          error.merge(result.error);
+        }
+      }
+      for (const effect of instr.effects ?? []) {
+        if (effect.kind === 'Render') {
+          validateRenderEffect(effect);
+        }
+      }
+    }
+    if (block.terminal.kind === 'return' && block.terminal.effects != null) {
+      for (const effect of block.terminal.effects) {
+        if (effect.kind === 'Render') {
+          validateRenderEffect(effect);
+        }
+      }
+    }
+  }
+  const impureEffects: Map<IdentifierId, ImpureEffect> = new Map();
+  for (const param of [...fn.context, ...fn.params, fn.returns]) {
+    const place = param.kind === 'Identifier' ? param : param.place;
+    const impureEffect = impure.get(place.identifier.id);
+    if (impureEffect != null) {
+      impureEffects.set(place.identifier.id, impureEffect);
+    }
+  }
+  return {effects: impureEffects, error, returns: fn.returns.identifier.id};
+}
+
+function areEqualFunctionSignatures(
+  sig1: Map<IdentifierId, ImpureEffect>,
+  sig2: Map<IdentifierId, ImpureEffect>,
+): boolean {
+  return (
+    sig1.size === sig2.size &&
+    Array.from(sig1).every(
+      ([id, effect]) =>
+        sig2.has(id) && hashEffect(effect) === hashEffect(sig2.get(id)!),
+    )
+  );
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccessInRender.md b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccessInRender.md
new file mode 100644
index 00000000000..653a438d653
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccessInRender.md
@@ -0,0 +1,137 @@
+# ValidateNoRefAccessInRender
+
+This document summarizes the design and key learnings for the ref mutation validation pass.
+
+## Purpose
+
+Validates that a function does not mutate a ref value during render. This ensures React components follow the rules of React by not writing to `ref.current` during the render phase.
+
+## Key Concepts
+
+### Ref vs RefValue
+
+- **Ref**: The ref object itself (e.g., `useRef()` return value). Has type `React.RefObject<T>`.
+- **RefValue**: The `.current` property of a ref. This is the mutable value that should not be accessed during render.
+
+The validation tracks both using a `RefInfo` type with a `refId` that correlates refs with their `.current` values.
+
+### What Constitutes a Mutation
+
+A mutation is any `PropertyStore` or `ComputedStore` instruction where:
+1. The target object is a known ref (tracked in the `refs` map)
+2. OR the target object has a ref type (`isUseRefType`)
+
+### Allowed Patterns
+
+1. **Event handlers and effect callbacks**: Functions that are not called at the top level during render can mutate refs freely.
+
+2. **Null-guard initialization**: The pattern `if (ref.current == null) { ref.current = value; }` is allowed because it's a common lazy initialization pattern that only runs once.
+
+## Algorithm: Single Forward Data-Flow Pass
+
+The validation uses a single forward pass over all blocks:
+
+### Phase 1: Track Refs
+- Initialize refs from function params and context (captured variables)
+- Process phi nodes to propagate ref info through control flow joins
+- Track refs through LoadLocal, StoreLocal, PropertyLoad operations
+
+### Phase 2: Detect Null Guards
+- Track nullable values (null literals, undefined)
+- Track binary comparisons of `ref.current` to null (`==`, `===`, `!=`, `!==`)
+- Mark blocks as "safe" for specific refs when inside null-guard branches
+- Propagate safety through control flow until fallthrough
+
+### Phase 3: Validate Mutations
+- For PropertyStore/ComputedStore on refs:
+  - If inside a null-guard for this ref: allow (but track for duplicate detection)
+  - If at top level: error immediately
+  - If in nested function: track for later (error if function is called)
+
+### Phase 4: Track Ref-Mutating Functions
+- When a FunctionExpression mutates a ref, track it in `refMutatingFunctions`
+- When such a function is called at top level, report the error at the mutation site
+
+## Key Data Structures
+
+```typescript
+// Correlates refs with their .current values
+type RefInfo = {
+  kind: 'Ref' | 'RefValue';
+  refId: number;
+};
+
+// Tracks null-guard conditions
+type GuardInfo = {
+  refId: number;
+  isEquality: boolean; // true for ==, ===; false for !=, !==
+};
+
+// Information about a mutation (for error reporting)
+type MutationInfo = {
+  loc: SourceLocation;
+  isCurrentProperty: boolean;
+};
+```
+
+## Error Reporting
+
+### Error Location
+
+Errors highlight the **entire instruction** (e.g., `ref.current = value`), not just the ref identifier. This is achieved by using `instr.loc` instead of `value.object.loc`.
+
+### Duplicate Initialization
+
+When a ref is initialized more than once inside a null-guard:
+1. Primary error: Points to the second initialization
+2. Secondary error: Points to the first initialization with "Ref was first initialized here"
+
+### Transitive Mutations
+
+When a function that mutates refs is called during render:
+- The error points to the mutation site inside the function
+- Not the call site (the call site is what triggers the check)
+
+## Edge Cases and Patterns
+
+### Unary NOT on Guards
+
+The `!` operator inverts guard polarity:
+```javascript
+if (!ref.current) { ... }  // Same as: if (ref.current == null)
+```
+
+### Nested Functions
+
+Functions defined during render but not called are allowed to mutate refs:
+```javascript
+// OK - onClick is not called during render
+const onClick = () => { ref.current = value; };
+return <button onClick={onClick} />;
+```
+
+### Props with Ref Type
+
+Refs can come from props. The validation handles `props.ref` by checking type information.
+
+## Limitations / Known Gaps
+
+The following patterns are NOT currently validated by this pass:
+
+1. **Impure values in render**: `Date.now()`, `Math.random()` flowing into render context (handled by `ValidateNoImpureValuesInRender`)
+
+2. **useState/useReducer callbacks**: These hooks call their initializer functions during render, so ref access inside them should error. This requires special hook semantics.
+
+3. **Ref reads during render**: This pass focuses on mutations. Ref reads are handled separately.
+
+## Testing
+
+Test fixtures use naming conventions:
+- `error.*.ts` - Fixtures expected to produce compilation errors
+- Regular names - Fixtures expected to compile successfully
+
+Run tests with:
+```bash
+yarn snap -p <pattern> --nodebug    # Run specific tests
+yarn snap -p <pattern> --nodebug -u # Update expected output
+```
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccessInRender.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccessInRender.ts
index 232e9f55bbc..10b8a1d40e7 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccessInRender.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoRefAccessInRender.ts
@@ -14,910 +14,461 @@ import {
   BlockId,
   HIRFunction,
   IdentifierId,
-  Identifier,
-  Place,
+  Instruction,
   SourceLocation,
-  getHookKindForType,
   isRefValueType,
   isUseRefType,
 } from '../HIR';
-import {BuiltInEventHandlerId} from '../HIR/ObjectShape';
-import {
-  eachInstructionOperand,
-  eachInstructionValueOperand,
-  eachPatternOperand,
-  eachTerminalOperand,
-} from '../HIR/visitors';
+import {eachTerminalSuccessor} from '../HIR/visitors';
 import {Err, Ok, Result} from '../Utils/Result';
-import {retainWhere} from '../Utils/utils';
 
 /**
- * Validates that a function does not access a ref value during render. This includes a partial check
- * for ref values which are accessed indirectly via function expressions.
+ * Validates that a function does not mutate a ref value during render.
+ * Reading refs is handled by a separate validation pass.
+ *
+ * Mutation is allowed in:
+ * - Event handlers and effect callbacks (functions not called at top level)
+ * - Inside `if (ref.current == null)` blocks (null-guard initialization pattern)
  *
  * ```javascript
- * // ERROR
- * const ref = useRef();
- * ref.current;
+ * // ERROR - direct mutation in render
+ * const ref = useRef(null);
+ * ref.current = value;
  *
- * const ref = useRef();
- * foo(ref); // may access .current
+ * // ERROR - mutation in function called during render
+ * const fn = () => { ref.current = value; };
+ * fn(); // fn is called, so mutation errors
  *
- * // ALLOWED
- * const ref = useHookThatReturnsRef();
- * ref.current;
- * ```
+ * // ALLOWED - mutation in event handler
+ * const onClick = () => { ref.current = value; };
+ * return <button onClick={onClick} />;
  *
- * In the future we may reject more cases, based on either object names (`fooRef.current` is likely a ref)
- * or based on property name alone (`foo.current` might be a ref).
+ * // ALLOWED - null-guard initialization
+ * if (ref.current == null) {
+ *   ref.current = value;
+ * }
+ * ```
  */
 
-const opaqueRefId = Symbol();
-type RefId = number & {[opaqueRefId]: 'RefId'};
-
-function makeRefId(id: number): RefId {
-  CompilerError.invariant(id >= 0 && Number.isInteger(id), {
-    reason: 'Expected identifier id to be a non-negative integer',
-    description: null,
-    suggestions: null,
-    details: [
-      {
-        kind: 'error',
-        loc: null,
-        message: null,
-      },
-    ],
-  });
-  return id as RefId;
-}
-let _refId = 0;
-function nextRefId(): RefId {
-  return makeRefId(_refId++);
+// Unique identifier for correlating refs with their .current values
+let nextRefId = 0;
+function makeRefId(): number {
+  return nextRefId++;
 }
 
-type RefAccessType =
-  | {kind: 'None'}
-  | {kind: 'Nullable'}
-  | {kind: 'Guard'; refId: RefId}
-  | RefAccessRefType;
+type RefInfo = {
+  kind: 'Ref' | 'RefValue';
+  refId: number;
+};
 
-type RefAccessRefType =
-  | {kind: 'Ref'; refId: RefId}
-  | {kind: 'RefValue'; loc?: SourceLocation; refId?: RefId}
-  | {kind: 'Structure'; value: null | RefAccessRefType; fn: null | RefFnType};
+type GuardInfo = {
+  refId: number;
+  isEquality: boolean; // true for ==, ===; false for !=, !==
+};
 
-type RefFnType = {readRefEffect: boolean; returnType: RefAccessType};
+// Information about a mutation found in a function
+type MutationInfo = {
+  loc: SourceLocation;
+  isCurrentProperty: boolean;
+};
 
-class Env {
-  #changed = false;
-  #data: Map<IdentifierId, RefAccessType> = new Map();
-  #temporaries: Map<IdentifierId, Place> = new Map();
+export function validateNoRefAccessInRender(
+  fn: HIRFunction,
+): Result<void, CompilerError> {
+  const refs = new Map<IdentifierId, RefInfo>();
+  const errors = new CompilerError();
+
+  // Track which identifiers are functions that mutate refs
+  const refMutatingFunctions = new Map<IdentifierId, MutationInfo>();
+
+  // Track first initialization location for each ref (by refId)
+  const refInitLocations = new Map<number, SourceLocation>();
+
+  validateFunction(
+    fn,
+    refs,
+    refMutatingFunctions,
+    refInitLocations,
+    true,
+    errors,
+  );
 
-  lookup(place: Place): Place {
-    return this.#temporaries.get(place.identifier.id) ?? place;
+  if (errors.hasAnyErrors()) {
+    return Err(errors);
   }
+  return Ok(undefined);
+}
 
-  define(place: Place, value: Place): void {
-    this.#temporaries.set(place.identifier.id, value);
-  }
+function validateFunction(
+  fn: HIRFunction,
+  refs: Map<IdentifierId, RefInfo>,
+  refMutatingFunctions: Map<IdentifierId, MutationInfo>,
+  refInitLocations: Map<number, SourceLocation>,
+  isTopLevel: boolean,
+  errors: CompilerError,
+): MutationInfo | null {
+  // Track nullable values (null, undefined) for guard detection
+  const nullables = new Set<IdentifierId>();
 
-  resetChanged(): void {
-    this.#changed = false;
-  }
+  // Track guard expressions (binary comparisons of ref.current to null)
+  const guards = new Map<IdentifierId, GuardInfo>();
 
-  hasChanged(): boolean {
-    return this.#changed;
-  }
+  // Track blocks where null-guard allows initialization for specific refs
+  const safeBlocks = new Map<BlockId, Set<number>>();
 
-  get(key: IdentifierId): RefAccessType | undefined {
-    const operandId = this.#temporaries.get(key)?.identifier.id ?? key;
-    return this.#data.get(operandId);
+  // Track the first mutation found in this function (for reporting)
+  let firstMutation: MutationInfo | null = null;
+
+  // Initialize refs from params
+  for (const param of fn.params) {
+    const place = param.kind === 'Identifier' ? param : param.place;
+    if (isUseRefType(place.identifier)) {
+      refs.set(place.identifier.id, {kind: 'Ref', refId: makeRefId()});
+    } else if (isRefValueType(place.identifier)) {
+      refs.set(place.identifier.id, {kind: 'RefValue', refId: makeRefId()});
+    }
   }
 
-  set(key: IdentifierId, value: RefAccessType): this {
-    const operandId = this.#temporaries.get(key)?.identifier.id ?? key;
-    const cur = this.#data.get(operandId);
-    const widenedValue = joinRefAccessTypes(value, cur ?? {kind: 'None'});
-    if (
-      !(cur == null && widenedValue.kind === 'None') &&
-      (cur == null || !tyEqual(cur, widenedValue))
+  // Initialize refs from context (captured variables)
+  for (const place of fn.context) {
+    if (isUseRefType(place.identifier) && !refs.has(place.identifier.id)) {
+      refs.set(place.identifier.id, {kind: 'Ref', refId: makeRefId()});
+    } else if (
+      isRefValueType(place.identifier) &&
+      !refs.has(place.identifier.id)
     ) {
-      this.#changed = true;
+      refs.set(place.identifier.id, {kind: 'RefValue', refId: makeRefId()});
     }
-    this.#data.set(operandId, widenedValue);
-    return this;
   }
-}
 
-export function validateNoRefAccessInRender(
-  fn: HIRFunction,
-): Result<void, CompilerError> {
-  const env = new Env();
-  collectTemporariesSidemap(fn, env);
-  return validateNoRefAccessInRenderImpl(fn, env).map(_ => undefined);
-}
-
-function collectTemporariesSidemap(fn: HIRFunction, env: Env): void {
-  for (const block of fn.body.blocks.values()) {
-    for (const instr of block.instructions) {
-      const {lvalue, value} = instr;
-      switch (value.kind) {
-        case 'LoadLocal': {
-          const temp = env.lookup(value.place);
-          if (temp != null) {
-            env.define(lvalue, temp);
-          }
+  // Single forward pass over all blocks
+  for (const [, block] of fn.body.blocks) {
+    // Get safe refIds for this block
+    const safeRefIds = safeBlocks.get(block.id) ?? new Set();
+
+    // Process phi nodes
+    for (const phi of block.phis) {
+      for (const [, operand] of phi.operands) {
+        const refInfo = refs.get(operand.identifier.id);
+        if (refInfo != null && !refs.has(phi.place.identifier.id)) {
+          refs.set(phi.place.identifier.id, refInfo);
           break;
         }
-        case 'StoreLocal': {
-          const temp = env.lookup(value.value);
-          if (temp != null) {
-            env.define(lvalue, temp);
-            env.define(value.lvalue.place, temp);
-          }
+        // Propagate ref-mutating function info through phis
+        const mutationInfo = refMutatingFunctions.get(operand.identifier.id);
+        if (
+          mutationInfo != null &&
+          !refMutatingFunctions.has(phi.place.identifier.id)
+        ) {
+          refMutatingFunctions.set(phi.place.identifier.id, mutationInfo);
           break;
         }
-        case 'PropertyLoad': {
-          if (
-            isUseRefType(value.object.identifier) &&
-            value.property === 'current'
-          ) {
+      }
+    }
+
+    // Process instructions
+    for (const instr of block.instructions) {
+      const mutation = processInstruction(
+        instr,
+        refs,
+        nullables,
+        guards,
+        refMutatingFunctions,
+        refInitLocations,
+        safeRefIds,
+        isTopLevel,
+        errors,
+      );
+      if (mutation != null && firstMutation == null) {
+        firstMutation = mutation;
+      }
+    }
+
+    // Process terminal for guard detection and safety propagation
+    if (block.terminal.kind === 'if') {
+      const guard = guards.get(block.terminal.test.identifier.id);
+      if (guard != null) {
+        /*
+         * For equality checks (==, ===), consequent is safe (condition true = ref is null)
+         * For inequality checks (!=, !==), alternate is safe (condition false = ref is null)
+         */
+        const safeBlock = guard.isEquality
+          ? block.terminal.consequent
+          : block.terminal.alternate;
+        const fallthrough = block.terminal.fallthrough;
+
+        /*
+         * Propagate safety through control flow using a queue
+         * Stop when we reach the fallthrough (end of the guarded region)
+         */
+        const queue: Array<BlockId> = [safeBlock];
+        const visited = new Set<BlockId>();
+        while (queue.length > 0) {
+          const blockId = queue.shift()!;
+          if (visited.has(blockId) || blockId === fallthrough) {
             continue;
           }
-          const temp = env.lookup(value.object);
-          if (temp != null) {
-            env.define(lvalue, temp);
+          visited.add(blockId);
+
+          const existingSafe = safeBlocks.get(blockId) ?? new Set();
+          existingSafe.add(guard.refId);
+          safeBlocks.set(blockId, existingSafe);
+
+          // Add successors to queue
+          const targetBlock = fn.body.blocks.get(blockId);
+          if (targetBlock != null) {
+            for (const successor of eachTerminalSuccessor(
+              targetBlock.terminal,
+            )) {
+              if (!visited.has(successor) && successor !== fallthrough) {
+                queue.push(successor);
+              }
+            }
           }
-          break;
         }
       }
     }
   }
-}
 
-function refTypeOfType(place: Place): RefAccessType {
-  if (isRefValueType(place.identifier)) {
-    return {kind: 'RefValue'};
-  } else if (isUseRefType(place.identifier)) {
-    return {kind: 'Ref', refId: nextRefId()};
-  } else {
-    return {kind: 'None'};
-  }
+  return firstMutation;
 }
 
-function isEventHandlerType(identifier: Identifier): boolean {
-  const type = identifier.type;
-  return type.kind === 'Function' && type.shapeId === BuiltInEventHandlerId;
-}
+function processInstruction(
+  instr: Instruction,
+  refs: Map<IdentifierId, RefInfo>,
+  nullables: Set<IdentifierId>,
+  guards: Map<IdentifierId, GuardInfo>,
+  refMutatingFunctions: Map<IdentifierId, MutationInfo>,
+  refInitLocations: Map<number, SourceLocation>,
+  safeRefIds: Set<number>,
+  isTopLevel: boolean,
+  errors: CompilerError,
+): MutationInfo | null {
+  const {lvalue, value} = instr;
 
-function tyEqual(a: RefAccessType, b: RefAccessType): boolean {
-  if (a.kind !== b.kind) {
-    return false;
+  // Check if the lvalue has a ref type (handles useRef() calls and similar)
+  if (isUseRefType(lvalue.identifier) && !refs.has(lvalue.identifier.id)) {
+    refs.set(lvalue.identifier.id, {kind: 'Ref', refId: makeRefId()});
   }
-  switch (a.kind) {
-    case 'None':
-      return true;
-    case 'Ref':
-      return true;
-    case 'Nullable':
-      return true;
-    case 'Guard':
-      CompilerError.invariant(b.kind === 'Guard', {
-        reason: 'Expected ref value',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
-      });
-      return a.refId === b.refId;
-    case 'RefValue':
-      CompilerError.invariant(b.kind === 'RefValue', {
-        reason: 'Expected ref value',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
-      });
-      return a.loc == b.loc;
-    case 'Structure': {
-      CompilerError.invariant(b.kind === 'Structure', {
-        reason: 'Expected structure',
-        description: null,
-        details: [
-          {
-            kind: 'error',
-            loc: null,
-            message: null,
-          },
-        ],
-      });
-      const fnTypesEqual =
-        (a.fn === null && b.fn === null) ||
-        (a.fn !== null &&
-          b.fn !== null &&
-          a.fn.readRefEffect === b.fn.readRefEffect &&
-          tyEqual(a.fn.returnType, b.fn.returnType));
-      return (
-        fnTypesEqual &&
-        (a.value === b.value ||
-          (a.value !== null && b.value !== null && tyEqual(a.value, b.value)))
-      );
-    }
+  if (isRefValueType(lvalue.identifier) && !refs.has(lvalue.identifier.id)) {
+    refs.set(lvalue.identifier.id, {kind: 'RefValue', refId: makeRefId()});
   }
-}
 
-function joinRefAccessTypes(...types: Array<RefAccessType>): RefAccessType {
-  function joinRefAccessRefTypes(
-    a: RefAccessRefType,
-    b: RefAccessRefType,
-  ): RefAccessRefType {
-    if (a.kind === 'RefValue') {
-      if (b.kind === 'RefValue' && a.refId === b.refId) {
-        return a;
+  switch (value.kind) {
+    case 'LoadLocal':
+    case 'LoadContext': {
+      const refInfo = refs.get(value.place.identifier.id);
+      if (refInfo != null) {
+        refs.set(lvalue.identifier.id, refInfo);
       }
-      return {kind: 'RefValue'};
-    } else if (b.kind === 'RefValue') {
-      return b;
-    } else if (a.kind === 'Ref' || b.kind === 'Ref') {
-      if (a.kind === 'Ref' && b.kind === 'Ref' && a.refId === b.refId) {
-        return a;
+      if (nullables.has(value.place.identifier.id)) {
+        nullables.add(lvalue.identifier.id);
       }
-      return {kind: 'Ref', refId: nextRefId()};
-    } else {
-      CompilerError.invariant(
-        a.kind === 'Structure' && b.kind === 'Structure',
-        {
-          reason: 'Expected structure',
-          description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: null,
-              message: null,
-            },
-          ],
-        },
-      );
-      const fn =
-        a.fn === null
-          ? b.fn
-          : b.fn === null
-            ? a.fn
-            : {
-                readRefEffect: a.fn.readRefEffect || b.fn.readRefEffect,
-                returnType: joinRefAccessTypes(
-                  a.fn.returnType,
-                  b.fn.returnType,
-                ),
-              };
-      const value =
-        a.value === null
-          ? b.value
-          : b.value === null
-            ? a.value
-            : joinRefAccessRefTypes(a.value, b.value);
-      return {
-        kind: 'Structure',
-        fn,
-        value,
-      };
+      // Propagate ref-mutating function info
+      const mutationInfo = refMutatingFunctions.get(value.place.identifier.id);
+      if (mutationInfo != null) {
+        refMutatingFunctions.set(lvalue.identifier.id, mutationInfo);
+      }
+      break;
     }
-  }
 
-  return types.reduce(
-    (a, b) => {
-      if (a.kind === 'None') {
-        return b;
-      } else if (b.kind === 'None') {
-        return a;
-      } else if (a.kind === 'Guard') {
-        if (b.kind === 'Guard' && a.refId === b.refId) {
-          return a;
-        } else if (b.kind === 'Nullable' || b.kind === 'Guard') {
-          return {kind: 'None'};
-        } else {
-          return b;
-        }
-      } else if (b.kind === 'Guard') {
-        if (a.kind === 'Nullable') {
-          return {kind: 'None'};
-        } else {
-          return b;
-        }
-      } else if (a.kind === 'Nullable') {
-        return b;
-      } else if (b.kind === 'Nullable') {
-        return a;
-      } else {
-        return joinRefAccessRefTypes(a, b);
+    case 'StoreLocal':
+    case 'StoreContext': {
+      const refInfo = refs.get(value.value.identifier.id);
+      if (refInfo != null) {
+        refs.set(value.lvalue.place.identifier.id, refInfo);
+        refs.set(lvalue.identifier.id, refInfo);
       }
-    },
-    {kind: 'None'},
-  );
-}
-
-function validateNoRefAccessInRenderImpl(
-  fn: HIRFunction,
-  env: Env,
-): Result<RefAccessType, CompilerError> {
-  let returnValues: Array<undefined | RefAccessType> = [];
-  let place;
-  for (const param of fn.params) {
-    if (param.kind === 'Identifier') {
-      place = param;
-    } else {
-      place = param.place;
+      // Propagate ref-mutating function info
+      const mutationInfo = refMutatingFunctions.get(value.value.identifier.id);
+      if (mutationInfo != null) {
+        refMutatingFunctions.set(
+          value.lvalue.place.identifier.id,
+          mutationInfo,
+        );
+        refMutatingFunctions.set(lvalue.identifier.id, mutationInfo);
+      }
+      break;
     }
-    const type = refTypeOfType(place);
-    env.set(place.identifier.id, type);
-  }
 
-  const interpolatedAsJsx = new Set<IdentifierId>();
-  for (const block of fn.body.blocks.values()) {
-    for (const instr of block.instructions) {
-      const {value} = instr;
-      if (value.kind === 'JsxExpression' || value.kind === 'JsxFragment') {
-        if (value.children != null) {
-          for (const child of value.children) {
-            interpolatedAsJsx.add(child.identifier.id);
-          }
-        }
+    case 'PropertyLoad': {
+      const objRef = refs.get(value.object.identifier.id);
+      if (objRef?.kind === 'Ref' && value.property === 'current') {
+        refs.set(lvalue.identifier.id, {kind: 'RefValue', refId: objRef.refId});
+      } else if (objRef != null) {
+        refs.set(lvalue.identifier.id, objRef);
       }
+      break;
     }
-  }
 
-  for (let i = 0; (i == 0 || env.hasChanged()) && i < 10; i++) {
-    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) {
-        env.set(
-          phi.place.identifier.id,
-          joinRefAccessTypes(
-            ...Array(...phi.operands.values()).map(
-              operand =>
-                env.get(operand.identifier.id) ?? ({kind: 'None'} as const),
-            ),
-          ),
-        );
+    case 'ComputedLoad': {
+      const objRef = refs.get(value.object.identifier.id);
+      if (objRef != null) {
+        refs.set(lvalue.identifier.id, objRef);
       }
+      break;
+    }
 
-      for (const instr of block.instructions) {
-        switch (instr.value.kind) {
-          case 'JsxExpression':
-          case 'JsxFragment': {
-            for (const operand of eachInstructionValueOperand(instr.value)) {
-              validateNoDirectRefValueAccess(errors, operand, env);
-            }
-            break;
-          }
-          case 'ComputedLoad':
-          case 'PropertyLoad': {
-            if (instr.value.kind === 'ComputedLoad') {
-              validateNoDirectRefValueAccess(errors, instr.value.property, env);
-            }
-            const objType = env.get(instr.value.object.identifier.id);
-            let lookupType: null | RefAccessType = null;
-            if (objType?.kind === 'Structure') {
-              lookupType = objType.value;
-            } else if (objType?.kind === 'Ref') {
-              lookupType = {
-                kind: 'RefValue',
-                loc: instr.loc,
-                refId: objType.refId,
-              };
-            }
-            env.set(
-              instr.lvalue.identifier.id,
-              lookupType ?? refTypeOfType(instr.lvalue),
-            );
-            break;
-          }
-          case 'TypeCastExpression': {
-            env.set(
-              instr.lvalue.identifier.id,
-              env.get(instr.value.value.identifier.id) ??
-                refTypeOfType(instr.lvalue),
-            );
-            break;
-          }
-          case 'LoadContext':
-          case 'LoadLocal': {
-            env.set(
-              instr.lvalue.identifier.id,
-              env.get(instr.value.place.identifier.id) ??
-                refTypeOfType(instr.lvalue),
-            );
-            break;
-          }
-          case 'StoreContext':
-          case 'StoreLocal': {
-            env.set(
-              instr.value.lvalue.place.identifier.id,
-              env.get(instr.value.value.identifier.id) ??
-                refTypeOfType(instr.value.lvalue.place),
-            );
-            env.set(
-              instr.lvalue.identifier.id,
-              env.get(instr.value.value.identifier.id) ??
-                refTypeOfType(instr.lvalue),
-            );
-            break;
-          }
-          case 'Destructure': {
-            const objType = env.get(instr.value.value.identifier.id);
-            let lookupType = null;
-            if (objType?.kind === 'Structure') {
-              lookupType = objType.value;
-            }
-            env.set(
-              instr.lvalue.identifier.id,
-              lookupType ?? refTypeOfType(instr.lvalue),
-            );
-            for (const lval of eachPatternOperand(instr.value.lvalue.pattern)) {
-              env.set(lval.identifier.id, lookupType ?? refTypeOfType(lval));
-            }
-            break;
-          }
-          case 'ObjectMethod':
-          case 'FunctionExpression': {
-            let returnType: RefAccessType = {kind: 'None'};
-            let readRefEffect = false;
-            const result = validateNoRefAccessInRenderImpl(
-              instr.value.loweredFunc.func,
-              env,
-            );
-            if (result.isOk()) {
-              returnType = result.unwrap();
-            } else if (result.isErr()) {
-              readRefEffect = true;
-            }
-            env.set(instr.lvalue.identifier.id, {
-              kind: 'Structure',
-              fn: {
-                readRefEffect,
-                returnType,
-              },
-              value: null,
-            });
-            break;
-          }
-          case 'MethodCall':
-          case 'CallExpression': {
-            const callee =
-              instr.value.kind === 'CallExpression'
-                ? instr.value.callee
-                : instr.value.property;
-            const hookKind = getHookKindForType(fn.env, callee.identifier.type);
-            let returnType: RefAccessType = {kind: 'None'};
-            const fnType = env.get(callee.identifier.id);
-            let didError = false;
-            if (fnType?.kind === 'Structure' && fnType.fn !== null) {
-              returnType = fnType.fn.returnType;
-              if (fnType.fn.readRefEffect) {
-                didError = true;
-                errors.pushDiagnostic(
-                  CompilerDiagnostic.create({
-                    category: ErrorCategory.Refs,
-                    reason: 'Cannot access refs during render',
-                    description: ERROR_DESCRIPTION,
-                  }).withDetails({
-                    kind: 'error',
-                    loc: callee.loc,
-                    message: `This function accesses a ref value`,
-                  }),
-                );
-              }
-            }
-            /*
-             * If we already reported an error on this instruction, don't report
-             * duplicate errors
-             */
-            if (!didError) {
-              const isRefLValue = isUseRefType(instr.lvalue.identifier);
-              const isEventHandlerLValue = isEventHandlerType(
-                instr.lvalue.identifier,
-              );
-              for (const operand of eachInstructionValueOperand(instr.value)) {
-                /**
-                 * By default we check that function call operands are not refs,
-                 * ref values, or functions that can access refs.
-                 */
-                if (
-                  isRefLValue ||
-                  isEventHandlerLValue ||
-                  (hookKind != null &&
-                    hookKind !== 'useState' &&
-                    hookKind !== 'useReducer')
-                ) {
-                  /**
-                   * Allow passing refs or ref-accessing functions when:
-                   * 1. lvalue is a ref (mergeRefs pattern: `mergeRefs(ref1, ref2)`)
-                   * 2. lvalue is an event handler (DOM events execute outside render)
-                   * 3. calling hooks (independently validated for ref safety)
-                   */
-                  validateNoDirectRefValueAccess(errors, operand, env);
-                } else if (interpolatedAsJsx.has(instr.lvalue.identifier.id)) {
-                  /**
-                   * Special case: the lvalue is passed as a jsx child
-                   *
-                   * For example `<Foo>{renderHelper(ref)}</Foo>`. Here we have more
-                   * context and infer that the ref is being passed to a component-like
-                   * render function which attempts to obey the rules.
-                   */
-                  validateNoRefValueAccess(errors, env, operand);
-                } else {
-                  validateNoRefPassedToFunction(
-                    errors,
-                    env,
-                    operand,
-                    operand.loc,
-                  );
-                }
-              }
-            }
-            env.set(instr.lvalue.identifier.id, returnType);
-            break;
-          }
-          case 'ObjectExpression':
-          case 'ArrayExpression': {
-            const types: Array<RefAccessType> = [];
-            for (const operand of eachInstructionValueOperand(instr.value)) {
-              validateNoDirectRefValueAccess(errors, operand, env);
-              types.push(env.get(operand.identifier.id) ?? {kind: 'None'});
-            }
-            const value = joinRefAccessTypes(...types);
-            if (
-              value.kind === 'None' ||
-              value.kind === 'Guard' ||
-              value.kind === 'Nullable'
-            ) {
-              env.set(instr.lvalue.identifier.id, {kind: 'None'});
-            } else {
-              env.set(instr.lvalue.identifier.id, {
-                kind: 'Structure',
-                value,
-                fn: null,
-              });
-            }
-            break;
-          }
-          case 'PropertyDelete':
-          case 'PropertyStore':
-          case 'ComputedDelete':
-          case 'ComputedStore': {
-            const target = env.get(instr.value.object.identifier.id);
-            let safe: (typeof safeBlocks)['0'] | null | undefined = null;
-            if (
-              instr.value.kind === 'PropertyStore' &&
-              target != null &&
-              target.kind === 'Ref'
-            ) {
-              safe = safeBlocks.find(entry => entry.ref === target.refId);
-            }
-            if (safe != null) {
-              retainWhere(safeBlocks, entry => entry !== safe);
-            } else {
-              validateNoRefUpdate(errors, env, instr.value.object, instr.loc);
-            }
-            if (
-              instr.value.kind === 'ComputedDelete' ||
-              instr.value.kind === 'ComputedStore'
-            ) {
-              validateNoRefValueAccess(errors, env, instr.value.property);
-            }
-            if (
-              instr.value.kind === 'ComputedStore' ||
-              instr.value.kind === 'PropertyStore'
-            ) {
-              validateNoDirectRefValueAccess(errors, instr.value.value, env);
-              const type = env.get(instr.value.value.identifier.id);
-              if (type != null && type.kind === 'Structure') {
-                let objectType: RefAccessType = type;
-                if (target != null) {
-                  objectType = joinRefAccessTypes(objectType, target);
-                }
-                env.set(instr.value.object.identifier.id, objectType);
-              }
-            }
-            break;
-          }
-          case 'StartMemoize':
-          case 'FinishMemoize':
-            break;
-          case 'LoadGlobal': {
-            if (instr.value.binding.name === 'undefined') {
-              env.set(instr.lvalue.identifier.id, {kind: 'Nullable'});
-            }
-            break;
-          }
-          case 'Primitive': {
-            if (instr.value.value == null) {
-              env.set(instr.lvalue.identifier.id, {kind: 'Nullable'});
-            }
-            break;
-          }
-          case 'UnaryExpression': {
-            if (instr.value.operator === '!') {
-              const value = env.get(instr.value.value.identifier.id);
-              const refId =
-                value?.kind === 'RefValue' && value.refId != null
-                  ? value.refId
-                  : null;
-              if (refId !== null) {
-                /*
-                 * Record an error suggesting the `if (ref.current == null)` pattern,
-                 * but also record the lvalue as a guard so that we don't emit a second
-                 * error for the write to the ref
-                 */
-                env.set(instr.lvalue.identifier.id, {kind: 'Guard', refId});
-                errors.pushDiagnostic(
-                  CompilerDiagnostic.create({
-                    category: ErrorCategory.Refs,
-                    reason: 'Cannot access refs during render',
-                    description: ERROR_DESCRIPTION,
-                  })
-                    .withDetails({
-                      kind: 'error',
-                      loc: instr.value.value.loc,
-                      message: `Cannot access ref value during render`,
-                    })
-                    .withDetails({
-                      kind: 'hint',
-                      message:
-                        'To initialize a ref only once, check that the ref is null with the pattern `if (ref.current == null) { ref.current = ... }`',
-                    }),
-                );
-                break;
-              }
-            }
-            validateNoRefValueAccess(errors, env, instr.value.value);
-            break;
-          }
-          case 'BinaryExpression': {
-            const left = env.get(instr.value.left.identifier.id);
-            const right = env.get(instr.value.right.identifier.id);
-            let nullish: boolean = false;
-            let refId: RefId | null = null;
-            if (left?.kind === 'RefValue' && left.refId != null) {
-              refId = left.refId;
-            } else if (right?.kind === 'RefValue' && right.refId != null) {
-              refId = right.refId;
-            }
-
-            if (left?.kind === 'Nullable') {
-              nullish = true;
-            } else if (right?.kind === 'Nullable') {
-              nullish = true;
-            }
-
-            if (refId !== null && nullish) {
-              env.set(instr.lvalue.identifier.id, {kind: 'Guard', refId});
-            } else {
-              for (const operand of eachInstructionValueOperand(instr.value)) {
-                validateNoRefValueAccess(errors, env, operand);
-              }
-            }
-            break;
-          }
-          default: {
-            for (const operand of eachInstructionValueOperand(instr.value)) {
-              validateNoRefValueAccess(errors, env, operand);
-            }
-            break;
-          }
-        }
+    case 'Primitive': {
+      if (value.value == null) {
+        nullables.add(lvalue.identifier.id);
+      }
+      break;
+    }
 
-        // Guard values are derived from ref.current, so they can only be used in if statement targets
-        for (const operand of eachInstructionOperand(instr)) {
-          guardCheck(errors, operand, env);
-        }
+    case 'LoadGlobal': {
+      if (value.binding.name === 'undefined') {
+        nullables.add(lvalue.identifier.id);
+      }
+      break;
+    }
 
-        if (
-          isUseRefType(instr.lvalue.identifier) &&
-          env.get(instr.lvalue.identifier.id)?.kind !== 'Ref'
-        ) {
-          env.set(
-            instr.lvalue.identifier.id,
-            joinRefAccessTypes(
-              env.get(instr.lvalue.identifier.id) ?? {kind: 'None'},
-              {kind: 'Ref', refId: nextRefId()},
-            ),
-          );
-        }
-        if (
-          isRefValueType(instr.lvalue.identifier) &&
-          env.get(instr.lvalue.identifier.id)?.kind !== 'RefValue'
-        ) {
-          env.set(
-            instr.lvalue.identifier.id,
-            joinRefAccessTypes(
-              env.get(instr.lvalue.identifier.id) ?? {kind: 'None'},
-              {kind: 'RefValue', loc: instr.loc},
-            ),
-          );
+    case 'BinaryExpression': {
+      if (['==', '===', '!=', '!=='].includes(value.operator)) {
+        const leftRef = refs.get(value.left.identifier.id);
+        const rightRef = refs.get(value.right.identifier.id);
+        const leftNull = nullables.has(value.left.identifier.id);
+        const rightNull = nullables.has(value.right.identifier.id);
+        const isEquality = value.operator === '==' || value.operator === '===';
+
+        if (leftRef?.kind === 'RefValue' && rightNull) {
+          guards.set(lvalue.identifier.id, {refId: leftRef.refId, isEquality});
+        } else if (rightRef?.kind === 'RefValue' && leftNull) {
+          guards.set(lvalue.identifier.id, {refId: rightRef.refId, isEquality});
         }
       }
+      break;
+    }
 
-      if (block.terminal.kind === 'if') {
-        const test = env.get(block.terminal.test.identifier.id);
-        if (
-          test?.kind === 'Guard' &&
-          safeBlocks.find(entry => entry.ref === test.refId) == null
-        ) {
-          safeBlocks.push({block: block.terminal.fallthrough, ref: test.refId});
+    case 'UnaryExpression': {
+      if (value.operator === '!') {
+        const guard = guards.get(value.value.identifier.id);
+        if (guard != null) {
+          guards.set(lvalue.identifier.id, {
+            refId: guard.refId,
+            isEquality: !guard.isEquality,
+          });
         }
       }
+      break;
+    }
 
-      for (const operand of eachTerminalOperand(block.terminal)) {
-        if (block.terminal.kind !== 'return') {
-          validateNoRefValueAccess(errors, env, operand);
-          if (block.terminal.kind !== 'if') {
-            guardCheck(errors, operand, env);
+    case 'PropertyStore':
+    case 'ComputedStore': {
+      const objRef = refs.get(value.object.identifier.id);
+      const isRef = objRef != null || isUseRefType(value.object.identifier);
+
+      if (isRef) {
+        const refId = objRef?.refId;
+        const isPropertyStore = value.kind === 'PropertyStore';
+        const isCurrentProperty =
+          isPropertyStore && value.property === 'current';
+        const isNullGuardInit =
+          isCurrentProperty && refId != null && safeRefIds.has(refId);
+
+        if (isNullGuardInit && refId != null) {
+          // Check if this ref was already initialized
+          const firstInitLoc = refInitLocations.get(refId);
+          if (firstInitLoc != null) {
+            // Error: duplicate initialization
+            errors.pushDiagnostic(
+              makeDuplicateRefInitError(instr.loc, firstInitLoc),
+            );
+            return {loc: instr.loc, isCurrentProperty};
+          }
+          // Track this as the first initialization
+          refInitLocations.set(refId, instr.loc);
+        } else if (!isNullGuardInit) {
+          const mutation: MutationInfo = {
+            loc: instr.loc,
+            isCurrentProperty,
+          };
+
+          if (isTopLevel) {
+            // Direct mutation at top level - error immediately
+            errors.pushDiagnostic(makeRefMutationError(mutation.loc));
           }
-        } else {
-          // Allow functions containing refs to be returned, but not direct ref values
-          validateNoDirectRefValueAccess(errors, operand, env);
-          guardCheck(errors, operand, env);
-          returnValues.push(env.get(operand.identifier.id));
+          return mutation;
         }
       }
+      break;
     }
 
-    if (errors.hasAnyErrors()) {
-      return Err(errors);
+    case 'CallExpression':
+    case 'MethodCall': {
+      // Check if the callee is a function that mutates refs
+      const callee =
+        value.kind === 'CallExpression' ? value.callee : value.property;
+      const mutationInfo = refMutatingFunctions.get(callee.identifier.id);
+      if (mutationInfo != null && isTopLevel) {
+        // Calling a ref-mutating function at top level - error
+        errors.pushDiagnostic(makeRefMutationError(mutationInfo.loc));
+      }
+      break;
     }
-  }
-
-  CompilerError.invariant(!env.hasChanged(), {
-    reason: 'Ref type environment did not converge',
-    description: null,
-    details: [
-      {
-        kind: 'error',
-        loc: null,
-        message: null,
-      },
-    ],
-  });
-
-  return Ok(
-    joinRefAccessTypes(
-      ...returnValues.filter((env): env is RefAccessType => env !== undefined),
-    ),
-  );
-}
 
-function destructure(
-  type: RefAccessType | undefined,
-): RefAccessType | undefined {
-  if (type?.kind === 'Structure' && type.value !== null) {
-    return destructure(type.value);
-  }
-  return type;
-}
-
-function guardCheck(errors: CompilerError, operand: Place, env: Env): void {
-  if (env.get(operand.identifier.id)?.kind === 'Guard') {
-    errors.pushDiagnostic(
-      CompilerDiagnostic.create({
-        category: ErrorCategory.Refs,
-        reason: 'Cannot access refs during render',
-        description: ERROR_DESCRIPTION,
-      }).withDetails({
-        kind: 'error',
-        loc: operand.loc,
-        message: `Cannot access ref value during render`,
-      }),
-    );
-  }
-}
+    case 'FunctionExpression':
+    case 'ObjectMethod': {
+      /*
+       * Recursively validate function expressions
+       * Pass isTopLevel=false since these are nested functions
+       */
+      const mutation = validateFunction(
+        value.loweredFunc.func,
+        refs,
+        refMutatingFunctions,
+        refInitLocations,
+        false,
+        errors,
+      );
+      // If the function mutates refs, track it
+      if (mutation != null) {
+        refMutatingFunctions.set(lvalue.identifier.id, mutation);
+      }
+      break;
+    }
 
-function validateNoRefValueAccess(
-  errors: CompilerError,
-  env: Env,
-  operand: Place,
-): void {
-  const type = destructure(env.get(operand.identifier.id));
-  if (
-    type?.kind === 'RefValue' ||
-    (type?.kind === 'Structure' && type.fn?.readRefEffect)
-  ) {
-    errors.pushDiagnostic(
-      CompilerDiagnostic.create({
-        category: ErrorCategory.Refs,
-        reason: 'Cannot access refs during render',
-        description: ERROR_DESCRIPTION,
-      }).withDetails({
-        kind: 'error',
-        loc: (type.kind === 'RefValue' && type.loc) || operand.loc,
-        message: `Cannot access ref value during render`,
-      }),
-    );
+    default: {
+      break;
+    }
   }
+  return null;
 }
 
-function validateNoRefPassedToFunction(
-  errors: CompilerError,
-  env: Env,
-  operand: Place,
-  loc: SourceLocation,
-): void {
-  const type = destructure(env.get(operand.identifier.id));
-  if (
-    type?.kind === 'Ref' ||
-    type?.kind === 'RefValue' ||
-    (type?.kind === 'Structure' && type.fn?.readRefEffect)
-  ) {
-    errors.pushDiagnostic(
-      CompilerDiagnostic.create({
-        category: ErrorCategory.Refs,
-        reason: 'Cannot access refs during render',
-        description: ERROR_DESCRIPTION,
-      }).withDetails({
-        kind: 'error',
-        loc: (type.kind === 'RefValue' && type.loc) || loc,
-        message: `Passing a ref to a function may read its value during render`,
-      }),
-    );
-  }
+function makeRefMutationError(loc: SourceLocation): CompilerDiagnostic {
+  return CompilerDiagnostic.create({
+    category: ErrorCategory.Refs,
+    reason: 'Cannot access refs during render',
+    description: REF_ERROR_DESCRIPTION,
+  }).withDetails({
+    kind: 'error',
+    loc,
+    message: 'Cannot update ref during render',
+  });
 }
 
-function validateNoRefUpdate(
-  errors: CompilerError,
-  env: Env,
-  operand: Place,
+function makeDuplicateRefInitError(
   loc: SourceLocation,
-): void {
-  const type = destructure(env.get(operand.identifier.id));
-  if (type?.kind === 'Ref' || type?.kind === 'RefValue') {
-    errors.pushDiagnostic(
-      CompilerDiagnostic.create({
-        category: ErrorCategory.Refs,
-        reason: 'Cannot access refs during render',
-        description: ERROR_DESCRIPTION,
-      }).withDetails({
-        kind: 'error',
-        loc: (type.kind === 'RefValue' && type.loc) || loc,
-        message: `Cannot update ref during render`,
-      }),
-    );
-  }
-}
-
-function validateNoDirectRefValueAccess(
-  errors: CompilerError,
-  operand: Place,
-  env: Env,
-): void {
-  const type = destructure(env.get(operand.identifier.id));
-  if (type?.kind === 'RefValue') {
-    errors.pushDiagnostic(
-      CompilerDiagnostic.create({
-        category: ErrorCategory.Refs,
-        reason: 'Cannot access refs during render',
-        description: ERROR_DESCRIPTION,
-      }).withDetails({
-        kind: 'error',
-        loc: type.loc ?? operand.loc,
-        message: `Cannot access ref value during render`,
-      }),
-    );
-  }
+  firstInitLoc: SourceLocation,
+): CompilerDiagnostic {
+  return CompilerDiagnostic.create({
+    category: ErrorCategory.Refs,
+    reason: 'Cannot access refs during render',
+    description: REF_ERROR_DESCRIPTION,
+  })
+    .withDetails({
+      kind: 'error',
+      loc,
+      message: 'Ref is initialized more than once during render',
+    })
+    .withDetails({
+      kind: 'error',
+      loc: firstInitLoc,
+      message: 'Ref was first initialized here',
+    });
 }
 
-const ERROR_DESCRIPTION =
+export const REF_ERROR_DESCRIPTION =
   'React refs are values that are not needed for rendering. Refs should only be accessed ' +
   'outside of render, such as in event handlers or effects. ' +
   'Accessing a ref value (the `current` property) during render can cause your component ' +
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInEffects.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInEffects.ts
index 91de8f20671..06a5c6b9b29 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInEffects.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoSetStateInEffects.ts
@@ -202,10 +202,10 @@ function getSetStateCall(
     );
   };
 
-  const isRefControlledBlock: (id: BlockId) => boolean =
+  const isRefControlledBlock: (id: BlockId) => Place | null =
     enableAllowSetStateFromRefsInEffects
       ? createControlDominators(fn, place => isDerivedFromRef(place))
-      : (): boolean => false;
+      : (): Place | null => null;
 
   for (const [, block] of fn.body.blocks) {
     if (enableAllowSetStateFromRefsInEffects) {
@@ -224,7 +224,7 @@ function getSetStateCall(
           refDerivedValues.add(phi.place.identifier.id);
         } else {
           for (const [pred] of phi.operands) {
-            if (isRefControlledBlock(pred)) {
+            if (isRefControlledBlock(pred) != null) {
               refDerivedValues.add(phi.place.identifier.id);
               break;
             }
@@ -337,7 +337,7 @@ function getSetStateCall(
                  * be needed when initial layout measurements from refs need to be stored in state.
                  */
                 return null;
-              } else if (isRefControlledBlock(block.id)) {
+              } else if (isRefControlledBlock(block.id) != null) {
                 continue;
               }
             }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/access-ref-in-render-mutate-object-with-ref-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/access-ref-in-render-mutate-object-with-ref-function.expect.md
new file mode 100644
index 00000000000..818336dadc0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/access-ref-in-render-mutate-object-with-ref-function.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+import {useRef} from 'react';
+
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses an impure value during render.
+ */
+function Component() {
+  const ref = useRef(null);
+  const object = {};
+  object.foo = () => ref.current;
+  const refValue = object.foo();
+  return <div>{refValue}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useRef } from "react";
+
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses an impure value during render.
+ */
+function Component() {
+  const $ = _c(2);
+  const ref = useRef(null);
+  const object = {};
+  object.foo = () => ref.current;
+  const refValue = object.foo();
+  let t0;
+  if ($[0] !== refValue) {
+    t0 = <div>{refValue}</div>;
+    $[0] = refValue;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-render-mutate-object-with-ref-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/access-ref-in-render-mutate-object-with-ref-function.js
similarity index 61%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-render-mutate-object-with-ref-function.js
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/access-ref-in-render-mutate-object-with-ref-function.js
index 9d3faac764b..f0eb4ef03e5 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-render-mutate-object-with-ref-function.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/access-ref-in-render-mutate-object-with-ref-function.js
@@ -1,5 +1,9 @@
 import {useRef} from 'react';
 
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses an impure value during render.
+ */
 function Component() {
   const ref = useRef(null);
   const object = {};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-mutation.expect.md
new file mode 100644
index 00000000000..14a8eb06af2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-mutation.expect.md
@@ -0,0 +1,74 @@
+
+## Input
+
+```javascript
+import {useRef} from 'react';
+import {addOne} from 'shared-runtime';
+
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses an impure value during render.
+ */
+function useKeyCommand() {
+  const currentPosition = useRef(0);
+  const handleKey = direction => () => {
+    const position = currentPosition.current;
+    const nextPosition = direction === 'left' ? addOne(position) : position;
+    currentPosition.current = nextPosition;
+  };
+  const moveLeft = {
+    handler: handleKey('left')(),
+  };
+  const moveRight = {
+    handler: handleKey('right')(),
+  };
+  return [moveLeft, moveRight];
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useKeyCommand,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useRef } from "react";
+import { addOne } from "shared-runtime";
+
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses an impure value during render.
+ */
+function useKeyCommand() {
+  const $ = _c(1);
+  const currentPosition = useRef(0);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const handleKey = (direction) => () => {
+      const position = currentPosition.current;
+      const nextPosition = direction === "left" ? addOne(position) : position;
+      currentPosition.current = nextPosition;
+    };
+    const moveLeft = { handler: handleKey("left")() };
+    const moveRight = { handler: handleKey("right")() };
+    t0 = [moveLeft, moveRight];
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useKeyCommand,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{},{}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-mutation.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-mutation.tsx
similarity index 82%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-mutation.tsx
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-mutation.tsx
index 41e117ed15e..3aa70cfaf93 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-mutation.tsx
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-mutation.tsx
@@ -1,6 +1,10 @@
 import {useRef} from 'react';
 import {addOne} from 'shared-runtime';
 
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses an impure value during render.
+ */
 function useKeyCommand() {
   const currentPosition = useRef(0);
   const handleKey = direction => () => {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-assigning-ref-accessing-function-to-object-property-if-not-mutated.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-ref-returning-function-in-rendered-object.expect.md
similarity index 80%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-assigning-ref-accessing-function-to-object-property-if-not-mutated.expect.md
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-ref-returning-function-in-rendered-object.expect.md
index b5fc0a9dc75..6905bf0d872 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-assigning-ref-accessing-function-to-object-property-if-not-mutated.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-ref-returning-function-in-rendered-object.expect.md
@@ -5,6 +5,10 @@
 import {useRef} from 'react';
 import {Stringify} from 'shared-runtime';
 
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses an impure value during render.
+ */
 function Component(props) {
   const ref = useRef(props.value);
   const object = {};
@@ -26,6 +30,10 @@ import { c as _c } from "react/compiler-runtime";
 import { useRef } from "react";
 import { Stringify } from "shared-runtime";
 
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses an impure value during render.
+ */
 function Component(props) {
   const $ = _c(1);
   const ref = useRef(props.value);
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-assigning-ref-accessing-function-to-object-property-if-not-mutated.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-ref-returning-function-in-rendered-object.js
similarity index 72%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-assigning-ref-accessing-function-to-object-property-if-not-mutated.js
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-ref-returning-function-in-rendered-object.js
index 2c84772dca0..b9ad32d2c0b 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-assigning-ref-accessing-function-to-object-property-if-not-mutated.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-ref-returning-function-in-rendered-object.js
@@ -1,6 +1,10 @@
 import {useRef} from 'react';
 import {Stringify} from 'shared-runtime';
 
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses an impure value during render.
+ */
 function Component(props) {
   const ref = useRef(props.value);
   const object = {};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.expect.md
index b7b707b3e74..f0472f7bca6 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.expect.md
@@ -5,6 +5,7 @@
 function Component() {
   const Foo = () => {
     someGlobal = true;
+    return <div />;
   };
   return <Foo />;
 }
@@ -26,9 +27,9 @@ error.assign-global-in-component-tag-function.ts:3:4
   2 |   const Foo = () => {
 > 3 |     someGlobal = true;
     |     ^^^^^^^^^^ `someGlobal` cannot be reassigned
-  4 |   };
-  5 |   return <Foo />;
-  6 | }
+  4 |     return <div />;
+  5 |   };
+  6 |   return <Foo />;
 ```
           
       
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.js
index 2982fdf7085..eaf1eceac2a 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-component-tag-function.js
@@ -1,6 +1,7 @@
 function Component() {
   const Foo = () => {
     someGlobal = true;
+    return <div />;
   };
   return <Foo />;
 }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.expect.md
index 1f5ac0c83df..d57997b8fa6 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.expect.md
@@ -5,6 +5,7 @@
 function Component() {
   const foo = () => {
     someGlobal = true;
+    return <div />;
   };
   // Children are generally access/called during render, so
   // modifying a global in a children function is almost
@@ -29,9 +30,9 @@ error.assign-global-in-jsx-children.ts:3:4
   2 |   const foo = () => {
 > 3 |     someGlobal = true;
     |     ^^^^^^^^^^ `someGlobal` cannot be reassigned
-  4 |   };
-  5 |   // Children are generally access/called during render, so
-  6 |   // modifying a global in a children function is almost
+  4 |     return <div />;
+  5 |   };
+  6 |   // Children are generally access/called during render, so
 ```
           
       
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.js
index 82554e8ac43..1def89dd7d5 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-global-in-jsx-children.js
@@ -1,6 +1,7 @@
 function Component() {
   const foo = () => {
     someGlobal = true;
+    return <div />;
   };
   // Children are generally access/called during render, so
   // modifying a global in a children function is almost
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-mutation.expect.md
deleted file mode 100644
index a3b2ace512f..00000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.capture-ref-for-mutation.expect.md
+++ /dev/null
@@ -1,64 +0,0 @@
-
-## Input
-
-```javascript
-import {useRef} from 'react';
-import {addOne} from 'shared-runtime';
-
-function useKeyCommand() {
-  const currentPosition = useRef(0);
-  const handleKey = direction => () => {
-    const position = currentPosition.current;
-    const nextPosition = direction === 'left' ? addOne(position) : position;
-    currentPosition.current = nextPosition;
-  };
-  const moveLeft = {
-    handler: handleKey('left')(),
-  };
-  const moveRight = {
-    handler: handleKey('right')(),
-  };
-  return [moveLeft, moveRight];
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: useKeyCommand,
-  params: [],
-};
-
-```
-
-
-## Error
-
-```
-Found 2 errors:
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-error.capture-ref-for-mutation.ts:12:13
-  10 |   };
-  11 |   const moveLeft = {
-> 12 |     handler: handleKey('left')(),
-     |              ^^^^^^^^^^^^^^^^^ This function accesses a ref value
-  13 |   };
-  14 |   const moveRight = {
-  15 |     handler: handleKey('right')(),
-
-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.capture-ref-for-mutation.ts:15:13
-  13 |   };
-  14 |   const moveRight = {
-> 15 |     handler: handleKey('right')(),
-     |              ^^^^^^^^^^^^^^^^^^ This function accesses a ref value
-  16 |   };
-  17 |   return [moveLeft, moveRight];
-  18 | }
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-ref-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-ref-value.expect.md
index cf9a6a5b4c1..263c0ea476c 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-ref-value.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.hook-ref-value.expect.md
@@ -20,30 +20,26 @@ export const FIXTURE_ENTRYPOINT = {
 ## Error
 
 ```
-Found 2 errors:
+Found 1 error:
 
-Error: Cannot access refs during render
+Error: Cannot access ref value during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
-error.hook-ref-value.ts:5:23
+error.hook-ref-value.ts:5:22
   3 | function Component(props) {
   4 |   const ref = useRef();
 > 5 |   useEffect(() => {}, [ref.current]);
-    |                        ^^^^^^^^^^^ Cannot access ref value during render
+    |                       ^^^^^^^^^^^^^ Ref value is used during render
   6 | }
   7 |
   8 | export const FIXTURE_ENTRYPOINT = {
 
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
 error.hook-ref-value.ts:5:23
   3 | function Component(props) {
   4 |   const ref = useRef();
 > 5 |   useEffect(() => {}, [ref.current]);
-    |                        ^^^^^^^^^^^ Cannot access ref value during render
+    |                        ^^^^^^^^^^^ Ref is initially accessed
   6 | }
   7 |
   8 | export const FIXTURE_ENTRYPOINT = {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md
index 94a9a984c2b..73b27c7b623 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-during-render.expect.md
@@ -17,15 +17,23 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Cannot access refs during render
+Error: Cannot access ref value during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
+error.invalid-access-ref-during-render.ts:5:9
+  3 |   const ref = useRef(null);
+  4 |   const value = ref.current;
+> 5 |   return value;
+    |          ^^^^^ Ref value is used during render
+  6 | }
+  7 |
+
 error.invalid-access-ref-during-render.ts:4:16
   2 | function Component(props) {
   3 |   const ref = useRef(null);
 > 4 |   const value = ref.current;
-    |                 ^^^^^^^^^^^ Cannot access ref value during render
+    |                 ^^^^^^^^^^^ Ref is initially accessed
   5 |   return value;
   6 | }
   7 |
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer-init.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer-init.expect.md
index 647cf28f7b3..d8817dc70f6 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer-init.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer-init.expect.md
@@ -28,7 +28,7 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 Found 1 error:
 
-Error: Cannot access refs during render
+Error: Cannot access ref value during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
@@ -36,7 +36,16 @@ error.invalid-access-ref-in-reducer-init.ts:8:4
    6 |     (state, action) => state + action,
    7 |     0,
 >  8 |     init => ref.current
-     |     ^^^^^^^^^^^^^^^^^^^ Passing a ref to a function may read its value during render
+     |     ^^^^^^^^^^^^^^^^^^^ Ref value is used during render
+   9 |   );
+  10 |
+  11 |   return <Stringify state={state} />;
+
+error.invalid-access-ref-in-reducer-init.ts:8:12
+   6 |     (state, action) => state + action,
+   7 |     0,
+>  8 |     init => ref.current
+     |             ^^^^^^^^^^^ Ref is initially accessed
    9 |   );
   10 |
   11 |   return <Stringify state={state} />;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer.expect.md
index 33fcd6d188c..561ff59cb66 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-reducer.expect.md
@@ -22,9 +22,9 @@ export const FIXTURE_ENTRYPOINT = {
 ## Error
 
 ```
-Found 1 error:
+Found 2 errors:
 
-Error: Cannot access refs during render
+Error: Cannot access ref value during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
@@ -32,7 +32,38 @@ error.invalid-access-ref-in-reducer.ts:5:29
   3 | function Component(props) {
   4 |   const ref = useRef(props.value);
 > 5 |   const [state] = useReducer(() => ref.current, null);
-    |                              ^^^^^^^^^^^^^^^^^ Passing a ref to a function may read its value during render
+    |                              ^^^^^^^^^^^^^^^^^ Ref value is used during render
+  6 |
+  7 |   return <Stringify state={state} />;
+  8 | }
+
+error.invalid-access-ref-in-reducer.ts:5:35
+  3 | function Component(props) {
+  4 |   const ref = useRef(props.value);
+> 5 |   const [state] = useReducer(() => ref.current, null);
+    |                                    ^^^^^^^^^^^ Ref is initially accessed
+  6 |
+  7 |   return <Stringify state={state} />;
+  8 | }
+
+Error: Cannot access ref value during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-access-ref-in-reducer.ts:7:27
+   5 |   const [state] = useReducer(() => ref.current, null);
+   6 |
+>  7 |   return <Stringify state={state} />;
+     |                            ^^^^^ Ref value is used during render
+   8 | }
+   9 |
+  10 | export const FIXTURE_ENTRYPOINT = {
+
+error.invalid-access-ref-in-reducer.ts:5:35
+  3 | function Component(props) {
+  4 |   const ref = useRef(props.value);
+> 5 |   const [state] = useReducer(() => ref.current, null);
+    |                                    ^^^^^^^^^^^ Ref is initially accessed
   6 |
   7 |   return <Stringify state={state} />;
   8 | }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-render-mutate-object-with-ref-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-render-mutate-object-with-ref-function.expect.md
deleted file mode 100644
index 73cead6affc..00000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-render-mutate-object-with-ref-function.expect.md
+++ /dev/null
@@ -1,37 +0,0 @@
-
-## Input
-
-```javascript
-import {useRef} from 'react';
-
-function Component() {
-  const ref = useRef(null);
-  const object = {};
-  object.foo = () => ref.current;
-  const refValue = object.foo();
-  return <div>{refValue}</div>;
-}
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-error.invalid-access-ref-in-render-mutate-object-with-ref-function.ts:7:19
-   5 |   const object = {};
-   6 |   object.foo = () => ref.current;
->  7 |   const refValue = object.foo();
-     |                    ^^^^^^^^^^ This function accesses a ref value
-   8 |   return <div>{refValue}</div>;
-   9 | }
-  10 |
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-state-initializer.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-state-initializer.expect.md
index a10db96463d..944554828f4 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-state-initializer.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-access-ref-in-state-initializer.expect.md
@@ -22,9 +22,9 @@ export const FIXTURE_ENTRYPOINT = {
 ## Error
 
 ```
-Found 1 error:
+Found 2 errors:
 
-Error: Cannot access refs during render
+Error: Cannot access ref value during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
@@ -32,7 +32,38 @@ error.invalid-access-ref-in-state-initializer.ts:5:27
   3 | function Component(props) {
   4 |   const ref = useRef(props.value);
 > 5 |   const [state] = useState(() => ref.current);
-    |                            ^^^^^^^^^^^^^^^^^ Passing a ref to a function may read its value during render
+    |                            ^^^^^^^^^^^^^^^^^ Ref value is used during render
+  6 |
+  7 |   return <Stringify state={state} />;
+  8 | }
+
+error.invalid-access-ref-in-state-initializer.ts:5:33
+  3 | function Component(props) {
+  4 |   const ref = useRef(props.value);
+> 5 |   const [state] = useState(() => ref.current);
+    |                                  ^^^^^^^^^^^ Ref is initially accessed
+  6 |
+  7 |   return <Stringify state={state} />;
+  8 | }
+
+Error: Cannot access ref value during render
+
+React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
+
+error.invalid-access-ref-in-state-initializer.ts:7:27
+   5 |   const [state] = useState(() => ref.current);
+   6 |
+>  7 |   return <Stringify state={state} />;
+     |                            ^^^^^ Ref value is used during render
+   8 | }
+   9 |
+  10 | export const FIXTURE_ENTRYPOINT = {
+
+error.invalid-access-ref-in-state-initializer.ts:5:33
+  3 | function Component(props) {
+  4 |   const ref = useRef(props.value);
+> 5 |   const [state] = useState(() => ref.current);
+    |                                  ^^^^^^^^^^^ Ref is initially accessed
   6 |
   7 |   return <Stringify state={state} />;
   8 | }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.expect.md
index 09a64d4bab2..4f8f295a563 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-aliased-ref-in-callback-invoked-during-render-.expect.md
@@ -21,17 +21,27 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Cannot access refs during render
+Error: Cannot access ref value during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
-error.invalid-aliased-ref-in-callback-invoked-during-render-.ts:9:33
-   7 |     return <Foo item={item} current={current} />;
+error.invalid-aliased-ref-in-callback-invoked-during-render-.ts:7:37
+   5 |     const aliasedRef = ref;
+   6 |     const current = aliasedRef.current;
+>  7 |     return <Foo item={item} current={current} />;
+     |                                      ^^^^^^^ Ref value is used during render
    8 |   };
->  9 |   return <Items>{props.items.map(item => renderItem(item))}</Items>;
-     |                                  ^^^^^^^^^^^^^^^^^^^^^^^^ Cannot access ref value during render
+   9 |   return <Items>{props.items.map(item => renderItem(item))}</Items>;
   10 | }
-  11 |
+
+error.invalid-aliased-ref-in-callback-invoked-during-render-.ts:6:20
+  4 |   const renderItem = item => {
+  5 |     const aliasedRef = ref;
+> 6 |     const current = aliasedRef.current;
+    |                     ^^^^^^^^^^^^^^^^^^ Ref is initially accessed
+  7 |     return <Foo item={item} current={current} />;
+  8 |   };
+  9 |   return <Items>{props.items.map(item => renderItem(item))}</Items>;
 ```
           
       
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md
index c8b70edcc41..96041be5fcf 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-disallow-mutating-refs-in-render-transitive.expect.md
@@ -27,14 +27,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.invalid-disallow-mutating-refs-in-render-transitive.ts:9:2
-   7 |   };
-   8 |   const changeRef = setRef;
->  9 |   changeRef();
-     |   ^^^^^^^^^ This function accesses a ref value
-  10 |
-  11 |   return <button ref={ref} />;
-  12 | }
+error.invalid-disallow-mutating-refs-in-render-transitive.ts:6:4
+  4 |
+  5 |   const setRef = () => {
+> 6 |     ref.current = false;
+    |     ^^^^^^^^^^^ Cannot update ref during render
+  7 |   };
+  8 |   const changeRef = setRef;
+  9 |   changeRef();
 ```
           
       
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-indirect-via-mutation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-indirect-via-mutation.expect.md
new file mode 100644
index 00000000000..cf5fa436ee0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-indirect-via-mutation.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+// @validateNoImpureFunctionsInRender
+
+import {arrayPush, identity, makeArray} from 'shared-runtime';
+
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses an impure value during render. The impurity is lost
+ * when passed through external function calls.
+ */
+function Component() {
+  const getDate = () => Date.now();
+  const now = getDate();
+  const array = [];
+  arrayPush(array, now);
+  return <Foo hasDate={array} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access impure value during render
+
+Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+
+error.invalid-impure-functions-in-render-indirect-via-mutation.ts:15:23
+  13 |   const array = [];
+  14 |   arrayPush(array, now);
+> 15 |   return <Foo hasDate={array} />;
+     |                        ^^^^^ Cannot access impure value during render
+  16 | }
+  17 |
+
+error.invalid-impure-functions-in-render-indirect-via-mutation.ts:11:24
+   9 |  */
+  10 | function Component() {
+> 11 |   const getDate = () => Date.now();
+     |                         ^^^^^^^^^^ `Date.now` is an impure function.
+  12 |   const now = getDate();
+  13 |   const array = [];
+  14 |   arrayPush(array, now);
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-indirect-via-mutation.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-indirect-via-mutation.js
new file mode 100644
index 00000000000..e38bf3e9b63
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-indirect-via-mutation.js
@@ -0,0 +1,16 @@
+// @validateNoImpureFunctionsInRender
+
+import {arrayPush, identity, makeArray} from 'shared-runtime';
+
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses an impure value during render. The impurity is lost
+ * when passed through external function calls.
+ */
+function Component() {
+  const getDate = () => Date.now();
+  const now = getDate();
+  const array = [];
+  arrayPush(array, now);
+  return <Foo hasDate={array} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-function-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-function-call.expect.md
new file mode 100644
index 00000000000..29d379238c0
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-function-call.expect.md
@@ -0,0 +1,50 @@
+
+## Input
+
+```javascript
+// @validateNoImpureFunctionsInRender
+
+import {identity, makeArray} from 'shared-runtime';
+
+function Component() {
+  const now = Date.now();
+  const f = () => {
+    const array = makeArray(now);
+    const hasDate = identity(array);
+    return hasDate;
+  };
+  const hasDate = f();
+  return <Foo hasDate={hasDate} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access impure value during render
+
+Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+
+error.invalid-impure-functions-in-render-via-function-call.ts:13:23
+  11 |   };
+  12 |   const hasDate = f();
+> 13 |   return <Foo hasDate={hasDate} />;
+     |                        ^^^^^^^ Cannot access impure value during render
+  14 | }
+  15 |
+
+error.invalid-impure-functions-in-render-via-function-call.ts:6:14
+  4 |
+  5 | function Component() {
+> 6 |   const now = Date.now();
+    |               ^^^^^^^^^^ `Date.now` is an impure function.
+  7 |   const f = () => {
+  8 |     const array = makeArray(now);
+  9 |     const hasDate = identity(array);
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-function-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-function-call.js
new file mode 100644
index 00000000000..0ec57a4de35
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-function-call.js
@@ -0,0 +1,14 @@
+// @validateNoImpureFunctionsInRender
+
+import {identity, makeArray} from 'shared-runtime';
+
+function Component() {
+  const now = Date.now();
+  const f = () => {
+    const array = makeArray(now);
+    const hasDate = identity(array);
+    return hasDate;
+  };
+  const hasDate = f();
+  return <Foo hasDate={hasDate} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-render-helper-typed.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-render-helper-typed.expect.md
new file mode 100644
index 00000000000..d9a897c1e37
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-render-helper-typed.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// @validateNoImpureFunctionsInRender
+
+import {typedArrayPush, typedIdentity} from 'shared-runtime';
+
+function Component() {
+  const now = () => Date.now();
+  const renderItem = () => {
+    const array = [];
+    typedArrayPush(array, now());
+    const hasDate = typedIdentity(array);
+    return <Bar hasDate={hasDate} />;
+  };
+  return <Foo renderItem={renderItem} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Cannot access impure value during render
+
+Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+
+error.invalid-impure-functions-in-render-via-render-helper-typed.ts:11:25
+   9 |     typedArrayPush(array, now());
+  10 |     const hasDate = typedIdentity(array);
+> 11 |     return <Bar hasDate={hasDate} />;
+     |                          ^^^^^^^ Cannot access impure value during render
+  12 |   };
+  13 |   return <Foo renderItem={renderItem} />;
+  14 | }
+
+error.invalid-impure-functions-in-render-via-render-helper-typed.ts:6:20
+  4 |
+  5 | function Component() {
+> 6 |   const now = () => Date.now();
+    |                     ^^^^^^^^^^ `Date.now` is an impure function.
+  7 |   const renderItem = () => {
+  8 |     const array = [];
+  9 |     typedArrayPush(array, now());
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-render-helper-typed.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-render-helper-typed.js
new file mode 100644
index 00000000000..1eda64f4c6c
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render-via-render-helper-typed.js
@@ -0,0 +1,14 @@
+// @validateNoImpureFunctionsInRender
+
+import {typedArrayPush, typedIdentity} from 'shared-runtime';
+
+function Component() {
+  const now = () => Date.now();
+  const renderItem = () => {
+    const array = [];
+    typedArrayPush(array, now());
+    const hasDate = typedIdentity(array);
+    return <Bar hasDate={hasDate} />;
+  };
+  return <Foo renderItem={renderItem} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render.expect.md
index 255da7389b3..c413d9acd33 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-functions-in-render.expect.md
@@ -19,41 +19,65 @@ function Component() {
 ```
 Found 3 errors:
 
-Error: Cannot call impure function during render
+Error: Cannot access impure value during render
 
-`Date.now` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+
+error.invalid-impure-functions-in-render.ts:7:20
+  5 |   const now = performance.now();
+  6 |   const rand = Math.random();
+> 7 |   return <Foo date={date} now={now} rand={rand} />;
+    |                     ^^^^ Cannot access impure value during render
+  8 | }
+  9 |
 
 error.invalid-impure-functions-in-render.ts:4:15
   2 |
   3 | function Component() {
 > 4 |   const date = Date.now();
-    |                ^^^^^^^^^^ Cannot call impure function
+    |                ^^^^^^^^^^ `Date.now` is an impure function.
   5 |   const now = performance.now();
   6 |   const rand = Math.random();
   7 |   return <Foo date={date} now={now} rand={rand} />;
 
-Error: Cannot call impure function during render
+Error: Cannot access impure value during render
 
-`performance.now` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+
+error.invalid-impure-functions-in-render.ts:7:31
+  5 |   const now = performance.now();
+  6 |   const rand = Math.random();
+> 7 |   return <Foo date={date} now={now} rand={rand} />;
+    |                                ^^^ Cannot access impure value during render
+  8 | }
+  9 |
 
 error.invalid-impure-functions-in-render.ts:5:14
   3 | function Component() {
   4 |   const date = Date.now();
 > 5 |   const now = performance.now();
-    |               ^^^^^^^^^^^^^^^^^ Cannot call impure function
+    |               ^^^^^^^^^^^^^^^^^ `performance.now` is an impure function.
   6 |   const rand = Math.random();
   7 |   return <Foo date={date} now={now} rand={rand} />;
   8 | }
 
-Error: Cannot call impure function during render
+Error: Cannot access impure value during render
 
-`Math.random` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+
+error.invalid-impure-functions-in-render.ts:7:42
+  5 |   const now = performance.now();
+  6 |   const rand = Math.random();
+> 7 |   return <Foo date={date} now={now} rand={rand} />;
+    |                                           ^^^^ Cannot access impure value during render
+  8 | }
+  9 |
 
 error.invalid-impure-functions-in-render.ts:6:15
   4 |   const date = Date.now();
   5 |   const now = performance.now();
 > 6 |   const rand = Math.random();
-    |                ^^^^^^^^^^^^^ Cannot call impure function
+    |                ^^^^^^^^^^^^^ `Math.random` is an impure function.
   7 |   return <Foo date={date} now={now} rand={rand} />;
   8 | }
   9 |
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-value-in-render-helper.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-value-in-render-helper.expect.md
new file mode 100644
index 00000000000..de09cda49fb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-value-in-render-helper.expect.md
@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+// @validateNoImpureFunctionsInRender
+function Component() {
+  const now = () => Date.now();
+  const render = () => {
+    return <div>{now()}</div>;
+  };
+  return <div>{render()}</div>;
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: Cannot access impure value during render
+
+Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+
+error.invalid-impure-value-in-render-helper.ts:5:17
+  3 |   const now = () => Date.now();
+  4 |   const render = () => {
+> 5 |     return <div>{now()}</div>;
+    |                  ^^^^^ Cannot access impure value during render
+  6 |   };
+  7 |   return <div>{render()}</div>;
+  8 | }
+
+error.invalid-impure-value-in-render-helper.ts:3:20
+  1 | // @validateNoImpureFunctionsInRender
+  2 | function Component() {
+> 3 |   const now = () => Date.now();
+    |                     ^^^^^^^^^^ `Date.now` is an impure function.
+  4 |   const render = () => {
+  5 |     return <div>{now()}</div>;
+  6 |   };
+
+Error: Cannot access impure value during render
+
+Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+
+error.invalid-impure-value-in-render-helper.ts:7:15
+  5 |     return <div>{now()}</div>;
+  6 |   };
+> 7 |   return <div>{render()}</div>;
+    |                ^^^^^^^^ Cannot access impure value during render
+  8 | }
+  9 |
+
+error.invalid-impure-value-in-render-helper.ts:3:20
+  1 | // @validateNoImpureFunctionsInRender
+  2 | function Component() {
+> 3 |   const now = () => Date.now();
+    |                     ^^^^^^^^^^ `Date.now` is an impure function.
+  4 |   const render = () => {
+  5 |     return <div>{now()}</div>;
+  6 |   };
+```
+          
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-value-in-render-helper.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-value-in-render-helper.js
new file mode 100644
index 00000000000..feecf48e843
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-impure-value-in-render-helper.js
@@ -0,0 +1,8 @@
+// @validateNoImpureFunctionsInRender
+function Component() {
+  const now = () => Date.now();
+  const render = () => {
+    return <div>{now()}</div>;
+  };
+  return <div>{render()}</div>;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.expect.md
deleted file mode 100644
index eaa140eb90b..00000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.expect.md
+++ /dev/null
@@ -1,34 +0,0 @@
-
-## Input
-
-```javascript
-// @validateRefAccessDuringRender
-function Component(props) {
-  const ref = useRef(null);
-  const x = foo(ref);
-  return x.current;
-}
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-error.invalid-pass-ref-to-function.ts:4:16
-  2 | function Component(props) {
-  3 |   const ref = useRef(null);
-> 4 |   const x = foo(ref);
-    |                 ^^^ Passing a ref to a function may read its value during render
-  5 |   return x.current;
-  6 | }
-  7 |
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.js
deleted file mode 100644
index bba228dfa43..00000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-pass-ref-to-function.js
+++ /dev/null
@@ -1,6 +0,0 @@
-// @validateRefAccessDuringRender
-function Component(props) {
-  const ref = useRef(null);
-  const x = foo(ref);
-  return x.current;
-}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.expect.md
index cca903de74c..ca63557d388 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-destructure.expect.md
@@ -16,15 +16,23 @@ function Component({ref}) {
 ```
 Found 1 error:
 
-Error: Cannot access refs during render
+Error: Cannot access ref value during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
+error.invalid-read-ref-prop-in-render-destructure.ts:4:15
+  2 | function Component({ref}) {
+  3 |   const value = ref.current;
+> 4 |   return <div>{value}</div>;
+    |                ^^^^^ Ref value is used during render
+  5 | }
+  6 |
+
 error.invalid-read-ref-prop-in-render-destructure.ts:3:16
   1 | // @validateRefAccessDuringRender @compilationMode:"infer"
   2 | function Component({ref}) {
 > 3 |   const value = ref.current;
-    |                 ^^^^^^^^^^^ Cannot access ref value during render
+    |                 ^^^^^^^^^^^ Ref is initially accessed
   4 |   return <div>{value}</div>;
   5 | }
   6 |
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.expect.md
index 49b8e5d199f..dee36304b21 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-read-ref-prop-in-render-property-load.expect.md
@@ -16,15 +16,23 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Cannot access refs during render
+Error: Cannot access ref value during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
+error.invalid-read-ref-prop-in-render-property-load.ts:4:15
+  2 | function Component(props) {
+  3 |   const value = props.ref.current;
+> 4 |   return <div>{value}</div>;
+    |                ^^^^^ Ref value is used during render
+  5 | }
+  6 |
+
 error.invalid-read-ref-prop-in-render-property-load.ts:3:16
   1 | // @validateRefAccessDuringRender @compilationMode:"infer"
   2 | function Component(props) {
 > 3 |   const value = props.ref.current;
-    |                 ^^^^^^^^^^^^^^^^^ Cannot access ref value during render
+    |                 ^^^^^^^^^^^^^^^^^ Ref is initially accessed
   4 |   return <div>{value}</div>;
   5 | }
   6 |
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-access-render-unary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-access-render-unary.expect.md
index ce1be800a13..62b08209ce2 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-access-render-unary.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-access-render-unary.expect.md
@@ -22,57 +22,27 @@ export const FIXTURE_ENTRYPOINT = {
 ## Error
 
 ```
-Found 4 errors:
+Found 1 error:
 
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-  4 | component C() {
-  5 |   const r = useRef(null);
-> 6 |   const current = !r.current;
-    |                    ^^^^^^^^^ Cannot access ref value during render
-  7 |   return <div>{current}</div>;
-  8 | }
-  9 |
-
-To initialize a ref only once, check that the ref is null with the pattern `if (ref.current == null) { ref.current = ... }`
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-  4 | component C() {
-  5 |   const r = useRef(null);
-> 6 |   const current = !r.current;
-    |                   ^^^^^^^^^^ Cannot access ref value during render
-  7 |   return <div>{current}</div>;
-  8 | }
-  9 |
-
-Error: Cannot access refs during render
+Error: Cannot access ref value during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
    5 |   const r = useRef(null);
    6 |   const current = !r.current;
 >  7 |   return <div>{current}</div>;
-     |                ^^^^^^^ Cannot access ref value during render
+     |                ^^^^^^^ Ref value is used during render
    8 | }
    9 |
   10 | export const FIXTURE_ENTRYPOINT = {
 
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-   5 |   const r = useRef(null);
-   6 |   const current = !r.current;
->  7 |   return <div>{current}</div>;
-     |                ^^^^^^^ Cannot access ref value during render
-   8 | }
-   9 |
-  10 | export const FIXTURE_ENTRYPOINT = {
+  4 | component C() {
+  5 |   const r = useRef(null);
+> 6 |   const current = !r.current;
+    |                    ^^^^^^^^^ Ref is initially accessed
+  7 |   return <div>{current}</div>;
+  8 | }
+  9 |
 ```
           
       
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-in-callback-invoked-during-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-in-callback-invoked-during-render.expect.md
index df1e771fa25..95b7b171785 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-in-callback-invoked-during-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-in-callback-invoked-during-render.expect.md
@@ -20,17 +20,27 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Cannot access refs during render
+Error: Cannot access ref value during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
-error.invalid-ref-in-callback-invoked-during-render.ts:8:33
-   6 |     return <Foo item={item} current={current} />;
-   7 |   };
->  8 |   return <Items>{props.items.map(item => renderItem(item))}</Items>;
-     |                                  ^^^^^^^^^^^^^^^^^^^^^^^^ Cannot access ref value during render
-   9 | }
-  10 |
+error.invalid-ref-in-callback-invoked-during-render.ts:6:37
+  4 |   const renderItem = item => {
+  5 |     const current = ref.current;
+> 6 |     return <Foo item={item} current={current} />;
+    |                                      ^^^^^^^ Ref value is used during render
+  7 |   };
+  8 |   return <Items>{props.items.map(item => renderItem(item))}</Items>;
+  9 | }
+
+error.invalid-ref-in-callback-invoked-during-render.ts:5:20
+  3 |   const ref = useRef(null);
+  4 |   const renderItem = item => {
+> 5 |     const current = ref.current;
+    |                     ^^^^^^^^^^^ Ref is initially accessed
+  6 |     return <Foo item={item} current={current} />;
+  7 |   };
+  8 |   return <Items>{props.items.map(item => renderItem(item))}</Items>;
 ```
           
       
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-initialization-unary-not.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-initialization-unary-not.expect.md
index 516d006c205..1af3fce8dae 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-initialization-unary-not.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-initialization-unary-not.expect.md
@@ -29,15 +29,13 @@ Error: Cannot access refs during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
-  4 | component C() {
-  5 |   const r = useRef(null);
-> 6 |   if (!r.current) {
-    |        ^^^^^^^^^ Cannot access ref value during render
-  7 |     r.current = 1;
-  8 |   }
-  9 | }
-
-To initialize a ref only once, check that the ref is null with the pattern `if (ref.current == null) { ref.current = ... }`
+   5 |   const r = useRef(null);
+   6 |   if (!r.current) {
+>  7 |     r.current = 1;
+     |     ^^^^^^^^^ Cannot update ref during render
+   8 |   }
+   9 | }
+  10 |
 ```
           
       
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-value-as-props.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-value-as-props.expect.md
index d581232b3a4..322ebdbde76 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-value-as-props.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-ref-value-as-props.expect.md
@@ -16,7 +16,7 @@ function Component(props) {
 ```
 Found 1 error:
 
-Error: Cannot access refs during render
+Error: Cannot access ref value during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
@@ -24,7 +24,7 @@ error.invalid-ref-value-as-props.ts:4:19
   2 | function Component(props) {
   3 |   const ref = useRef(null);
 > 4 |   return <Foo ref={ref.current} />;
-    |                    ^^^^^^^^^^^ Cannot access ref value during render
+    |                    ^^^^^^^^^^^ Ref value is used during render
   5 | }
   6 |
 ```
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md
index 387dff27bf0..73824914072 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-during-render.expect.md
@@ -15,22 +15,9 @@ function Component(props) {
 ## Error
 
 ```
-Found 2 errors:
+Found 1 error:
 
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-error.invalid-set-and-read-ref-during-render.ts:4:2
-  2 | function Component(props) {
-  3 |   const ref = useRef(null);
-> 4 |   ref.current = props.value;
-    |   ^^^^^^^^^^^ Cannot update ref during render
-  5 |   return ref.current;
-  6 | }
-  7 |
-
-Error: Cannot access refs during render
+Error: Cannot access ref value during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
@@ -38,7 +25,7 @@ error.invalid-set-and-read-ref-during-render.ts:5:9
   3 |   const ref = useRef(null);
   4 |   ref.current = props.value;
 > 5 |   return ref.current;
-    |          ^^^^^^^^^^^ Cannot access ref value during render
+    |          ^^^^^^^^^^^ Ref value is used during render
   6 | }
   7 |
 ```
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md
index 8ef0e223a86..3b490c7aef9 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-set-and-read-ref-nested-property-during-render.expect.md
@@ -15,30 +15,25 @@ function Component(props) {
 ## Error
 
 ```
-Found 2 errors:
+Found 1 error:
 
-Error: Cannot access refs during render
+Error: Cannot access ref value during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
-error.invalid-set-and-read-ref-nested-property-during-render.ts:4:2
-  2 | function Component(props) {
+error.invalid-set-and-read-ref-nested-property-during-render.ts:5:9
   3 |   const ref = useRef({inner: null});
-> 4 |   ref.current.inner = props.value;
-    |   ^^^^^^^^^^^ Cannot update ref during render
-  5 |   return ref.current.inner;
+  4 |   ref.current.inner = props.value;
+> 5 |   return ref.current.inner;
+    |          ^^^^^^^^^^^^^^^^^ Ref value is used during render
   6 | }
   7 |
 
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
 error.invalid-set-and-read-ref-nested-property-during-render.ts:5:9
   3 |   const ref = useRef({inner: null});
   4 |   ref.current.inner = props.value;
 > 5 |   return ref.current.inner;
-    |          ^^^^^^^^^^^^^^^^^ Cannot access ref value during render
+    |          ^^^^^^^^^^^ Ref is initially accessed
   6 | }
   7 |
 ```
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.expect.md
deleted file mode 100644
index 53bf66b1ee5..00000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.expect.md
+++ /dev/null
@@ -1,53 +0,0 @@
-
-## Input
-
-```javascript
-// @validateRefAccessDuringRender
-function Foo({a}) {
-  const ref = useRef();
-  // type information is lost here as we don't track types of fields
-  const val = {ref};
-  // without type info, we don't know that val.ref.current is a ref value so we
-  // *would* end up depending on val.ref.current
-  // however, this is an instance of accessing a ref during render and is disallowed
-  // under React's rules, so we reject this input
-  const x = {a, val: val.ref.current};
-
-  return <VideoList videos={x} />;
-}
-
-```
-
-
-## Error
-
-```
-Found 2 errors:
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-error.invalid-use-ref-added-to-dep-without-type-info.ts:10:21
-   8 |   // however, this is an instance of accessing a ref during render and is disallowed
-   9 |   // under React's rules, so we reject this input
-> 10 |   const x = {a, val: val.ref.current};
-     |                      ^^^^^^^^^^^^^^^ Cannot access ref value during render
-  11 |
-  12 |   return <VideoList videos={x} />;
-  13 | }
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-error.invalid-use-ref-added-to-dep-without-type-info.ts:12:28
-  10 |   const x = {a, val: val.ref.current};
-  11 |
-> 12 |   return <VideoList videos={x} />;
-     |                             ^ Cannot access ref value during render
-  13 | }
-  14 |
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.js
deleted file mode 100644
index a560fb123da..00000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-use-ref-added-to-dep-without-type-info.js
+++ /dev/null
@@ -1,13 +0,0 @@
-// @validateRefAccessDuringRender
-function Foo({a}) {
-  const ref = useRef();
-  // type information is lost here as we don't track types of fields
-  const val = {ref};
-  // without type info, we don't know that val.ref.current is a ref value so we
-  // *would* end up depending on val.ref.current
-  // however, this is an instance of accessing a ref during render and is disallowed
-  // under React's rules, so we reject this input
-  const x = {a, val: val.ref.current};
-
-  return <VideoList videos={x} />;
-}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-arbitrary.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-arbitrary.expect.md
index 17625298cd7..4f3f14ec533 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-arbitrary.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-arbitrary.expect.md
@@ -25,19 +25,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Error
 
 ```
-Found 2 errors:
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-   6 | component C() {
-   7 |   const r = useRef(DEFAULT_VALUE);
->  8 |   if (r.current == DEFAULT_VALUE) {
-     |       ^^^^^^^^^ Cannot access ref value during render
-   9 |     r.current = 1;
-  10 |   }
-  11 | }
+Found 1 error:
 
 Error: Cannot access refs during render
 
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call-2.expect.md
deleted file mode 100644
index 3a6d0b0f7a4..00000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call-2.expect.md
+++ /dev/null
@@ -1,41 +0,0 @@
-
-## Input
-
-```javascript
-//@flow
-import {useRef} from 'react';
-
-component C() {
-  const r = useRef(null);
-  if (r.current == null) {
-    f(r);
-  }
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: C,
-  params: [{}],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-   5 |   const r = useRef(null);
-   6 |   if (r.current == null) {
->  7 |     f(r);
-     |       ^ Passing a ref to a function may read its value during render
-   8 |   }
-   9 | }
-  10 |
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call.expect.md
deleted file mode 100644
index d9f3ac3aad8..00000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call.expect.md
+++ /dev/null
@@ -1,41 +0,0 @@
-
-## Input
-
-```javascript
-//@flow
-import {useRef} from 'react';
-
-component C() {
-  const r = useRef(null);
-  if (r.current == null) {
-    f(r.current);
-  }
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: C,
-  params: [{}],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-   5 |   const r = useRef(null);
-   6 |   if (r.current == null) {
->  7 |     f(r.current);
-     |       ^^^^^^^^^ Passing a ref to a function may read its value during render
-   8 |   }
-   9 | }
-  10 |
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-linear.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-linear.expect.md
index 7c6e6d5d58a..e3ce03d6a00 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-linear.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-linear.expect.md
@@ -33,10 +33,18 @@ React refs are values that are not needed for rendering. Refs should only be acc
    6 |   if (r.current == null) {
    7 |     r.current = 42;
 >  8 |     r.current = 42;
-     |     ^^^^^^^^^ Cannot update ref during render
+     |     ^^^^^^^^^ Ref is initialized more than once during render
    9 |   }
   10 | }
   11 |
+
+   5 |   const r = useRef(null);
+   6 |   if (r.current == null) {
+>  7 |     r.current = 42;
+     |     ^^^^^^^^^ Ref was first initialized here
+   8 |     r.current = 42;
+   9 |   }
+  10 | }
 ```
           
       
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-nonif.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-nonif.expect.md
index aaa86f91415..2a4138c2dcc 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-nonif.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-nonif.expect.md
@@ -24,31 +24,19 @@ export const FIXTURE_ENTRYPOINT = {
 ## Error
 
 ```
-Found 2 errors:
+Found 1 error:
 
 Error: Cannot access refs during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
-  4 | component C() {
-  5 |   const r = useRef(null);
-> 6 |   const guard = r.current == null;
-    |                 ^^^^^^^^^^^^^^^^^ Cannot access ref value during render
-  7 |   if (guard) {
-  8 |     r.current = 1;
-  9 |   }
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-   5 |   const r = useRef(null);
    6 |   const guard = r.current == null;
->  7 |   if (guard) {
-     |       ^^^^^ Cannot access ref value during render
-   8 |     r.current = 1;
+   7 |   if (guard) {
+>  8 |     r.current = 1;
+     |     ^^^^^^^^^ Cannot update ref during render
    9 |   }
   10 | }
+  11 |
 ```
           
       
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access-2.expect.md
deleted file mode 100644
index e30d6103a20..00000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access-2.expect.md
+++ /dev/null
@@ -1,42 +0,0 @@
-
-## Input
-
-```javascript
-//@flow
-import {useRef} from 'react';
-
-component C() {
-  const r = useRef(null);
-  if (r.current == null) {
-    r.current = 1;
-  }
-  f(r.current);
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: C,
-  params: [{}],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-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).
-
-   7 |     r.current = 1;
-   8 |   }
->  9 |   f(r.current);
-     |     ^^^^^^^^^ Passing a ref to a function may read its value during render
-  10 | }
-  11 |
-  12 | export const FIXTURE_ENTRYPOINT = {
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-optional.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-optional.expect.md
index 94e4b0fc46f..1d4309577e9 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-optional.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-optional.expect.md
@@ -22,7 +22,7 @@ export const FIXTURE_ENTRYPOINT = {
 ```
 Found 1 error:
 
-Error: Cannot access refs during render
+Error: Cannot access ref value during render
 
 React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
 
@@ -30,7 +30,7 @@ error.ref-optional.ts:5:9
   3 | function Component(props) {
   4 |   const ref = useRef();
 > 5 |   return ref?.current;
-    |          ^^^^^^^^^^^^ Cannot access ref value during render
+    |          ^^^^^^^^^^^^ Ref value is used during render
   6 | }
   7 |
   8 | export const FIXTURE_ENTRYPOINT = {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-custom-component-event-handler-wrapper.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-custom-component-event-handler-wrapper.expect.md
deleted file mode 100644
index 2a3657eda34..00000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-custom-component-event-handler-wrapper.expect.md
+++ /dev/null
@@ -1,69 +0,0 @@
-
-## Input
-
-```javascript
-// @enableInferEventHandlers
-import {useRef} from 'react';
-
-// Simulates a custom component wrapper
-function CustomForm({onSubmit, children}: any) {
-  return <form onSubmit={onSubmit}>{children}</form>;
-}
-
-// Simulates react-hook-form's handleSubmit
-function handleSubmit<T>(callback: (data: T) => void) {
-  return (event: any) => {
-    event.preventDefault();
-    callback({} as T);
-  };
-}
-
-function Component() {
-  const ref = useRef<HTMLInputElement>(null);
-
-  const onSubmit = (data: any) => {
-    // This should error: passing function with ref access to custom component
-    // event handler, even though it would be safe on a native <form>
-    if (ref.current !== null) {
-      console.log(ref.current.value);
-    }
-  };
-
-  return (
-    <>
-      <input ref={ref} />
-      <CustomForm onSubmit={handleSubmit(onSubmit)}>
-        <button type="submit">Submit</button>
-      </CustomForm>
-    </>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-error.ref-value-in-custom-component-event-handler-wrapper.ts:31:41
-  29 |     <>
-  30 |       <input ref={ref} />
-> 31 |       <CustomForm onSubmit={handleSubmit(onSubmit)}>
-     |                                          ^^^^^^^^ Passing a ref to a function may read its value during render
-  32 |         <button type="submit">Submit</button>
-  33 |       </CustomForm>
-  34 |     </>
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-event-handler-wrapper.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-event-handler-wrapper.expect.md
deleted file mode 100644
index 718e2c81419..00000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-event-handler-wrapper.expect.md
+++ /dev/null
@@ -1,55 +0,0 @@
-
-## Input
-
-```javascript
-// @enableInferEventHandlers
-import {useRef} from 'react';
-
-// Simulates a handler wrapper
-function handleClick(value: any) {
-  return () => {
-    console.log(value);
-  };
-}
-
-function Component() {
-  const ref = useRef(null);
-
-  // This should still error: passing ref.current directly to a wrapper
-  // The ref value is accessed during render, not in the event handler
-  return (
-    <>
-      <input ref={ref} />
-      <button onClick={handleClick(ref.current)}>Click</button>
-    </>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-error.ref-value-in-event-handler-wrapper.ts:19:35
-  17 |     <>
-  18 |       <input ref={ref} />
-> 19 |       <button onClick={handleClick(ref.current)}>Click</button>
-     |                                    ^^^^^^^^^^^ Cannot access ref value during render
-  20 |     </>
-  21 |   );
-  22 | }
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md
index a0c492120a3..e063342e800 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoization.expect.md
@@ -41,7 +41,7 @@ error.todo-useCallback-set-ref-nested-property-ref-modified-later-preserve-memoi
   12 |
   13 |   // The ref is modified later, extending its range and preventing memoization of onChange
 > 14 |   ref.current.inner = null;
-     |   ^^^^^^^^^^^ Cannot update ref during render
+     |   ^^^^^^^^^^^^^^^^^ Cannot update ref during render
   15 |
   16 |   return <input onChange={onChange} />;
   17 | }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md
index ba5a7407773..9c7fec3b428 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.expect.md
@@ -40,14 +40,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.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.ts:17:2
-  15 |     ref.current.inner = null;
+error.useCallback-accesses-ref-mutated-later-via-function-preserve-memoization.ts:15:4
+  13 |   // The ref is modified later, extending its range and preventing memoization of onChange
+  14 |   const reset = () => {
+> 15 |     ref.current.inner = null;
+     |     ^^^^^^^^^^^^^^^^^ Cannot update ref during render
   16 |   };
-> 17 |   reset();
-     |   ^^^^^ This function accesses a ref value
+  17 |   reset();
   18 |
-  19 |   return <input onChange={onChange} />;
-  20 | }
 ```
           
       
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md
index b40b0bbf226..3a9f61b35ae 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useCallback-set-ref-nested-property-dont-preserve-memoization.expect.md
@@ -40,7 +40,7 @@ error.useCallback-set-ref-nested-property-dont-preserve-memoization.ts:13:2
   11 |   });
   12 |
 > 13 |   ref.current.inner = null;
-     |   ^^^^^^^^^^^ Cannot update ref during render
+     |   ^^^^^^^^^^^^^^^^^ Cannot update ref during render
   14 |
   15 |   return <input onChange={onChange} />;
   16 | }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.expect.md
deleted file mode 100644
index 1d5a4a2284c..00000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.expect.md
+++ /dev/null
@@ -1,39 +0,0 @@
-
-## Input
-
-```javascript
-// @validateRefAccessDuringRender:true
-function Foo(props, ref) {
-  console.log(ref.current);
-  return <div>{props.bar}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Foo,
-  params: [{bar: 'foo'}, {ref: {cuurrent: 1}}],
-  isComponent: true,
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-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 |
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps.expect.md
index 2c864f56aff..d5674691bb9 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps.expect.md
@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateExhaustiveMemoizationDependencies
+// @validateExhaustiveMemoizationDependencies @validateRefAccessDuringRender:false
 import {useMemo} from 'react';
 import {Stringify} from 'shared-runtime';
 
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps.js
index c0f8d28837a..feba85da7d2 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps/error.invalid-exhaustive-deps.js
@@ -1,4 +1,4 @@
-// @validateExhaustiveMemoizationDependencies
+// @validateExhaustiveMemoizationDependencies @validateRefAccessDuringRender:false
 import {useMemo} from 'react';
 import {Stringify} from 'shared-runtime';
 
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/impure-functions-in-render-indirect.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/impure-functions-in-render-indirect.expect.md
new file mode 100644
index 00000000000..4718ee7f203
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/impure-functions-in-render-indirect.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+// @validateNoImpureFunctionsInRender
+
+import {identity, makeArray} from 'shared-runtime';
+
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses an impure value during render. The impurity is lost
+ * when passed through external function calls.
+ */
+function Component() {
+  const getDate = () => Date.now();
+  const array = makeArray(getDate());
+  const hasDate = identity(array);
+  return <Foo hasDate={hasDate} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoImpureFunctionsInRender
+
+import { identity, makeArray } from "shared-runtime";
+
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses an impure value during render. The impurity is lost
+ * when passed through external function calls.
+ */
+function Component() {
+  const $ = _c(1);
+  const getDate = _temp;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const array = makeArray(getDate());
+    const hasDate = identity(array);
+    t0 = <Foo hasDate={hasDate} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp() {
+  return Date.now();
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/impure-functions-in-render-indirect.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/impure-functions-in-render-indirect.js
new file mode 100644
index 00000000000..285838c7981
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/impure-functions-in-render-indirect.js
@@ -0,0 +1,15 @@
+// @validateNoImpureFunctionsInRender
+
+import {identity, makeArray} from 'shared-runtime';
+
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses an impure value during render. The impurity is lost
+ * when passed through external function calls.
+ */
+function Component() {
+  const getDate = () => Date.now();
+  const array = makeArray(getDate());
+  const hasDate = identity(array);
+  return <Foo hasDate={hasDate} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/impure-functions-in-render-via-function-call-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/impure-functions-in-render-via-function-call-2.expect.md
new file mode 100644
index 00000000000..b7ebee784d1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/impure-functions-in-render-via-function-call-2.expect.md
@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+// @validateNoImpureFunctionsInRender
+
+import {identity, makeArray} from 'shared-runtime';
+
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses an impure value during render. The impurity is lost
+ * when passed through external function calls.
+ */
+function Component() {
+  const now = () => Date.now();
+  const f = () => {
+    const array = makeArray(now());
+    const hasDate = identity(array);
+    return hasDate;
+  };
+  const hasDate = f();
+  return <Foo hasDate={hasDate} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoImpureFunctionsInRender
+
+import { identity, makeArray } from "shared-runtime";
+
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses an impure value during render. The impurity is lost
+ * when passed through external function calls.
+ */
+function Component() {
+  const $ = _c(1);
+  const now = _temp;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const f = () => {
+      const array = makeArray(now());
+      const hasDate = identity(array);
+      return hasDate;
+    };
+    const hasDate_0 = f();
+    t0 = <Foo hasDate={hasDate_0} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+function _temp() {
+  return Date.now();
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/impure-functions-in-render-via-function-call-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/impure-functions-in-render-via-function-call-2.js
new file mode 100644
index 00000000000..c34d65bd537
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/impure-functions-in-render-via-function-call-2.js
@@ -0,0 +1,19 @@
+// @validateNoImpureFunctionsInRender
+
+import {identity, makeArray} from 'shared-runtime';
+
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses an impure value during render. The impurity is lost
+ * when passed through external function calls.
+ */
+function Component() {
+  const now = () => Date.now();
+  const f = () => {
+    const array = makeArray(now());
+    const hasDate = identity(array);
+    return hasDate;
+  };
+  const hasDate = f();
+  return <Foo hasDate={hasDate} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.expect.md
index ea5a887b8bf..b585792f2cd 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.expect.md
@@ -47,7 +47,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":158},"end":{"line":11,"column":1,"index":331},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"options":{"category":"Refs","reason":"Cannot access refs during render","description":"React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":289},"end":{"line":9,"column":16,"index":303},"filename":"mutate-after-useeffect-ref-access.ts"},"message":"Cannot update ref during render"}]}}}
+{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":158},"end":{"line":11,"column":1,"index":331},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"options":{"category":"Refs","reason":"Cannot access refs during render","description":"React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":289},"end":{"line":9,"column":20,"index":307},"filename":"mutate-after-useeffect-ref-access.ts"},"message":"Cannot update ref during render"}]}}}
 {"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":237},"end":{"line":8,"column":50,"index":285},"filename":"mutate-after-useeffect-ref-access.ts"},"decorations":[{"start":{"line":8,"column":24,"index":259},"end":{"line":8,"column":30,"index":265},"filename":"mutate-after-useeffect-ref-access.ts","identifierName":"arrRef"}]}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":158},"end":{"line":11,"column":1,"index":331},"filename":"mutate-after-useeffect-ref-access.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-impure-functions-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-impure-functions-in-render.expect.md
index 1241971d827..aabc8d2baea 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-impure-functions-in-render.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/error.invalid-impure-functions-in-render.expect.md
@@ -19,41 +19,65 @@ function Component() {
 ```
 Found 3 errors:
 
-Error: Cannot call impure function during render
+Error: Cannot access impure value during render
 
-`Date.now` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+
+error.invalid-impure-functions-in-render.ts:7:20
+  5 |   const now = performance.now();
+  6 |   const rand = Math.random();
+> 7 |   return <Foo date={date} now={now} rand={rand} />;
+    |                     ^^^^ Cannot access impure value during render
+  8 | }
+  9 |
 
 error.invalid-impure-functions-in-render.ts:4:15
   2 |
   3 | function Component() {
 > 4 |   const date = Date.now();
-    |                ^^^^^^^^^^ Cannot call impure function
+    |                ^^^^^^^^^^ `Date.now` is an impure function.
   5 |   const now = performance.now();
   6 |   const rand = Math.random();
   7 |   return <Foo date={date} now={now} rand={rand} />;
 
-Error: Cannot call impure function during render
+Error: Cannot access impure value during render
 
-`performance.now` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+
+error.invalid-impure-functions-in-render.ts:7:31
+  5 |   const now = performance.now();
+  6 |   const rand = Math.random();
+> 7 |   return <Foo date={date} now={now} rand={rand} />;
+    |                                ^^^ Cannot access impure value during render
+  8 | }
+  9 |
 
 error.invalid-impure-functions-in-render.ts:5:14
   3 | function Component() {
   4 |   const date = Date.now();
 > 5 |   const now = performance.now();
-    |               ^^^^^^^^^^^^^^^^^ Cannot call impure function
+    |               ^^^^^^^^^^^^^^^^^ `performance.now` is an impure function.
   6 |   const rand = Math.random();
   7 |   return <Foo date={date} now={now} rand={rand} />;
   8 | }
 
-Error: Cannot call impure function during render
+Error: Cannot access impure value during render
 
-`Math.random` is an impure function. Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+Calling an impure function can produce unstable results that update unpredictably when the component happens to re-render. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent).
+
+error.invalid-impure-functions-in-render.ts:7:42
+  5 |   const now = performance.now();
+  6 |   const rand = Math.random();
+> 7 |   return <Foo date={date} now={now} rand={rand} />;
+    |                                           ^^^^ Cannot access impure value during render
+  8 | }
+  9 |
 
 error.invalid-impure-functions-in-render.ts:6:15
   4 |   const date = Date.now();
   5 |   const now = performance.now();
 > 6 |   const rand = Math.random();
-    |                ^^^^^^^^^^^^^ Cannot call impure function
+    |                ^^^^^^^^^^^^^ `Math.random` is an impure function.
   7 |   return <Foo date={date} now={now} rand={rand} />;
   8 | }
   9 |
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.expect.md
index acf9c28cabd..d79ac677067 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.expect.md
@@ -47,7 +47,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":190},"end":{"line":11,"column":1,"index":363},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"options":{"category":"Refs","reason":"Cannot access refs during render","description":"React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":321},"end":{"line":9,"column":16,"index":335},"filename":"mutate-after-useeffect-ref-access.ts"},"message":"Cannot update ref during render"}]}}}
+{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":190},"end":{"line":11,"column":1,"index":363},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"options":{"category":"Refs","reason":"Cannot access refs during render","description":"React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":321},"end":{"line":9,"column":20,"index":339},"filename":"mutate-after-useeffect-ref-access.ts"},"message":"Cannot update ref during render"}]}}}
 {"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":269},"end":{"line":8,"column":50,"index":317},"filename":"mutate-after-useeffect-ref-access.ts"},"decorations":[{"start":{"line":8,"column":24,"index":291},"end":{"line":8,"column":30,"index":297},"filename":"mutate-after-useeffect-ref-access.ts","identifierName":"arrRef"}]}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":190},"end":{"line":11,"column":1,"index":363},"filename":"mutate-after-useeffect-ref-access.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/pass-ref-to-function.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/pass-ref-to-function.expect.md
new file mode 100644
index 00000000000..df4aa13ddb8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/pass-ref-to-function.expect.md
@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses a ref during render. The return type of foo() is unknown.
+ */
+function Component(props) {
+  const ref = useRef(null);
+  const x = foo(ref);
+  return x.current;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender
+
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses a ref during render. The return type of foo() is unknown.
+ */
+function Component(props) {
+  const $ = _c(1);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = foo(ref);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const x = t0;
+  return x.current;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/pass-ref-to-function.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/pass-ref-to-function.js
new file mode 100644
index 00000000000..4bf588acbc3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/pass-ref-to-function.js
@@ -0,0 +1,11 @@
+// @validateRefAccessDuringRender
+
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses a ref during render. The return type of foo() is unknown.
+ */
+function Component(props) {
+  const ref = useRef(null);
+  const x = foo(ref);
+  return x.current;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.expect.md
deleted file mode 100644
index 77f104cab0c..00000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.expect.md
+++ /dev/null
@@ -1,42 +0,0 @@
-
-## Input
-
-```javascript
-// @validatePreserveExistingMemoizationGuarantees:true
-
-import {useRef, useMemo} from 'react';
-import {makeArray} from 'shared-runtime';
-
-function useFoo() {
-  const r = useRef();
-  return useMemo(() => makeArray(r), []);
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: useFoo,
-  params: [],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-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.maybe-mutable-ref-not-preserved.ts:8:33
-   6 | function useFoo() {
-   7 |   const r = useRef();
->  8 |   return useMemo(() => makeArray(r), []);
-     |                                  ^ Passing a ref to a function may read its value during render
-   9 | }
-  10 |
-  11 | export const FIXTURE_ENTRYPOINT = {
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.expect.md
deleted file mode 100644
index 0269b22a1f2..00000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.expect.md
+++ /dev/null
@@ -1,37 +0,0 @@
-
-## Input
-
-```javascript
-// @flow @validatePreserveExistingMemoizationGuarantees
-import {identity} from 'shared-runtime';
-
-component Component(disableLocalRef, ref) {
-  const localRef = useFooRef();
-  const mergedRef = useMemo(() => {
-    return disableLocalRef ? ref : identity(ref, localRef);
-  }, [disableLocalRef, ref, localRef]);
-  return <div ref={mergedRef} />;
-}
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-   5 |   const localRef = useFooRef();
-   6 |   const mergedRef = useMemo(() => {
->  7 |     return disableLocalRef ? ref : identity(ref, localRef);
-     |                                             ^^^ Passing a ref to a function may read its value during render
-   8 |   }, [disableLocalRef, ref, localRef]);
-   9 |   return <div ref={mergedRef} />;
-  10 | }
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-mutable-ref-not-preserved.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-mutable-ref-not-preserved.expect.md
new file mode 100644
index 00000000000..f2201cdf288
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-mutable-ref-not-preserved.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+// @validatePreserveExistingMemoizationGuarantees:true
+
+import {useRef, useMemo} from 'react';
+import {makeArray} from 'shared-runtime';
+
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses an impure value during render.
+ */
+function useFoo() {
+  const r = useRef();
+  return useMemo(() => makeArray(r), []);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validatePreserveExistingMemoizationGuarantees:true
+
+import { useRef, useMemo } from "react";
+import { makeArray } from "shared-runtime";
+
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses an impure value during render.
+ */
+function useFoo() {
+  const $ = _c(1);
+  const r = useRef();
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = makeArray(r);
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: useFoo,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) [{}]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.ts b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-mutable-ref-not-preserved.ts
similarity index 69%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.ts
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-mutable-ref-not-preserved.ts
index 13b8b445827..82751750504 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.maybe-mutable-ref-not-preserved.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/maybe-mutable-ref-not-preserved.ts
@@ -3,6 +3,10 @@
 import {useRef, useMemo} from 'react';
 import {makeArray} from 'shared-runtime';
 
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses an impure value during render.
+ */
 function useFoo() {
   const r = useRef();
   return useMemo(() => makeArray(r), []);
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-refs.flow.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-refs.flow.expect.md
new file mode 100644
index 00000000000..26551994a3e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-refs.flow.expect.md
@@ -0,0 +1,52 @@
+
+## Input
+
+```javascript
+// @flow @validatePreserveExistingMemoizationGuarantees
+import {identity} from 'shared-runtime';
+
+component Component(disableLocalRef, ref) {
+  const localRef = useFooRef();
+  const mergedRef = useMemo(() => {
+    return disableLocalRef ? ref : identity(ref, localRef);
+  }, [disableLocalRef, ref, localRef]);
+  return <div ref={mergedRef} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { identity } from "shared-runtime";
+
+const Component = React.forwardRef(Component_withRef);
+function Component_withRef(t0, ref) {
+  const $ = _c(6);
+  const { disableLocalRef } = t0;
+  const localRef = useFooRef();
+  let t1;
+  if ($[0] !== disableLocalRef || $[1] !== localRef || $[2] !== ref) {
+    t1 = disableLocalRef ? ref : identity(ref, localRef);
+    $[0] = disableLocalRef;
+    $[1] = localRef;
+    $[2] = ref;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const mergedRef = t1;
+  let t2;
+  if ($[4] !== mergedRef) {
+    t2 = <div ref={mergedRef} />;
+    $[4] = mergedRef;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}
+
+```
+      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-refs.flow.js
similarity index 100%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/error.useMemo-with-refs.flow.js
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-with-refs.flow.js
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-initialization-call-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-initialization-call-2.expect.md
new file mode 100644
index 00000000000..6573a4b1cb5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-initialization-call-2.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+//@flow
+import {useRef} from 'react';
+
+/**
+ * Allowed: we aren't sure that the ref.current value flows into the render
+ * output, so we optimistically assume it's safe
+ */
+component C() {
+  const r = useRef(null);
+  if (r.current == null) {
+    f(r);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { useRef } from "react";
+
+function C() {
+  const r = useRef(null);
+  if (r.current == null) {
+    f(r);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: exception) f is not defined
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-initialization-call-2.js
similarity index 58%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call-2.js
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-initialization-call-2.js
index 4e5a53cd3f6..8bfd4cd0e3c 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call-2.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-initialization-call-2.js
@@ -1,6 +1,10 @@
 //@flow
 import {useRef} from 'react';
 
+/**
+ * Allowed: we aren't sure that the ref.current value flows into the render
+ * output, so we optimistically assume it's safe
+ */
 component C() {
   const r = useRef(null);
   if (r.current == null) {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-initialization-call.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-initialization-call.expect.md
new file mode 100644
index 00000000000..3502bff68d1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-initialization-call.expect.md
@@ -0,0 +1,46 @@
+
+## Input
+
+```javascript
+//@flow
+import {useRef} from 'react';
+
+/**
+ * Allowed: we aren't sure that the ref.current value flows into the render
+ * output, so we optimistically assume it's safe
+ */
+component C() {
+  const r = useRef(null);
+  if (r.current == null) {
+    f(r.current);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { useRef } from "react";
+
+function C() {
+  const r = useRef(null);
+  if (r.current == null) {
+    f(r.current);
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: exception) f is not defined
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-initialization-call.js
similarity index 59%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call.js
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-initialization-call.js
index 50288fafc4a..82192c0681a 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-call.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-initialization-call.js
@@ -1,6 +1,10 @@
 //@flow
 import {useRef} from 'react';
 
+/**
+ * Allowed: we aren't sure that the ref.current value flows into the render
+ * output, so we optimistically assume it's safe
+ */
 component C() {
   const r = useRef(null);
   if (r.current == null) {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-initialization-post-access-2.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-initialization-post-access-2.expect.md
new file mode 100644
index 00000000000..eb30bb34445
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-initialization-post-access-2.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+//@flow
+import {useRef} from 'react';
+
+/**
+ * Allowed: we aren't sure that the ref.current value flows into the render
+ * output, so we optimistically assume it's safe
+ */
+component C() {
+  const r = useRef(null);
+  if (r.current == null) {
+    r.current = 1;
+  }
+  f(r.current);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { useRef } from "react";
+
+function C() {
+  const r = useRef(null);
+  if (r.current == null) {
+    r.current = 1;
+  }
+
+  f(r.current);
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: C,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: exception) f is not defined
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access-2.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-initialization-post-access-2.js
similarity index 61%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access-2.js
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-initialization-post-access-2.js
index a8e3b124bfe..2a3e801b190 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-initialization-post-access-2.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-initialization-post-access-2.js
@@ -1,6 +1,10 @@
 //@flow
 import {useRef} from 'react';
 
+/**
+ * Allowed: we aren't sure that the ref.current value flows into the render
+ * output, so we optimistically assume it's safe
+ */
 component C() {
   const r = useRef(null);
   if (r.current == null) {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-value-in-custom-component-event-handler-wrapper.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-value-in-custom-component-event-handler-wrapper.expect.md
new file mode 100644
index 00000000000..d67a02c57ec
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-value-in-custom-component-event-handler-wrapper.expect.md
@@ -0,0 +1,121 @@
+
+## Input
+
+```javascript
+// @enableInferEventHandlers
+import {useRef} from 'react';
+
+// Simulates a custom component wrapper
+function CustomForm({onSubmit, children}: any) {
+  return <form onSubmit={onSubmit}>{children}</form>;
+}
+
+// Simulates react-hook-form's handleSubmit
+function handleSubmit<T>(callback: (data: T) => void) {
+  return (event: any) => {
+    event.preventDefault();
+    callback({} as T);
+  };
+}
+
+function Component() {
+  const ref = useRef<HTMLInputElement>(null);
+
+  const onSubmit = (data: any) => {
+    // Allowed: we aren't sure that the ref.current value flows into the render
+    // output, so we optimistically assume it's safe
+    if (ref.current !== null) {
+      console.log(ref.current.value);
+    }
+  };
+
+  return (
+    <>
+      <input ref={ref} />
+      <CustomForm onSubmit={handleSubmit(onSubmit)}>
+        <button type="submit">Submit</button>
+      </CustomForm>
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableInferEventHandlers
+import { useRef } from "react";
+
+// Simulates a custom component wrapper
+function CustomForm(t0) {
+  const $ = _c(3);
+  const { onSubmit, children } = t0;
+  let t1;
+  if ($[0] !== children || $[1] !== onSubmit) {
+    t1 = <form onSubmit={onSubmit}>{children}</form>;
+    $[0] = children;
+    $[1] = onSubmit;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+
+// Simulates react-hook-form's handleSubmit
+function handleSubmit(callback) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== callback) {
+    t0 = (event) => {
+      event.preventDefault();
+      callback({} as T);
+    };
+    $[0] = callback;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+function Component() {
+  const $ = _c(1);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const onSubmit = (data) => {
+      if (ref.current !== null) {
+        console.log(ref.current.value);
+      }
+    };
+    t0 = (
+      <>
+        <input ref={ref} />
+        <CustomForm onSubmit={handleSubmit(onSubmit)}>
+          <button type="submit">Submit</button>
+        </CustomForm>
+      </>
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <input><form><button type="submit">Submit</button></form>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-custom-component-event-handler-wrapper.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-value-in-custom-component-event-handler-wrapper.tsx
similarity index 84%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-custom-component-event-handler-wrapper.tsx
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-value-in-custom-component-event-handler-wrapper.tsx
index b90a1217165..5874c164558 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-custom-component-event-handler-wrapper.tsx
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-value-in-custom-component-event-handler-wrapper.tsx
@@ -18,8 +18,8 @@ function Component() {
   const ref = useRef<HTMLInputElement>(null);
 
   const onSubmit = (data: any) => {
-    // This should error: passing function with ref access to custom component
-    // event handler, even though it would be safe on a native <form>
+    // Allowed: we aren't sure that the ref.current value flows into the render
+    // output, so we optimistically assume it's safe
     if (ref.current !== null) {
       console.log(ref.current.value);
     }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-value-in-event-handler-wrapper.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-value-in-event-handler-wrapper.expect.md
new file mode 100644
index 00000000000..1289ade402e
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-value-in-event-handler-wrapper.expect.md
@@ -0,0 +1,83 @@
+
+## Input
+
+```javascript
+// @enableInferEventHandlers
+import {useRef} from 'react';
+
+// Simulates a handler wrapper
+function handleClick(value: any) {
+  return () => {
+    console.log(value);
+  };
+}
+
+function Component() {
+  const ref = useRef(null);
+
+  // Allowed: we aren't sure that the ref.current value flows into the render
+  // output, so we optimistically assume it's safe
+  return (
+    <>
+      <input ref={ref} />
+      <button onClick={handleClick(ref.current)}>Click</button>
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableInferEventHandlers
+import { useRef } from "react";
+
+// Simulates a handler wrapper
+function handleClick(value) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== value) {
+    t0 = () => {
+      console.log(value);
+    };
+    $[0] = value;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+function Component() {
+  const $ = _c(1);
+  const ref = useRef(null);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = (
+      <>
+        <input ref={ref} />
+        <button onClick={handleClick(ref.current)}>Click</button>
+      </>
+    );
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <input><button>Click</button>
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-event-handler-wrapper.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-value-in-event-handler-wrapper.tsx
similarity index 74%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-event-handler-wrapper.tsx
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-value-in-event-handler-wrapper.tsx
index 58313e560ce..64410473591 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-event-handler-wrapper.tsx
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ref-value-in-event-handler-wrapper.tsx
@@ -11,8 +11,8 @@ function handleClick(value: any) {
 function Component() {
   const ref = useRef(null);
 
-  // This should still error: passing ref.current directly to a wrapper
-  // The ref value is accessed during render, not in the event handler
+  // Allowed: we aren't sure that the ref.current value flows into the render
+  // output, so we optimistically assume it's safe
   return (
     <>
       <input ref={ref} />
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.expect.md
index ed1dfa39ea5..b5b58ab04c6 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.expect.md
@@ -6,7 +6,7 @@
 
 import {useRef} from 'react';
 
-component Foo() {
+hook useFoo() {
   const ref = useRef();
 
   const s = () => {
@@ -16,6 +16,10 @@ component Foo() {
   return s;
 }
 
+component Foo() {
+  useFoo();
+}
+
 export const FIXTURE_ENTRYPOINT = {
   fn: Foo,
   params: [],
@@ -30,7 +34,7 @@ import { c as _c } from "react/compiler-runtime";
 
 import { useRef } from "react";
 
-function Foo() {
+function useFoo() {
   const $ = _c(1);
   const ref = useRef();
   let t0;
@@ -44,6 +48,10 @@ function Foo() {
   return s;
 }
 
+function Foo() {
+  useFoo();
+}
+
 export const FIXTURE_ENTRYPOINT = {
   fn: Foo,
   params: [],
@@ -52,4 +60,4 @@ export const FIXTURE_ENTRYPOINT = {
 ```
       
 ### Eval output
-(kind: ok) "[[ function params=0 ]]"
\ No newline at end of file
+(kind: ok) 
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.js
index f1a45ebc4ff..502e7f42fcb 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/return-ref-callback.js
@@ -2,7 +2,7 @@
 
 import {useRef} from 'react';
 
-component Foo() {
+hook useFoo() {
   const ref = useRef();
 
   const s = () => {
@@ -12,6 +12,10 @@ component Foo() {
   return s;
 }
 
+component Foo() {
+  useFoo();
+}
+
 export const FIXTURE_ENTRYPOINT = {
   fn: Foo,
   params: [],
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-ref-current-access.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-ref-current-access.expect.md
index b55526e9211..5e0efa3aa45 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-ref-current-access.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/bailout-validate-ref-current-access.expect.md
@@ -25,22 +25,40 @@ component Component(prop1, ref) {
 ## Code
 
 ```javascript
-import { useFire } from "react/compiler-runtime";
+import { c as _c, useFire } from "react/compiler-runtime";
 import { fire } from "react";
 import { print } from "shared-runtime";
 
 const Component = React.forwardRef(Component_withRef);
 function Component_withRef(t0, ref) {
+  const $ = _c(5);
   const { prop1 } = t0;
-  const foo = () => {
-    console.log(prop1);
-  };
-  const t1 = useFire(foo);
-  useEffect(() => {
-    t1(prop1);
-    bar();
-    t1();
-  });
+  let t1;
+  if ($[0] !== prop1) {
+    t1 = () => {
+      console.log(prop1);
+    };
+    $[0] = prop1;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const foo = t1;
+  const t2 = useFire(foo);
+  let t3;
+  if ($[2] !== prop1 || $[3] !== t2) {
+    t3 = () => {
+      t2(prop1);
+      bar();
+      t2();
+    };
+    $[2] = prop1;
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  useEffect(t3);
   print(ref.current);
   return null;
 }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-ref-added-to-dep-without-type-info.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-ref-added-to-dep-without-type-info.expect.md
new file mode 100644
index 00000000000..f96ef187dda
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-ref-added-to-dep-without-type-info.expect.md
@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender
+
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses a ref during render. Type info is lost when ref is
+ * stored in an object field.
+ */
+function Foo({a}) {
+  const ref = useRef();
+  const val = {ref};
+  const x = {a, val: val.ref.current};
+
+  return <VideoList videos={x} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender
+
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses a ref during render. Type info is lost when ref is
+ * stored in an object field.
+ */
+function Foo(t0) {
+  const $ = _c(3);
+  const { a } = t0;
+  const ref = useRef();
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = { ref };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const val = t1;
+  let t2;
+  if ($[1] !== a) {
+    const x = { a, val: val.ref.current };
+    t2 = <VideoList videos={x} />;
+    $[1] = a;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-ref-added-to-dep-without-type-info.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-ref-added-to-dep-without-type-info.js
new file mode 100644
index 00000000000..2d29c6f15fa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-ref-added-to-dep-without-type-info.js
@@ -0,0 +1,14 @@
+// @validateRefAccessDuringRender
+
+/**
+ * Allowed: we don't have sufficient type information to be sure that
+ * this accesses a ref during render. Type info is lost when ref is
+ * stored in an object field.
+ */
+function Foo({a}) {
+  const ref = useRef();
+  const val = {ref};
+  const x = {a, val: val.ref.current};
+
+  return <VideoList videos={x} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-uncertain-impure-functions-in-render-via-render-helper.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-uncertain-impure-functions-in-render-via-render-helper.expect.md
new file mode 100644
index 00000000000..e694e2c542d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-uncertain-impure-functions-in-render-via-render-helper.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// @validateNoImpureFunctionsInRender
+
+import {identity, makeArray} from 'shared-runtime';
+
+function Component() {
+  const now = Date.now();
+  const renderItem = () => {
+    const array = makeArray(now);
+    // we don't have an alias signature for identity(), so we optimistically
+    // assume this doesn't propagate the impurity
+    const hasDate = identity(array);
+    return <Bar hasDate={hasDate} />;
+  };
+  return <Foo renderItem={renderItem} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoImpureFunctionsInRender
+
+import { identity, makeArray } from "shared-runtime";
+
+function Component() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const now = Date.now();
+    const renderItem = () => {
+      const array = makeArray(now);
+      const hasDate = identity(array);
+      return <Bar hasDate={hasDate} />;
+    };
+    t0 = <Foo renderItem={renderItem} />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-uncertain-impure-functions-in-render-via-render-helper.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-uncertain-impure-functions-in-render-via-render-helper.js
new file mode 100644
index 00000000000..19028b87ddb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-uncertain-impure-functions-in-render-via-render-helper.js
@@ -0,0 +1,15 @@
+// @validateNoImpureFunctionsInRender
+
+import {identity, makeArray} from 'shared-runtime';
+
+function Component() {
+  const now = Date.now();
+  const renderItem = () => {
+    const array = makeArray(now);
+    // we don't have an alias signature for identity(), so we optimistically
+    // assume this doesn't propagate the impurity
+    const hasDate = identity(array);
+    return <Bar hasDate={hasDate} />;
+  };
+  return <Foo renderItem={renderItem} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-use-impure-value-in-ref.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-use-impure-value-in-ref.expect.md
new file mode 100644
index 00000000000..6e0bf7d018f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-use-impure-value-in-ref.expect.md
@@ -0,0 +1,49 @@
+
+## Input
+
+```javascript
+// @validateNoImpureFunctionsInRender
+import {useIdentity} from 'shared-runtime';
+
+function Component() {
+  const f = () => Math.random();
+  const ref = useRef(f());
+  return <div ref={ref} />;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateNoImpureFunctionsInRender
+import { useIdentity } from "shared-runtime";
+
+function Component() {
+  const $ = _c(2);
+  const f = _temp;
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = f();
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const ref = useRef(t0);
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <div ref={ref} />;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+function _temp() {
+  return Math.random();
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-use-impure-value-in-ref.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-use-impure-value-in-ref.js
new file mode 100644
index 00000000000..4002865548a
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/valid-use-impure-value-in-ref.js
@@ -0,0 +1,8 @@
+// @validateNoImpureFunctionsInRender
+import {useIdentity} from 'shared-runtime';
+
+function Component() {
+  const f = () => Math.random();
+  const ref = useRef(f());
+  return <div ref={ref} />;
+}
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-mutate-ref-arg-in-render.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-mutate-ref-arg-in-render.expect.md
new file mode 100644
index 00000000000..4c2979ca3a7
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-mutate-ref-arg-in-render.expect.md
@@ -0,0 +1,51 @@
+
+## Input
+
+```javascript
+// @validateRefAccessDuringRender:true
+
+function Foo(props, ref) {
+  // Allowed: the value is not guaranteed to flow into something that's rendered
+  console.log(ref.current);
+  return <div>{props.bar}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{bar: 'foo'}, {ref: {cuurrent: 1}}],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @validateRefAccessDuringRender:true
+
+function Foo(props, ref) {
+  const $ = _c(2);
+
+  console.log(ref.current);
+  let t0;
+  if ($[0] !== props.bar) {
+    t0 = <div>{props.bar}</div>;
+    $[0] = props.bar;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ bar: "foo" }, { ref: { cuurrent: 1 } }],
+  isComponent: true,
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>foo</div>
+logs: [undefined]
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-mutate-ref-arg-in-render.js
similarity index 75%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.js
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-mutate-ref-arg-in-render.js
index 10218fc6163..55986513a19 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.validate-mutate-ref-arg-in-render.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/validate-mutate-ref-arg-in-render.js
@@ -1,5 +1,7 @@
 // @validateRefAccessDuringRender:true
+
 function Foo(props, ref) {
+  // Allowed: the value is not guaranteed to flow into something that's rendered
   console.log(ref.current);
   return <div>{props.bar}</div>;
 }
diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/ImpureFunctionCallsRule-test.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/ImpureFunctionCallsRule-test.ts
index f89b049d100..aa27b28822b 100644
--- a/compiler/packages/eslint-plugin-react-compiler/__tests__/ImpureFunctionCallsRule-test.ts
+++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/ImpureFunctionCallsRule-test.ts
@@ -29,9 +29,9 @@ testRule(
       }
     `,
         errors: [
-          makeTestCaseError('Cannot call impure function during render'),
-          makeTestCaseError('Cannot call impure function during render'),
-          makeTestCaseError('Cannot call impure function during render'),
+          makeTestCaseError('Cannot access impure value during render'),
+          makeTestCaseError('Cannot access impure value during render'),
+          makeTestCaseError('Cannot access impure value during render'),
         ],
       },
     ],
diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/NoRefAccessInRender-tests.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/NoRefAccessInRender-tests.ts
index 9953c8c2136..a1ffcf64c06 100644
--- a/compiler/packages/eslint-plugin-react-compiler/__tests__/NoRefAccessInRender-tests.ts
+++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/NoRefAccessInRender-tests.ts
@@ -27,7 +27,7 @@ testRule(
         return value;
       }
     `,
-        errors: [makeTestCaseError('Cannot access refs during render')],
+        errors: [makeTestCaseError('Cannot access ref value during render')],
       },
     ],
   },

From 2f65d3d545641841ba481331d4b2306cd592e7d4 Mon Sep 17 00:00:00 2001
From: Joe Savona <joesavona@fb.com>
Date: Fri, 23 Jan 2026 11:07:42 -0800
Subject: [PATCH 6/6] [compiler][wip] Support `finally` clauses

First pass at adding support for `finally` clauses. I took a simple approach where we reify the JS semantics around return shadowing in the HIR and output. Ie, we create a temporary variable that will be the return value, and change returns in the try/catch to assign to that value and then break to the finalizer. In the finalizer returns work as normal, but we put a final extra "if temporary set, return it" statement. It would be more ideal to fully restore the return shadowing, but given that finally clauses are relatively rare this seems like a reasonable compromise.

I need to do more analysis to make sure the approach is correct.
---
 .../src/HIR/BuildHIR.ts                       | 137 ++++++-----
 .../src/HIR/HIR.ts                            |   7 +-
 .../src/HIR/HIRBuilder.ts                     |   1 +
 .../src/HIR/PrintHIR.ts                       |   6 +-
 .../src/HIR/visitors.ts                       |  12 +-
 .../Inference/InferMutationAliasingEffects.ts |   6 +-
 .../ReactiveScopes/BuildReactiveFunction.ts   |  28 ++-
 .../ReactiveScopes/CodegenReactiveFunction.ts |  21 +-
 .../ReactiveScopes/PrintReactiveFunction.ts   |  24 +-
 .../src/ReactiveScopes/visitors.ts            |  21 +-
 .../Validation/ValidateNoJSXInTryStatement.ts |  15 +-
 ...opes-reactive-scope-overlaps-try.expect.md |   1 +
 ...-catch-in-outer-try-with-finally.expect.md |  61 -----
 ...-invalid-jsx-in-try-with-finally.expect.md |  44 ----
 .../bailout-retry/error.todo-syntax.expect.md |  60 -----
 .../bailout-retry/todo-syntax.expect.md       |  79 +++++++
 .../{error.todo-syntax.js => todo-syntax.js}  |   0
 ...in-catch-in-outer-try-with-catch.expect.md |   1 -
 ...-catch-in-outer-try-with-finally.expect.md |  56 +++++
 ...jsx-in-catch-in-outer-try-with-finally.js} |   2 +-
 .../invalid-jsx-in-try-with-finally.expect.md |  42 ++++
 ....js => invalid-jsx-in-try-with-finally.js} |   2 +-
 .../try-catch-mutate-outer-value.expect.md    |  14 +-
 .../bailout-retry/error.todo-syntax.expect.md |  48 ----
 ...-fire-todo-syntax-shouldnt-throw.expect.md |  43 ++--
 .../bailout-retry/todo-syntax.expect.md       |  74 ++++++
 .../{error.todo-syntax.js => todo-syntax.js}  |   0
 .../compiler/try-catch-empty-try.expect.md    |   7 +-
 .../compiler/try-catch-finally.expect.md      |  56 +++++
 .../fixtures/compiler/try-catch-finally.js    |  21 ++
 .../try-catch-mutate-outer-value.expect.md    |  14 +-
 ...ry-catch-try-immediately-returns.expect.md |   8 +-
 ...hrows-after-constant-propagation.expect.md |   9 +-
 .../try-catch-within-mutable-range.expect.md  |  12 +-
 .../compiler/try-finally-all-paths.expect.md  | 213 ++++++++++++++++++
 .../compiler/try-finally-all-paths.js         |  66 ++++++
 .../compiler/try-finally-basic.expect.md      |  44 ++++
 .../fixtures/compiler/try-finally-basic.js    |  14 ++
 .../try-finally-break-continue.expect.md      |  71 ++++++
 .../compiler/try-finally-break-continue.js    |  22 ++
 ...y-catch-fallthrough-to-finalizer.expect.md | 183 +++++++++++++++
 ...-finally-catch-fallthrough-to-finalizer.js |  65 ++++++
 ...ally-conditional-return-in-catch.expect.md | 147 ++++++++++++
 ...try-finally-conditional-return-in-catch.js |  41 ++++
 ...ly-conditional-return-in-finally.expect.md |  89 ++++++++
 ...y-finally-conditional-return-in-finally.js |  33 +++
 ...inally-conditional-return-in-try.expect.md |  88 ++++++++
 .../try-finally-conditional-return-in-try.js  |  33 +++
 ...ally-return-in-catch-and-finally.expect.md | 102 +++++++++
 ...try-finally-return-in-catch-and-finally.js |  28 +++
 ...inally-return-in-try-and-finally.expect.md |  65 ++++++
 .../try-finally-return-in-try-and-finally.js  |  23 ++
 .../try-finally-return-in-try.expect.md       |  40 ++++
 .../compiler/try-finally-return-in-try.js     |  12 +
 54 files changed, 1972 insertions(+), 339 deletions(-)
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.expect.md
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.expect.md
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/todo-syntax.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/{error.todo-syntax.js => todo-syntax.js} (100%)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-finally.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.js => invalid-jsx-in-catch-in-outer-try-with-finally.js} (79%)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-finally.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/{error.todo-invalid-jsx-in-try-with-finally.js => invalid-jsx-in-try-with-finally.js} (63%)
 delete mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.todo-syntax.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/todo-syntax.expect.md
 rename compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/{error.todo-syntax.js => todo-syntax.js} (100%)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-finally.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-finally.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-all-paths.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-all-paths.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-basic.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-basic.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-break-continue.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-break-continue.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-catch-fallthrough-to-finalizer.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-catch-fallthrough-to-finalizer.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-catch.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-catch.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-finally.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-finally.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-try.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-try.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-catch-and-finally.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-catch-and-finally.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-try-and-finally.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-try-and-finally.js
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-try.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-try.js

diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
index 4a170cdbdf3..ad06157a884 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
@@ -1329,85 +1329,109 @@ function lowerStatement(
       const continuationBlock = builder.reserve('block');
 
       const handlerPath = stmt.get('handler');
-      if (!hasNode(handlerPath)) {
+      const finalizerPath = stmt.get('finalizer');
+
+      // Must have at least a catch or finally clause
+      if (!hasNode(handlerPath) && !hasNode(finalizerPath)) {
         builder.errors.push({
-          reason: `(BuildHIR::lowerStatement) Handle TryStatement without a catch clause`,
+          reason: `(BuildHIR::lowerStatement) Handle TryStatement without a catch or finally clause`,
           category: ErrorCategory.Todo,
           loc: stmt.node.loc ?? null,
           suggestions: null,
         });
         return;
       }
-      if (hasNode(stmt.get('finalizer'))) {
-        builder.errors.push({
-          reason: `(BuildHIR::lowerStatement) Handle TryStatement with a finalizer ('finally') clause`,
-          category: ErrorCategory.Todo,
-          loc: stmt.node.loc ?? null,
-          suggestions: null,
+
+      // Build finalizer (finally) block first, so we know its ID for control flow
+      let finalizer: BlockId | null = null;
+      if (hasNode(finalizerPath)) {
+        finalizer = builder.enter('block', _blockId => {
+          lowerStatement(builder, finalizerPath);
+          return {
+            kind: 'goto',
+            block: continuationBlock.id,
+            variant: GotoVariant.Break,
+            id: makeInstructionId(0),
+            loc: finalizerPath.node.loc ?? GeneratedSource,
+          };
         });
       }
 
-      const handlerBindingPath = handlerPath.get('param');
+      // Determine the target for try/catch block exits
+      // If there's a finalizer, go there first; otherwise go to continuation
+      const afterTryCatchTarget = finalizer ?? continuationBlock.id;
+
+      // Build handler (catch) block if present
+      let handler: BlockId | null = null;
       let handlerBinding: {
         place: Place;
         path: NodePath<t.Identifier | t.ArrayPattern | t.ObjectPattern>;
       } | null = null;
-      if (hasNode(handlerBindingPath)) {
-        const place: Place = {
-          kind: 'Identifier',
-          identifier: builder.makeTemporary(
-            handlerBindingPath.node.loc ?? GeneratedSource,
-          ),
-          effect: Effect.Unknown,
-          reactive: false,
-          loc: handlerBindingPath.node.loc ?? GeneratedSource,
-        };
-        promoteTemporary(place.identifier);
-        lowerValueToTemporary(builder, {
-          kind: 'DeclareLocal',
-          lvalue: {
-            kind: InstructionKind.Catch,
-            place: {...place},
-          },
-          type: null,
-          loc: handlerBindingPath.node.loc ?? GeneratedSource,
-        });
 
-        handlerBinding = {
-          path: handlerBindingPath,
-          place,
-        };
-      }
+      if (hasNode(handlerPath)) {
+        const handlerBindingPath = handlerPath.get('param');
+        if (hasNode(handlerBindingPath)) {
+          const place: Place = {
+            kind: 'Identifier',
+            identifier: builder.makeTemporary(
+              handlerBindingPath.node.loc ?? GeneratedSource,
+            ),
+            effect: Effect.Unknown,
+            reactive: false,
+            loc: handlerBindingPath.node.loc ?? GeneratedSource,
+          };
+          promoteTemporary(place.identifier);
+          lowerValueToTemporary(builder, {
+            kind: 'DeclareLocal',
+            lvalue: {
+              kind: InstructionKind.Catch,
+              place: {...place},
+            },
+            type: null,
+            loc: handlerBindingPath.node.loc ?? GeneratedSource,
+          });
 
-      const handler = builder.enter('catch', _blockId => {
-        if (handlerBinding !== null) {
-          lowerAssignment(
-            builder,
-            handlerBinding.path.node.loc ?? GeneratedSource,
-            InstructionKind.Catch,
-            handlerBinding.path,
-            {...handlerBinding.place},
-            'Assignment',
-          );
+          handlerBinding = {
+            path: handlerBindingPath,
+            place,
+          };
         }
-        lowerStatement(builder, handlerPath.get('body'));
-        return {
-          kind: 'goto',
-          block: continuationBlock.id,
-          variant: GotoVariant.Break,
-          id: makeInstructionId(0),
-          loc: handlerPath.node.loc ?? GeneratedSource,
-        };
-      });
+
+        handler = builder.enter('catch', _blockId => {
+          if (handlerBinding !== null) {
+            lowerAssignment(
+              builder,
+              handlerBinding.path.node.loc ?? GeneratedSource,
+              InstructionKind.Catch,
+              handlerBinding.path,
+              {...handlerBinding.place},
+              'Assignment',
+            );
+          }
+          lowerStatement(builder, handlerPath.get('body'));
+          return {
+            kind: 'goto',
+            block: afterTryCatchTarget,
+            variant: GotoVariant.Break,
+            id: makeInstructionId(0),
+            loc: handlerPath.node.loc ?? GeneratedSource,
+          };
+        });
+      }
 
       const block = builder.enter('block', _blockId => {
         const block = stmt.get('block');
-        builder.enterTryCatch(handler, () => {
+        // If there's a handler, exceptions go there; otherwise they propagate normally
+        if (handler !== null) {
+          builder.enterTryCatch(handler, () => {
+            lowerStatement(builder, block);
+          });
+        } else {
           lowerStatement(builder, block);
-        });
+        }
         return {
           kind: 'goto',
-          block: continuationBlock.id,
+          block: afterTryCatchTarget,
           variant: GotoVariant.Try,
           id: makeInstructionId(0),
           loc: block.node.loc ?? GeneratedSource,
@@ -1421,6 +1445,7 @@ function lowerStatement(
           handlerBinding:
             handlerBinding !== null ? {...handlerBinding.place} : null,
           handler,
+          finalizer,
           fallthrough: continuationBlock.id,
           id: makeInstructionId(0),
           loc: stmt.node.loc ?? GeneratedSource,
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
index 9e8dae0abd0..abca2cf3efb 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
@@ -273,7 +273,8 @@ export type ReactiveTryTerminal = {
   kind: 'try';
   block: ReactiveBlock;
   handlerBinding: Place | null;
-  handler: ReactiveBlock;
+  handler: ReactiveBlock | null;
+  finalizer: ReactiveBlock | null;
   id: InstructionId;
   loc: SourceLocation;
 };
@@ -602,8 +603,8 @@ export type TryTerminal = {
   kind: 'try';
   block: BlockId;
   handlerBinding: Place | null;
-  handler: BlockId;
-  // TODO: support `finally`
+  handler: BlockId | null;
+  finalizer: BlockId | null;
   fallthrough: BlockId;
   id: InstructionId;
   loc: SourceLocation;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIRBuilder.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIRBuilder.ts
index 1a2a56a7f79..7a7e81cbbfc 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIRBuilder.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIRBuilder.ts
@@ -954,6 +954,7 @@ export function removeUnnecessaryTryCatch(fn: HIR): void {
   for (const [, block] of fn.blocks) {
     if (
       block.terminal.kind === 'try' &&
+      block.terminal.handler !== null &&
       !fn.blocks.has(block.terminal.handler)
     ) {
       const handlerId = block.terminal.handler;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts
index 0fcbb8c4de4..9593f7da631 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts
@@ -310,12 +310,14 @@ export function printTerminal(terminal: Terminal): Array<string> | string {
       break;
     }
     case 'try': {
-      value = `[${terminal.id}] Try block=bb${terminal.block} handler=bb${
-        terminal.handler
+      value = `[${terminal.id}] Try block=bb${terminal.block}${
+        terminal.handler !== null ? ` handler=bb${terminal.handler}` : ''
       }${
         terminal.handlerBinding !== null
           ? ` handlerBinding=(${printPlace(terminal.handlerBinding)})`
           : ''
+      }${
+        terminal.finalizer !== null ? ` finalizer=bb${terminal.finalizer}` : ''
       } fallthrough=${
         terminal.fallthrough != null ? `bb${terminal.fallthrough}` : ''
       }`;
diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/visitors.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/visitors.ts
index 5735358cecf..8e4a0d2eda9 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/visitors.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/visitors.ts
@@ -921,13 +921,17 @@ export function mapTerminalSuccessors(
     }
     case 'try': {
       const block = fn(terminal.block);
-      const handler = fn(terminal.handler);
+      const handler =
+        terminal.handler !== null ? fn(terminal.handler) : null;
+      const finalizer =
+        terminal.finalizer !== null ? fn(terminal.finalizer) : null;
       const fallthrough = fn(terminal.fallthrough);
       return {
         kind: 'try',
         block,
         handlerBinding: terminal.handlerBinding,
         handler,
+        finalizer,
         fallthrough,
         id: makeInstructionId(0),
         loc: terminal.loc,
@@ -1088,6 +1092,12 @@ export function* eachTerminalSuccessor(terminal: Terminal): Iterable<BlockId> {
     }
     case 'try': {
       yield terminal.block;
+      if (terminal.handler !== null) {
+        yield terminal.handler;
+      }
+      if (terminal.finalizer !== null) {
+        yield terminal.finalizer;
+      }
       break;
     }
     case 'scope':
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts
index 98ab8a03a52..78261cb4058 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Inference/InferMutationAliasingEffects.ts
@@ -522,7 +522,11 @@ function inferBlock(
     instr.effects = effects;
   }
   const terminal = block.terminal;
-  if (terminal.kind === 'try' && terminal.handlerBinding != null) {
+  if (
+    terminal.kind === 'try' &&
+    terminal.handler !== null &&
+    terminal.handlerBinding != null
+  ) {
     context.catchHandlers.set(terminal.handler, terminal.handlerBinding);
   } else if (terminal.kind === 'maybe-throw') {
     const handlerParam = context.catchHandlers.get(terminal.handler);
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/BuildReactiveFunction.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/BuildReactiveFunction.ts
index 2574116234a..fdc6f3bb496 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/BuildReactiveFunction.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/BuildReactiveFunction.ts
@@ -844,14 +844,33 @@ class Driver {
           const scheduleId = this.cx.schedule(fallthroughId, 'if');
           scheduleIds.push(scheduleId);
         }
-        this.cx.scheduleCatchHandler(terminal.handler);
+        if (terminal.handler !== null) {
+          this.cx.scheduleCatchHandler(terminal.handler);
+        }
+        let finalizerScheduleId: number | null = null;
+        if (terminal.finalizer !== null) {
+          finalizerScheduleId = this.cx.schedule(terminal.finalizer, 'if');
+          scheduleIds.push(finalizerScheduleId);
+        }
 
         const block = this.traverseBlock(
           this.cx.ir.blocks.get(terminal.block)!,
         );
-        const handler = this.traverseBlock(
-          this.cx.ir.blocks.get(terminal.handler)!,
-        );
+        const handler =
+          terminal.handler !== null
+            ? this.traverseBlock(this.cx.ir.blocks.get(terminal.handler)!)
+            : null;
+
+        // Unschedule finalizer before traversing it, so its own goto
+        // doesn't become a break to itself
+        if (finalizerScheduleId !== null) {
+          this.cx.unschedule(finalizerScheduleId);
+          scheduleIds.pop();
+        }
+        const finalizer =
+          terminal.finalizer !== null
+            ? this.traverseBlock(this.cx.ir.blocks.get(terminal.finalizer)!)
+            : null;
 
         this.cx.unscheduleAll(scheduleIds);
         blockValue.push({
@@ -864,6 +883,7 @@ class Driver {
             block,
             handlerBinding: terminal.handlerBinding,
             handler,
+            finalizer,
             id: terminal.id,
           },
         });
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
index 123a69afc21..74e549d43c9 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
@@ -1307,15 +1307,26 @@ function codegenTerminal(
       return codegenBlock(cx, terminal.block);
     }
     case 'try': {
-      let catchParam = null;
-      if (terminal.handlerBinding !== null) {
-        catchParam = convertIdentifier(terminal.handlerBinding.identifier);
-        cx.temp.set(terminal.handlerBinding.identifier.declarationId, null);
+      let catchClause: t.CatchClause | null = null;
+      if (terminal.handler !== null) {
+        let catchParam = null;
+        if (terminal.handlerBinding !== null) {
+          catchParam = convertIdentifier(terminal.handlerBinding.identifier);
+          cx.temp.set(terminal.handlerBinding.identifier.declarationId, null);
+        }
+        catchClause = t.catchClause(catchParam, codegenBlock(cx, terminal.handler));
       }
+
+      const finalizer =
+        terminal.finalizer !== null
+          ? codegenBlock(cx, terminal.finalizer)
+          : null;
+
       return createTryStatement(
         terminal.loc,
         codegenBlock(cx, terminal.block),
-        t.catchClause(catchParam, codegenBlock(cx, terminal.handler)),
+        catchClause,
+        finalizer,
       );
     }
     default: {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction.ts
index 60287b3cde9..55c57d0cf01 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/PrintReactiveFunction.ts
@@ -395,14 +395,24 @@ function writeTerminal(writer: Writer, terminal: ReactiveTerminal): void {
     case 'try': {
       writer.writeLine(`[${terminal.id}] try {`);
       writeReactiveInstructions(writer, terminal.block);
-      writer.write(`} catch `);
-      if (terminal.handlerBinding !== null) {
-        writer.writeLine(`(${printPlace(terminal.handlerBinding)}) {`);
-      } else {
-        writer.writeLine(`{`);
+      if (terminal.handler !== null) {
+        writer.write(`} catch `);
+        if (terminal.handlerBinding !== null) {
+          writer.writeLine(`(${printPlace(terminal.handlerBinding)}) {`);
+        } else {
+          writer.writeLine(`{`);
+        }
+        writeReactiveInstructions(writer, terminal.handler);
+        writer.writeLine('}');
+      }
+      if (terminal.finalizer !== null) {
+        writer.writeLine(`} finally {`);
+        writeReactiveInstructions(writer, terminal.finalizer);
+        writer.writeLine('}');
+      }
+      if (terminal.handler === null && terminal.finalizer === null) {
+        writer.writeLine('}');
       }
-      writeReactiveInstructions(writer, terminal.handler);
-      writer.writeLine('}');
       break;
     }
     default:
diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/visitors.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/visitors.ts
index 4ad05aa302a..a8e42755956 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/visitors.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/visitors.ts
@@ -169,7 +169,12 @@ export class ReactiveFunctionVisitor<TState = void> {
       }
       case 'try': {
         this.visitBlock(terminal.block, state);
-        this.visitBlock(terminal.handler, state);
+        if (terminal.handler !== null) {
+          this.visitBlock(terminal.handler, state);
+        }
+        if (terminal.finalizer !== null) {
+          this.visitBlock(terminal.finalizer, state);
+        }
         break;
       }
       default: {
@@ -559,7 +564,12 @@ export class ReactiveFunctionTransform<
         if (terminal.handlerBinding !== null) {
           this.visitPlace(terminal.id, terminal.handlerBinding, state);
         }
-        this.visitBlock(terminal.handler, state);
+        if (terminal.handler !== null) {
+          this.visitBlock(terminal.handler, state);
+        }
+        if (terminal.finalizer !== null) {
+          this.visitBlock(terminal.finalizer, state);
+        }
         break;
       }
       default: {
@@ -653,7 +663,12 @@ export function mapTerminalBlocks(
     }
     case 'try': {
       terminal.block = fn(terminal.block);
-      terminal.handler = fn(terminal.handler);
+      if (terminal.handler !== null) {
+        terminal.handler = fn(terminal.handler);
+      }
+      if (terminal.finalizer !== null) {
+        terminal.finalizer = fn(terminal.finalizer);
+      }
       break;
     }
     default: {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoJSXInTryStatement.ts b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoJSXInTryStatement.ts
index 00ffca556f4..4eb002d311c 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoJSXInTryStatement.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/Validation/ValidateNoJSXInTryStatement.ts
@@ -27,9 +27,8 @@ export function validateNoJSXInTryStatement(
   const activeTryBlocks: Array<BlockId> = [];
   const errors = new CompilerError();
   for (const [, block] of fn.body.blocks) {
-    retainWhere(activeTryBlocks, id => id !== block.id);
-
-    if (activeTryBlocks.length !== 0) {
+    // Check for JSX BEFORE removing the current block from activeTryBlocks
+    if (activeTryBlocks.includes(block.id)) {
       for (const instr of block.instructions) {
         const {value} = instr;
         switch (value.kind) {
@@ -52,8 +51,16 @@ export function validateNoJSXInTryStatement(
       }
     }
 
+    // Remove the current block from activeTryBlocks after checking
+    retainWhere(activeTryBlocks, id => id !== block.id);
+
     if (block.terminal.kind === 'try') {
-      activeTryBlocks.push(block.terminal.handler);
+      // Add the try block itself to activeTryBlocks
+      activeTryBlocks.push(block.terminal.block);
+      // Also add handler if present
+      if (block.terminal.handler !== null) {
+        activeTryBlocks.push(block.terminal.handler);
+      }
     }
   }
   return errors.asResult();
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-try.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-try.expect.md
index 1bc6b9b51eb..10980dd63a9 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-try.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-reactive-scope-overlaps-try.expect.md
@@ -37,6 +37,7 @@ function useFoo(t0) {
   const { value } = t0;
   let items;
   if ($[0] !== value) {
+    items = null;
     try {
       items = [];
       arrayPush(items, value);
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.expect.md
deleted file mode 100644
index b5c079f5423..00000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.expect.md
+++ /dev/null
@@ -1,61 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoJSXInTryStatements @outputMode:"lint"
-import {identity} from 'shared-runtime';
-
-function Component(props) {
-  let el;
-  try {
-    let value;
-    try {
-      value = identity(props.foo);
-    } catch {
-      el = <div value={value} />;
-    }
-  } finally {
-    console.log(el);
-  }
-  return el;
-}
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Todo: (BuildHIR::lowerStatement) Handle TryStatement without a catch clause
-
-error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.ts:6:2
-   4 | function Component(props) {
-   5 |   let el;
->  6 |   try {
-     |   ^^^^^
->  7 |     let value;
-     | ^^^^^^^^^^^^^^
->  8 |     try {
-     | ^^^^^^^^^^^^^^
->  9 |       value = identity(props.foo);
-     | ^^^^^^^^^^^^^^
-> 10 |     } catch {
-     | ^^^^^^^^^^^^^^
-> 11 |       el = <div value={value} />;
-     | ^^^^^^^^^^^^^^
-> 12 |     }
-     | ^^^^^^^^^^^^^^
-> 13 |   } finally {
-     | ^^^^^^^^^^^^^^
-> 14 |     console.log(el);
-     | ^^^^^^^^^^^^^^
-> 15 |   }
-     | ^^^^ (BuildHIR::lowerStatement) Handle TryStatement without a catch clause
-  16 |   return el;
-  17 | }
-  18 |
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.expect.md
deleted file mode 100644
index 79ae59e64c1..00000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.expect.md
+++ /dev/null
@@ -1,44 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoJSXInTryStatements @outputMode:"lint"
-function Component(props) {
-  let el;
-  try {
-    el = <div />;
-  } finally {
-    console.log(el);
-  }
-  return el;
-}
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Todo: (BuildHIR::lowerStatement) Handle TryStatement without a catch clause
-
-error.todo-invalid-jsx-in-try-with-finally.ts:4:2
-   2 | function Component(props) {
-   3 |   let el;
->  4 |   try {
-     |   ^^^^^
->  5 |     el = <div />;
-     | ^^^^^^^^^^^^^^^^^
->  6 |   } finally {
-     | ^^^^^^^^^^^^^^^^^
->  7 |     console.log(el);
-     | ^^^^^^^^^^^^^^^^^
->  8 |   }
-     | ^^^^ (BuildHIR::lowerStatement) Handle TryStatement without a catch clause
-   9 |   return el;
-  10 | }
-  11 |
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.expect.md
deleted file mode 100644
index 00af7ec6ad5..00000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.expect.md
+++ /dev/null
@@ -1,60 +0,0 @@
-
-## Input
-
-```javascript
-// @inferEffectDependencies @panicThreshold:"none"
-import {useSpecialEffect} from 'shared-runtime';
-import {AUTODEPS} from 'react';
-
-/**
- * Note that a react compiler-based transform still has limitations on JS syntax.
- * We should surface these as actionable lint / build errors to devs.
- */
-function Component({prop1}) {
-  'use memo';
-  useSpecialEffect(
-    () => {
-      try {
-        console.log(prop1);
-      } finally {
-        console.log('exiting');
-      }
-    },
-    [prop1],
-    AUTODEPS
-  );
-  return <div>{prop1}</div>;
-}
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot infer dependencies of this effect. This will break your build!
-
-To resolve, either pass a dependency array or fix reported compiler bailout diagnostics Todo: (BuildHIR::lowerStatement) Handle TryStatement without a catch clause (13:6).
-
-error.todo-syntax.ts:11:2
-   9 | function Component({prop1}) {
-  10 |   'use memo';
-> 11 |   useSpecialEffect(
-     |   ^^^^^^^^^^^^^^^^^
-> 12 |     () => {
-     | ^^^^^^^^^^^
-> 13 |       try {
-     …
-     | ^^^^^^^^^^^
-> 20 |     AUTODEPS
-     | ^^^^^^^^^^^
-> 21 |   );
-     | ^^^^ Cannot infer dependencies
-  22 |   return <div>{prop1}</div>;
-  23 | }
-  24 |
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/todo-syntax.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/todo-syntax.expect.md
new file mode 100644
index 00000000000..cd9b0d3bfb2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/todo-syntax.expect.md
@@ -0,0 +1,79 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @panicThreshold:"none"
+import {useSpecialEffect} from 'shared-runtime';
+import {AUTODEPS} from 'react';
+
+/**
+ * Note that a react compiler-based transform still has limitations on JS syntax.
+ * We should surface these as actionable lint / build errors to devs.
+ */
+function Component({prop1}) {
+  'use memo';
+  useSpecialEffect(
+    () => {
+      try {
+        console.log(prop1);
+      } finally {
+        console.log('exiting');
+      }
+    },
+    [prop1],
+    AUTODEPS
+  );
+  return <div>{prop1}</div>;
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @inferEffectDependencies @panicThreshold:"none"
+import { useSpecialEffect } from "shared-runtime";
+import { AUTODEPS } from "react";
+
+/**
+ * Note that a react compiler-based transform still has limitations on JS syntax.
+ * We should surface these as actionable lint / build errors to devs.
+ */
+function Component(t0) {
+  "use memo";
+  const $ = _c(5);
+  const { prop1 } = t0;
+  let t1;
+  let t2;
+  if ($[0] !== prop1) {
+    t1 = () => {
+      try {
+        console.log(prop1);
+      } finally {
+        console.log("exiting");
+      }
+    };
+    t2 = [prop1];
+    $[0] = prop1;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useSpecialEffect(t1, t2, [prop1]);
+  let t3;
+  if ($[3] !== prop1) {
+    t3 = <div>{prop1}</div>;
+    $[3] = prop1;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/todo-syntax.js
similarity index 100%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/error.todo-syntax.js
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/todo-syntax.js
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-catch.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-catch.expect.md
index 6ac06c1df23..935c5e2f566 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-catch.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-catch.expect.md
@@ -48,7 +48,6 @@ function Component(props) {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"category":"ErrorBoundaries","reason":"Avoid constructing JSX within try/catch","description":"React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)","details":[{"kind":"error","loc":{"start":{"line":11,"column":11,"index":241},"end":{"line":11,"column":32,"index":262},"filename":"invalid-jsx-in-catch-in-outer-try-with-catch.ts"},"message":"Avoid constructing JSX within try/catch"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":110},"end":{"line":17,"column":1,"index":317},"filename":"invalid-jsx-in-catch-in-outer-try-with-catch.ts"},"fnName":"Component","memoSlots":4,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-finally.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-finally.expect.md
new file mode 100644
index 00000000000..2d431d40a7d
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-finally.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
+import {identity} from 'shared-runtime';
+
+function Component(props) {
+  let el;
+  try {
+    let value;
+    try {
+      value = identity(props.foo);
+    } catch {
+      el = <div value={value} />;
+    }
+  } finally {
+    console.log(el);
+  }
+  return el;
+}
+
+```
+
+## Code
+
+```javascript
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
+import { identity } from "shared-runtime";
+
+function Component(props) {
+  let el;
+  try {
+    let value;
+    try {
+      value = identity(props.foo);
+    } catch {
+      el = <div value={value} />;
+    }
+  } finally {
+    console.log(el);
+  }
+  return el;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"category":"ErrorBoundaries","reason":"Avoid constructing JSX within try/catch","description":"React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)","details":[{"kind":"error","loc":{"start":{"line":11,"column":11,"index":241},"end":{"line":11,"column":32,"index":262},"filename":"invalid-jsx-in-catch-in-outer-try-with-finally.ts"},"message":"Avoid constructing JSX within try/catch"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":110},"end":{"line":17,"column":1,"index":323},"filename":"invalid-jsx-in-catch-in-outer-try-with-finally.ts"},"fnName":"Component","memoSlots":4,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-finally.js
similarity index 79%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.js
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-finally.js
index fbc0d292ce6..64d2aaf6c69 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-catch-in-outer-try-with-finally.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-finally.js
@@ -1,4 +1,4 @@
-// @validateNoJSXInTryStatements @outputMode:"lint"
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
 import {identity} from 'shared-runtime';
 
 function Component(props) {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-finally.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-finally.expect.md
new file mode 100644
index 00000000000..5f3c9fa284b
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-finally.expect.md
@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
+function Component(props) {
+  let el;
+  try {
+    el = <div />;
+  } finally {
+    console.log(el);
+  }
+  return el;
+}
+
+```
+
+## Code
+
+```javascript
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
+function Component(props) {
+  let el;
+  try {
+    el = <div />;
+  } finally {
+    console.log(el);
+  }
+  return el;
+}
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","detail":{"options":{"category":"ErrorBoundaries","reason":"Avoid constructing JSX within try/catch","description":"React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)","details":[{"kind":"error","loc":{"start":{"line":5,"column":9,"index":123},"end":{"line":5,"column":16,"index":130},"filename":"invalid-jsx-in-try-with-finally.ts"},"message":"Avoid constructing JSX within try/catch"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":68},"end":{"line":10,"column":1,"index":185},"filename":"invalid-jsx-in-try-with-finally.ts"},"fnName":"Component","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-finally.js
similarity index 63%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.js
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-finally.js
index da168277214..b9601dfde47 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-invalid-jsx-in-try-with-finally.js
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-finally.js
@@ -1,4 +1,4 @@
-// @validateNoJSXInTryStatements @outputMode:"lint"
+// @loggerTestOnly @validateNoJSXInTryStatements @outputMode:"lint"
 function Component(props) {
   let el;
   try {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-mutate-outer-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-mutate-outer-value.expect.md
index 4fef6820554..4f624850fe6 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-mutate-outer-value.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/propagate-scope-deps-hir-fork/try-catch-mutate-outer-value.expect.md
@@ -35,21 +35,21 @@ function Component(props) {
     x = [];
     try {
       let t0;
-      if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = throwErrorWithMessage("oops");
-        $[2] = t0;
+        $[4] = t0;
       } else {
-        t0 = $[2];
+        t0 = $[4];
       }
       x.push(t0);
     } catch {
       let t0;
-      if ($[3] !== props.a) {
+      if ($[2] !== props.a) {
         t0 = shallowCopy({ a: props.a });
-        $[3] = props.a;
-        $[4] = t0;
+        $[2] = props.a;
+        $[3] = t0;
       } else {
-        t0 = $[4];
+        t0 = $[3];
       }
       x.push(t0);
     }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.todo-syntax.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.todo-syntax.expect.md
deleted file mode 100644
index e823939d3ff..00000000000
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.todo-syntax.expect.md
+++ /dev/null
@@ -1,48 +0,0 @@
-
-## Input
-
-```javascript
-// @enableFire @panicThreshold:"none"
-import {fire} from 'react';
-
-/**
- * Note that a react compiler-based transform still has limitations on JS syntax.
- * In practice, we expect to surface these as actionable errors to the user, in
- * the same way that invalid `fire` calls error.
- */
-function Component({prop1}) {
-  const foo = () => {
-    try {
-      console.log(prop1);
-    } finally {
-      console.log('jbrown215');
-    }
-  };
-  useEffect(() => {
-    fire(foo());
-  });
-}
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: [Fire] Untransformed reference to compiler-required feature.
-
-Either remove this `fire` call or ensure it is successfully transformed by the compiler Todo: (BuildHIR::lowerStatement) Handle TryStatement without a catch clause (11:4).
-
-error.todo-syntax.ts:18:4
-  16 |   };
-  17 |   useEffect(() => {
-> 18 |     fire(foo());
-     |     ^^^^ Untransformed `fire` call
-  19 |   });
-  20 | }
-  21 |
-```
-          
-      
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/no-fire-todo-syntax-shouldnt-throw.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/no-fire-todo-syntax-shouldnt-throw.expect.md
index 06268ea8541..d98e6073205 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/no-fire-todo-syntax-shouldnt-throw.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/no-fire-todo-syntax-shouldnt-throw.expect.md
@@ -49,20 +49,35 @@ import { fire } from "react";
 /**
  * Compilation of this file should succeed.
  */
-function NonFireComponent({ prop1 }) {
-  /**
-   * This component bails out but does not use fire
-   */
-  const foo = () => {
-    try {
-      console.log(prop1);
-    } finally {
-      console.log("jbrown215");
-    }
-  };
-  useEffect(() => {
-    foo();
-  });
+function NonFireComponent(t0) {
+  const $ = _c(4);
+  const { prop1 } = t0;
+  let t1;
+  if ($[0] !== prop1) {
+    t1 = () => {
+      try {
+        console.log(prop1);
+      } finally {
+        console.log("jbrown215");
+      }
+    };
+    $[0] = prop1;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const foo = t1;
+  let t2;
+  if ($[2] !== foo) {
+    t2 = () => {
+      foo();
+    };
+    $[2] = foo;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  useEffect(t2);
 }
 
 function FireComponent(props) {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/todo-syntax.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/todo-syntax.expect.md
new file mode 100644
index 00000000000..13177904df2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/todo-syntax.expect.md
@@ -0,0 +1,74 @@
+
+## Input
+
+```javascript
+// @enableFire @panicThreshold:"none"
+import {fire} from 'react';
+
+/**
+ * Note that a react compiler-based transform still has limitations on JS syntax.
+ * In practice, we expect to surface these as actionable errors to the user, in
+ * the same way that invalid `fire` calls error.
+ */
+function Component({prop1}) {
+  const foo = () => {
+    try {
+      console.log(prop1);
+    } finally {
+      console.log('jbrown215');
+    }
+  };
+  useEffect(() => {
+    fire(foo());
+  });
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c, useFire } from "react/compiler-runtime"; // @enableFire @panicThreshold:"none"
+import { fire } from "react";
+
+/**
+ * Note that a react compiler-based transform still has limitations on JS syntax.
+ * In practice, we expect to surface these as actionable errors to the user, in
+ * the same way that invalid `fire` calls error.
+ */
+function Component(t0) {
+  const $ = _c(4);
+  const { prop1 } = t0;
+  let t1;
+  if ($[0] !== prop1) {
+    t1 = () => {
+      try {
+        console.log(prop1);
+      } finally {
+        console.log("jbrown215");
+      }
+    };
+    $[0] = prop1;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const foo = t1;
+  const t2 = useFire(foo);
+  let t3;
+  if ($[2] !== t2) {
+    t3 = () => {
+      t2();
+    };
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  useEffect(t3);
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.todo-syntax.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/todo-syntax.js
similarity index 100%
rename from compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/error.todo-syntax.js
rename to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/transform-fire/bailout-retry/todo-syntax.js
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-empty-try.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-empty-try.expect.md
index 522325e2311..654e33ab09a 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-empty-try.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-empty-try.expect.md
@@ -22,7 +22,12 @@ export const FIXTURE_ENTRYPOINT = {
 
 ```javascript
 function Component(props) {
-  const x = props.default;
+  let x = props.default;
+  try {
+  } catch (t0) {
+    const e = t0;
+    x = e;
+  }
   return x;
 }
 
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-finally.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-finally.expect.md
new file mode 100644
index 00000000000..a2d5c0d86a5
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-finally.expect.md
@@ -0,0 +1,56 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  try {
+    if (props.cond) {
+      return 1;
+    }
+    return 2;
+  } catch (e) {
+    return 3;
+  } finally {
+    console.log('cleanup');
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+  sequentialRenders: [
+    {cond: true},
+    {cond: false},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+function Component(props) {
+  try {
+    if (props.cond) {
+      return 1;
+    }
+    return 2;
+  } catch (t0) {
+    return 3;
+  } finally {
+    console.log("cleanup");
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true }],
+  sequentialRenders: [{ cond: true }, { cond: false }],
+};
+
+```
+      
+### Eval output
+(kind: ok) 1
+2
+logs: ['cleanup','cleanup']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-finally.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-finally.js
new file mode 100644
index 00000000000..bede6e9e8a2
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-finally.js
@@ -0,0 +1,21 @@
+function Component(props) {
+  try {
+    if (props.cond) {
+      return 1;
+    }
+    return 2;
+  } catch (e) {
+    return 3;
+  } finally {
+    console.log('cleanup');
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true}],
+  sequentialRenders: [
+    {cond: true},
+    {cond: false},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-mutate-outer-value.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-mutate-outer-value.expect.md
index cab72226d27..4e58a1c80f3 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-mutate-outer-value.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-mutate-outer-value.expect.md
@@ -34,21 +34,21 @@ function Component(props) {
     x = [];
     try {
       let t0;
-      if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = throwErrorWithMessage("oops");
-        $[2] = t0;
+        $[4] = t0;
       } else {
-        t0 = $[2];
+        t0 = $[4];
       }
       x.push(t0);
     } catch {
       let t0;
-      if ($[3] !== props.a) {
+      if ($[2] !== props.a) {
         t0 = shallowCopy({ a: props.a });
-        $[3] = props.a;
-        $[4] = t0;
+        $[2] = props.a;
+        $[3] = t0;
       } else {
-        t0 = $[4];
+        t0 = $[3];
       }
       x.push(t0);
     }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-immediately-returns.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-immediately-returns.expect.md
index 61eb45f84ab..f3acab3681a 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-immediately-returns.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-immediately-returns.expect.md
@@ -27,7 +27,13 @@ export const FIXTURE_ENTRYPOINT = {
 ```javascript
 function Component(props) {
   let x;
-  return 42;
+  try {
+    return 42;
+  } catch (t0) {
+    const e = t0;
+    x = e;
+  }
+  return x;
 }
 
 export const FIXTURE_ENTRYPOINT = {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-immediately-throws-after-constant-propagation.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-immediately-throws-after-constant-propagation.expect.md
index c09c6707dbf..9b70fc7dc00 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-immediately-throws-after-constant-propagation.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-try-immediately-throws-after-constant-propagation.expect.md
@@ -27,7 +27,14 @@ export const FIXTURE_ENTRYPOINT = {
 ```javascript
 function Component(props) {
   let x;
-  return 42;
+
+  try {
+    return 42;
+  } catch (t0) {
+    const e = t0;
+    x = e;
+  }
+  return x;
 }
 
 export const FIXTURE_ENTRYPOINT = {
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-mutable-range.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-mutable-range.expect.md
index 2b4fab6fefb..4bc1bb297bb 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-mutable-range.expect.md
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-catch-within-mutable-range.expect.md
@@ -35,20 +35,20 @@ function Component(props) {
     x = [];
     try {
       let t0;
-      if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = throwErrorWithMessage("oops");
-        $[2] = t0;
+        $[3] = t0;
       } else {
-        t0 = $[2];
+        t0 = $[3];
       }
       x.push(t0);
     } catch {
       let t0;
-      if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+      if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
         t0 = shallowCopy({});
-        $[3] = t0;
+        $[2] = t0;
       } else {
-        t0 = $[3];
+        t0 = $[2];
       }
       x.push(t0);
     }
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-all-paths.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-all-paths.expect.md
new file mode 100644
index 00000000000..beeb4fd88be
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-all-paths.expect.md
@@ -0,0 +1,213 @@
+
+## Input
+
+```javascript
+import {throwErrorWithMessage} from 'shared-runtime';
+
+/**
+ * Comprehensive test covering all paths through try-catch-finally.
+ * Tests:
+ * 1. Try succeeds with return
+ * 2. Try throws, catch returns
+ * 3. Try throws, catch doesn't return, falls through
+ * 4. Finally conditional return (overrides everything)
+ */
+function Component(props) {
+  'use memo';
+  try {
+    if (props.shouldThrow) {
+      throwErrorWithMessage(props.message);
+    }
+    return props.tryValue;
+  } catch (e) {
+    if (props.returnFromCatch) {
+      return props.catchValue;
+    }
+  } finally {
+    console.log('finally');
+    if (props.returnFromFinally) {
+      return props.finallyValue;
+    }
+  }
+  return props.fallbackValue;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{
+    shouldThrow: false,
+    returnFromCatch: false,
+    returnFromFinally: false,
+    message: 'error',
+    tryValue: 'try',
+    catchValue: 'catch',
+    finallyValue: 'finally',
+    fallbackValue: 'fallback',
+  }],
+  sequentialRenders: [
+    // Path 1: Try succeeds with return
+    {shouldThrow: false, returnFromCatch: false, returnFromFinally: false,
+      message: 'e', tryValue: 'try-success', catchValue: 'c', finallyValue: 'f', fallbackValue: 'fb'},
+    // Path 2: Try throws, catch returns
+    {shouldThrow: true, returnFromCatch: true, returnFromFinally: false,
+      message: 'oops', tryValue: 't', catchValue: 'catch-return', finallyValue: 'f', fallbackValue: 'fb'},
+    // Path 3: Try throws, catch doesn't return, falls through
+    {shouldThrow: true, returnFromCatch: false, returnFromFinally: false,
+      message: 'oops', tryValue: 't', catchValue: 'c', finallyValue: 'f', fallbackValue: 'fell-through'},
+    // Path 4a: Finally return overrides try return
+    {shouldThrow: false, returnFromCatch: false, returnFromFinally: true,
+      message: 'e', tryValue: 'try-ignored', catchValue: 'c', finallyValue: 'finally-wins', fallbackValue: 'fb'},
+    // Path 4b: Finally return overrides catch return
+    {shouldThrow: true, returnFromCatch: true, returnFromFinally: true,
+      message: 'oops', tryValue: 't', catchValue: 'catch-ignored', finallyValue: 'finally-wins-again', fallbackValue: 'fb'},
+    // Path 4c: Finally return overrides fallthrough
+    {shouldThrow: true, returnFromCatch: false, returnFromFinally: true,
+      message: 'oops', tryValue: 't', catchValue: 'c', finallyValue: 'finally-overrides', fallbackValue: 'fb-ignored'},
+    // Same as Path 1, verify memoization works
+    {shouldThrow: false, returnFromCatch: false, returnFromFinally: false,
+      message: 'e', tryValue: 'try-success', catchValue: 'c', finallyValue: 'f', fallbackValue: 'fb'},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { throwErrorWithMessage } from "shared-runtime";
+
+/**
+ * Comprehensive test covering all paths through try-catch-finally.
+ * Tests:
+ * 1. Try succeeds with return
+ * 2. Try throws, catch returns
+ * 3. Try throws, catch doesn't return, falls through
+ * 4. Finally conditional return (overrides everything)
+ */
+function Component(props) {
+  "use memo";
+
+  try {
+    if (props.shouldThrow) {
+      throwErrorWithMessage(props.message);
+    }
+    return props.tryValue;
+  } catch (t0) {
+    if (props.returnFromCatch) {
+      return props.catchValue;
+    }
+  } finally {
+    console.log("finally");
+    if (props.returnFromFinally) {
+      return props.finallyValue;
+    }
+  }
+  return props.fallbackValue;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      shouldThrow: false,
+      returnFromCatch: false,
+      returnFromFinally: false,
+      message: "error",
+      tryValue: "try",
+      catchValue: "catch",
+      finallyValue: "finally",
+      fallbackValue: "fallback",
+    },
+  ],
+  sequentialRenders: [
+    // Path 1: Try succeeds with return
+    {
+      shouldThrow: false,
+      returnFromCatch: false,
+      returnFromFinally: false,
+      message: "e",
+      tryValue: "try-success",
+      catchValue: "c",
+      finallyValue: "f",
+      fallbackValue: "fb",
+    },
+    // Path 2: Try throws, catch returns
+    {
+      shouldThrow: true,
+      returnFromCatch: true,
+      returnFromFinally: false,
+      message: "oops",
+      tryValue: "t",
+      catchValue: "catch-return",
+      finallyValue: "f",
+      fallbackValue: "fb",
+    },
+    // Path 3: Try throws, catch doesn't return, falls through
+    {
+      shouldThrow: true,
+      returnFromCatch: false,
+      returnFromFinally: false,
+      message: "oops",
+      tryValue: "t",
+      catchValue: "c",
+      finallyValue: "f",
+      fallbackValue: "fell-through",
+    },
+    // Path 4a: Finally return overrides try return
+    {
+      shouldThrow: false,
+      returnFromCatch: false,
+      returnFromFinally: true,
+      message: "e",
+      tryValue: "try-ignored",
+      catchValue: "c",
+      finallyValue: "finally-wins",
+      fallbackValue: "fb",
+    },
+    // Path 4b: Finally return overrides catch return
+    {
+      shouldThrow: true,
+      returnFromCatch: true,
+      returnFromFinally: true,
+      message: "oops",
+      tryValue: "t",
+      catchValue: "catch-ignored",
+      finallyValue: "finally-wins-again",
+      fallbackValue: "fb",
+    },
+    // Path 4c: Finally return overrides fallthrough
+    {
+      shouldThrow: true,
+      returnFromCatch: false,
+      returnFromFinally: true,
+      message: "oops",
+      tryValue: "t",
+      catchValue: "c",
+      finallyValue: "finally-overrides",
+      fallbackValue: "fb-ignored",
+    },
+    // Same as Path 1, verify memoization works
+    {
+      shouldThrow: false,
+      returnFromCatch: false,
+      returnFromFinally: false,
+      message: "e",
+      tryValue: "try-success",
+      catchValue: "c",
+      finallyValue: "f",
+      fallbackValue: "fb",
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) "try-success"
+"catch-return"
+"fell-through"
+"finally-wins"
+"finally-wins-again"
+"finally-overrides"
+"try-success"
+logs: ['finally','finally','finally','finally','finally','finally','finally']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-all-paths.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-all-paths.js
new file mode 100644
index 00000000000..053f76798c4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-all-paths.js
@@ -0,0 +1,66 @@
+import {throwErrorWithMessage} from 'shared-runtime';
+
+/**
+ * Comprehensive test covering all paths through try-catch-finally.
+ * Tests:
+ * 1. Try succeeds with return
+ * 2. Try throws, catch returns
+ * 3. Try throws, catch doesn't return, falls through
+ * 4. Finally conditional return (overrides everything)
+ */
+function Component(props) {
+  'use memo';
+  try {
+    if (props.shouldThrow) {
+      throwErrorWithMessage(props.message);
+    }
+    return props.tryValue;
+  } catch (e) {
+    if (props.returnFromCatch) {
+      return props.catchValue;
+    }
+  } finally {
+    console.log('finally');
+    if (props.returnFromFinally) {
+      return props.finallyValue;
+    }
+  }
+  return props.fallbackValue;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{
+    shouldThrow: false,
+    returnFromCatch: false,
+    returnFromFinally: false,
+    message: 'error',
+    tryValue: 'try',
+    catchValue: 'catch',
+    finallyValue: 'finally',
+    fallbackValue: 'fallback',
+  }],
+  sequentialRenders: [
+    // Path 1: Try succeeds with return
+    {shouldThrow: false, returnFromCatch: false, returnFromFinally: false,
+      message: 'e', tryValue: 'try-success', catchValue: 'c', finallyValue: 'f', fallbackValue: 'fb'},
+    // Path 2: Try throws, catch returns
+    {shouldThrow: true, returnFromCatch: true, returnFromFinally: false,
+      message: 'oops', tryValue: 't', catchValue: 'catch-return', finallyValue: 'f', fallbackValue: 'fb'},
+    // Path 3: Try throws, catch doesn't return, falls through
+    {shouldThrow: true, returnFromCatch: false, returnFromFinally: false,
+      message: 'oops', tryValue: 't', catchValue: 'c', finallyValue: 'f', fallbackValue: 'fell-through'},
+    // Path 4a: Finally return overrides try return
+    {shouldThrow: false, returnFromCatch: false, returnFromFinally: true,
+      message: 'e', tryValue: 'try-ignored', catchValue: 'c', finallyValue: 'finally-wins', fallbackValue: 'fb'},
+    // Path 4b: Finally return overrides catch return
+    {shouldThrow: true, returnFromCatch: true, returnFromFinally: true,
+      message: 'oops', tryValue: 't', catchValue: 'catch-ignored', finallyValue: 'finally-wins-again', fallbackValue: 'fb'},
+    // Path 4c: Finally return overrides fallthrough
+    {shouldThrow: true, returnFromCatch: false, returnFromFinally: true,
+      message: 'oops', tryValue: 't', catchValue: 'c', finallyValue: 'finally-overrides', fallbackValue: 'fb-ignored'},
+    // Same as Path 1, verify memoization works
+    {shouldThrow: false, returnFromCatch: false, returnFromFinally: false,
+      message: 'e', tryValue: 'try-success', catchValue: 'c', finallyValue: 'f', fallbackValue: 'fb'},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-basic.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-basic.expect.md
new file mode 100644
index 00000000000..691c181eaa4
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-basic.expect.md
@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+function Component() {
+  let x;
+  try {
+    x = 1;
+  } finally {
+    console.log('cleanup');
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+function Component() {
+  let x;
+  try {
+    x = 1;
+  } finally {
+    console.log("cleanup");
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 1
+logs: ['cleanup']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-basic.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-basic.js
new file mode 100644
index 00000000000..1eb602e1b46
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-basic.js
@@ -0,0 +1,14 @@
+function Component() {
+  let x;
+  try {
+    x = 1;
+  } finally {
+    console.log('cleanup');
+  }
+  return x;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-break-continue.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-break-continue.expect.md
new file mode 100644
index 00000000000..a84c3109c84
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-break-continue.expect.md
@@ -0,0 +1,71 @@
+
+## Input
+
+```javascript
+function Component(props) {
+  const results = [];
+  for (const item of props.items) {
+    try {
+      if (item === 'skip') {
+        continue;
+      }
+      if (item === 'stop') {
+        break;
+      }
+      results.push(item);
+    } finally {
+      console.log('processed', item);
+    }
+  }
+  return results;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: ['a', 'skip', 'b', 'stop', 'c']}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Component(props) {
+  const $ = _c(2);
+  let results;
+  if ($[0] !== props.items) {
+    results = [];
+    for (const item of props.items) {
+      try {
+        if (item === "skip") {
+          continue;
+        }
+
+        if (item === "stop") {
+          break;
+        }
+
+        results.push(item);
+      } finally {
+        console.log("processed", item);
+      }
+    }
+    $[0] = props.items;
+    $[1] = results;
+  } else {
+    results = $[1];
+  }
+  return results;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ items: ["a", "skip", "b", "stop", "c"] }],
+};
+
+```
+      
+### Eval output
+(kind: ok) ["a","b"]
+logs: ['processed','a','processed','skip','processed','b','processed','stop']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-break-continue.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-break-continue.js
new file mode 100644
index 00000000000..d438593a4e9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-break-continue.js
@@ -0,0 +1,22 @@
+function Component(props) {
+  const results = [];
+  for (const item of props.items) {
+    try {
+      if (item === 'skip') {
+        continue;
+      }
+      if (item === 'stop') {
+        break;
+      }
+      results.push(item);
+    } finally {
+      console.log('processed', item);
+    }
+  }
+  return results;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{items: ['a', 'skip', 'b', 'stop', 'c']}],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-catch-fallthrough-to-finalizer.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-catch-fallthrough-to-finalizer.expect.md
new file mode 100644
index 00000000000..8208ed6cefb
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-catch-fallthrough-to-finalizer.expect.md
@@ -0,0 +1,183 @@
+
+## Input
+
+```javascript
+import {throwErrorWithMessage} from 'shared-runtime';
+
+/**
+ * Test that catch block's fallthrough correctly flows to finalizer.
+ * This specifically tests the control flow fix where catch block's goto
+ * must target the finalizer block (not the continuation) when there's
+ * a finally clause.
+ *
+ * The conditional in catch creates two paths:
+ * 1. Return from catch (returnFromCatch=true)
+ * 2. Fall through catch -> finalizer -> continuation (returnFromCatch=false)
+ *
+ * Without the fix, path 2 would fail with "Expected a break target" because
+ * the finalizer wasn't scheduled as a break target for catch block gotos.
+ */
+function Component(props) {
+  'use memo';
+  let result = 'initial';
+  try {
+    if (props.shouldThrow) {
+      throwErrorWithMessage(props.message);
+    }
+    result = props.tryValue;
+  } catch {
+    // This conditional creates a fallthrough path that needs to reach finalizer
+    if (props.returnFromCatch) {
+      return props.catchReturnValue;
+    }
+    // Fallthrough path - must go through finalizer before continuation
+    result = props.catchFallthrough;
+  } finally {
+    console.log('finally ran');
+  }
+  return result;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{
+    shouldThrow: true,
+    returnFromCatch: false,
+    message: 'test',
+    tryValue: 'try',
+    catchReturnValue: 'catch-return',
+    catchFallthrough: 'catch-fell-through',
+  }],
+  sequentialRenders: [
+    // Path: throw -> catch returns
+    {shouldThrow: true, returnFromCatch: true, message: 'e1',
+      tryValue: 't', catchReturnValue: 'returned-from-catch', catchFallthrough: 'x'},
+    // Path: throw -> catch falls through -> finalizer -> return result
+    // This is the critical path that tests the fix
+    {shouldThrow: true, returnFromCatch: false, message: 'e2',
+      tryValue: 't', catchReturnValue: 'x', catchFallthrough: 'fell-through-catch'},
+    // Path: no throw -> try succeeds
+    {shouldThrow: false, returnFromCatch: false, message: 'e3',
+      tryValue: 'try-succeeded', catchReturnValue: 'x', catchFallthrough: 'x'},
+    // Same as previous - verify memoization
+    {shouldThrow: false, returnFromCatch: false, message: 'e3',
+      tryValue: 'try-succeeded', catchReturnValue: 'x', catchFallthrough: 'x'},
+    // Back to fallthrough path
+    {shouldThrow: true, returnFromCatch: false, message: 'e4',
+      tryValue: 't', catchReturnValue: 'x', catchFallthrough: 'another-fallthrough'},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { throwErrorWithMessage } from "shared-runtime";
+
+/**
+ * Test that catch block's fallthrough correctly flows to finalizer.
+ * This specifically tests the control flow fix where catch block's goto
+ * must target the finalizer block (not the continuation) when there's
+ * a finally clause.
+ *
+ * The conditional in catch creates two paths:
+ * 1. Return from catch (returnFromCatch=true)
+ * 2. Fall through catch -> finalizer -> continuation (returnFromCatch=false)
+ *
+ * Without the fix, path 2 would fail with "Expected a break target" because
+ * the finalizer wasn't scheduled as a break target for catch block gotos.
+ */
+function Component(props) {
+  "use memo";
+
+  let result = "initial";
+  try {
+    if (props.shouldThrow) {
+      throwErrorWithMessage(props.message);
+    }
+
+    result = props.tryValue;
+  } catch {
+    if (props.returnFromCatch) {
+      return props.catchReturnValue;
+    }
+
+    result = props.catchFallthrough;
+  } finally {
+    console.log("finally ran");
+  }
+  return result;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      shouldThrow: true,
+      returnFromCatch: false,
+      message: "test",
+      tryValue: "try",
+      catchReturnValue: "catch-return",
+      catchFallthrough: "catch-fell-through",
+    },
+  ],
+  sequentialRenders: [
+    // Path: throw -> catch returns
+    {
+      shouldThrow: true,
+      returnFromCatch: true,
+      message: "e1",
+      tryValue: "t",
+      catchReturnValue: "returned-from-catch",
+      catchFallthrough: "x",
+    },
+    // Path: throw -> catch falls through -> finalizer -> return result
+    // This is the critical path that tests the fix
+    {
+      shouldThrow: true,
+      returnFromCatch: false,
+      message: "e2",
+      tryValue: "t",
+      catchReturnValue: "x",
+      catchFallthrough: "fell-through-catch",
+    },
+    // Path: no throw -> try succeeds
+    {
+      shouldThrow: false,
+      returnFromCatch: false,
+      message: "e3",
+      tryValue: "try-succeeded",
+      catchReturnValue: "x",
+      catchFallthrough: "x",
+    },
+    // Same as previous - verify memoization
+    {
+      shouldThrow: false,
+      returnFromCatch: false,
+      message: "e3",
+      tryValue: "try-succeeded",
+      catchReturnValue: "x",
+      catchFallthrough: "x",
+    },
+    // Back to fallthrough path
+    {
+      shouldThrow: true,
+      returnFromCatch: false,
+      message: "e4",
+      tryValue: "t",
+      catchReturnValue: "x",
+      catchFallthrough: "another-fallthrough",
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) "returned-from-catch"
+"fell-through-catch"
+"try-succeeded"
+"try-succeeded"
+"another-fallthrough"
+logs: ['finally ran','finally ran','finally ran','finally ran','finally ran']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-catch-fallthrough-to-finalizer.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-catch-fallthrough-to-finalizer.js
new file mode 100644
index 00000000000..c12627c9053
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-catch-fallthrough-to-finalizer.js
@@ -0,0 +1,65 @@
+import {throwErrorWithMessage} from 'shared-runtime';
+
+/**
+ * Test that catch block's fallthrough correctly flows to finalizer.
+ * This specifically tests the control flow fix where catch block's goto
+ * must target the finalizer block (not the continuation) when there's
+ * a finally clause.
+ *
+ * The conditional in catch creates two paths:
+ * 1. Return from catch (returnFromCatch=true)
+ * 2. Fall through catch -> finalizer -> continuation (returnFromCatch=false)
+ *
+ * Without the fix, path 2 would fail with "Expected a break target" because
+ * the finalizer wasn't scheduled as a break target for catch block gotos.
+ */
+function Component(props) {
+  'use memo';
+  let result = 'initial';
+  try {
+    if (props.shouldThrow) {
+      throwErrorWithMessage(props.message);
+    }
+    result = props.tryValue;
+  } catch {
+    // This conditional creates a fallthrough path that needs to reach finalizer
+    if (props.returnFromCatch) {
+      return props.catchReturnValue;
+    }
+    // Fallthrough path - must go through finalizer before continuation
+    result = props.catchFallthrough;
+  } finally {
+    console.log('finally ran');
+  }
+  return result;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{
+    shouldThrow: true,
+    returnFromCatch: false,
+    message: 'test',
+    tryValue: 'try',
+    catchReturnValue: 'catch-return',
+    catchFallthrough: 'catch-fell-through',
+  }],
+  sequentialRenders: [
+    // Path: throw -> catch returns
+    {shouldThrow: true, returnFromCatch: true, message: 'e1',
+      tryValue: 't', catchReturnValue: 'returned-from-catch', catchFallthrough: 'x'},
+    // Path: throw -> catch falls through -> finalizer -> return result
+    // This is the critical path that tests the fix
+    {shouldThrow: true, returnFromCatch: false, message: 'e2',
+      tryValue: 't', catchReturnValue: 'x', catchFallthrough: 'fell-through-catch'},
+    // Path: no throw -> try succeeds
+    {shouldThrow: false, returnFromCatch: false, message: 'e3',
+      tryValue: 'try-succeeded', catchReturnValue: 'x', catchFallthrough: 'x'},
+    // Same as previous - verify memoization
+    {shouldThrow: false, returnFromCatch: false, message: 'e3',
+      tryValue: 'try-succeeded', catchReturnValue: 'x', catchFallthrough: 'x'},
+    // Back to fallthrough path
+    {shouldThrow: true, returnFromCatch: false, message: 'e4',
+      tryValue: 't', catchReturnValue: 'x', catchFallthrough: 'another-fallthrough'},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-catch.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-catch.expect.md
new file mode 100644
index 00000000000..473eaf0bd16
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-catch.expect.md
@@ -0,0 +1,147 @@
+
+## Input
+
+```javascript
+import {throwErrorWithMessage} from 'shared-runtime';
+
+/**
+ * Test conditional return in catch block.
+ * When shouldThrow is true and returnFromCatch is true, returns from catch.
+ * When shouldThrow is true and returnFromCatch is false, falls through.
+ * When shouldThrow is false, try block succeeds.
+ */
+function Component(props) {
+  'use memo';
+  try {
+    if (props.shouldThrow) {
+      throwErrorWithMessage(props.message);
+    }
+    return props.tryValue;
+  } catch {
+    if (props.returnFromCatch) {
+      return props.catchValue;
+    }
+  } finally {
+    console.log('finally');
+  }
+  return props.fallbackValue;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{shouldThrow: true, returnFromCatch: true, message: 'err', tryValue: 't', catchValue: 'caught', fallbackValue: 'fb'}],
+  sequentialRenders: [
+    // Throw + return from catch
+    {shouldThrow: true, returnFromCatch: true, message: 'err1', tryValue: 't', catchValue: 'caught1', fallbackValue: 'fb'},
+    // Throw + don't return from catch -> falls through to fallback
+    {shouldThrow: true, returnFromCatch: false, message: 'err2', tryValue: 't', catchValue: 'ignored', fallbackValue: 'fallback1'},
+    // Don't throw - try returns
+    {shouldThrow: false, returnFromCatch: true, message: 'err3', tryValue: 'try-success', catchValue: 'not-used', fallbackValue: 'fb'},
+    // Same as previous, should reuse
+    {shouldThrow: false, returnFromCatch: true, message: 'err3', tryValue: 'try-success', catchValue: 'not-used', fallbackValue: 'fb'},
+    // Throw + return from catch again
+    {shouldThrow: true, returnFromCatch: true, message: 'err4', tryValue: 't', catchValue: 'caught4', fallbackValue: 'fb'},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { throwErrorWithMessage } from "shared-runtime";
+
+/**
+ * Test conditional return in catch block.
+ * When shouldThrow is true and returnFromCatch is true, returns from catch.
+ * When shouldThrow is true and returnFromCatch is false, falls through.
+ * When shouldThrow is false, try block succeeds.
+ */
+function Component(props) {
+  "use memo";
+
+  try {
+    if (props.shouldThrow) {
+      throwErrorWithMessage(props.message);
+    }
+    return props.tryValue;
+  } catch {
+    if (props.returnFromCatch) {
+      return props.catchValue;
+    }
+  } finally {
+    console.log("finally");
+  }
+  return props.fallbackValue;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      shouldThrow: true,
+      returnFromCatch: true,
+      message: "err",
+      tryValue: "t",
+      catchValue: "caught",
+      fallbackValue: "fb",
+    },
+  ],
+  sequentialRenders: [
+    // Throw + return from catch
+    {
+      shouldThrow: true,
+      returnFromCatch: true,
+      message: "err1",
+      tryValue: "t",
+      catchValue: "caught1",
+      fallbackValue: "fb",
+    },
+    // Throw + don't return from catch -> falls through to fallback
+    {
+      shouldThrow: true,
+      returnFromCatch: false,
+      message: "err2",
+      tryValue: "t",
+      catchValue: "ignored",
+      fallbackValue: "fallback1",
+    },
+    // Don't throw - try returns
+    {
+      shouldThrow: false,
+      returnFromCatch: true,
+      message: "err3",
+      tryValue: "try-success",
+      catchValue: "not-used",
+      fallbackValue: "fb",
+    },
+    // Same as previous, should reuse
+    {
+      shouldThrow: false,
+      returnFromCatch: true,
+      message: "err3",
+      tryValue: "try-success",
+      catchValue: "not-used",
+      fallbackValue: "fb",
+    },
+    // Throw + return from catch again
+    {
+      shouldThrow: true,
+      returnFromCatch: true,
+      message: "err4",
+      tryValue: "t",
+      catchValue: "caught4",
+      fallbackValue: "fb",
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) "caught1"
+"fallback1"
+"try-success"
+"try-success"
+"caught4"
+logs: ['finally','finally','finally','finally','finally']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-catch.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-catch.js
new file mode 100644
index 00000000000..2d10c8a3222
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-catch.js
@@ -0,0 +1,41 @@
+import {throwErrorWithMessage} from 'shared-runtime';
+
+/**
+ * Test conditional return in catch block.
+ * When shouldThrow is true and returnFromCatch is true, returns from catch.
+ * When shouldThrow is true and returnFromCatch is false, falls through.
+ * When shouldThrow is false, try block succeeds.
+ */
+function Component(props) {
+  'use memo';
+  try {
+    if (props.shouldThrow) {
+      throwErrorWithMessage(props.message);
+    }
+    return props.tryValue;
+  } catch {
+    if (props.returnFromCatch) {
+      return props.catchValue;
+    }
+  } finally {
+    console.log('finally');
+  }
+  return props.fallbackValue;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{shouldThrow: true, returnFromCatch: true, message: 'err', tryValue: 't', catchValue: 'caught', fallbackValue: 'fb'}],
+  sequentialRenders: [
+    // Throw + return from catch
+    {shouldThrow: true, returnFromCatch: true, message: 'err1', tryValue: 't', catchValue: 'caught1', fallbackValue: 'fb'},
+    // Throw + don't return from catch -> falls through to fallback
+    {shouldThrow: true, returnFromCatch: false, message: 'err2', tryValue: 't', catchValue: 'ignored', fallbackValue: 'fallback1'},
+    // Don't throw - try returns
+    {shouldThrow: false, returnFromCatch: true, message: 'err3', tryValue: 'try-success', catchValue: 'not-used', fallbackValue: 'fb'},
+    // Same as previous, should reuse
+    {shouldThrow: false, returnFromCatch: true, message: 'err3', tryValue: 'try-success', catchValue: 'not-used', fallbackValue: 'fb'},
+    // Throw + return from catch again
+    {shouldThrow: true, returnFromCatch: true, message: 'err4', tryValue: 't', catchValue: 'caught4', fallbackValue: 'fb'},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-finally.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-finally.expect.md
new file mode 100644
index 00000000000..9949a1f7040
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-finally.expect.md
@@ -0,0 +1,89 @@
+
+## Input
+
+```javascript
+/**
+ * Test conditional return in finally block.
+ * When returnFromFinally is true, returns from finally (overriding any try return).
+ * When returnFromFinally is false, the try return takes effect.
+ */
+function Component(props) {
+  'use memo';
+  try {
+    return props.tryValue;
+  } finally {
+    console.log('finally');
+    if (props.returnFromFinally) {
+      return props.finallyValue;
+    }
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{tryValue: 'try', returnFromFinally: true, finallyValue: 'finally'}],
+  sequentialRenders: [
+    // Finally returns - overrides try return
+    {tryValue: 'try1', returnFromFinally: true, finallyValue: 'finally1'},
+    // Finally doesn't return - try return takes effect
+    {tryValue: 'try2', returnFromFinally: false, finallyValue: 'ignored'},
+    // Same as previous
+    {tryValue: 'try2', returnFromFinally: false, finallyValue: 'ignored'},
+    // Finally returns again
+    {tryValue: 'try3', returnFromFinally: true, finallyValue: 'finally3'},
+    // Finally doesn't return
+    {tryValue: 'try4', returnFromFinally: false, finallyValue: 'ignored'},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+/**
+ * Test conditional return in finally block.
+ * When returnFromFinally is true, returns from finally (overriding any try return).
+ * When returnFromFinally is false, the try return takes effect.
+ */
+function Component(props) {
+  "use memo";
+
+  try {
+    return props.tryValue;
+  } finally {
+    console.log("finally");
+    if (props.returnFromFinally) {
+      return props.finallyValue;
+    }
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    { tryValue: "try", returnFromFinally: true, finallyValue: "finally" },
+  ],
+  sequentialRenders: [
+    // Finally returns - overrides try return
+    { tryValue: "try1", returnFromFinally: true, finallyValue: "finally1" },
+    // Finally doesn't return - try return takes effect
+    { tryValue: "try2", returnFromFinally: false, finallyValue: "ignored" },
+    // Same as previous
+    { tryValue: "try2", returnFromFinally: false, finallyValue: "ignored" },
+    // Finally returns again
+    { tryValue: "try3", returnFromFinally: true, finallyValue: "finally3" },
+    // Finally doesn't return
+    { tryValue: "try4", returnFromFinally: false, finallyValue: "ignored" },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) "finally1"
+"try2"
+"try2"
+"finally3"
+"try4"
+logs: ['finally','finally','finally','finally','finally']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-finally.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-finally.js
new file mode 100644
index 00000000000..fbae4e5e0fa
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-finally.js
@@ -0,0 +1,33 @@
+/**
+ * Test conditional return in finally block.
+ * When returnFromFinally is true, returns from finally (overriding any try return).
+ * When returnFromFinally is false, the try return takes effect.
+ */
+function Component(props) {
+  'use memo';
+  try {
+    return props.tryValue;
+  } finally {
+    console.log('finally');
+    if (props.returnFromFinally) {
+      return props.finallyValue;
+    }
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{tryValue: 'try', returnFromFinally: true, finallyValue: 'finally'}],
+  sequentialRenders: [
+    // Finally returns - overrides try return
+    {tryValue: 'try1', returnFromFinally: true, finallyValue: 'finally1'},
+    // Finally doesn't return - try return takes effect
+    {tryValue: 'try2', returnFromFinally: false, finallyValue: 'ignored'},
+    // Same as previous
+    {tryValue: 'try2', returnFromFinally: false, finallyValue: 'ignored'},
+    // Finally returns again
+    {tryValue: 'try3', returnFromFinally: true, finallyValue: 'finally3'},
+    // Finally doesn't return
+    {tryValue: 'try4', returnFromFinally: false, finallyValue: 'ignored'},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-try.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-try.expect.md
new file mode 100644
index 00000000000..bfd9f21a7e9
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-try.expect.md
@@ -0,0 +1,88 @@
+
+## Input
+
+```javascript
+/**
+ * Test conditional return in try block.
+ * When condition is true, returns from try (but finally runs first).
+ * When condition is false, falls through to after try-finally.
+ */
+function Component(props) {
+  'use memo';
+  try {
+    if (props.cond) {
+      return props.tryValue;
+    }
+  } finally {
+    console.log('finally');
+  }
+  return props.fallbackValue;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, tryValue: 'early-return', fallbackValue: 'fallback'}],
+  sequentialRenders: [
+    // Condition true - returns from try
+    {cond: true, tryValue: 'early1', fallbackValue: 'fb1'},
+    {cond: true, tryValue: 'early2', fallbackValue: 'fb2'},
+    // Condition false - falls through
+    {cond: false, tryValue: 'ignored', fallbackValue: 'used1'},
+    {cond: false, tryValue: 'also-ignored', fallbackValue: 'used2'},
+    // Same as previous, should reuse
+    {cond: false, tryValue: 'also-ignored', fallbackValue: 'used2'},
+    // Back to true
+    {cond: true, tryValue: 'early3', fallbackValue: 'fb3'},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+/**
+ * Test conditional return in try block.
+ * When condition is true, returns from try (but finally runs first).
+ * When condition is false, falls through to after try-finally.
+ */
+function Component(props) {
+  "use memo";
+
+  try {
+    if (props.cond) {
+      return props.tryValue;
+    }
+  } finally {
+    console.log("finally");
+  }
+  return props.fallbackValue;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ cond: true, tryValue: "early-return", fallbackValue: "fallback" }],
+  sequentialRenders: [
+    // Condition true - returns from try
+    { cond: true, tryValue: "early1", fallbackValue: "fb1" },
+    { cond: true, tryValue: "early2", fallbackValue: "fb2" },
+    // Condition false - falls through
+    { cond: false, tryValue: "ignored", fallbackValue: "used1" },
+    { cond: false, tryValue: "also-ignored", fallbackValue: "used2" },
+    // Same as previous, should reuse
+    { cond: false, tryValue: "also-ignored", fallbackValue: "used2" },
+    // Back to true
+    { cond: true, tryValue: "early3", fallbackValue: "fb3" },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) "early1"
+"early2"
+"used1"
+"used2"
+"used2"
+"early3"
+logs: ['finally','finally','finally','finally','finally','finally']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-try.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-try.js
new file mode 100644
index 00000000000..7216c200d10
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-conditional-return-in-try.js
@@ -0,0 +1,33 @@
+/**
+ * Test conditional return in try block.
+ * When condition is true, returns from try (but finally runs first).
+ * When condition is false, falls through to after try-finally.
+ */
+function Component(props) {
+  'use memo';
+  try {
+    if (props.cond) {
+      return props.tryValue;
+    }
+  } finally {
+    console.log('finally');
+  }
+  return props.fallbackValue;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{cond: true, tryValue: 'early-return', fallbackValue: 'fallback'}],
+  sequentialRenders: [
+    // Condition true - returns from try
+    {cond: true, tryValue: 'early1', fallbackValue: 'fb1'},
+    {cond: true, tryValue: 'early2', fallbackValue: 'fb2'},
+    // Condition false - falls through
+    {cond: false, tryValue: 'ignored', fallbackValue: 'used1'},
+    {cond: false, tryValue: 'also-ignored', fallbackValue: 'used2'},
+    // Same as previous, should reuse
+    {cond: false, tryValue: 'also-ignored', fallbackValue: 'used2'},
+    // Back to true
+    {cond: true, tryValue: 'early3', fallbackValue: 'fb3'},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-catch-and-finally.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-catch-and-finally.expect.md
new file mode 100644
index 00000000000..ba38aa6d409
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-catch-and-finally.expect.md
@@ -0,0 +1,102 @@
+
+## Input
+
+```javascript
+import {throwErrorWithMessage} from 'shared-runtime';
+
+/**
+ * Test returning in catch and finally, with a throw in try.
+ * Per JS semantics, the finally return overrides the catch return.
+ */
+function Component(props) {
+  'use memo';
+  try {
+    throwErrorWithMessage(props.message);
+    return props.tryValue; // never reached
+  } catch {
+    return props.catchValue;
+  } finally {
+    return props.finallyValue;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{message: 'error', tryValue: 'try', catchValue: 'catch', finallyValue: 'finally'}],
+  sequentialRenders: [
+    {message: 'err1', tryValue: 'try1', catchValue: 'catch1', finallyValue: 'finally1'},
+    {message: 'err2', tryValue: 'try2', catchValue: 'catch2', finallyValue: 'finally2'},
+    {message: 'err2', tryValue: 'try2', catchValue: 'catch2', finallyValue: 'finally2'}, // same props
+    {message: 'err3', tryValue: 'try3', catchValue: 'catch3', finallyValue: 'finally3'},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { throwErrorWithMessage } from "shared-runtime";
+
+/**
+ * Test returning in catch and finally, with a throw in try.
+ * Per JS semantics, the finally return overrides the catch return.
+ */
+function Component(props) {
+  "use memo";
+
+  try {
+    throwErrorWithMessage(props.message);
+    return props.tryValue;
+  } catch {
+    return props.catchValue;
+  } finally {
+    return props.finallyValue;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [
+    {
+      message: "error",
+      tryValue: "try",
+      catchValue: "catch",
+      finallyValue: "finally",
+    },
+  ],
+  sequentialRenders: [
+    {
+      message: "err1",
+      tryValue: "try1",
+      catchValue: "catch1",
+      finallyValue: "finally1",
+    },
+    {
+      message: "err2",
+      tryValue: "try2",
+      catchValue: "catch2",
+      finallyValue: "finally2",
+    },
+    {
+      message: "err2",
+      tryValue: "try2",
+      catchValue: "catch2",
+      finallyValue: "finally2",
+    }, // same props
+    {
+      message: "err3",
+      tryValue: "try3",
+      catchValue: "catch3",
+      finallyValue: "finally3",
+    },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) "finally1"
+"finally2"
+"finally2"
+"finally3"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-catch-and-finally.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-catch-and-finally.js
new file mode 100644
index 00000000000..180fb94ebed
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-catch-and-finally.js
@@ -0,0 +1,28 @@
+import {throwErrorWithMessage} from 'shared-runtime';
+
+/**
+ * Test returning in catch and finally, with a throw in try.
+ * Per JS semantics, the finally return overrides the catch return.
+ */
+function Component(props) {
+  'use memo';
+  try {
+    throwErrorWithMessage(props.message);
+    return props.tryValue; // never reached
+  } catch {
+    return props.catchValue;
+  } finally {
+    return props.finallyValue;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{message: 'error', tryValue: 'try', catchValue: 'catch', finallyValue: 'finally'}],
+  sequentialRenders: [
+    {message: 'err1', tryValue: 'try1', catchValue: 'catch1', finallyValue: 'finally1'},
+    {message: 'err2', tryValue: 'try2', catchValue: 'catch2', finallyValue: 'finally2'},
+    {message: 'err2', tryValue: 'try2', catchValue: 'catch2', finallyValue: 'finally2'}, // same props
+    {message: 'err3', tryValue: 'try3', catchValue: 'catch3', finallyValue: 'finally3'},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-try-and-finally.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-try-and-finally.expect.md
new file mode 100644
index 00000000000..c0c427c7e43
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-try-and-finally.expect.md
@@ -0,0 +1,65 @@
+
+## Input
+
+```javascript
+/**
+ * Test returning in both try and finally.
+ * Per JS semantics, the finally return overrides the try return.
+ */
+function Component(props) {
+  'use memo';
+  try {
+    return props.tryValue;
+  } finally {
+    return props.finallyValue;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{tryValue: 'try', finallyValue: 'finally'}],
+  sequentialRenders: [
+    {tryValue: 'try1', finallyValue: 'finally1'},
+    {tryValue: 'try2', finallyValue: 'finally2'},
+    {tryValue: 'try2', finallyValue: 'finally2'}, // same props, should reuse
+    {tryValue: 'try3', finallyValue: 'finally3'},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+/**
+ * Test returning in both try and finally.
+ * Per JS semantics, the finally return overrides the try return.
+ */
+function Component(props) {
+  "use memo";
+
+  try {
+    return props.tryValue;
+  } finally {
+    return props.finallyValue;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ tryValue: "try", finallyValue: "finally" }],
+  sequentialRenders: [
+    { tryValue: "try1", finallyValue: "finally1" },
+    { tryValue: "try2", finallyValue: "finally2" },
+    { tryValue: "try2", finallyValue: "finally2" }, // same props, should reuse
+    { tryValue: "try3", finallyValue: "finally3" },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) "finally1"
+"finally2"
+"finally2"
+"finally3"
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-try-and-finally.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-try-and-finally.js
new file mode 100644
index 00000000000..91bc83121f3
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-try-and-finally.js
@@ -0,0 +1,23 @@
+/**
+ * Test returning in both try and finally.
+ * Per JS semantics, the finally return overrides the try return.
+ */
+function Component(props) {
+  'use memo';
+  try {
+    return props.tryValue;
+  } finally {
+    return props.finallyValue;
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{tryValue: 'try', finallyValue: 'finally'}],
+  sequentialRenders: [
+    {tryValue: 'try1', finallyValue: 'finally1'},
+    {tryValue: 'try2', finallyValue: 'finally2'},
+    {tryValue: 'try2', finallyValue: 'finally2'}, // same props, should reuse
+    {tryValue: 'try3', finallyValue: 'finally3'},
+  ],
+};
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-try.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-try.expect.md
new file mode 100644
index 00000000000..243a69ec6b8
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-try.expect.md
@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+function Component() {
+  try {
+    return 1;
+  } finally {
+    console.log('cleanup');
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+
+## Code
+
+```javascript
+function Component() {
+  try {
+    return 1;
+  } finally {
+    console.log("cleanup");
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};
+
+```
+      
+### Eval output
+(kind: ok) 1
+logs: ['cleanup']
\ No newline at end of file
diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-try.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-try.js
new file mode 100644
index 00000000000..041a121c7b1
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/try-finally-return-in-try.js
@@ -0,0 +1,12 @@
+function Component() {
+  try {
+    return 1;
+  } finally {
+    console.log('cleanup');
+  }
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [],
+};