[flow] Upgrade from 0.281 -> 0.282

Add suppression for React\$Element incompatibility with ReactNodeList in
  ReactDOMRootFB.js render function. Flow 0.282 has stricter type checking
  for the React\$Node union type.

.eslintrc.js

@@ -635,7 +635,6 @@ module.exports = {
     FocusOptions: 'readonly',
     OptionalEffectTiming: 'readonly',
 
-    __REACT_ROOT_PATH_TEST__: 'readonly',
     spyOnDev: 'readonly',
     spyOnDevAndProd: 'readonly',
     spyOnProd: 'readonly',

.github/workflows/runtime_build_and_test.yml

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

compiler/.claude/settings.local.json

@@ -1,14 +1,7 @@
 {
   "permissions": {
     "allow": [
-      "Bash(node scripts/enable-feature-flag.js:*)",
-      "Bash(yarn snap:*)",
-      "Bash(for test in \"error.invalid-access-ref-during-render\" \"error.invalid-ref-in-callback-invoked-during-render\" \"error.invalid-impure-functions-in-render-via-render-helper\")",
-      "Bash(do)",
-      "Bash(echo:*)",
-      "Bash(done)",
-      "Bash(cat:*)",
-      "Bash(sl revert:*)"
+      "Bash(node scripts/enable-feature-flag.js:*)"
     ],
     "deny": [],
     "ask": []

compiler/CLAUDE.md

@@ -1,245 +0,0 @@
-# React Compiler Knowledge Base
-
-This document contains knowledge about the React Compiler gathered during development sessions. It serves as a reference for understanding the codebase architecture and key concepts.
-
-## Project Structure
-
-- `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.)
-  - `src/Validation/` - Validation passes that check for errors
-  - `src/Entrypoint/Pipeline.ts` - Main compilation pipeline with pass ordering
-  - `src/__tests__/fixtures/compiler/` - Test fixtures
-    - `error.*.js` - Fixtures that should produce compilation errors
-    - `*.expect.md` - Expected output for each fixture
-
-## Running Tests
-
-```bash
-# Run all tests
-yarn snap
-
-# Run specific test by pattern
-yarn snap -p <pattern>
-
-# Update fixture outputs
-yarn snap -u
-```
-
-## Version Control
-
-This repository uses Sapling (`sl`) for version control. Unlike git, Sapling does not require explicitly adding files to the staging area.
-
-```bash
-# Check status
-sl status
-
-# Commit all changes
-sl commit -m "Your commit message"
-
-# Commit with multi-line message using heredoc
-sl commit -m "$(cat <<'EOF'
-Summary line
-
-Detailed description here
-EOF
-)"
-```
-
-## Key Concepts
-
-### HIR (High-level Intermediate Representation)
-
-The compiler converts source code to HIR for analysis. Key types in `src/HIR/HIR.ts`:
-
-- **HIRFunction** - A function being compiled
-  - `body.blocks` - Map of BasicBlocks
-  - `context` - Captured variables from outer scope
-  - `params` - Function parameters
-  - `returns` - The function's return place
-  - `aliasingEffects` - Effects that describe the function's behavior when called
-
-- **Instruction** - A single operation
-  - `lvalue` - The place being assigned to
-  - `value` - The instruction kind (CallExpression, FunctionExpression, LoadLocal, etc.)
-  - `effects` - Array of AliasingEffects for this instruction
-
-- **Terminal** - Block terminators (return, branch, etc.)
-  - `effects` - Array of AliasingEffects
-
-- **Place** - A reference to a value
-  - `identifier.id` - Unique IdentifierId
-
-- **Phi nodes** - Join points for values from different control flow paths
-  - Located at `block.phis`
-  - `phi.place` - The result place
-  - `phi.operands` - Map of predecessor block to source place
-
-### AliasingEffects System
-
-Effects describe data flow and operations. Defined in `src/Inference/AliasingEffects.ts`:
-
-**Data Flow Effects:**
-- `Impure` - Marks a place as containing an impure value (e.g., Date.now() result, ref.current)
-- `Capture a -> b` - Value from `a` is captured into `b` (mutable capture)
-- `Alias a -> b` - `b` aliases `a`
-- `ImmutableCapture a -> b` - Immutable capture (like Capture but read-only)
-- `Assign a -> b` - Direct assignment
-- `MaybeAlias a -> b` - Possible aliasing
-- `CreateFrom a -> b` - Created from source
-
-**Mutation Effects:**
-- `Mutate value` - Value is mutated
-- `MutateTransitive value` - Value and transitive captures are mutated
-- `MutateConditionally value` - May mutate
-- `MutateTransitiveConditionally value` - May mutate transitively
-
-**Other Effects:**
-- `Render place` - Place is used in render context (JSX props, component return)
-- `Freeze place` - Place is frozen (made immutable)
-- `Create place` - New value created
-- `CreateFunction` - Function expression created, includes `captures` array
-- `Apply` - Function application with receiver, function, args, and result
-
-### Hook Aliasing Signatures
-
-Located in `src/HIR/Globals.ts`, hooks can define custom aliasing signatures to control how data flows through them.
-
-**Structure:**
-```typescript
-aliasing: {
-  receiver: '@receiver',    // The hook function itself
-  params: ['@param0'],      // Named positional parameters
-  rest: '@rest',            // Rest parameters (or null)
-  returns: '@returns',      // Return value
-  temporaries: [],          // Temporary values during execution
-  effects: [                // Array of effects to apply when hook is called
-    {kind: 'Freeze', value: '@param0', reason: ValueReason.HookCaptured},
-    {kind: 'Assign', from: '@param0', into: '@returns'},
-  ],
-}
-```
-
-**Common patterns:**
-
-1. **RenderHookAliasing** (useState, useContext, useMemo, useCallback):
-   - Freezes arguments (`Freeze @rest`)
-   - Marks arguments as render-time (`Render @rest`)
-   - Creates frozen return value
-   - Aliases arguments to return
-
-2. **EffectHookAliasing** (useEffect, useLayoutEffect, useInsertionEffect):
-   - Freezes function and deps
-   - Creates internal effect object
-   - Captures function and deps into effect
-   - Returns undefined
-
-3. **Event handler hooks** (useEffectEvent):
-   - Freezes callback (`Freeze @fn`)
-   - Aliases input to return (`Assign @fn -> @returns`)
-   - NO Render effect (callback not called during render)
-
-**Example: useEffectEvent**
-```typescript
-const UseEffectEventHook = addHook(
-  DEFAULT_SHAPES,
-  {
-    positionalParams: [Effect.Freeze],  // Takes one positional param
-    restParam: null,
-    returnType: {kind: 'Function', ...},
-    calleeEffect: Effect.Read,
-    hookKind: 'useEffectEvent',
-    returnValueKind: ValueKind.Frozen,
-    aliasing: {
-      receiver: '@receiver',
-      params: ['@fn'],              // Name for the callback parameter
-      rest: null,
-      returns: '@returns',
-      temporaries: [],
-      effects: [
-        {kind: 'Freeze', value: '@fn', reason: ValueReason.HookCaptured},
-        {kind: 'Assign', from: '@fn', into: '@returns'},
-        // Note: NO Render effect - callback is not called during render
-      ],
-    },
-  },
-  BuiltInUseEffectEventId,
-);
-
-// Add as both names for compatibility
-['useEffectEvent', UseEffectEventHook],
-['experimental_useEffectEvent', UseEffectEventHook],
-```
-
-**Key insight:** If a hook is missing an `aliasing` config, it falls back to `DefaultNonmutatingHook` which includes a `Render` effect on all arguments. This can cause false positives for hooks like `useEffectEvent` whose callbacks are not called during render.
-
-### Effect Inference Pipeline
-
-Effects are populated by `InferMutationAliasingEffects` (runs before validation):
-
-1. For `Date.now()`, `Math.random()` etc. - adds `Impure` effect (controlled by `validateNoImpureFunctionsInRender` config)
-2. For `ref.current` access - adds `Impure` effect (controlled by `validateRefAccessDuringRender` config)
-3. For return terminals - adds `Alias` from return value to `fn.returns`
-4. For component/JSX returns - adds `Render` effect
-5. For function expressions - adds `CreateFunction` effect with captures
-
-### Validation: validateNoImpureValuesInRender
-
-Located at `src/Validation/ValidateNoImpureValuesInRender.ts`
-
-**Purpose:** Detect when impure values (refs, Date.now results, etc.) flow into render context.
-
-**Algorithm:**
-1. Track impure values in a Map<IdentifierId, ImpureEffect>
-2. Track functions with impure returns separately (they're not impure values themselves)
-3. Fixed-point iteration over all blocks:
-   - Process phi nodes (any impure operand makes result impure)
-   - Process instruction effects
-   - Process terminal effects
-   - Backwards propagation for mutated LoadLocal values
-4. Validate: check all Render effects against impure values
-
-**Key patterns:**
-- `Impure` effect marks the target as impure
-- `Capture/Alias/etc` propagates impurity from source to target
-- `Apply` propagates impurity from args/receiver to result
-- `CreateFunction` propagates impurity from captured values (but NOT from body effects)
-- If a value has both `Render` and `Capture` in same instruction, only error on Render (don't cascade)
-
-**Tracking functions with impure returns:**
-- Separate from the `impure` map (function values aren't impure, just their returns)
-- Populated when analyzing FunctionExpression bodies
-- Used when:
-  1. Calling the function - mark call result as impure
-  2. Capturing the function - mark target as impure (for object.foo = impureFunc cases)
-
-**Backwards propagation:**
-- When `$x = LoadLocal y` and `$x` is mutated with impure content, mark `y` as impure
-- This handles: `const arr = []; arr.push(impure); render(arr)`
-
-## Known Issues / Edge Cases
-
-### Function Outlining
-After `OutlineFunctions` pass, inner functions are replaced with `LoadGlobal(_temp)`. The validation runs BEFORE outlining, so it sees the original FunctionExpression. But be aware that test output shows post-outlining HIR.
-
-### SSA and LoadLocal
-In SSA form, each `LoadLocal` creates a new identifier. When a loaded value is mutated:
-- `$x = LoadLocal y`
-- `mutate($x, impure)`
-- `$z = LoadLocal y` (different from $x!)
-- `render($z)`
-
-The impurity in $x must propagate back to y, then forward to $z. This requires backwards propagation in the fixed-point loop.
-
-## Configuration Flags
-
-In `Environment.ts` / test directives:
-- `validateNoImpureFunctionsInRender` - Enable impure function validation (Date.now, Math.random, etc.)
-- `validateRefAccessDuringRender` - Enable ref access validation
-
-## Debugging Tips
-
-1. Run `yarn snap -p <fixture>` to see full HIR output with effects
-2. Look for `@aliasingEffects=` on FunctionExpressions
-3. Look for `Impure`, `Render`, `Capture` effects on instructions
-4. Check the pass ordering in Pipeline.ts to understand when effects are populated vs validated

compiler/apps/playground/package.json

@@ -35,13 +35,13 @@
     "lru-cache": "^11.2.2",
     "lz-string": "^1.5.0",
     "monaco-editor": "^0.52.0",
-    "next": "15.5.9",
+    "next": "15.5.7",
     "notistack": "^3.0.0-alpha.7",
     "prettier": "^3.3.3",
     "pretty-format": "^29.3.1",
     "re-resizable": "^6.9.16",
-    "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react": "19.2",
+    "react-dom": "19.2"
   },
   "devDependencies": {
     "@types/node": "18.11.9",

compiler/apps/playground/yarn.lock

@@ -715,10 +715,10 @@
   dependencies:
     "@monaco-editor/loader" "^1.6.1"
 
-"@next/env@15.5.9":
-  version "15.5.9"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-15.5.9.tgz#53c2c34dc17cd87b61f70c6cc211e303123b2ab8"
-  integrity sha512-4GlTZ+EJM7WaW2HEZcyU317tIQDjkQIyENDLxYJfSWlfqguN+dHkZgyQTV/7ykvobU7yEH5gKvreNrH4B6QgIg==
+"@next/env@15.5.7":
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-15.5.7.tgz#4168db34ae3bc9fd9ad3b951d327f4cfc38d4362"
+  integrity sha512-4h6Y2NyEkIEN7Z8YxkA27pq6zTkS09bUSYC0xjd0NpwFxjnIKeZEeH591o5WECSmjpUhLn3H2QLJcDye3Uzcvg==
 
 "@next/eslint-plugin-next@15.5.2":
   version "15.5.2"
@@ -3204,12 +3204,12 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
-next@15.5.9:
-  version "15.5.9"
-  resolved "https://registry.yarnpkg.com/next/-/next-15.5.9.tgz#1b80d05865cc27e710fb4dcfc6fd9e726ed12ad4"
-  integrity sha512-agNLK89seZEtC5zUHwtut0+tNrc0Xw4FT/Dg+B/VLEo9pAcS9rtTKpek3V6kVcVwsB2YlqMaHdfZL4eLEVYuCg==
+next@15.5.7:
+  version "15.5.7"
+  resolved "https://registry.yarnpkg.com/next/-/next-15.5.7.tgz#4507700b2bbcaf2c9fb7a9ad25c0dac2ba4a9a75"
+  integrity sha512-+t2/0jIJ48kUpGKkdlhgkv+zPTEOoXyr60qXe68eB/pl3CMJaLeIGjzp5D6Oqt25hCBiBTt8wEeeAzfJvUKnPQ==
   dependencies:
-    "@next/env" "15.5.9"
+    "@next/env" "15.5.7"
     "@swc/helpers" "0.5.15"
     caniuse-lite "^1.0.30001579"
     postcss "8.4.31"
@@ -3582,10 +3582,10 @@ re-resizable@^6.9.16:
   resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.10.0.tgz#d684a096ab438f1a93f59ad3a580a206b0ce31ee"
   integrity sha512-hysSK0xmA5nz24HBVztlk4yCqCLCvS32E6ZpWxVKop9x3tqCa4yAj1++facrmkOf62JsJHjmjABdKxXofYioCw==
 
-react-dom@19.2.3:
-  version "19.2.3"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.2.3.tgz#f0b61d7e5c4a86773889fcc1853af3ed5f215b17"
-  integrity sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==
+react-dom@19.2:
+  version "19.2.0"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz#00ed1e959c365e9a9d48f8918377465466ec3af8"
+  integrity sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==
   dependencies:
     scheduler "^0.27.0"
 
@@ -3599,10 +3599,10 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
-react@19.2.3:
-  version "19.2.3"
-  resolved "https://registry.yarnpkg.com/react/-/react-19.2.3.tgz#d83e5e8e7a258cf6b4fe28640515f99b87cd19b8"
-  integrity sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==
+react@19.2:
+  version "19.2.0"
+  resolved "https://registry.npmjs.org/react/-/react-19.2.0.tgz#d33dd1721698f4376ae57a54098cb47fc75d93a5"
+  integrity sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==
 
 read-cache@^1.0.0:
   version "1.0.0"

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

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

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

@@ -96,6 +96,7 @@ import {propagateScopeDependenciesHIR} from '../HIR/PropagateScopeDependenciesHI
 import {outlineJSX} from '../Optimization/OutlineJsx';
 import {optimizePropsMethodCalls} from '../Optimization/OptimizePropsMethodCalls';
 import {transformFire} from '../Transform';
+import {validateNoImpureFunctionsInRender} from '../Validation/ValidateNoImpureFunctionsInRender';
 import {validateStaticComponents} from '../Validation/ValidateStaticComponents';
 import {validateNoFreezingKnownMutableFunctions} from '../Validation/ValidateNoFreezingKnownMutableFunctions';
 import {inferMutationAliasingEffects} from '../Inference/InferMutationAliasingEffects';
@@ -106,7 +107,6 @@ import {nameAnonymousFunctions} from '../Transform/NameAnonymousFunctions';
 import {optimizeForSSR} from '../Optimization/OptimizeForSSR';
 import {validateExhaustiveDependencies} from '../Validation/ValidateExhaustiveDependencies';
 import {validateSourceLocations} from '../Validation/ValidateSourceLocations';
-import {validateNoImpureValuesInRender} from '../Validation/ValidateNoImpureValuesInRender';
 
 export type CompilerPipelineValue =
   | {kind: 'ast'; name: string; value: CodegenFunction}
@@ -271,36 +271,30 @@ function runWithEnvironment(
       assertValidMutableRanges(hir);
     }
 
+    if (env.config.validateRefAccessDuringRender) {
+      validateNoRefAccessInRender(hir).unwrap();
+    }
+
     if (env.config.validateNoSetStateInRender) {
       validateNoSetStateInRender(hir).unwrap();
     }
 
-    if (
-      env.config.validateNoDerivedComputationsInEffects_exp &&
-      env.outputMode === 'lint'
-    ) {
+    if (env.config.validateNoDerivedComputationsInEffects_exp) {
       env.logErrors(validateNoDerivedComputationsInEffects_exp(hir));
     } else if (env.config.validateNoDerivedComputationsInEffects) {
       validateNoDerivedComputationsInEffects(hir);
     }
 
-    if (env.config.validateNoSetStateInEffects && env.outputMode === 'lint') {
+    if (env.config.validateNoSetStateInEffects) {
       env.logErrors(validateNoSetStateInEffects(hir, env));
     }
 
-    if (env.config.validateNoJSXInTryStatements && env.outputMode === 'lint') {
+    if (env.config.validateNoJSXInTryStatements) {
       env.logErrors(validateNoJSXInTryStatement(hir));
     }
 
-    if (
-      env.config.validateNoImpureFunctionsInRender ||
-      env.config.validateRefAccessDuringRender
-    ) {
-      validateNoImpureValuesInRender(hir).unwrap();
-    }
-
-    if (env.config.validateRefAccessDuringRender) {
-      validateNoRefAccessInRender(hir).unwrap();
+    if (env.config.validateNoImpureFunctionsInRender) {
+      validateNoImpureFunctionsInRender(hir).unwrap();
     }
 
     validateNoFreezingKnownMutableFunctions(hir).unwrap();
@@ -326,11 +320,7 @@ function runWithEnvironment(
     value: hir,
   });
 
-  if (
-    env.enableValidations &&
-    env.config.validateStaticComponents &&
-    env.outputMode === 'lint'
-  ) {
+  if (env.enableValidations && env.config.validateStaticComponents) {
     env.logErrors(validateStaticComponents(hir));
   }
 

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

@@ -4026,7 +4026,6 @@ function lowerAssignment(
           pattern: {
             kind: 'ArrayPattern',
             items,
-            loc: lvalue.node.loc ?? GeneratedSource,
           },
         },
         value,
@@ -4204,7 +4203,6 @@ function lowerAssignment(
           pattern: {
             kind: 'ObjectPattern',
             properties,
-            loc: lvalue.node.loc ?? GeneratedSource,
           },
         },
         value,

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

@@ -225,15 +225,8 @@ export const EnvironmentConfigSchema = z.object({
 
   /**
    * Validate that dependencies supplied to effect hooks are exhaustive.
-   * Can be:
-   * - 'off': No validation (default)
-   * - 'all': Validate and report both missing and extra dependencies
-   * - 'missing-only': Only report missing dependencies
-   * - 'extra-only': Only report extra/unnecessary dependencies
    */
-  validateExhaustiveEffectDependencies: z
-    .enum(['off', 'all', 'missing-only', 'extra-only'])
-    .default('off'),
+  validateExhaustiveEffectDependencies: z.boolean().default(false),
 
   /**
    * When this is true, rather than pruning existing manual memoization but ensuring or validating

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

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

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

@@ -694,13 +694,11 @@ export type SpreadPattern = {
 export type ArrayPattern = {
   kind: 'ArrayPattern';
   items: Array<Place | SpreadPattern | Hole>;
-  loc: SourceLocation;
 };
 
 export type ObjectPattern = {
   kind: 'ObjectPattern';
   properties: Array<ObjectProperty | SpreadPattern>;
-  loc: SourceLocation;
 };
 
 export type ObjectPropertyKey =
@@ -1879,15 +1877,7 @@ export function isRefValueType(id: Identifier): boolean {
 }
 
 export function isUseRefType(id: Identifier): boolean {
-  return isUseRefType_(id.type);
-}
-
-export function isUseRefType_(type: Type): boolean {
-  return (
-    (type.kind === 'Object' && type.shapeId === 'BuiltInUseRefId') ||
-    (type.kind === 'Phi' &&
-      type.operands.some(operand => isUseRefType_(operand)))
-  );
+  return id.type.kind === 'Object' && id.type.shapeId === 'BuiltInUseRefId';
 }
 
 export function isUseStateType(id: Identifier): boolean {
@@ -1898,13 +1888,6 @@ export function isJsxType(type: Type): boolean {
   return type.kind === 'Object' && type.shapeId === 'BuiltInJsx';
 }
 
-export function isJsxOrJsxUnionType(type: Type): boolean {
-  return (
-    (type.kind === 'Object' && type.shapeId === 'BuiltInJsx') ||
-    (type.kind === 'Phi' && type.operands.some(op => isJsxOrJsxUnionType(op)))
-  );
-}
-
 export function isRefOrRefValue(id: Identifier): boolean {
   return isUseRefType(id) || isRefValueType(id);
 }
@@ -2073,23 +2056,4 @@ export function getHookKindForType(
   return null;
 }
 
-export function areEqualSourceLocations(
-  loc1: SourceLocation,
-  loc2: SourceLocation,
-): boolean {
-  if (typeof loc1 === 'symbol' || typeof loc2 === 'symbol') {
-    return false;
-  }
-  return (
-    loc1.filename === loc2.filename &&
-    loc1.identifierName === loc2.identifierName &&
-    loc1.start.line === loc2.start.line &&
-    loc1.start.column === loc2.start.column &&
-    loc1.start.index === loc2.start.index &&
-    loc1.end.line === loc2.end.line &&
-    loc1.end.column === loc2.end.column &&
-    loc1.end.index === loc2.end.index
-  );
-}
-
 export * from './Types';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

compiler/packages/babel-plugin-react-compiler/src/Optimization/OutlineJsx.ts

@@ -515,7 +515,6 @@ function emitDestructureProps(
         pattern: {
           kind: 'ObjectPattern',
           properties,
-          loc: GeneratedSource,
         },
         kind: InstructionKind.Let,
       },

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

@@ -702,7 +702,7 @@ function codegenReactiveScope(
     outputComments.push(name.name);
     if (!cx.hasDeclared(identifier)) {
       statements.push(
-        t.variableDeclaration('let', [createVariableDeclarator(name, null)]),
+        t.variableDeclaration('let', [t.variableDeclarator(name)]),
       );
     }
     cacheLoads.push({name, index, value: wrapCacheDep(cx, name)});
@@ -1387,7 +1387,7 @@ function codegenInstructionNullable(
           suggestions: null,
         });
         return createVariableDeclaration(instr.loc, 'const', [
-          createVariableDeclarator(codegenLValue(cx, lvalue), value),
+          t.variableDeclarator(codegenLValue(cx, lvalue), value),
         ]);
       }
       case InstructionKind.Function: {
@@ -1451,7 +1451,7 @@ function codegenInstructionNullable(
           suggestions: null,
         });
         return createVariableDeclaration(instr.loc, 'let', [
-          createVariableDeclarator(codegenLValue(cx, lvalue), value),
+          t.variableDeclarator(codegenLValue(cx, lvalue), value),
         ]);
       }
       case InstructionKind.Reassign: {
@@ -1691,9 +1691,6 @@ function withLoc<T extends (...args: Array<any>) => t.Node>(
   };
 }
 
-const createIdentifier = withLoc(t.identifier);
-const createArrayPattern = withLoc(t.arrayPattern);
-const createObjectPattern = withLoc(t.objectPattern);
 const createBinaryExpression = withLoc(t.binaryExpression);
 const createExpressionStatement = withLoc(t.expressionStatement);
 const _createLabelledStatement = withLoc(t.labeledStatement);
@@ -1725,31 +1722,6 @@ const createTryStatement = withLoc(t.tryStatement);
 const createBreakStatement = withLoc(t.breakStatement);
 const createContinueStatement = withLoc(t.continueStatement);
 
-function createVariableDeclarator(
-  id: t.LVal,
-  init?: t.Expression | null,
-): t.VariableDeclarator {
-  const node = t.variableDeclarator(id, init);
-
-  /*
-   * The variable declarator location is not preserved in HIR, however, we can use the
-   * start location of the id and the end location of the init to recreate the
-   * exact original variable declarator location.
-   *
-   * Or if init is null, we likely have a declaration without an initializer, so we can use the id.loc.end as the end location.
-   */
-  if (id.loc && (init === null || init?.loc)) {
-    node.loc = {
-      start: id.loc.start,
-      end: init?.loc?.end ?? id.loc.end,
-      filename: id.loc.filename,
-      identifierName: undefined,
-    };
-  }
-
-  return node;
-}
-
 function createHookGuard(
   guard: ExternalFunction,
   context: ProgramContext,
@@ -1857,7 +1829,7 @@ function codegenInstruction(
       );
     } else {
       return createVariableDeclaration(instr.loc, 'const', [
-        createVariableDeclarator(
+        t.variableDeclarator(
           convertIdentifier(instr.lvalue.identifier),
           expressionValue,
         ),
@@ -2784,7 +2756,7 @@ function codegenArrayPattern(
 ): t.ArrayPattern {
   const hasHoles = !pattern.items.every(e => e.kind !== 'Hole');
   if (hasHoles) {
-    const result = createArrayPattern(pattern.loc, []);
+    const result = t.arrayPattern([]);
     /*
      * Older versions of babel have a validation bug fixed by
      * https://github.com/babel/babel/pull/10917
@@ -2805,8 +2777,7 @@ function codegenArrayPattern(
     }
     return result;
   } else {
-    return createArrayPattern(
-      pattern.loc,
+    return t.arrayPattern(
       pattern.items.map(item => {
         if (item.kind === 'Hole') {
           return null;
@@ -2826,8 +2797,7 @@ function codegenLValue(
       return codegenArrayPattern(cx, pattern);
     }
     case 'ObjectPattern': {
-      return createObjectPattern(
-        pattern.loc,
+      return t.objectPattern(
         pattern.properties.map(property => {
           if (property.kind === 'ObjectProperty') {
             const key = codegenObjectPropertyKey(cx, property.key);
@@ -2946,7 +2916,7 @@ function convertIdentifier(identifier: Identifier): t.Identifier {
       suggestions: null,
     },
   );
-  return createIdentifier(identifier.loc, identifier.name.value);
+  return t.identifier(identifier.name.value);
 }
 
 function compareScopeDependency(

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

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

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

@@ -141,7 +141,6 @@ export function validateExhaustiveDependencies(
         reactive,
         startMemo.depsLoc,
         ErrorCategory.MemoDependencies,
-        'all',
       );
       if (diagnostic != null) {
         error.pushDiagnostic(diagnostic);
@@ -160,7 +159,7 @@ export function validateExhaustiveDependencies(
       onStartMemoize,
       onFinishMemoize,
       onEffect: (inferred, manual, manualMemoLoc) => {
-        if (env.config.validateExhaustiveEffectDependencies === 'off') {
+        if (env.config.validateExhaustiveEffectDependencies === false) {
           return;
         }
         if (DEBUG) {
@@ -196,17 +195,12 @@ export function validateExhaustiveDependencies(
             });
           }
         }
-        const effectReportMode =
-          typeof env.config.validateExhaustiveEffectDependencies === 'string'
-            ? env.config.validateExhaustiveEffectDependencies
-            : 'all';
         const diagnostic = validateDependencies(
           Array.from(inferred),
           manualDeps,
           reactive,
           manualMemoLoc,
           ErrorCategory.EffectExhaustiveDependencies,
-          effectReportMode,
         );
         if (diagnostic != null) {
           error.pushDiagnostic(diagnostic);
@@ -226,7 +220,6 @@ function validateDependencies(
   category:
     | ErrorCategory.MemoDependencies
     | ErrorCategory.EffectExhaustiveDependencies,
-  exhaustiveDepsReportMode: 'all' | 'missing-only' | 'extra-only',
 ): CompilerDiagnostic | null {
   // Sort dependencies by name and path, with shorter/non-optional paths first
   inferred.sort((a, b) => {
@@ -377,20 +370,9 @@ function validateDependencies(
     extra.push(dep);
   }
 
-  // Filter based on report mode
-  const filteredMissing =
-    exhaustiveDepsReportMode === 'extra-only' ? [] : missing;
-  const filteredExtra =
-    exhaustiveDepsReportMode === 'missing-only' ? [] : extra;
-
-  if (filteredMissing.length !== 0 || filteredExtra.length !== 0) {
+  if (missing.length !== 0 || extra.length !== 0) {
     let suggestion: CompilerSuggestion | null = null;
-    if (
-      manualMemoLoc != null &&
-      typeof manualMemoLoc !== 'symbol' &&
-      manualMemoLoc.start.index != null &&
-      manualMemoLoc.end.index != null
-    ) {
+    if (manualMemoLoc != null && typeof manualMemoLoc !== 'symbol') {
       suggestion = {
         description: 'Update dependencies',
         range: [manualMemoLoc.start.index, manualMemoLoc.end.index],
@@ -406,13 +388,8 @@ function validateDependencies(
           .join(', ')}]`,
       };
     }
-    const diagnostic = createDiagnostic(
-      category,
-      filteredMissing,
-      filteredExtra,
-      suggestion,
-    );
-    for (const dep of filteredMissing) {
+    const diagnostic = createDiagnostic(category, missing, extra, suggestion);
+    for (const dep of missing) {
       let reactiveStableValueHint = '';
       if (isStableType(dep.identifier)) {
         reactiveStableValueHint =
@@ -425,7 +402,7 @@ function validateDependencies(
         loc: dep.loc,
       });
     }
-    for (const dep of filteredExtra) {
+    for (const dep of extra) {
       if (dep.root.kind === 'Global') {
         diagnostic.withDetails({
           kind: 'error',

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

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

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

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

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

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

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

@@ -27,11 +27,7 @@ import {Result} from '../Utils/Result';
 
 /**
  * Some common node types that are important for coverage tracking.
- * Based on istanbul-lib-instrument + some other common nodes we expect to be present in the generated AST.
- *
- * Note: For VariableDeclaration, VariableDeclarator, and Identifier, we enforce stricter validation
- * that requires both the source location AND node type to match in the generated AST. This ensures
- * that variable declarations maintain their structural integrity through compilation.
+ * Based on istanbul-lib-instrument
  */
 const IMPORTANT_INSTRUMENTED_TYPES = new Set([
   'ArrowFunctionExpression',
@@ -58,14 +54,6 @@ const IMPORTANT_INSTRUMENTED_TYPES = new Set([
   'LabeledStatement',
   'ConditionalExpression',
   'LogicalExpression',
-
-  /**
-   * Note: these aren't important for coverage tracking,
-   * but we still want to track them to ensure we aren't regressing them when
-   * we fix the source location tracking for other nodes.
-   */
-  'VariableDeclaration',
-  'Identifier',
 ]);
 
 /**
@@ -126,13 +114,10 @@ export function validateSourceLocations(
 ): Result<void, CompilerError> {
   const errors = new CompilerError();
 
-  /*
-   * Step 1: Collect important locations from the original source
-   * Note: Multiple node types can share the same location (e.g. VariableDeclarator and Identifier)
-   */
+  // Step 1: Collect important locations from the original source
   const importantOriginalLocations = new Map<
     string,
-    {loc: t.SourceLocation; nodeTypes: Set<string>}
+    {loc: t.SourceLocation; nodeType: string}
   >();
 
   func.traverse({
@@ -152,31 +137,20 @@ export function validateSourceLocations(
       // Collect the location if it exists
       if (node.loc) {
         const key = locationKey(node.loc);
-        const existing = importantOriginalLocations.get(key);
-        if (existing) {
-          existing.nodeTypes.add(node.type);
-        } else {
-          importantOriginalLocations.set(key, {
-            loc: node.loc,
-            nodeTypes: new Set([node.type]),
-          });
-        }
+        importantOriginalLocations.set(key, {
+          loc: node.loc,
+          nodeType: node.type,
+        });
       }
     },
   });
 
-  // Step 2: Collect all locations from the generated AST with their node types
-  const generatedLocations = new Map<string, Set<string>>();
+  // Step 2: Collect all locations from the generated AST
+  const generatedLocations = new Set<string>();
 
   function collectGeneratedLocations(node: t.Node): void {
     if (node.loc) {
-      const key = locationKey(node.loc);
-      const nodeTypes = generatedLocations.get(key);
-      if (nodeTypes) {
-        nodeTypes.add(node.type);
-      } else {
-        generatedLocations.set(key, new Set([node.type]));
-      }
+      generatedLocations.add(locationKey(node.loc));
     }
 
     // Use Babel's VISITOR_KEYS to traverse only actual node properties
@@ -209,86 +183,22 @@ export function validateSourceLocations(
     collectGeneratedLocations(outlined.fn.body);
   }
 
-  /*
-   * Step 3: Validate that all important locations are preserved
-   * For certain node types, also validate that the node type matches
-   */
-  const strictNodeTypes = new Set([
-    'VariableDeclaration',
-    'VariableDeclarator',
-    'Identifier',
-  ]);
-
-  const reportMissingLocation = (
-    loc: t.SourceLocation,
-    nodeType: string,
-  ): void => {
-    errors.pushDiagnostic(
-      CompilerDiagnostic.create({
-        category: ErrorCategory.Todo,
-        reason: 'Important source location missing in generated code',
-        description:
-          `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.`,
-      }).withDetails({
-        kind: 'error',
-        loc,
-        message: null,
-      }),
-    );
-  };
-
-  const reportWrongNodeType = (
-    loc: t.SourceLocation,
-    expectedType: string,
-    actualTypes: Set<string>,
-  ): void => {
-    errors.pushDiagnostic(
-      CompilerDiagnostic.create({
-        category: ErrorCategory.Todo,
-        reason:
-          'Important source location has wrong node type in generated code',
-        description:
-          `Source location for ${expectedType} exists in the generated output but with wrong node type(s): ${Array.from(actualTypes).join(', ')}. ` +
-          `This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports.`,
-      }).withDetails({
-        kind: 'error',
-        loc,
-        message: null,
-      }),
-    );
-  };
-
-  for (const [key, {loc, nodeTypes}] of importantOriginalLocations) {
-    const generatedNodeTypes = generatedLocations.get(key);
-
-    if (!generatedNodeTypes) {
-      // Location is completely missing
-      reportMissingLocation(loc, Array.from(nodeTypes).join(', '));
-    } else {
-      // Location exists, check each node type
-      for (const nodeType of nodeTypes) {
-        if (
-          strictNodeTypes.has(nodeType) &&
-          !generatedNodeTypes.has(nodeType)
-        ) {
-          /*
-           * For strict node types, the specific node type must be present
-           * Check if any generated node type is also an important original node type
-           */
-          const hasValidNodeType = Array.from(generatedNodeTypes).some(
-            genType => nodeTypes.has(genType),
-          );
-
-          if (hasValidNodeType) {
-            // At least one generated node type is valid (also in original), so this is just missing
-            reportMissingLocation(loc, nodeType);
-          } else {
-            // None of the generated node types are in original - this is wrong node type
-            reportWrongNodeType(loc, nodeType, generatedNodeTypes);
-          }
-        }
-      }
+  // Step 3: Validate that all important locations are preserved
+  for (const [key, {loc, nodeType}] of importantOriginalLocations) {
+    if (!generatedLocations.has(key)) {
+      errors.pushDiagnostic(
+        CompilerDiagnostic.create({
+          category: ErrorCategory.Todo,
+          reason: 'Important source location missing in generated code',
+          description:
+            `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.`,
+        }).withDetails({
+          kind: 'error',
+          loc,
+          message: null,
+        }),
+      );
     }
   }
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver-and-mutate.expect.md

@@ -35,8 +35,10 @@ function Component() {
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     const a = makeObject_Primitives();
+
     const x = [];
     x.push(a);
+
     mutate(x);
     t0 = [x, a];
     $[0] = t0;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver.expect.md

@@ -33,6 +33,7 @@ function Component() {
   if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
     const x = [];
     x.push(a);
+
     t1 = [x, a];
     $[1] = t1;
   } else {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/aliased-nested-scope-fn-expr.expect.md

@@ -85,10 +85,14 @@ function Component(t0) {
   let t1;
   if ($[0] !== prop) {
     const obj = shallowCopy(prop);
+
     const aliasedObj = identity(obj);
+
     const getId = () => obj.id;
+
     mutate(aliasedObj);
     setPropertyByKey(aliasedObj, "id", prop.id + 1);
+
     t1 = <Stringify getId={getId} shouldInvokeFns={true} />;
     $[0] = prop;
     $[1] = t1;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/aliased-nested-scope-truncated-dep.expect.md

@@ -181,9 +181,12 @@ function Component(t0) {
   if ($[0] !== prop) {
     const obj = shallowCopy(prop);
     const aliasedObj = identity(obj);
+
     const id = [obj.id];
+
     mutate(aliasedObj);
     setPropertyByKey(aliasedObj, "id", prop.id + 1);
+
     t1 = <Stringify id={id} />;
     $[0] = prop;
     $[1] = t1;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/align-scopes-within-nested-valueblock-in-array.expect.md

@@ -54,6 +54,7 @@ function Foo(t0) {
   let t1;
   if ($[0] !== cond1 || $[1] !== cond2) {
     const arr = makeArray({ a: 2 }, 2, []);
+
     t1 = cond1 ? (
       <>
         <div>{identity("foo")}</div>

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

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

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-in-callback-passed-to-jsx-indirect.expect.md

@@ -49,6 +49,7 @@ function Component() {
         ref.current = "";
       }
     };
+
     t0 = () => {
       setRef();
     };

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-mutating-ref-property-in-callback-passed-to-jsx-indirect.expect.md

@@ -49,6 +49,7 @@ function Component() {
         ref.current.value = "";
       }
     };
+
     t0 = () => {
       setRef();
     };

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

@@ -74,6 +74,7 @@ function Component() {
         console.log(ref.current.value);
       }
     };
+
     t0 = (
       <>
         <input ref={ref} />

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allow-ref-type-cast-in-render.expect.md

@@ -36,6 +36,7 @@ function useArrayOfRef() {
     const callback = (value) => {
       ref.current = value;
     };
+
     t0 = [callback];
     $[0] = t0;
   } else {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-closure.expect.md

@@ -35,6 +35,7 @@ function Component(props) {
       const arr = [...bar(props)];
       return arr.at(x);
     };
+
     t1 = fn();
     $[2] = props;
     $[3] = x;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-spread-mutable-iterator.expect.md

@@ -61,6 +61,7 @@ function useBar(t0) {
   if ($[0] !== arg) {
     const s = new Set([1, 5, 4]);
     const mutableIterator = s.values();
+
     t1 = [arg, ...mutableIterator];
     $[0] = arg;
     $[1] = t1;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/call.expect.md

@@ -28,6 +28,7 @@ function Component(props) {
     const a = [];
     const b = {};
     foo(a, b);
+
     foo(b);
     t0 = <div a={a} b={b} />;
     $[0] = t0;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capture-ref-for-later-mutation.expect.md

@@ -45,6 +45,7 @@ function useKeyCommand() {
       const nextPosition = direction === "left" ? addOne(position) : position;
       currentPosition.current = nextPosition;
     };
+
     const moveLeft = { handler: handleKey("left") };
     const moveRight = { handler: handleKey("right") };
     t0 = [moveLeft, moveRight];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-mutate.expect.md

@@ -45,6 +45,7 @@ function Component(t0) {
       z.a = 2;
       mutate(y.b);
     };
+
     x();
     t1 = [y, z];
     $[0] = a;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-emit-make-read-only.expect.md

@@ -29,6 +29,7 @@ function MyComponentName(props) {
     const x = {};
     foo(x, props.a);
     foo(x, props.b);
+
     y = [];
     y.push(x);
     $[0] = props.a;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife-reassign.expect.md

@@ -34,6 +34,7 @@ function useTest() {
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     let w = {};
+
     const t1 = (w = 42);
     const t2 = w;
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-inline-iife-storeprop.expect.md

@@ -34,6 +34,7 @@ function useTest() {
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     const w = {};
+
     const t1 = (w.x = 42);
     const t2 = w.x;
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/conditional-on-mutable.expect.md

@@ -44,9 +44,11 @@ function ComponentA(props) {
     if (b) {
       a.push(props.p0);
     }
+
     if (props.p1) {
       b.push(props.p2);
     }
+
     t0 = <Foo a={a} b={b} />;
     $[0] = props.p0;
     $[1] = props.p1;
@@ -67,9 +69,11 @@ function ComponentB(props) {
     if (mayMutate(b)) {
       a.push(props.p0);
     }
+
     if (props.p1) {
       b.push(props.p2);
     }
+
     t0 = <Foo a={a} b={b} />;
     $[0] = props.p0;
     $[1] = props.p1;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/constructor.expect.md

@@ -28,6 +28,7 @@ function Component(props) {
     const a = [];
     const b = {};
     new Foo(a, b);
+
     new Foo(b);
     t0 = <div a={a} b={b} />;
     $[0] = t0;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/context-variable-reassigned-outside-of-lambda.expect.md

@@ -34,6 +34,7 @@ function Component(props) {
     const callback = () => {
       console.log(x);
     };
+
     x = {};
     t0 = <Stringify callback={callback} shouldInvokeFns={true} />;
     $[0] = t0;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-and-local-variables-with-default.expect.md

@@ -75,6 +75,7 @@ function Component(props) {
   let t0;
   if ($[0] !== post) {
     const allUrls = [];
+
     const { media: t1, comments: t2, urls: t3 } = post;
     const media = t1 === undefined ? null : t1;
     let t4;
@@ -101,6 +102,7 @@ function Component(props) {
         if (!comments.length) {
           return;
         }
+
         console.log(comments.length);
       };
       $[6] = comments.length;
@@ -109,6 +111,7 @@ function Component(props) {
       t6 = $[7];
     }
     const onClick = t6;
+
     allUrls.push(...urls);
     t0 = <Stringify media={media} allUrls={allUrls} onClick={onClick} />;
     $[0] = post;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/destructuring-mixed-scope-declarations-and-locals.expect.md

@@ -53,6 +53,7 @@ function Component(props) {
   let t0;
   if ($[0] !== post) {
     const allUrls = [];
+
     const { media, comments, urls } = post;
     let t1;
     if ($[2] !== comments.length) {
@@ -60,6 +61,7 @@ function Component(props) {
         if (!comments.length) {
           return;
         }
+
         console.log(comments.length);
       };
       $[2] = comments.length;
@@ -68,6 +70,7 @@ function Component(props) {
       t1 = $[3];
     }
     const onClick = t1;
+
     allUrls.push(...urls);
     t0 = <Media media={media} onClick={onClick} />;
     $[0] = post;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/dont-merge-if-dep-is-inner-declaration-of-previous-scope.expect.md

@@ -57,6 +57,7 @@ function Component(t0) {
   let y;
   if ($[0] !== a || $[1] !== b || $[2] !== c) {
     x = [];
+
     if (a) {
       let t1;
       if ($[5] !== b) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-conditionally-in-effect.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 function Component({value, enabled}) {
@@ -29,21 +29,43 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import { useEffect, useState } from "react";
 
-function Component({ value, enabled }) {
+function Component(t0) {
+  const $ = _c(6);
+  const { value, enabled } = t0;
   const [localValue, setLocalValue] = useState("");
+  let t1;
+  let t2;
+  if ($[0] !== enabled || $[1] !== value) {
+    t1 = () => {
+      if (enabled) {
+        setLocalValue(value);
+      } else {
+        setLocalValue("disabled");
+      }
+    };
 
-  useEffect(() => {
-    if (enabled) {
-      setLocalValue(value);
-    } else {
-      setLocalValue("disabled");
-    }
-  }, [value, enabled]);
-
-  return <div>{localValue}</div>;
+    t2 = [value, enabled];
+    $[0] = enabled;
+    $[1] = value;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[4] !== localValue) {
+    t3 = <div>{localValue}</div>;
+    $[4] = localValue;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  return t3;
 }
 
 export const FIXTURE_ENTRYPOINT = {
@@ -56,8 +78,8 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [value]\n\nData Flow Tree:\n└── value (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":9,"column":6,"index":263},"end":{"line":9,"column":19,"index":276},"filename":"derived-state-conditionally-in-effect.ts","identifierName":"setLocalValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":126},"end":{"line":16,"column":1,"index":397},"filename":"derived-state-conditionally-in-effect.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [value]\n\nData Flow Tree:\n└── value (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":9,"column":6,"index":244},"end":{"line":9,"column":19,"index":257},"filename":"derived-state-conditionally-in-effect.ts","identifierName":"setLocalValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":16,"column":1,"index":378},"filename":"derived-state-conditionally-in-effect.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       
 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-conditionally-in-effect.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 function Component({value, enabled}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-default-props.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 export default function Component({input = 'empty'}) {
@@ -26,18 +26,38 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import { useEffect, useState } from "react";
 
-export default function Component({ input = "empty" }) {
+export default function Component(t0) {
+  const $ = _c(5);
+  const { input: t1 } = t0;
+  const input = t1 === undefined ? "empty" : t1;
   const [currInput, setCurrInput] = useState(input);
-  const localConst = "local const";
-
-  useEffect(() => {
-    setCurrInput(input + localConst);
-  }, [input, localConst]);
-
-  return <div>{currInput}</div>;
+  let t2;
+  let t3;
+  if ($[0] !== input) {
+    t2 = () => {
+      setCurrInput(input + "local const");
+    };
+    t3 = [input, "local const"];
+    $[0] = input;
+    $[1] = t2;
+    $[2] = t3;
+  } else {
+    t2 = $[1];
+    t3 = $[2];
+  }
+  useEffect(t2, t3);
+  let t4;
+  if ($[3] !== currInput) {
+    t4 = <div>{currInput}</div>;
+    $[3] = currInput;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  return t4;
 }
 
 export const FIXTURE_ENTRYPOINT = {
@@ -50,8 +70,8 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [input]\n\nData Flow Tree:\n└── input (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":9,"column":4,"index":295},"end":{"line":9,"column":16,"index":307},"filename":"derived-state-from-default-props.ts","identifierName":"setCurrInput"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":141},"end":{"line":13,"column":1,"index":391},"filename":"derived-state-from-default-props.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [input]\n\nData Flow Tree:\n└── input (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":9,"column":4,"index":276},"end":{"line":9,"column":16,"index":288},"filename":"derived-state-from-default-props.ts","identifierName":"setCurrInput"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":122},"end":{"line":13,"column":1,"index":372},"filename":"derived-state-from-default-props.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       
 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-default-props.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 export default function Component({input = 'empty'}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-local-state-in-effect.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 
 import {useEffect, useState} from 'react';
 
@@ -23,20 +23,45 @@ function Component({shouldChange}) {
 ## Code
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 
 import { useEffect, useState } from "react";
 
-function Component({ shouldChange }) {
+function Component(t0) {
+  const $ = _c(7);
+  const { shouldChange } = t0;
   const [count, setCount] = useState(0);
-
-  useEffect(() => {
-    if (shouldChange) {
-      setCount(count + 1);
-    }
-  }, [count]);
-
-  return <div>{count}</div>;
+  let t1;
+  if ($[0] !== count || $[1] !== shouldChange) {
+    t1 = () => {
+      if (shouldChange) {
+        setCount(count + 1);
+      }
+    };
+    $[0] = count;
+    $[1] = shouldChange;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== count) {
+    t2 = [count];
+    $[3] = count;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[5] !== count) {
+    t3 = <div>{count}</div>;
+    $[5] = count;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
 }
 
 ```
@@ -44,8 +69,8 @@ function Component({ shouldChange }) {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [count]\n\nData Flow Tree:\n└── count (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":10,"column":6,"index":256},"end":{"line":10,"column":14,"index":264},"filename":"derived-state-from-local-state-in-effect.ts","identifierName":"setCount"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":127},"end":{"line":15,"column":1,"index":329},"filename":"derived-state-from-local-state-in-effect.ts"},"fnName":"Component","memoSlots":7,"memoBlocks":3,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [count]\n\nData Flow Tree:\n└── count (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":10,"column":6,"index":237},"end":{"line":10,"column":14,"index":245},"filename":"derived-state-from-local-state-in-effect.ts","identifierName":"setCount"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":108},"end":{"line":15,"column":1,"index":310},"filename":"derived-state-from-local-state-in-effect.ts"},"fnName":"Component","memoSlots":7,"memoBlocks":3,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       
 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-local-state-in-effect.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 
 import {useEffect, useState} from 'react';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-local-state-and-component-scope.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 function Component({firstName}) {
@@ -33,25 +33,68 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import { useEffect, useState } from "react";
 
-function Component({ firstName }) {
+function Component(t0) {
+  const $ = _c(12);
+  const { firstName } = t0;
   const [lastName, setLastName] = useState("Doe");
   const [fullName, setFullName] = useState("John");
-
-  const middleName = "D.";
-
-  useEffect(() => {
-    setFullName(firstName + " " + middleName + " " + lastName);
-  }, [firstName, middleName, lastName]);
-
-  return (
-    <div>
-      <input value={lastName} onChange={(e) => setLastName(e.target.value)} />
-      <div>{fullName}</div>
-    </div>
-  );
+  let t1;
+  let t2;
+  if ($[0] !== firstName || $[1] !== lastName) {
+    t1 = () => {
+      setFullName(firstName + " " + "D." + " " + lastName);
+    };
+    t2 = [firstName, "D.", lastName];
+    $[0] = firstName;
+    $[1] = lastName;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = (e) => setLastName(e.target.value);
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== lastName) {
+    t4 = <input value={lastName} onChange={t3} />;
+    $[5] = lastName;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== fullName) {
+    t5 = <div>{fullName}</div>;
+    $[7] = fullName;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== t4 || $[10] !== t5) {
+    t6 = (
+      <div>
+        {t4}
+        {t5}
+      </div>
+    );
+    $[9] = t4;
+    $[10] = t5;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  return t6;
 }
 
 export const FIXTURE_ENTRYPOINT = {
@@ -64,8 +107,8 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [firstName]\nState: [lastName]\n\nData Flow Tree:\n├── firstName (Prop)\n└── lastName (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":11,"column":4,"index":316},"end":{"line":11,"column":15,"index":327},"filename":"derived-state-from-prop-local-state-and-component-scope.ts","identifierName":"setFullName"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":126},"end":{"line":20,"column":1,"index":561},"filename":"derived-state-from-prop-local-state-and-component-scope.ts"},"fnName":"Component","memoSlots":12,"memoBlocks":5,"memoValues":6,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [firstName]\nState: [lastName]\n\nData Flow Tree:\n├── firstName (Prop)\n└── lastName (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":11,"column":4,"index":297},"end":{"line":11,"column":15,"index":308},"filename":"derived-state-from-prop-local-state-and-component-scope.ts","identifierName":"setFullName"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":20,"column":1,"index":542},"filename":"derived-state-from-prop-local-state-and-component-scope.ts"},"fnName":"Component","memoSlots":12,"memoBlocks":5,"memoValues":6,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       
 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-local-state-and-component-scope.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 function Component({firstName}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 function Component({initialName}) {
@@ -29,21 +29,48 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import { useEffect, useState } from "react";
 
-function Component({ initialName }) {
+function Component(t0) {
+  const $ = _c(6);
+  const { initialName } = t0;
   const [name, setName] = useState("");
-
-  useEffect(() => {
-    setName(initialName);
-  }, [initialName]);
-
-  return (
-    <div>
-      <input value={name} onChange={(e) => setName(e.target.value)} />
-    </div>
-  );
+  let t1;
+  let t2;
+  if ($[0] !== initialName) {
+    t1 = () => {
+      setName(initialName);
+    };
+    t2 = [initialName];
+    $[0] = initialName;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = (e) => setName(e.target.value);
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== name) {
+    t4 = (
+      <div>
+        <input value={name} onChange={t3} />
+      </div>
+    );
+    $[4] = name;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  return t4;
 }
 
 export const FIXTURE_ENTRYPOINT = {
@@ -56,7 +83,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":126},"end":{"line":16,"column":1,"index":378},"filename":"derived-state-from-prop-setter-call-outside-effect-no-error.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":3,"memoValues":4,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":16,"column":1,"index":359},"filename":"derived-state-from-prop-setter-call-outside-effect-no-error.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":3,"memoValues":4,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       
 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-call-outside-effect-no-error.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 function Component({initialName}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-ternary.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp
 
 function Component({value}) {
   const [checked, setChecked] = useState('');
@@ -19,16 +19,36 @@ function Component({value}) {
 ## Code
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @outputMode:"lint"
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp
 
-function Component({ value }) {
+function Component(t0) {
+  const $ = _c(5);
+  const { value } = t0;
   const [checked, setChecked] = useState("");
-
-  useEffect(() => {
-    setChecked(value === "" ? [] : value.split(","));
-  }, [value]);
-
-  return <div>{checked}</div>;
+  let t1;
+  let t2;
+  if ($[0] !== value) {
+    t1 = () => {
+      setChecked(value === "" ? [] : value.split(","));
+    };
+    t2 = [value];
+    $[0] = value;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] !== checked) {
+    t3 = <div>{checked}</div>;
+    $[3] = checked;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
 }
 
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-ternary.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp
 
 function Component({value}) {
   const [checked, setChecked] = useState('');

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 function MockComponent({onSet}) {
@@ -28,20 +28,50 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import { useEffect, useState } from "react";
 
-function MockComponent({ onSet }) {
-  return <div onClick={() => onSet("clicked")}>Mock Component</div>;
+function MockComponent(t0) {
+  const $ = _c(2);
+  const { onSet } = t0;
+  let t1;
+  if ($[0] !== onSet) {
+    t1 = <div onClick={() => onSet("clicked")}>Mock Component</div>;
+    $[0] = onSet;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
 }
 
-function Component({ propValue }) {
-  const [value, setValue] = useState(null);
-  useEffect(() => {
-    setValue(propValue);
-  }, [propValue]);
-
-  return <MockComponent onSet={setValue} />;
+function Component(t0) {
+  const $ = _c(4);
+  const { propValue } = t0;
+  const [, setValue] = useState(null);
+  let t1;
+  let t2;
+  if ($[0] !== propValue) {
+    t1 = () => {
+      setValue(propValue);
+    };
+    t2 = [propValue];
+    $[0] = propValue;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = <MockComponent onSet={setValue} />;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  return t3;
 }
 
 export const FIXTURE_ENTRYPOINT = {
@@ -54,8 +84,8 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":126},"end":{"line":6,"column":1,"index":230},"filename":"derived-state-from-prop-setter-used-outside-effect-no-error.ts"},"fnName":"MockComponent","memoSlots":2,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":8,"column":0,"index":232},"end":{"line":15,"column":1,"index":421},"filename":"derived-state-from-prop-setter-used-outside-effect-no-error.ts"},"fnName":"Component","memoSlots":4,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":6,"column":1,"index":211},"filename":"derived-state-from-prop-setter-used-outside-effect-no-error.ts"},"fnName":"MockComponent","memoSlots":2,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":8,"column":0,"index":213},"end":{"line":15,"column":1,"index":402},"filename":"derived-state-from-prop-setter-used-outside-effect-no-error.ts"},"fnName":"Component","memoSlots":4,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       
 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-setter-used-outside-effect-no-error.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 function MockComponent({onSet}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-with-side-effect.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 function Component({value}) {
@@ -26,18 +26,38 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import { useEffect, useState } from "react";
 
-function Component({ value }) {
+function Component(t0) {
+  const $ = _c(5);
+  const { value } = t0;
   const [localValue, setLocalValue] = useState("");
-
-  useEffect(() => {
-    setLocalValue(value);
-    document.title = `Value: ${value}`;
-  }, [value]);
-
-  return <div>{localValue}</div>;
+  let t1;
+  let t2;
+  if ($[0] !== value) {
+    t1 = () => {
+      setLocalValue(value);
+      document.title = `Value: ${value}`;
+    };
+    t2 = [value];
+    $[0] = value;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] !== localValue) {
+    t3 = <div>{localValue}</div>;
+    $[3] = localValue;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
 }
 
 export const FIXTURE_ENTRYPOINT = {
@@ -50,8 +70,8 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [value]\n\nData Flow Tree:\n└── value (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":8,"column":4,"index":233},"end":{"line":8,"column":17,"index":246},"filename":"derived-state-from-prop-with-side-effect.ts","identifierName":"setLocalValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":126},"end":{"line":13,"column":1,"index":346},"filename":"derived-state-from-prop-with-side-effect.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [value]\n\nData Flow Tree:\n└── value (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":8,"column":4,"index":214},"end":{"line":8,"column":17,"index":227},"filename":"derived-state-from-prop-with-side-effect.ts","identifierName":"setLocalValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":13,"column":1,"index":327},"filename":"derived-state-from-prop-with-side-effect.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       
 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-prop-with-side-effect.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 function Component({value}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState, useRef} from 'react';
 
 export default function Component({test}) {
@@ -27,19 +27,39 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import { useEffect, useState, useRef } from "react";
 
-export default function Component({ test }) {
+export default function Component(t0) {
+  const $ = _c(5);
+  const { test } = t0;
   const [local, setLocal] = useState("");
 
   const myRef = useRef(null);
-
-  useEffect(() => {
-    setLocal(myRef.current + test);
-  }, [test]);
-
-  return <>{local}</>;
+  let t1;
+  let t2;
+  if ($[0] !== test) {
+    t1 = () => {
+      setLocal(myRef.current + test);
+    };
+    t2 = [test];
+    $[0] = test;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] !== local) {
+    t3 = <>{local}</>;
+    $[3] = local;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
 }
 
 export const FIXTURE_ENTRYPOINT = {
@@ -52,7 +72,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":149},"end":{"line":14,"column":1,"index":347},"filename":"derived-state-from-ref-and-state-no-error.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":130},"end":{"line":14,"column":1,"index":328},"filename":"derived-state-from-ref-and-state-no-error.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       
 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/derived-state-from-ref-and-state-no-error.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState, useRef} from 'react';
 
 export default function Component({test}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-local-function-call.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 function Component({propValue}) {
@@ -30,22 +30,48 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import { useEffect, useState } from "react";
 
-function Component({ propValue }) {
+function Component(t0) {
+  const $ = _c(6);
+  const { propValue } = t0;
   const [value, setValue] = useState(null);
-
-  function localFunction() {
-    console.log("local function");
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = function localFunction() {
+      console.log("local function");
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
   }
-
-  useEffect(() => {
-    setValue(propValue);
-    localFunction();
-  }, [propValue]);
-
-  return <div>{value}</div>;
+  const localFunction = t1;
+  let t2;
+  let t3;
+  if ($[1] !== propValue) {
+    t2 = () => {
+      setValue(propValue);
+      localFunction();
+    };
+    t3 = [propValue];
+    $[1] = propValue;
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t2 = $[2];
+    t3 = $[3];
+  }
+  useEffect(t2, t3);
+  let t4;
+  if ($[4] !== value) {
+    t4 = <div>{value}</div>;
+    $[4] = value;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  return t4;
 }
 
 export const FIXTURE_ENTRYPOINT = {
@@ -58,8 +84,8 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [propValue]\n\nData Flow Tree:\n└── propValue (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":12,"column":4,"index":298},"end":{"line":12,"column":12,"index":306},"filename":"effect-contains-local-function-call.ts","identifierName":"setValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":126},"end":{"line":17,"column":1,"index":390},"filename":"effect-contains-local-function-call.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":3,"memoValues":4,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [propValue]\n\nData Flow Tree:\n└── propValue (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":12,"column":4,"index":279},"end":{"line":12,"column":12,"index":287},"filename":"effect-contains-local-function-call.ts","identifierName":"setValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":17,"column":1,"index":371},"filename":"effect-contains-local-function-call.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":3,"memoValues":4,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       
 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-local-function-call.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 function Component({propValue}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 function Component({propValue, onChange}) {
@@ -25,17 +25,43 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import { useEffect, useState } from "react";
 
-function Component({ propValue, onChange }) {
+function Component(t0) {
+  const $ = _c(7);
+  const { propValue, onChange } = t0;
   const [value, setValue] = useState(null);
-  useEffect(() => {
-    setValue(propValue);
-    onChange();
-  }, [propValue]);
-
-  return <div>{value}</div>;
+  let t1;
+  if ($[0] !== onChange || $[1] !== propValue) {
+    t1 = () => {
+      setValue(propValue);
+      onChange();
+    };
+    $[0] = onChange;
+    $[1] = propValue;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== propValue) {
+    t2 = [propValue];
+    $[3] = propValue;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[5] !== value) {
+    t3 = <div>{value}</div>;
+    $[5] = value;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
 }
 
 export const FIXTURE_ENTRYPOINT = {
@@ -48,8 +74,8 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":126},"end":{"line":12,"column":1,"index":325},"filename":"effect-contains-prop-function-call-no-error.ts"},"fnName":"Component","memoSlots":7,"memoBlocks":3,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":16,"column":41,"index":421},"end":{"line":16,"column":49,"index":429},"filename":"effect-contains-prop-function-call-no-error.ts"},"fnName":null,"memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":12,"column":1,"index":306},"filename":"effect-contains-prop-function-call-no-error.ts"},"fnName":"Component","memoSlots":7,"memoBlocks":3,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":16,"column":41,"index":402},"end":{"line":16,"column":49,"index":410},"filename":"effect-contains-prop-function-call-no-error.ts"},"fnName":null,"memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       
 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-contains-prop-function-call-no-error.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 function Component({propValue, onChange}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-used-in-dep-array-still-errors.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 
 function Component({prop}) {
   const [s, setS] = useState(0);
@@ -18,15 +18,36 @@ function Component({prop}) {
 ## Code
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 
-function Component({ prop }) {
-  const [s, setS] = useState(0);
-  useEffect(() => {
-    setS(prop);
-  }, [prop, setS]);
-
-  return <div>{prop}</div>;
+function Component(t0) {
+  const $ = _c(5);
+  const { prop } = t0;
+  const [, setS] = useState(0);
+  let t1;
+  let t2;
+  if ($[0] !== prop) {
+    t1 = () => {
+      setS(prop);
+    };
+    t2 = [prop, setS];
+    $[0] = prop;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] !== prop) {
+    t3 = <div>{prop}</div>;
+    $[3] = prop;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
 }
 
 ```
@@ -34,8 +55,8 @@ function Component({ prop }) {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [prop]\n\nData Flow Tree:\n└── prop (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":6,"column":4,"index":169},"end":{"line":6,"column":8,"index":173},"filename":"effect-used-in-dep-array-still-errors.ts","identifierName":"setS"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":83},"end":{"line":10,"column":1,"index":231},"filename":"effect-used-in-dep-array-still-errors.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [prop]\n\nData Flow Tree:\n└── prop (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":6,"column":4,"index":150},"end":{"line":6,"column":8,"index":154},"filename":"effect-used-in-dep-array-still-errors.ts","identifierName":"setS"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":64},"end":{"line":10,"column":1,"index":212},"filename":"effect-used-in-dep-array-still-errors.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       
 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-used-in-dep-array-still-errors.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 
 function Component({prop}) {
   const [s, setS] = useState(0);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-cleanup-function-depending-on-derived-computation-value.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 
 import {useEffect, useState} from 'react';
 
@@ -29,26 +29,39 @@ function Component(file: File) {
 ## Code
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 
 import { useEffect, useState } from "react";
 
-function Component(file: File) {
+function Component(file) {
+  const $ = _c(5);
   const [imageUrl, setImageUrl] = useState(null);
-
-  /*
-   * Cleaning up the variable or a source of the variable used to setState
-   * inside the effect communicates that we always need to clean up something
-   * which is a valid use case for useEffect. In which case we want to
-   * avoid an throwing
-   */
-  useEffect(() => {
-    const imageUrlPrepared = URL.createObjectURL(file);
-    setImageUrl(imageUrlPrepared);
-    return () => URL.revokeObjectURL(imageUrlPrepared);
-  }, [file]);
-
-  return <Image src={imageUrl} xstyle={styles.imageSizeLimits} />;
+  let t0;
+  let t1;
+  if ($[0] !== file) {
+    t0 = () => {
+      const imageUrlPrepared = URL.createObjectURL(file);
+      setImageUrl(imageUrlPrepared);
+      return () => URL.revokeObjectURL(imageUrlPrepared);
+    };
+    t1 = [file];
+    $[0] = file;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  useEffect(t0, t1);
+  let t2;
+  if ($[3] !== imageUrl) {
+    t2 = <Image src={imageUrl} xstyle={styles.imageSizeLimits} />;
+    $[3] = imageUrl;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
 }
 
 ```
@@ -56,7 +69,7 @@ function Component(file: File) {
 ## Logs
 
 ```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":127},"end":{"line":21,"column":1,"index":719},"filename":"effect-with-cleanup-function-depending-on-derived-computation-value.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":108},"end":{"line":21,"column":1,"index":700},"filename":"effect-with-cleanup-function-depending-on-derived-computation-value.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       
 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-cleanup-function-depending-on-derived-computation-value.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 
 import {useEffect, useState} from 'react';
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 function Component({propValue}) {
@@ -25,17 +25,38 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import { useEffect, useState } from "react";
 
-function Component({ propValue }) {
+function Component(t0) {
+  const $ = _c(5);
+  const { propValue } = t0;
   const [value, setValue] = useState(null);
-  useEffect(() => {
-    setValue(propValue);
-    globalCall();
-  }, [propValue]);
-
-  return <div>{value}</div>;
+  let t1;
+  let t2;
+  if ($[0] !== propValue) {
+    t1 = () => {
+      setValue(propValue);
+      globalCall();
+    };
+    t2 = [propValue];
+    $[0] = propValue;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] !== value) {
+    t3 = <div>{value}</div>;
+    $[3] = value;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
 }
 
 export const FIXTURE_ENTRYPOINT = {
@@ -48,7 +69,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":126},"end":{"line":12,"column":1,"index":317},"filename":"effect-with-global-function-call-no-error.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":12,"column":1,"index":298},"filename":"effect-with-global-function-call-no-error.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       
 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/effect-with-global-function-call-no-error.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 function Component({propValue}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/from-props-setstate-in-effect-no-error.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @enableTreatSetIdentifiersAsStateSetters @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @enableTreatSetIdentifiersAsStateSetters @loggerTestOnly
 
 function Component({setParentState, prop}) {
   useEffect(() => {
@@ -17,14 +17,40 @@ function Component({setParentState, prop}) {
 ## Code
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @enableTreatSetIdentifiersAsStateSetters @loggerTestOnly @outputMode:"lint"
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @enableTreatSetIdentifiersAsStateSetters @loggerTestOnly
 
-function Component({ setParentState, prop }) {
-  useEffect(() => {
-    setParentState(prop);
-  }, [prop]);
-
-  return <div>{prop}</div>;
+function Component(t0) {
+  const $ = _c(7);
+  const { setParentState, prop } = t0;
+  let t1;
+  if ($[0] !== prop || $[1] !== setParentState) {
+    t1 = () => {
+      setParentState(prop);
+    };
+    $[0] = prop;
+    $[1] = setParentState;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== prop) {
+    t2 = [prop];
+    $[3] = prop;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[5] !== prop) {
+    t3 = <div>{prop}</div>;
+    $[5] = prop;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
 }
 
 ```
@@ -32,7 +58,7 @@ function Component({ setParentState, prop }) {
 ## Logs
 
 ```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":124},"end":{"line":9,"column":1,"index":259},"filename":"from-props-setstate-in-effect-no-error.ts"},"fnName":"Component","memoSlots":7,"memoBlocks":3,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":105},"end":{"line":9,"column":1,"index":240},"filename":"from-props-setstate-in-effect-no-error.ts"},"fnName":"Component","memoSlots":7,"memoBlocks":3,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       
 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/from-props-setstate-in-effect-no-error.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @enableTreatSetIdentifiersAsStateSetters @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @enableTreatSetIdentifiersAsStateSetters @loggerTestOnly
 
 function Component({setParentState, prop}) {
   useEffect(() => {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/function-expression-mutation-edge-case.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 
 function Component() {
   const [foo, setFoo] = useState({});
@@ -40,37 +40,66 @@ function Component() {
 ## Code
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 
 function Component() {
-  const [foo, setFoo] = useState({});
-  const [bar, setBar] = useState(new Set());
+  const $ = _c(9);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {};
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  const [foo, setFoo] = useState(t0);
+  let t1;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = new Set();
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const [bar] = useState(t1);
+  let t2;
+  let t3;
+  if ($[2] !== bar || $[3] !== foo) {
+    t2 = () => {
+      let isChanged = false;
 
-  /*
-   * isChanged is considered context of the effect's function expression,
-   * if we don't bail out of effect mutation derivation tracking, isChanged
-   * will inherit the sources of the effect's function expression.
-   *
-   * This is innacurate and with the multiple passes ends up causing an infinite loop.
-   */
-  useEffect(() => {
-    let isChanged = false;
+      const newData = foo.map((val) => {
+        bar.someMethod(val);
+        isChanged = true;
+      });
 
-    const newData = foo.map((val) => {
-      bar.someMethod(val);
-      isChanged = true;
-    });
+      if (isChanged) {
+        setFoo(newData);
+      }
+    };
 
-    if (isChanged) {
-      setFoo(newData);
-    }
-  }, [foo, bar]);
-
-  return (
-    <div>
-      {foo}, {bar}
-    </div>
-  );
+    t3 = [foo, bar];
+    $[2] = bar;
+    $[3] = foo;
+    $[4] = t2;
+    $[5] = t3;
+  } else {
+    t2 = $[4];
+    t3 = $[5];
+  }
+  useEffect(t2, t3);
+  let t4;
+  if ($[6] !== bar || $[7] !== foo) {
+    t4 = (
+      <div>
+        {foo}, {bar}
+      </div>
+    );
+    $[6] = bar;
+    $[7] = foo;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  return t4;
 }
 
 ```
@@ -78,8 +107,8 @@ function Component() {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [foo, bar]\n\nData Flow Tree:\n└── newData\n    ├── foo (State)\n    └── bar (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":23,"column":6,"index":682},"end":{"line":23,"column":12,"index":688},"filename":"function-expression-mutation-edge-case.ts","identifierName":"setFoo"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":83},"end":{"line":32,"column":1,"index":781},"filename":"function-expression-mutation-edge-case.ts"},"fnName":"Component","memoSlots":9,"memoBlocks":4,"memoValues":5,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [foo, bar]\n\nData Flow Tree:\n└── newData\n    ├── foo (State)\n    └── bar (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":23,"column":6,"index":663},"end":{"line":23,"column":12,"index":669},"filename":"function-expression-mutation-edge-case.ts","identifierName":"setFoo"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":64},"end":{"line":32,"column":1,"index":762},"filename":"function-expression-mutation-edge-case.ts"},"fnName":"Component","memoSlots":9,"memoBlocks":4,"memoValues":5,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       
 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/function-expression-mutation-edge-case.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 
 function Component() {
   const [foo, setFoo] = useState({});

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-computation-in-effect.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 function Component() {
@@ -28,20 +28,38 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import { useEffect, useState } from "react";
 
 function Component() {
-  const [firstName, setFirstName] = useState("Taylor");
-  const lastName = "Swift";
+  const $ = _c(5);
+  const [firstName] = useState("Taylor");
 
-  // 🔴 Avoid: redundant state and unnecessary Effect
   const [fullName, setFullName] = useState("");
-  useEffect(() => {
-    setFullName(firstName + " " + lastName);
-  }, [firstName, lastName]);
-
-  return <div>{fullName}</div>;
+  let t0;
+  let t1;
+  if ($[0] !== firstName) {
+    t0 = () => {
+      setFullName(firstName + " " + "Swift");
+    };
+    t1 = [firstName, "Swift"];
+    $[0] = firstName;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  useEffect(t0, t1);
+  let t2;
+  if ($[3] !== fullName) {
+    t2 = <div>{fullName}</div>;
+    $[3] = fullName;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
 }
 
 export const FIXTURE_ENTRYPOINT = {
@@ -54,8 +72,8 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [firstName]\n\nData Flow Tree:\n└── firstName (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":11,"column":4,"index":360},"end":{"line":11,"column":15,"index":371},"filename":"invalid-derived-computation-in-effect.ts","identifierName":"setFullName"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":126},"end":{"line":15,"column":1,"index":464},"filename":"invalid-derived-computation-in-effect.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [firstName]\n\nData Flow Tree:\n└── firstName (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":11,"column":4,"index":341},"end":{"line":11,"column":15,"index":352},"filename":"invalid-derived-computation-in-effect.ts","identifierName":"setFullName"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":107},"end":{"line":15,"column":1,"index":445},"filename":"invalid-derived-computation-in-effect.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       
 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-computation-in-effect.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 function Component() {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-computed-props.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 export default function Component(props) {
@@ -26,18 +26,39 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import { useEffect, useState } from "react";
 
 export default function Component(props) {
+  const $ = _c(7);
   const [displayValue, setDisplayValue] = useState("");
-
-  useEffect(() => {
-    const computed = props.prefix + props.value + props.suffix;
-    setDisplayValue(computed);
-  }, [props.prefix, props.value, props.suffix]);
-
-  return <div>{displayValue}</div>;
+  let t0;
+  let t1;
+  if ($[0] !== props.prefix || $[1] !== props.suffix || $[2] !== props.value) {
+    t0 = () => {
+      const computed = props.prefix + props.value + props.suffix;
+      setDisplayValue(computed);
+    };
+    t1 = [props.prefix, props.value, props.suffix];
+    $[0] = props.prefix;
+    $[1] = props.suffix;
+    $[2] = props.value;
+    $[3] = t0;
+    $[4] = t1;
+  } else {
+    t0 = $[3];
+    t1 = $[4];
+  }
+  useEffect(t0, t1);
+  let t2;
+  if ($[5] !== displayValue) {
+    t2 = <div>{displayValue}</div>;
+    $[5] = displayValue;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
 }
 
 export const FIXTURE_ENTRYPOINT = {
@@ -50,8 +71,8 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [props]\n\nData Flow Tree:\n└── computed\n    └── props (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":9,"column":4,"index":314},"end":{"line":9,"column":19,"index":329},"filename":"invalid-derived-state-from-computed-props.ts","identifierName":"setDisplayValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":141},"end":{"line":13,"column":1,"index":428},"filename":"invalid-derived-state-from-computed-props.ts"},"fnName":"Component","memoSlots":7,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [props]\n\nData Flow Tree:\n└── computed\n    └── props (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":9,"column":4,"index":295},"end":{"line":9,"column":19,"index":310},"filename":"invalid-derived-state-from-computed-props.ts","identifierName":"setDisplayValue"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":122},"end":{"line":13,"column":1,"index":409},"filename":"invalid-derived-state-from-computed-props.ts"},"fnName":"Component","memoSlots":7,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       
 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-computed-props.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 export default function Component(props) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-destructured-props.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 export default function Component({props}) {
@@ -27,19 +27,40 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import { useEffect, useState } from "react";
 
-export default function Component({ props }) {
+export default function Component(t0) {
+  const $ = _c(6);
+  const { props } = t0;
   const [fullName, setFullName] = useState(
     props.firstName + " " + props.lastName,
   );
-
-  useEffect(() => {
-    setFullName(props.firstName + " " + props.lastName);
-  }, [props.firstName, props.lastName]);
-
-  return <div>{fullName}</div>;
+  let t1;
+  let t2;
+  if ($[0] !== props.firstName || $[1] !== props.lastName) {
+    t1 = () => {
+      setFullName(props.firstName + " " + props.lastName);
+    };
+    t2 = [props.firstName, props.lastName];
+    $[0] = props.firstName;
+    $[1] = props.lastName;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[4] !== fullName) {
+    t3 = <div>{fullName}</div>;
+    $[4] = fullName;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  return t3;
 }
 
 export const FIXTURE_ENTRYPOINT = {
@@ -52,8 +73,8 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [props]\n\nData Flow Tree:\n└── props (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":10,"column":4,"index":288},"end":{"line":10,"column":15,"index":299},"filename":"invalid-derived-state-from-destructured-props.ts","identifierName":"setFullName"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":141},"end":{"line":14,"column":1,"index":416},"filename":"invalid-derived-state-from-destructured-props.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nProps: [props]\n\nData Flow Tree:\n└── props (Prop)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":10,"column":4,"index":269},"end":{"line":10,"column":15,"index":280},"filename":"invalid-derived-state-from-destructured-props.ts","identifierName":"setFullName"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":122},"end":{"line":14,"column":1,"index":397},"filename":"invalid-derived-state-from-destructured-props.ts"},"fnName":"Component","memoSlots":6,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       
 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/invalid-derived-state-from-destructured-props.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState} from 'react';
 
 export default function Component({props}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState, useRef} from 'react';
 
 export default function Component({test}) {
@@ -31,23 +31,44 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import { useEffect, useState, useRef } from "react";
 
-export default function Component({ test }) {
+export default function Component(t0) {
+  const $ = _c(5);
+  const { test } = t0;
   const [local, setLocal] = useState(0);
 
   const myRef = useRef(null);
+  let t1;
+  let t2;
+  if ($[0] !== test) {
+    t1 = () => {
+      if (myRef.current) {
+        setLocal(test);
+      } else {
+        setLocal(test + test);
+      }
+    };
 
-  useEffect(() => {
-    if (myRef.current) {
-      setLocal(test);
-    } else {
-      setLocal(test + test);
-    }
-  }, [test]);
-
-  return <>{local}</>;
+    t2 = [test];
+    $[0] = test;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] !== local) {
+    t3 = <>{local}</>;
+    $[3] = local;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
 }
 
 export const FIXTURE_ENTRYPOINT = {
@@ -60,7 +81,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":149},"end":{"line":18,"column":1,"index":405},"filename":"ref-conditional-in-effect-no-error.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":15,"index":130},"end":{"line":18,"column":1,"index":386},"filename":"ref-conditional-in-effect-no-error.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       
 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/ref-conditional-in-effect-no-error.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 import {useEffect, useState, useRef} from 'react';
 
 export default function Component({test}) {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/usestate-derived-from-prop-no-show-in-data-flow-tree.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 
 function Component({prop}) {
   const [s, setS] = useState();
@@ -26,23 +26,37 @@ function Component({prop}) {
 ## Code
 
 ```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 
-function Component({ prop }) {
+function Component(t0) {
+  const $ = _c(5);
+  const { prop } = t0;
   const [s, setS] = useState();
-  const [second, setSecond] = useState(prop);
-
-  /*
-   * `second` is a source of state. It will inherit the value of `prop` in
-   * the first render, but after that it will no longer be updated when
-   * `prop` changes. So we shouldn't consider `second` as being derived from
-   * `prop`
-   */
-  useEffect(() => {
-    setS(second);
-  }, [second]);
-
-  return <div>{s}</div>;
+  const [second] = useState(prop);
+  let t1;
+  let t2;
+  if ($[0] !== second) {
+    t1 = () => {
+      setS(second);
+    };
+    t2 = [second];
+    $[0] = second;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[3] !== s) {
+    t3 = <div>{s}</div>;
+    $[3] = s;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  return t3;
 }
 
 ```
@@ -50,8 +64,8 @@ function Component({ prop }) {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [second]\n\nData Flow Tree:\n└── second (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":14,"column":4,"index":462},"end":{"line":14,"column":8,"index":466},"filename":"usestate-derived-from-prop-no-show-in-data-flow-tree.ts","identifierName":"setS"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":83},"end":{"line":18,"column":1,"index":519},"filename":"usestate-derived-from-prop-no-show-in-data-flow-tree.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
+{"kind":"CompileError","detail":{"options":{"description":"Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user\n\nThis setState call is setting a derived value that depends on the following reactive sources:\n\nState: [second]\n\nData Flow Tree:\n└── second (State)\n\nSee: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state","category":"EffectDerivationsOfState","reason":"You might not need an effect. Derive values in render, not effects.","details":[{"kind":"error","loc":{"start":{"line":14,"column":4,"index":443},"end":{"line":14,"column":8,"index":447},"filename":"usestate-derived-from-prop-no-show-in-data-flow-tree.ts","identifierName":"setS"},"message":"This should be computed during render, not in an effect"}]}},"fnLoc":null}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":64},"end":{"line":18,"column":1,"index":500},"filename":"usestate-derived-from-prop-no-show-in-data-flow-tree.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       
 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/effect-derived-computations/usestate-derived-from-prop-no-show-in-data-flow-tree.js

@@ -1,4 +1,4 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly @outputMode:"lint"
+// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
 
 function Component({prop}) {
   const [s, setS] = useState();

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

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

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

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

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

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

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

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