[compiler] Implement exhaustive dependency checking for manual memoization

The compiler currently drops manual memoization and rewrites it using its own inference. If the existing manual memo dependencies has missing or extra dependencies, compilation can change behavior by running the computation more often (if deps were missing) or less often (if there were extra deps). We currently address this by relying on the developer to use the ESLint plugin and have `eslint-disable-next-line react-hooks/exhaustive-deps` suppressions in their code. If a suppression exists, we skip compilation.

But not everyone is using the linter! Relying on the linter is also imprecise since it forces us to bail out on exhaustive-deps checks that only effect (ahem) effects — and while it isn't good to have incorrect deps on effects, it isn't a problem for compilation.

So this PR is a rough sketch of validating manual memoization dependencies in the compiler. Long-term we could use this to also check effect deps and replace the ExhaustiveDeps lint rule, but for now I'm focused specifically on manual memoization use-cases. If this works, we can stop bailing out on ESLint suppressions, since the compiler will implement all the appropriate checks (we already check rules of hooks).

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

@@ -600,8 +600,7 @@ function printErrorSummary(category: ErrorCategory, message: string): string {
     case ErrorCategory.Suppression:
     case ErrorCategory.Syntax:
     case ErrorCategory.UseMemo:
-    case ErrorCategory.VoidUseMemo:
-    case ErrorCategory.MemoDependencies: {
+    case ErrorCategory.VoidUseMemo: {
       heading = 'Error';
       break;
     }
@@ -659,10 +658,6 @@ export enum ErrorCategory {
    * Checks that manual memoization is preserved
    */
   PreserveManualMemo = 'PreserveManualMemo',
-  /**
-   * Checks for exhaustive useMemo/useCallback dependencies without extraneous values
-   */
-  MemoDependencies = 'MemoDependencies',
   /**
    * Checks for known incompatible libraries
    */
@@ -1060,16 +1055,6 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         preset: LintRulePreset.RecommendedLatest,
       };
     }
-    case ErrorCategory.MemoDependencies: {
-      return {
-        category,
-        severity: ErrorSeverity.Error,
-        name: 'memo-dependencies',
-        description:
-          'Validates that useMemo() and useCallback() specify comprehensive dependencies without extraneous values. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.',
-        preset: LintRulePreset.RecommendedLatest,
-      };
-    }
     case ErrorCategory.IncompatibleLibrary: {
       return {
         category,

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

@@ -102,25 +102,14 @@ export type PluginOptions = Partial<{
 
   panicThreshold: PanicThresholdOptions;
 
-  /**
-   * @deprecated
-   *
+  /*
    * When enabled, Forget will continue statically analyzing and linting code, but skip over codegen
    * passes.
    *
-   * NOTE: ignored if `outputMode` is specified
-   *
    * Defaults to false
    */
   noEmit: boolean;
 
-  /**
-   * If specified, overrides `noEmit` and controls the output mode of the compiler.
-   *
-   * Defaults to null
-   */
-  outputMode: CompilerOutputMode | null;
-
   /*
    * Determines the strategy for determining which functions to compile. Note that regardless of
    * which mode is enabled, a component can be opted out by adding the string literal
@@ -223,19 +212,6 @@ const CompilationModeSchema = z.enum([
 
 export type CompilationMode = z.infer<typeof CompilationModeSchema>;
 
-const CompilerOutputModeSchema = z.enum([
-  // Build optimized for SSR, with client features removed
-  'ssr',
-  // Build optimized for the client, with auto memoization
-  'client',
-  // Build optimized for the client without auto memo
-  'client-no-memo',
-  // Lint mode, the output is unused but validations should run
-  'lint',
-]);
-
-export type CompilerOutputMode = z.infer<typeof CompilerOutputModeSchema>;
-
 /**
  * Represents 'events' that may occur during compilation. Events are only
  * recorded when a logger is set (through the config).
@@ -317,7 +293,6 @@ export const defaultOptions: ParsedPluginOptions = {
   logger: null,
   gating: null,
   noEmit: false,
-  outputMode: null,
   dynamicGating: null,
   eslintSuppressionRules: null,
   flowSuppressions: true,

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

@@ -8,7 +8,7 @@
 import {NodePath} from '@babel/traverse';
 import * as t from '@babel/types';
 import prettyFormat from 'pretty-format';
-import {CompilerOutputMode, Logger, ProgramContext} from '.';
+import {Logger, ProgramContext} from '.';
 import {
   HIRFunction,
   ReactiveFunction,
@@ -24,6 +24,7 @@ import {
   pruneUnusedLabelsHIR,
 } from '../HIR';
 import {
+  CompilerMode,
   Environment,
   EnvironmentConfig,
   ReactFunctionType,
@@ -120,7 +121,7 @@ function run(
   >,
   config: EnvironmentConfig,
   fnType: ReactFunctionType,
-  mode: CompilerOutputMode,
+  mode: CompilerMode,
   programContext: ProgramContext,
   logger: Logger | null,
   filename: string | null,
@@ -170,7 +171,7 @@ function runWithEnvironment(
   validateUseMemo(hir).unwrap();
 
   if (
-    env.enableDropManualMemoization &&
+    env.isInferredMemoEnabled &&
     !env.config.enablePreserveExistingManualUseMemo &&
     !env.config.disableMemoizationForDebugging &&
     !env.config.enableChangeDetectionForDebugging
@@ -206,7 +207,7 @@ function runWithEnvironment(
   inferTypes(hir);
   log({kind: 'hir', name: 'InferTypes', value: hir});
 
-  if (env.enableValidations) {
+  if (env.isInferredMemoEnabled) {
     if (env.config.validateHooksUsage) {
       validateHooksUsage(hir).unwrap();
     }
@@ -232,13 +233,13 @@ function runWithEnvironment(
 
   const mutabilityAliasingErrors = inferMutationAliasingEffects(hir);
   log({kind: 'hir', name: 'InferMutationAliasingEffects', value: hir});
-  if (env.enableValidations) {
+  if (env.isInferredMemoEnabled) {
     if (mutabilityAliasingErrors.isErr()) {
       throw mutabilityAliasingErrors.unwrapErr();
     }
   }
 
-  if (env.outputMode === 'ssr') {
+  if (env.config.enableOptimizeForSSR) {
     optimizeForSSR(hir);
     log({kind: 'hir', name: 'OptimizeForSSR', value: hir});
   }
@@ -259,14 +260,14 @@ function runWithEnvironment(
     isFunctionExpression: false,
   });
   log({kind: 'hir', name: 'InferMutationAliasingRanges', value: hir});
-  if (env.enableValidations) {
+  if (env.isInferredMemoEnabled) {
     if (mutabilityAliasingRangeErrors.isErr()) {
       throw mutabilityAliasingRangeErrors.unwrapErr();
     }
     validateLocalsNotReassignedAfterRender(hir);
   }
 
-  if (env.enableValidations) {
+  if (env.isInferredMemoEnabled) {
     if (env.config.assertValidMutableRanges) {
       assertValidMutableRanges(hir);
     }
@@ -315,18 +316,20 @@ function runWithEnvironment(
     value: hir,
   });
 
-  if (env.enableValidations && env.config.validateStaticComponents) {
-    env.logErrors(validateStaticComponents(hir));
-  }
+  if (env.isInferredMemoEnabled) {
+    if (env.config.validateStaticComponents) {
+      env.logErrors(validateStaticComponents(hir));
+    }
 
-  if (env.enableMemoization) {
     /**
      * Only create reactive scopes (which directly map to generated memo blocks)
      * if inferred memoization is enabled. This makes all later passes which
      * transform reactive-scope labeled instructions no-ops.
      */
-    inferReactiveScopeVariables(hir);
-    log({kind: 'hir', name: 'InferReactiveScopeVariables', value: hir});
+    if (!env.config.enableOptimizeForSSR) {
+      inferReactiveScopeVariables(hir);
+      log({kind: 'hir', name: 'InferReactiveScopeVariables', value: hir});
+    }
   }
 
   const fbtOperands = memoizeFbtAndMacroOperandsInSameScope(hir);
@@ -591,7 +594,7 @@ export function compileFn(
   >,
   config: EnvironmentConfig,
   fnType: ReactFunctionType,
-  mode: CompilerOutputMode,
+  mode: CompilerMode,
   programContext: ProgramContext,
   logger: Logger | null,
   filename: string | null,

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

@@ -24,7 +24,6 @@ import {
   validateRestrictedImports,
 } from './Imports';
 import {
-  CompilerOutputMode,
   CompilerReactTarget,
   ParsedPluginOptions,
   PluginOptions,
@@ -400,15 +399,7 @@ export function compileProgram(
    */
   const suppressions = findProgramSuppressions(
     pass.comments,
-    /*
-     * If the compiler is validating hooks rules and exhaustive memo dependencies, we don't need to check
-     * for React ESLint suppressions
-     */
-    pass.opts.environment.validateExhaustiveMemoizationDependencies &&
-      pass.opts.environment.validateHooksUsage
-      ? null
-      : (pass.opts.eslintSuppressionRules ?? DEFAULT_ESLINT_SUPPRESSIONS),
-    // Always bail on Flow suppressions
+    pass.opts.eslintSuppressionRules ?? DEFAULT_ESLINT_SUPPRESSIONS,
     pass.opts.flowSuppressions,
   );
 
@@ -430,17 +421,9 @@ export function compileProgram(
   );
   const compiledFns: Array<CompileResult> = [];
 
-  // outputMode takes precedence if specified
-  const outputMode: CompilerOutputMode =
-    pass.opts.outputMode ?? (pass.opts.noEmit ? 'lint' : 'client');
   while (queue.length !== 0) {
     const current = queue.shift()!;
-    const compiled = processFn(
-      current.fn,
-      current.fnType,
-      programContext,
-      outputMode,
-    );
+    const compiled = processFn(current.fn, current.fnType, programContext);
 
     if (compiled != null) {
       for (const outlined of compiled.outlined) {
@@ -598,7 +581,6 @@ function processFn(
   fn: BabelFn,
   fnType: ReactFunctionType,
   programContext: ProgramContext,
-  outputMode: CompilerOutputMode,
 ): null | CodegenFunction {
   let directives: {
     optIn: t.Directive | null;
@@ -634,27 +616,18 @@ function processFn(
   }
 
   let compiledFn: CodegenFunction;
-  const compileResult = tryCompileFunction(
-    fn,
-    fnType,
-    programContext,
-    outputMode,
-  );
+  const compileResult = tryCompileFunction(fn, fnType, programContext);
   if (compileResult.kind === 'error') {
     if (directives.optOut != null) {
       logError(compileResult.error, programContext, fn.node.loc ?? null);
     } else {
       handleError(compileResult.error, programContext, fn.node.loc ?? null);
     }
-    if (outputMode === 'client') {
-      const retryResult = retryCompileFunction(fn, fnType, programContext);
-      if (retryResult == null) {
-        return null;
-      }
-      compiledFn = retryResult;
-    } else {
+    const retryResult = retryCompileFunction(fn, fnType, programContext);
+    if (retryResult == null) {
       return null;
     }
+    compiledFn = retryResult;
   } else {
     compiledFn = compileResult.compiledFn;
   }
@@ -690,7 +663,7 @@ function processFn(
 
   if (programContext.hasModuleScopeOptOut) {
     return null;
-  } else if (programContext.opts.outputMode === 'lint') {
+  } else if (programContext.opts.noEmit) {
     /**
      * inferEffectDependencies + noEmit is currently only used for linting. In
      * this mode, add source locations for where the compiler *can* infer effect
@@ -720,7 +693,6 @@ function tryCompileFunction(
   fn: BabelFn,
   fnType: ReactFunctionType,
   programContext: ProgramContext,
-  outputMode: CompilerOutputMode,
 ):
   | {kind: 'compile'; compiledFn: CodegenFunction}
   | {kind: 'error'; error: unknown} {
@@ -747,7 +719,7 @@ function tryCompileFunction(
         fn,
         programContext.opts.environment,
         fnType,
-        outputMode,
+        'all_features',
         programContext,
         programContext.opts.logger,
         programContext.filename,
@@ -785,7 +757,7 @@ function retryCompileFunction(
       fn,
       environment,
       fnType,
-      'client-no-memo',
+      'no_inferred_memo',
       programContext,
       programContext.opts.logger,
       programContext.filename,

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

@@ -78,7 +78,7 @@ export function filterSuppressionsThatAffectFunction(
 
 export function findProgramSuppressions(
   programComments: Array<t.Comment>,
-  ruleNames: Array<string> | null,
+  ruleNames: Array<string>,
   flowSuppressions: boolean,
 ): Array<SuppressionRange> {
   const suppressionRanges: Array<SuppressionRange> = [];
@@ -89,7 +89,7 @@ export function findProgramSuppressions(
   let disableNextLinePattern: RegExp | null = null;
   let disablePattern: RegExp | null = null;
   let enablePattern: RegExp | null = null;
-  if (ruleNames != null && ruleNames.length !== 0) {
+  if (ruleNames.length !== 0) {
     const rulePattern = `(${ruleNames.join('|')})`;
     disableNextLinePattern = new RegExp(
       `eslint-disable-next-line ${rulePattern}`,

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

@@ -9,7 +9,7 @@ import * as t from '@babel/types';
 import {ZodError, z} from 'zod/v4';
 import {fromZodError} from 'zod-validation-error/v4';
 import {CompilerError} from '../CompilerError';
-import {CompilerOutputMode, Logger, ProgramContext} from '../Entrypoint';
+import {Logger, ProgramContext} from '../Entrypoint';
 import {Err, Ok, Result} from '../Utils/Result';
 import {
   DEFAULT_GLOBALS,
@@ -51,7 +51,6 @@ import {Scope as BabelScope, NodePath} from '@babel/traverse';
 import {TypeSchema} from './TypeSchema';
 import {FlowTypeEnv} from '../Flood/Types';
 import {defaultModuleTypeProvider} from './DefaultModuleTypeProvider';
-import {assertExhaustive} from '../Utils/utils';
 
 export const ReactElementSymbolSchema = z.object({
   elementSymbol: z.union([
@@ -697,6 +696,8 @@ export const EnvironmentConfigSchema = z.object({
    * by React to only execute in response to events, not during render.
    */
   enableInferEventHandlers: z.boolean().default(false),
+
+  enableOptimizeForSSR: z.boolean().default(false),
 });
 
 export type EnvironmentConfig = z.infer<typeof EnvironmentConfigSchema>;
@@ -736,7 +737,7 @@ export class Environment {
   code: string | null;
   config: EnvironmentConfig;
   fnType: ReactFunctionType;
-  outputMode: CompilerOutputMode;
+  compilerMode: CompilerMode;
   programContext: ProgramContext;
   hasFireRewrite: boolean;
   hasInferredEffect: boolean;
@@ -751,7 +752,7 @@ export class Environment {
   constructor(
     scope: BabelScope,
     fnType: ReactFunctionType,
-    outputMode: CompilerOutputMode,
+    compilerMode: CompilerMode,
     config: EnvironmentConfig,
     contextIdentifiers: Set<t.Identifier>,
     parentFunction: NodePath<t.Function>, // the outermost function being compiled
@@ -762,7 +763,7 @@ export class Environment {
   ) {
     this.#scope = scope;
     this.fnType = fnType;
-    this.outputMode = outputMode;
+    this.compilerMode = compilerMode;
     this.config = config;
     this.filename = filename;
     this.code = code;
@@ -858,65 +859,8 @@ export class Environment {
     return this.#flowTypeEnvironment;
   }
 
-  get enableDropManualMemoization(): boolean {
-    switch (this.outputMode) {
-      case 'lint': {
-        // linting drops to be more compatible with compiler analysis
-        return true;
-      }
-      case 'client':
-      case 'ssr': {
-        return true;
-      }
-      case 'client-no-memo': {
-        return false;
-      }
-      default: {
-        assertExhaustive(
-          this.outputMode,
-          `Unexpected output mode '${this.outputMode}'`,
-        );
-      }
-    }
-  }
-
-  get enableMemoization(): boolean {
-    switch (this.outputMode) {
-      case 'client':
-      case 'lint': {
-        // linting also enables memoization so that we can check if manual memoization is preserved
-        return true;
-      }
-      case 'ssr':
-      case 'client-no-memo': {
-        return false;
-      }
-      default: {
-        assertExhaustive(
-          this.outputMode,
-          `Unexpected output mode '${this.outputMode}'`,
-        );
-      }
-    }
-  }
-
-  get enableValidations(): boolean {
-    switch (this.outputMode) {
-      case 'client':
-      case 'lint':
-      case 'ssr': {
-        return true;
-      }
-      case 'client-no-memo': {
-        return false;
-      }
-      default: {
-        assertExhaustive(
-          this.outputMode,
-          `Unexpected output mode '${this.outputMode}'`,
-        );
-      }
-    }
+  get isInferredMemoEnabled(): boolean {
+    return this.compilerMode !== 'no_inferred_memo';
   }
 
   get nextIdentifierId(): IdentifierId {

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

@@ -817,11 +817,6 @@ export type StartMemoize = {
    * (e.g. useMemo without a second arg)
    */
   deps: Array<ManualMemoDependency> | null;
-  /**
-   * The source location of the dependencies argument. Used for
-   * emitting diagnostics with a suggested replacement
-   */
-  depsLoc: SourceLocation | null;
   loc: SourceLocation;
 };
 export type FinishMemoize = {

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

@@ -42,7 +42,7 @@ type IdentifierSidemap = {
   functions: Map<IdentifierId, TInstruction<FunctionExpression>>;
   manualMemos: Map<IdentifierId, ManualMemoCallee>;
   react: Set<IdentifierId>;
-  maybeDepsLists: Map<IdentifierId, {loc: SourceLocation; deps: Array<Place>}>;
+  maybeDepsLists: Map<IdentifierId, Array<Place>>;
   maybeDeps: Map<IdentifierId, ManualMemoDependency>;
   optionals: Set<IdentifierId>;
 };
@@ -159,10 +159,10 @@ function collectTemporaries(
     }
     case 'ArrayExpression': {
       if (value.elements.every(e => e.kind === 'Identifier')) {
-        sidemap.maybeDepsLists.set(instr.lvalue.identifier.id, {
-          loc: value.loc,
-          deps: value.elements as Array<Place>,
-        });
+        sidemap.maybeDepsLists.set(
+          instr.lvalue.identifier.id,
+          value.elements as Array<Place>,
+        );
       }
       break;
     }
@@ -182,7 +182,6 @@ function makeManualMemoizationMarkers(
   fnExpr: Place,
   env: Environment,
   depsList: Array<ManualMemoDependency> | null,
-  depsLoc: SourceLocation | null,
   memoDecl: Place,
   manualMemoId: number,
 ): [TInstruction<StartMemoize>, TInstruction<FinishMemoize>] {
@@ -198,7 +197,6 @@ function makeManualMemoizationMarkers(
          * as dependencies
          */
         deps: depsList,
-        depsLoc,
         loc: fnExpr.loc,
       },
       effects: null,
@@ -289,85 +287,86 @@ function extractManualMemoizationArgs(
   sidemap: IdentifierSidemap,
   errors: CompilerError,
 ): {
-  fnPlace: Place;
+  fnPlace: Place | null;
   depsList: Array<ManualMemoDependency> | null;
-  depsLoc: SourceLocation | null;
-} | null {
+} {
   const [fnPlace, depsListPlace] = instr.value.args as Array<
     Place | SpreadPattern | undefined
   >;
-  if (fnPlace == null || fnPlace.kind !== 'Identifier') {
+  if (fnPlace == null) {
     errors.pushDiagnostic(
       CompilerDiagnostic.create({
         category: ErrorCategory.UseMemo,
         reason: `Expected a callback function to be passed to ${kind}`,
-        description:
-          kind === 'useCallback'
-            ? 'The first argument to useCallback() must be a function to cache'
-            : 'The first argument to useMemo() must be a function that calculates a result to cache',
+        description: `Expected a callback function to be passed to ${kind}`,
         suggestions: null,
       }).withDetails({
         kind: 'error',
         loc: instr.value.loc,
-        message:
-          kind === 'useCallback'
-            ? `Expected a callback function`
-            : `Expected a memoization function`,
+        message: `Expected a callback function to be passed to ${kind}`,
       }),
     );
-    return null;
+    return {fnPlace: null, depsList: null};
   }
-  if (depsListPlace == null) {
-    return {
-      fnPlace,
-      depsList: null,
-      depsLoc: null,
-    };
-  }
-  const maybeDepsList =
-    depsListPlace.kind === 'Identifier'
-      ? sidemap.maybeDepsLists.get(depsListPlace.identifier.id)
-      : null;
-  if (maybeDepsList == null) {
+  if (fnPlace.kind === 'Spread' || depsListPlace?.kind === 'Spread') {
     errors.pushDiagnostic(
       CompilerDiagnostic.create({
         category: ErrorCategory.UseMemo,
-        reason: `Expected the dependency list for ${kind} to be an array literal`,
-        description: `Expected the dependency list for ${kind} to be an array literal`,
+        reason: `Unexpected spread argument to ${kind}`,
+        description: `Unexpected spread argument to ${kind}`,
         suggestions: null,
       }).withDetails({
         kind: 'error',
-        loc:
-          depsListPlace?.kind === 'Identifier' ? depsListPlace.loc : instr.loc,
-        message: `Expected the dependency list for ${kind} to be an array literal`,
+        loc: instr.value.loc,
+        message: `Unexpected spread argument to ${kind}`,
       }),
     );
-    return null;
+    return {fnPlace: null, depsList: null};
   }
-  const depsList: Array<ManualMemoDependency> = [];
-  for (const dep of maybeDepsList.deps) {
-    const maybeDep = sidemap.maybeDeps.get(dep.identifier.id);
-    if (maybeDep == null) {
+  let depsList: Array<ManualMemoDependency> | null = null;
+  if (depsListPlace != null) {
+    const maybeDepsList = sidemap.maybeDepsLists.get(
+      depsListPlace.identifier.id,
+    );
+    if (maybeDepsList == null) {
       errors.pushDiagnostic(
         CompilerDiagnostic.create({
           category: ErrorCategory.UseMemo,
-          reason: `Expected the dependency list to be an array of simple expressions (e.g. \`x\`, \`x.y.z\`, \`x?.y?.z\`)`,
-          description: `Expected the dependency list to be an array of simple expressions (e.g. \`x\`, \`x.y.z\`, \`x?.y?.z\`)`,
+          reason: `Expected the dependency list for ${kind} to be an array literal`,
+          description: `Expected the dependency list for ${kind} to be an array literal`,
           suggestions: null,
         }).withDetails({
           kind: 'error',
-          loc: dep.loc,
-          message: `Expected the dependency list to be an array of simple expressions (e.g. \`x\`, \`x.y.z\`, \`x?.y?.z\`)`,
+          loc: depsListPlace.loc,
+          message: `Expected the dependency list for ${kind} to be an array literal`,
         }),
       );
-    } else {
-      depsList.push(maybeDep);
+      return {fnPlace, depsList: null};
+    }
+    depsList = [];
+    for (const dep of maybeDepsList) {
+      const maybeDep = sidemap.maybeDeps.get(dep.identifier.id);
+      if (maybeDep == null) {
+        errors.pushDiagnostic(
+          CompilerDiagnostic.create({
+            category: ErrorCategory.UseMemo,
+            reason: `Expected the dependency list to be an array of simple expressions (e.g. \`x\`, \`x.y.z\`, \`x?.y?.z\`)`,
+            description: `Expected the dependency list to be an array of simple expressions (e.g. \`x\`, \`x.y.z\`, \`x?.y?.z\`)`,
+            suggestions: null,
+          }).withDetails({
+            kind: 'error',
+            loc: dep.loc,
+            message: `Expected the dependency list to be an array of simple expressions (e.g. \`x\`, \`x.y.z\`, \`x?.y?.z\`)`,
+          }),
+        );
+      } else {
+        depsList.push(maybeDep);
+      }
     }
   }
   return {
     fnPlace,
     depsList,
-    depsLoc: maybeDepsList.loc,
   };
 }
 
@@ -428,17 +427,16 @@ export function dropManualMemoization(
 
         const manualMemo = sidemap.manualMemos.get(id);
         if (manualMemo != null) {
-          const memoDetails = extractManualMemoizationArgs(
+          const {fnPlace, depsList} = extractManualMemoizationArgs(
             instr as TInstruction<CallExpression> | TInstruction<MethodCall>,
             manualMemo.kind,
             sidemap,
             errors,
           );
 
-          if (memoDetails == null) {
+          if (fnPlace == null) {
             continue;
           }
-          const {fnPlace, depsList, depsLoc} = memoDetails;
 
           instr.value = getManualMemoizationReplacement(
             fnPlace,
@@ -489,7 +487,6 @@ export function dropManualMemoization(
               fnPlace,
               func.env,
               depsList,
-              depsLoc,
               memoDecl,
               nextManualMemoId++,
             );

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

@@ -2452,7 +2452,7 @@ function computeEffectsForLegacySignature(
       }),
     });
   }
-  if (signature.knownIncompatible != null && state.env.enableValidations) {
+  if (signature.knownIncompatible != null && state.env.isInferredMemoEnabled) {
     const errors = new CompilerError();
     errors.pushDiagnostic(
       CompilerDiagnostic.create({

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

@@ -319,7 +319,7 @@ function pruneableValue(value: InstructionValue, state: State): boolean {
     }
     case 'CallExpression':
     case 'MethodCall': {
-      if (state.env.outputMode === 'ssr') {
+      if (state.env.config.enableOptimizeForSSR) {
         const calleee =
           value.kind === 'CallExpression' ? value.callee : value.property;
         const hookKind = getHookKind(state.env, calleee.identifier);

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

@@ -159,7 +159,7 @@ export function codegenFunction(
   const compiled = compileResult.unwrap();
 
   const hookGuard = fn.env.config.enableEmitHookGuards;
-  if (hookGuard != null && fn.env.outputMode === 'client') {
+  if (hookGuard != null && fn.env.isInferredMemoEnabled) {
     compiled.body = t.blockStatement([
       createHookGuard(
         hookGuard,
@@ -259,7 +259,7 @@ export function codegenFunction(
   if (
     emitInstrumentForget != null &&
     fn.id != null &&
-    fn.env.outputMode === 'client'
+    fn.env.isInferredMemoEnabled
   ) {
     /*
      * Technically, this is a conditional hook call. However, we expect
@@ -591,10 +591,7 @@ function codegenBlockNoReset(
 }
 
 function wrapCacheDep(cx: Context, value: t.Expression): t.Expression {
-  if (
-    cx.env.config.enableEmitFreeze != null &&
-    cx.env.outputMode === 'client'
-  ) {
+  if (cx.env.config.enableEmitFreeze != null && cx.env.isInferredMemoEnabled) {
     const emitFreezeIdentifier = cx.env.programContext.addImportSpecifier(
       cx.env.config.enableEmitFreeze,
     ).name;
@@ -1775,7 +1772,7 @@ function createCallExpression(
   }
 
   const hookGuard = env.config.enableEmitHookGuards;
-  if (hookGuard != null && isHook && env.outputMode === 'client') {
+  if (hookGuard != null && isHook && env.isInferredMemoEnabled) {
     const iife = t.functionExpression(
       null,
       [],

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

@@ -6,13 +6,8 @@
  */
 
 import prettyFormat from 'pretty-format';
-import {
-  CompilerDiagnostic,
-  CompilerError,
-  CompilerSuggestionOperation,
-  SourceLocation,
-} from '..';
-import {CompilerSuggestion, ErrorCategory} from '../CompilerError';
+import {CompilerDiagnostic, CompilerError, SourceLocation} from '..';
+import {ErrorCategory} from '../CompilerError';
 import {
   areEqualPaths,
   BlockId,
@@ -22,10 +17,7 @@ import {
   Identifier,
   IdentifierId,
   InstructionKind,
-  isStableType,
   isSubPath,
-  isSubPathIgnoringOptionals,
-  isUseRefType,
   LoadGlobal,
   ManualMemoDependency,
   Place,
@@ -49,10 +41,9 @@ const DEBUG = false;
  * or less times.
  *
  * TODOs:
- * - Handle cases of mixed optional and non-optional versions of the same path,
- *   eg referecing both x.y.z and x.y?.z in the same memo block. we should collapse
- *   this into a single canonical dep that we look for in the manual deps. see the
- *   existing exhaustive deps rule for implementation.
+ * - Better handling of cases where we infer multiple dependencies related to a single
+ *   variable. Eg if the user has dep `x` and we inferred `x.y, x.z`, the user's dep
+ *   is sufficient.
  * - Handle cases where the user deps were not simple identifiers + property chains.
  *   We try to detect this in ValidateUseMemo but we miss some cases. The problem
  *   is that invalid forms can be value blocks or function calls that don't get
@@ -112,7 +103,7 @@ export function validateExhaustiveDependencies(
     );
     visitCandidateDependency(value.decl, temporaries, dependencies, locals);
     const inferred: Array<InferredDependency> = Array.from(dependencies);
-    // Sort dependencies by name and path, with shorter/non-optional paths first
+    // Sort dependencies by name, and path, with shorter/non-optional paths first
     inferred.sort((a, b) => {
       if (a.kind === 'Global' && b.kind == 'Global') {
         return a.binding.name.localeCompare(b.binding.name);
@@ -209,31 +200,6 @@ export function validateExhaustiveDependencies(
         reason: 'Unexpected function dependency',
         loc: value.loc,
       });
-      /**
-       * Dependencies technically only need to include reactive values. However,
-       * reactivity inference for general values is subtle since it involves all
-       * of our complex control and data flow analysis. To keep results more
-       * stable and predictable to developers, we intentionally stay closer to
-       * the rules of the classic exhaustive-deps rule. Values should be included
-       * as dependencies if either of the following is true:
-       * - They're reactive
-       * - They're non-reactive and not a known-stable value type.
-       *
-       * Thus `const ref: Ref = cond ? ref1 : ref2` has to be a dependency
-       * (assuming `cond` is reactive) since it's reactive despite being a ref.
-       *
-       * Similarly, `const x = [1,2,3]` has to be a dependency since even
-       * though it's non reactive, it's not a known stable type.
-       *
-       * TODO: consider reimplementing a simpler form of reactivity inference.
-       * Ideally we'd consider `const ref: Ref = cond ? ref1 : ref2` as a required
-       * dependency even if our data/control flow tells us that `cond` is non-reactive.
-       * It's simpler for developers to reason about based on a more structural/AST
-       * driven approach.
-       */
-      const isRequiredDependency =
-        reactive.has(inferredDependency.identifier.id) ||
-        !isStableType(inferredDependency.identifier);
       let hasMatchingManualDependency = false;
       for (const manualDependency of manualDependencies) {
         if (
@@ -241,93 +207,60 @@ export function validateExhaustiveDependencies(
           manualDependency.root.value.identifier.id ===
             inferredDependency.identifier.id &&
           (areEqualPaths(manualDependency.path, inferredDependency.path) ||
-            isSubPathIgnoringOptionals(
-              manualDependency.path,
-              inferredDependency.path,
-            ))
+            isSubPath(manualDependency.path, inferredDependency.path))
         ) {
           hasMatchingManualDependency = true;
           matched.add(manualDependency);
-          if (!isRequiredDependency) {
-            extra.push(manualDependency);
-          }
         }
       }
-      if (isRequiredDependency && !hasMatchingManualDependency) {
+      if (!hasMatchingManualDependency) {
         missing.push(inferredDependency);
       }
     }
 
     for (const dep of startMemo.deps ?? []) {
-      if (matched.has(dep)) {
+      if (
+        matched.has(dep) ||
+        (dep.root.kind === 'NamedLocal' &&
+          !reactive.has(dep.root.value.identifier.id))
+      ) {
         continue;
       }
       extra.push(dep);
     }
 
-    /*
-     * For compatiblity with the existing exhaustive-deps rule, we allow
-     * known-stable values as dependencies even if the value is not reactive.
-     * This allows code that takes a dep on a non-reactive setState function
-     * to pass, for example.
-     */
-    retainWhere(extra, dep => {
-      const isNonReactiveStableValue =
-        dep.root.kind === 'NamedLocal' &&
-        !dep.root.value.reactive &&
-        isStableType(dep.root.value.identifier);
-      return !isNonReactiveStableValue;
-    });
-
-    if (missing.length !== 0 || extra.length !== 0) {
-      let suggestions: Array<CompilerSuggestion> | null = null;
-      if (startMemo.depsLoc != null && typeof startMemo.depsLoc !== 'symbol') {
-        suggestions = [
-          {
-            description: 'Update dependencies',
-            range: [startMemo.depsLoc.start.index, startMemo.depsLoc.end.index],
-            op: CompilerSuggestionOperation.Replace,
-            text: `[${inferred.map(printInferredDependency).join(', ')}]`,
-          },
-        ];
-      }
-      if (missing.length !== 0) {
-        const diagnostic = CompilerDiagnostic.create({
-          category: ErrorCategory.MemoDependencies,
-          reason: 'Found non-exhaustive dependencies',
-          description:
-            'Missing dependencies can cause a value not to update when those inputs change, ' +
-            'resulting in stale UI',
-          suggestions,
-        });
-        for (const dep of missing) {
-          let reactiveStableValueHint = '';
-          if (isStableType(dep.identifier)) {
-            reactiveStableValueHint =
-              '. Refs, setState functions, and other "stable" values generally do not need to be added as dependencies, but this variable may change over time to point to different values';
-          }
-          diagnostic.withDetails({
-            kind: 'error',
-            message: `Missing dependency \`${printInferredDependency(dep)}\`${reactiveStableValueHint}`,
-            loc: dep.loc,
-          });
-        }
-        error.pushDiagnostic(diagnostic);
-      } else if (extra.length !== 0) {
-        const diagnostic = CompilerDiagnostic.create({
-          category: ErrorCategory.MemoDependencies,
-          reason: 'Found unnecessary memoization dependencies',
-          description:
-            'Unnecessary dependencies can cause a value to update more often than necessary, ' +
-            'which can cause effects to run more than expected',
-        });
+    if (missing.length !== 0) {
+      // Error
+      const diagnostic = CompilerDiagnostic.create({
+        category: ErrorCategory.PreserveManualMemo,
+        reason: 'Found non-exhaustive dependencies',
+        description:
+          'Missing dependencies can cause a value not to update when those inputs change, ' +
+          'resulting in stale UI. This memoization cannot be safely rewritten by the compiler.',
+      });
+      for (const dep of missing) {
         diagnostic.withDetails({
           kind: 'error',
-          message: `Unnecessary dependencies ${extra.map(dep => `\`${printManualMemoDependency(dep)}\``).join(', ')}`,
-          loc: startMemo.depsLoc ?? value.loc,
+          message: `Missing dependency \`${printInferredDependency(dep)}\``,
+          loc: dep.loc,
         });
-        error.pushDiagnostic(diagnostic);
       }
+      error.pushDiagnostic(diagnostic);
+    } else if (extra.length !== 0) {
+      const diagnostic = CompilerDiagnostic.create({
+        category: ErrorCategory.PreserveManualMemo,
+        reason: 'Found unnecessary memoization dependencies',
+        description:
+          'Unnecessary dependencies can cause a value to update more often than necessary, ' +
+          'which can cause effects to run more than expected. This memoization cannot be safely ' +
+          'rewritten by the compiler',
+      });
+      diagnostic.withDetails({
+        kind: 'error',
+        message: `Unnecessary dependencies ${extra.map(dep => `\`${printManualMemoDependency(dep)}\``).join(', ')}`,
+        loc: value.loc,
+      });
+      error.pushDiagnostic(diagnostic);
     }
 
     dependencies.clear();
@@ -335,15 +268,10 @@ export function validateExhaustiveDependencies(
     startMemo = null;
   }
 
-  collectDependencies(
-    fn,
-    temporaries,
-    {
-      onStartMemoize,
-      onFinishMemoize,
-    },
-    false, // isFunctionExpression
-  );
+  collectDependencies(fn, temporaries, {
+    onStartMemoize,
+    onFinishMemoize,
+  });
   return error.asResult();
 }
 
@@ -436,20 +364,12 @@ function collectDependencies(
       locals: Set<IdentifierId>,
     ) => void;
   } | null,
-  isFunctionExpression: boolean,
 ): Extract<Temporary, {kind: 'Function'}> {
   const optionals = findOptionalPlaces(fn);
   if (DEBUG) {
     console.log(prettyFormat(optionals));
   }
   const locals: Set<IdentifierId> = new Set();
-  if (isFunctionExpression) {
-    for (const param of fn.params) {
-      const place = param.kind === 'Identifier' ? param : param.place;
-      locals.add(place.identifier.id);
-    }
-  }
-
   const dependencies: Set<InferredDependency> = new Set();
   function visit(place: Place): void {
     visitCandidateDependency(place, temporaries, dependencies, locals);
@@ -584,11 +504,7 @@ function collectDependencies(
           break;
         }
         case 'PropertyLoad': {
-          if (
-            typeof value.property === 'number' ||
-            (isUseRefType(value.object.identifier) &&
-              value.property === 'current')
-          ) {
+          if (typeof value.property === 'number') {
             visit(value.object);
             break;
           }
@@ -618,7 +534,6 @@ function collectDependencies(
             value.loweredFunc.func,
             temporaries,
             null,
-            true, // isFunctionExpression
           );
           temporaries.set(lvalue.identifier.id, functionDeps);
           addDependency(functionDeps, dependencies, locals);

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/compile-files-with-exhaustive-deps-violation-in-effects.expect.md

@@ -1,91 +0,0 @@
-
-## Input
-
-```javascript
-// @validateExhaustiveMemoizationDependencies
-
-import {useMemo} from 'react';
-import {ValidateMemoization} from 'shared-runtime';
-
-function Component({x}) {
-  useEffect(
-    () => {
-      console.log(x);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    },
-    [
-      /* intentionally missing deps */
-    ]
-  );
-
-  const memo = useMemo(() => {
-    return [x];
-  }, [x]);
-
-  return <ValidateMemoization inputs={[x]} output={memo} />;
-}
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateExhaustiveMemoizationDependencies
-
-import { useMemo } from "react";
-import { ValidateMemoization } from "shared-runtime";
-
-function Component(t0) {
-  const $ = _c(10);
-  const { x } = t0;
-  let t1;
-  if ($[0] !== x) {
-    t1 = () => {
-      console.log(x);
-    };
-    $[0] = x;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  let t2;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = [];
-    $[2] = t2;
-  } else {
-    t2 = $[2];
-  }
-  useEffect(t1, t2);
-  let t3;
-  if ($[3] !== x) {
-    t3 = [x];
-    $[3] = x;
-    $[4] = t3;
-  } else {
-    t3 = $[4];
-  }
-  const memo = t3;
-  let t4;
-  if ($[5] !== x) {
-    t4 = [x];
-    $[5] = x;
-    $[6] = t4;
-  } else {
-    t4 = $[6];
-  }
-  let t5;
-  if ($[7] !== memo || $[8] !== t4) {
-    t5 = <ValidateMemoization inputs={t4} output={memo} />;
-    $[7] = memo;
-    $[8] = t4;
-    $[9] = t5;
-  } else {
-    t5 = $[9];
-  }
-  return t5;
-}
-
-```
-      
-### Eval output
-(kind: exception) Fixture not implemented

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/compile-files-with-exhaustive-deps-violation-in-effects.js

@@ -1,22 +0,0 @@
-// @validateExhaustiveMemoizationDependencies
-
-import {useMemo} from 'react';
-import {ValidateMemoization} from 'shared-runtime';
-
-function Component({x}) {
-  useEffect(
-    () => {
-      console.log(x);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    },
-    [
-      /* intentionally missing deps */
-    ]
-  );
-
-  const memo = useMemo(() => {
-    return [x];
-  }, [x]);
-
-  return <ValidateMemoization inputs={[x]} output={memo} />;
-}

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

@@ -9,40 +9,25 @@ import {Stringify} from 'shared-runtime';
 function Component({x, y, z}) {
   const a = useMemo(() => {
     return x?.y.z?.a;
-    // error: too precise
   }, [x?.y.z?.a.b]);
   const b = useMemo(() => {
     return x.y.z?.a;
-    // ok, not our job to type check nullability
   }, [x.y.z.a]);
   const c = useMemo(() => {
     return x?.y.z.a?.b;
-    // error: too precise
   }, [x?.y.z.a?.b.z]);
   const d = useMemo(() => {
     return x?.y?.[(console.log(y), z?.b)];
-    // ok
   }, [x?.y, y, z?.b]);
   const e = useMemo(() => {
     const e = [];
     e.push(x);
     return e;
-    // ok
   }, [x]);
   const f = useMemo(() => {
     return [];
-    // error: unnecessary
-  }, [x, y.z, z?.y?.a, UNUSED_GLOBAL]);
-  const ref1 = useRef(null);
-  const ref2 = useRef(null);
-  const ref = z ? ref1 : ref2;
-  const cb = useMemo(() => {
-    return () => {
-      return ref.current;
-    };
-    // error: ref is a stable type but reactive
-  }, []);
-  return <Stringify results={[a, b, c, d, e, f, cb]} />;
+  }, [x, y.z, z?.y?.a]);
+  return <Stringify results={[a, b, c, d, e, f]} />;
 }
 
 ```
@@ -53,57 +38,61 @@ function Component({x, y, z}) {
 ```
 Found 4 errors:
 
-Error: Found non-exhaustive dependencies
+Compilation Skipped: Found non-exhaustive dependencies
 
-Missing dependencies can cause a value not to update when those inputs change, resulting in stale UI.
+Missing dependencies can cause a value not to update when those inputs change, resulting in stale UI. This memoization cannot be safely rewritten by the compiler..
 
 error.invalid-exhaustive-deps.ts:7:11
    5 | function Component({x, y, z}) {
    6 |   const a = useMemo(() => {
 >  7 |     return x?.y.z?.a;
      |            ^^^^^^^^^ Missing dependency `x?.y.z?.a`
-   8 |     // error: too precise
-   9 |   }, [x?.y.z?.a.b]);
-  10 |   const b = useMemo(() => {
+   8 |   }, [x?.y.z?.a.b]);
+   9 |   const b = useMemo(() => {
+  10 |     return x.y.z?.a;
 
-Error: Found non-exhaustive dependencies
+Compilation Skipped: Found non-exhaustive dependencies
 
-Missing dependencies can cause a value not to update when those inputs change, resulting in stale UI.
+Missing dependencies can cause a value not to update when those inputs change, resulting in stale UI. This memoization cannot be safely rewritten by the compiler..
 
-error.invalid-exhaustive-deps.ts:15:11
-  13 |   }, [x.y.z.a]);
-  14 |   const c = useMemo(() => {
-> 15 |     return x?.y.z.a?.b;
+error.invalid-exhaustive-deps.ts:10:11
+   8 |   }, [x?.y.z?.a.b]);
+   9 |   const b = useMemo(() => {
+> 10 |     return x.y.z?.a;
+     |            ^^^^^^^^ Missing dependency `x.y.z?.a`
+  11 |   }, [x.y.z.a]);
+  12 |   const c = useMemo(() => {
+  13 |     return x?.y.z.a?.b;
+
+Compilation Skipped: Found non-exhaustive dependencies
+
+Missing dependencies can cause a value not to update when those inputs change, resulting in stale UI. This memoization cannot be safely rewritten by the compiler..
+
+error.invalid-exhaustive-deps.ts:13:11
+  11 |   }, [x.y.z.a]);
+  12 |   const c = useMemo(() => {
+> 13 |     return x?.y.z.a?.b;
      |            ^^^^^^^^^^^ Missing dependency `x?.y.z.a?.b`
-  16 |     // error: too precise
-  17 |   }, [x?.y.z.a?.b.z]);
-  18 |   const d = useMemo(() => {
+  14 |   }, [x?.y.z.a?.b.z]);
+  15 |   const d = useMemo(() => {
+  16 |     return x?.y?.[(console.log(y), z?.b)];
 
-Error: Found unnecessary memoization dependencies
+Compilation Skipped: Found unnecessary memoization dependencies
 
-Unnecessary dependencies can cause a value to update more often than necessary, which can cause effects to run more than expected.
+Unnecessary dependencies can cause a value to update more often than necessary, which can cause effects to run more than expected. This memoization cannot be safely rewritten by the compiler.
 
-error.invalid-exhaustive-deps.ts:31:5
-  29 |     return [];
-  30 |     // error: unnecessary
-> 31 |   }, [x, y.z, z?.y?.a, UNUSED_GLOBAL]);
-     |      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Unnecessary dependencies `x`, `y.z`, `z?.y?.a`, `UNUSED_GLOBAL`
-  32 |   const ref1 = useRef(null);
-  33 |   const ref2 = useRef(null);
-  34 |   const ref = z ? ref1 : ref2;
-
-Error: Found non-exhaustive dependencies
-
-Missing dependencies can cause a value not to update when those inputs change, resulting in stale UI.
-
-error.invalid-exhaustive-deps.ts:37:13
-  35 |   const cb = useMemo(() => {
-  36 |     return () => {
-> 37 |       return ref.current;
-     |              ^^^ Missing dependency `ref`. Refs, setState functions, and other "stable" values generally do not need to be added as dependencies, but this variable may change over time to point to different values
-  38 |     };
-  39 |     // error: ref is a stable type but reactive
-  40 |   }, []);
+error.invalid-exhaustive-deps.ts:23:20
+  21 |     return e;
+  22 |   }, [x]);
+> 23 |   const f = useMemo(() => {
+     |                     ^^^^^^^
+> 24 |     return [];
+     | ^^^^^^^^^^^^^^
+> 25 |   }, [x, y.z, z?.y?.a]);
+     | ^^^^ Unnecessary dependencies `x`, `y.z`, `z?.y?.a`
+  26 |   return <Stringify results={[a, b, c, d, e, f]} />;
+  27 | }
+  28 |
 ```
           
       

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

@@ -5,38 +5,23 @@ import {Stringify} from 'shared-runtime';
 function Component({x, y, z}) {
   const a = useMemo(() => {
     return x?.y.z?.a;
-    // error: too precise
   }, [x?.y.z?.a.b]);
   const b = useMemo(() => {
     return x.y.z?.a;
-    // ok, not our job to type check nullability
   }, [x.y.z.a]);
   const c = useMemo(() => {
     return x?.y.z.a?.b;
-    // error: too precise
   }, [x?.y.z.a?.b.z]);
   const d = useMemo(() => {
     return x?.y?.[(console.log(y), z?.b)];
-    // ok
   }, [x?.y, y, z?.b]);
   const e = useMemo(() => {
     const e = [];
     e.push(x);
     return e;
-    // ok
   }, [x]);
   const f = useMemo(() => {
     return [];
-    // error: unnecessary
-  }, [x, y.z, z?.y?.a, UNUSED_GLOBAL]);
-  const ref1 = useRef(null);
-  const ref2 = useRef(null);
-  const ref = z ? ref1 : ref2;
-  const cb = useMemo(() => {
-    return () => {
-      return ref.current;
-    };
-    // error: ref is a stable type but reactive
-  }, []);
-  return <Stringify results={[a, b, c, d, e, f, cb]} />;
+  }, [x, y.z, z?.y?.a]);
+  return <Stringify results={[a, b, c, d, e, f]} />;
 }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps-allow-nonreactive-stable-types-as-extra-deps.expect.md

@@ -1,100 +0,0 @@
-
-## Input
-
-```javascript
-// @validateExhaustiveMemoizationDependencies
-import {
-  useCallback,
-  useTransition,
-  useState,
-  useOptimistic,
-  useActionState,
-  useRef,
-  useReducer,
-} from 'react';
-
-function useFoo() {
-  const [s, setState] = useState();
-  const ref = useRef(null);
-  const [t, startTransition] = useTransition();
-  const [u, addOptimistic] = useOptimistic();
-  const [v, dispatch] = useReducer(() => {}, null);
-  const [isPending, dispatchAction] = useActionState(() => {}, null);
-
-  return useCallback(() => {
-    dispatch();
-    startTransition(() => {});
-    addOptimistic();
-    setState(null);
-    dispatchAction();
-    ref.current = true;
-  }, [
-    // intentionally adding unnecessary deps on nonreactive stable values
-    // to check that they're allowed
-    dispatch,
-    startTransition,
-    addOptimistic,
-    setState,
-    dispatchAction,
-    ref,
-  ]);
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: useFoo,
-  params: [],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateExhaustiveMemoizationDependencies
-import {
-  useCallback,
-  useTransition,
-  useState,
-  useOptimistic,
-  useActionState,
-  useRef,
-  useReducer,
-} from "react";
-
-function useFoo() {
-  const $ = _c(1);
-  const [, setState] = useState();
-  const ref = useRef(null);
-  const [, startTransition] = useTransition();
-  const [, addOptimistic] = useOptimistic();
-  const [, dispatch] = useReducer(_temp, null);
-  const [, dispatchAction] = useActionState(_temp2, null);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = () => {
-      dispatch();
-      startTransition(_temp3);
-      addOptimistic();
-      setState(null);
-      dispatchAction();
-      ref.current = true;
-    };
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  return t0;
-}
-function _temp3() {}
-function _temp2() {}
-function _temp() {}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: useFoo,
-  params: [],
-};
-
-```
-      
-### Eval output
-(kind: ok) "[[ function params=0 ]]"

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/exhaustive-deps-allow-nonreactive-stable-types-as-extra-deps.js

@@ -1,42 +0,0 @@
-// @validateExhaustiveMemoizationDependencies
-import {
-  useCallback,
-  useTransition,
-  useState,
-  useOptimistic,
-  useActionState,
-  useRef,
-  useReducer,
-} from 'react';
-
-function useFoo() {
-  const [s, setState] = useState();
-  const ref = useRef(null);
-  const [t, startTransition] = useTransition();
-  const [u, addOptimistic] = useOptimistic();
-  const [v, dispatch] = useReducer(() => {}, null);
-  const [isPending, dispatchAction] = useActionState(() => {}, null);
-
-  return useCallback(() => {
-    dispatch();
-    startTransition(() => {});
-    addOptimistic();
-    setState(null);
-    dispatchAction();
-    ref.current = true;
-  }, [
-    // intentionally adding unnecessary deps on nonreactive stable values
-    // to check that they're allowed
-    dispatch,
-    startTransition,
-    addOptimistic,
-    setState,
-    dispatchAction,
-    ref,
-  ]);
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: useFoo,
-  params: [],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-noemit.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @dynamicGating:{"source":"shared-runtime"} @outputMode:"lint"
+// @dynamicGating:{"source":"shared-runtime"} @noEmit
 
 function Foo() {
   'use memo if(getTrue)';
@@ -19,7 +19,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @dynamicGating:{"source":"shared-runtime"} @outputMode:"lint"
+// @dynamicGating:{"source":"shared-runtime"} @noEmit
 
 function Foo() {
   "use memo if(getTrue)";

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/gating/dynamic-gating-noemit.js

@@ -1,4 +1,4 @@
-// @dynamicGating:{"source":"shared-runtime"} @outputMode:"lint"
+// @dynamicGating:{"source":"shared-runtime"} @noEmit
 
 function Foo() {
   'use memo if(getTrue)';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/no-emit-lint-repro.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @inferEffectDependencies @outputMode:"lint"
+// @inferEffectDependencies @noEmit
 import {print} from 'shared-runtime';
 import useEffectWrapper from 'useEffectWrapper';
 import {AUTODEPS} from 'react';
@@ -17,7 +17,7 @@ function ReactiveVariable({propVal}) {
 ## Code
 
 ```javascript
-// @inferEffectDependencies @outputMode:"lint"
+// @inferEffectDependencies @noEmit
 import { print } from "shared-runtime";
 import useEffectWrapper from "useEffectWrapper";
 import { AUTODEPS } from "react";

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/no-emit-lint-repro.js

@@ -1,4 +1,4 @@
-// @inferEffectDependencies @outputMode:"lint"
+// @inferEffectDependencies @noEmit
 import {print} from 'shared-runtime';
 import useEffectWrapper from 'useEffectWrapper';
 import {AUTODEPS} from 'react';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-no-emit.expect.md

@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @noEmit @panicThreshold:"none" @loggerTestOnly
+import {print} from 'shared-runtime';
+import useEffectWrapper from 'useEffectWrapper';
+import {AUTODEPS} from 'react';
+
+function Foo({propVal}) {
+  const arr = [propVal];
+  useEffectWrapper(() => print(arr), AUTODEPS);
+
+  const arr2 = [];
+  useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
+  arr2.push(2);
+  return {arr, arr2};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{propVal: 1}],
+  sequentialRenders: [{propVal: 1}, {propVal: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+// @inferEffectDependencies @noEmit @panicThreshold:"none" @loggerTestOnly
+import { print } from "shared-runtime";
+import useEffectWrapper from "useEffectWrapper";
+import { AUTODEPS } from "react";
+
+function Foo({ propVal }) {
+  const arr = [propVal];
+  useEffectWrapper(() => print(arr), AUTODEPS);
+
+  const arr2 = [];
+  useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
+  arr2.push(2);
+  return { arr, arr2 };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ propVal: 1 }],
+  sequentialRenders: [{ propVal: 1 }, { propVal: 2 }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":195},"end":{"line":14,"column":1,"index":409},"filename":"retry-no-emit.ts"},"detail":{"options":{"category":"Immutability","reason":"This value cannot be modified","description":"Modifying a value previously passed as an argument to a hook is not allowed. Consider moving the modification before calling the hook","details":[{"kind":"error","loc":{"start":{"line":12,"column":2,"index":372},"end":{"line":12,"column":6,"index":376},"filename":"retry-no-emit.ts","identifierName":"arr2"},"message":"value cannot be modified"}]}}}
+{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":248},"end":{"line":8,"column":46,"index":292},"filename":"retry-no-emit.ts"},"decorations":[{"start":{"line":8,"column":31,"index":277},"end":{"line":8,"column":34,"index":280},"filename":"retry-no-emit.ts","identifierName":"arr"}]}
+{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":11,"column":2,"index":316},"end":{"line":11,"column":54,"index":368},"filename":"retry-no-emit.ts"},"decorations":[{"start":{"line":11,"column":25,"index":339},"end":{"line":11,"column":29,"index":343},"filename":"retry-no-emit.ts","identifierName":"arr2"},{"start":{"line":11,"column":25,"index":339},"end":{"line":11,"column":29,"index":343},"filename":"retry-no-emit.ts","identifierName":"arr2"},{"start":{"line":11,"column":35,"index":349},"end":{"line":11,"column":42,"index":356},"filename":"retry-no-emit.ts","identifierName":"propVal"}]}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":195},"end":{"line":14,"column":1,"index":409},"filename":"retry-no-emit.ts"},"fnName":"Foo","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) {"arr":[1],"arr2":[2]}
+{"arr":[2],"arr2":[2]}
+logs: [[ 1 ],[ 2 ]]

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-no-emit.js

@@ -1,4 +1,4 @@
-// @inferEffectDependencies @outputMode:"lint" @panicThreshold:"none"
+// @inferEffectDependencies @noEmit @panicThreshold:"none" @loggerTestOnly
 import {print} from 'shared-runtime';
 import useEffectWrapper from 'useEffectWrapper';
 import {AUTODEPS} from 'react';

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-opt-in--no-emit.expect.md

@@ -2,10 +2,10 @@
 ## Input
 
 ```javascript
-// @inferEffectDependencies @panicThreshold:"none"
+// @compilationMode:"all" @inferEffectDependencies @panicThreshold:"none" @noEmit
 import {print} from 'shared-runtime';
-import useEffectWrapper from 'useEffectWrapper';
 import {AUTODEPS} from 'react';
+import useEffectWrapper from 'useEffectWrapper';
 
 function Foo({propVal}) {
   'use memo';
@@ -15,6 +15,7 @@ function Foo({propVal}) {
   const arr2 = [];
   useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
   arr2.push(2);
+
   return {arr, arr2};
 }
 
@@ -29,21 +30,20 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @inferEffectDependencies @panicThreshold:"none"
+// @compilationMode:"all" @inferEffectDependencies @panicThreshold:"none" @noEmit
 import { print } from "shared-runtime";
-import useEffectWrapper from "useEffectWrapper";
 import { AUTODEPS } from "react";
+import useEffectWrapper from "useEffectWrapper";
 
-function Foo(t0) {
+function Foo({ propVal }) {
   "use memo";
-  const { propVal } = t0;
-
   const arr = [propVal];
-  useEffectWrapper(() => print(arr), [arr]);
+  useEffectWrapper(() => print(arr), AUTODEPS);
 
   const arr2 = [];
-  useEffectWrapper(() => arr2.push(propVal), [arr2, propVal]);
+  useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
   arr2.push(2);
+
   return { arr, arr2 };
 }
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/no-emit/retry-opt-in--no-emit.js

@@ -1,7 +1,7 @@
-// @inferEffectDependencies @outputMode:"lint" @panicThreshold:"none"
+// @compilationMode:"all" @inferEffectDependencies @panicThreshold:"none" @noEmit
 import {print} from 'shared-runtime';
-import useEffectWrapper from 'useEffectWrapper';
 import {AUTODEPS} from 'react';
+import useEffectWrapper from 'useEffectWrapper';
 
 function Foo({propVal}) {
   'use memo';
@@ -11,6 +11,7 @@ function Foo({propVal}) {
   const arr2 = [];
   useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
   arr2.push(2);
+
   return {arr, arr2};
 }
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/error.infer-effect-deps-with-rule-violation--lint.expect.md

@@ -1,48 +0,0 @@
-
-## Input
-
-```javascript
-// @inferEffectDependencies @outputMode:"lint" @panicThreshold:"none"
-import {print} from 'shared-runtime';
-import useEffectWrapper from 'useEffectWrapper';
-import {AUTODEPS} from 'react';
-
-function Foo({propVal}) {
-  const arr = [propVal];
-  useEffectWrapper(() => print(arr), AUTODEPS);
-
-  const arr2 = [];
-  useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
-  arr2.push(2);
-  return {arr, arr2};
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Foo,
-  params: [{propVal: 1}],
-  sequentialRenders: [{propVal: 1}, {propVal: 2}],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot infer dependencies of this effect. This will break your build!
-
-To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.
-
-error.infer-effect-deps-with-rule-violation--lint.ts:8:2
-   6 | function Foo({propVal}) {
-   7 |   const arr = [propVal];
->  8 |   useEffectWrapper(() => print(arr), AUTODEPS);
-     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot infer dependencies
-   9 |
-  10 |   const arr2 = [];
-  11 |   useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/error.infer-effect-deps-with-rule-violation-use-memo-opt-in--lint.expect.md

@@ -1,49 +0,0 @@
-
-## Input
-
-```javascript
-// @inferEffectDependencies @outputMode:"lint" @panicThreshold:"none"
-import {print} from 'shared-runtime';
-import useEffectWrapper from 'useEffectWrapper';
-import {AUTODEPS} from 'react';
-
-function Foo({propVal}) {
-  'use memo';
-  const arr = [propVal];
-  useEffectWrapper(() => print(arr), AUTODEPS);
-
-  const arr2 = [];
-  useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
-  arr2.push(2);
-  return {arr, arr2};
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Foo,
-  params: [{propVal: 1}],
-  sequentialRenders: [{propVal: 1}, {propVal: 2}],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot infer dependencies of this effect. This will break your build!
-
-To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.
-
-error.infer-effect-deps-with-rule-violation-use-memo-opt-in--lint.ts:9:2
-   7 |   'use memo';
-   8 |   const arr = [propVal];
->  9 |   useEffectWrapper(() => print(arr), AUTODEPS);
-     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Cannot infer dependencies
-  10 |
-  11 |   const arr2 = [];
-  12 |   useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/infer-effect-deps-with-rule-violation--compile.expect.md

@@ -1,58 +0,0 @@
-
-## Input
-
-```javascript
-// @inferEffectDependencies @panicThreshold:"none"
-import {print} from 'shared-runtime';
-import useEffectWrapper from 'useEffectWrapper';
-import {AUTODEPS} from 'react';
-
-function Foo({propVal}) {
-  const arr = [propVal];
-  useEffectWrapper(() => print(arr), AUTODEPS);
-
-  const arr2 = [];
-  useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
-  arr2.push(2);
-  return {arr, arr2};
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Foo,
-  params: [{propVal: 1}],
-  sequentialRenders: [{propVal: 1}, {propVal: 2}],
-};
-
-```
-
-## Code
-
-```javascript
-// @inferEffectDependencies @panicThreshold:"none"
-import { print } from "shared-runtime";
-import useEffectWrapper from "useEffectWrapper";
-import { AUTODEPS } from "react";
-
-function Foo(t0) {
-  const { propVal } = t0;
-  const arr = [propVal];
-  useEffectWrapper(() => print(arr), [arr]);
-
-  const arr2 = [];
-  useEffectWrapper(() => arr2.push(propVal), [arr2, propVal]);
-  arr2.push(2);
-  return { arr, arr2 };
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Foo,
-  params: [{ propVal: 1 }],
-  sequentialRenders: [{ propVal: 1 }, { propVal: 2 }],
-};
-
-```
-      
-### Eval output
-(kind: ok) {"arr":[1],"arr2":[2]}
-{"arr":[2],"arr2":[2]}
-logs: [[ 1 ],[ 2 ]]

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/retry-lint-comparison/infer-effect-deps-with-rule-violation--compile.js

@@ -1,20 +0,0 @@
-// @inferEffectDependencies @panicThreshold:"none"
-import {print} from 'shared-runtime';
-import useEffectWrapper from 'useEffectWrapper';
-import {AUTODEPS} from 'react';
-
-function Foo({propVal}) {
-  const arr = [propVal];
-  useEffectWrapper(() => print(arr), AUTODEPS);
-
-  const arr2 = [];
-  useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
-  arr2.push(2);
-  return {arr, arr2};
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Foo,
-  params: [{propVal: 1}],
-  sequentialRenders: [{propVal: 1}, {propVal: 2}],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/retry-no-emit.expect.md

@@ -0,0 +1,66 @@
+
+## Input
+
+```javascript
+// @inferEffectDependencies @noEmit @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
+import {print} from 'shared-runtime';
+import useEffectWrapper from 'useEffectWrapper';
+import {AUTODEPS} from 'react';
+
+function Foo({propVal}) {
+  const arr = [propVal];
+  useEffectWrapper(() => print(arr), AUTODEPS);
+
+  const arr2 = [];
+  useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
+  arr2.push(2);
+  return {arr, arr2};
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{propVal: 1}],
+  sequentialRenders: [{propVal: 1}, {propVal: 2}],
+};
+
+```
+
+## Code
+
+```javascript
+// @inferEffectDependencies @noEmit @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
+import { print } from "shared-runtime";
+import useEffectWrapper from "useEffectWrapper";
+import { AUTODEPS } from "react";
+
+function Foo({ propVal }) {
+  const arr = [propVal];
+  useEffectWrapper(() => print(arr), AUTODEPS);
+
+  const arr2 = [];
+  useEffectWrapper(() => arr2.push(propVal), AUTODEPS);
+  arr2.push(2);
+  return { arr, arr2 };
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Foo,
+  params: [{ propVal: 1 }],
+  sequentialRenders: [{ propVal: 1 }, { propVal: 2 }],
+};
+
+```
+
+## Logs
+
+```
+{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":227},"end":{"line":14,"column":1,"index":441},"filename":"retry-no-emit.ts"},"detail":{"options":{"category":"Immutability","reason":"This value cannot be modified","description":"Modifying a value previously passed as an argument to a hook is not allowed. Consider moving the modification before calling the hook","details":[{"kind":"error","loc":{"start":{"line":12,"column":2,"index":404},"end":{"line":12,"column":6,"index":408},"filename":"retry-no-emit.ts","identifierName":"arr2"},"message":"value cannot be modified"}]}}}
+{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":280},"end":{"line":8,"column":46,"index":324},"filename":"retry-no-emit.ts"},"decorations":[{"start":{"line":8,"column":31,"index":309},"end":{"line":8,"column":34,"index":312},"filename":"retry-no-emit.ts","identifierName":"arr"}]}
+{"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":11,"column":2,"index":348},"end":{"line":11,"column":54,"index":400},"filename":"retry-no-emit.ts"},"decorations":[{"start":{"line":11,"column":25,"index":371},"end":{"line":11,"column":29,"index":375},"filename":"retry-no-emit.ts","identifierName":"arr2"},{"start":{"line":11,"column":25,"index":371},"end":{"line":11,"column":29,"index":375},"filename":"retry-no-emit.ts","identifierName":"arr2"},{"start":{"line":11,"column":35,"index":381},"end":{"line":11,"column":42,"index":388},"filename":"retry-no-emit.ts","identifierName":"propVal"}]}
+{"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":227},"end":{"line":14,"column":1,"index":441},"filename":"retry-no-emit.ts"},"fnName":"Foo","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
+```
+      
+### Eval output
+(kind: ok) {"arr":[1],"arr2":[2]}
+{"arr":[2],"arr2":[2]}
+logs: [[ 1 ],[ 2 ]]

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/retry-no-emit.js

@@ -1,10 +1,9 @@
-// @inferEffectDependencies @panicThreshold:"none"
+// @inferEffectDependencies @noEmit @panicThreshold:"none" @loggerTestOnly @enableNewMutationAliasingModel
 import {print} from 'shared-runtime';
 import useEffectWrapper from 'useEffectWrapper';
 import {AUTODEPS} from 'react';
 
 function Foo({propVal}) {
-  'use memo';
   const arr = [propVal];
   useEffectWrapper(() => print(arr), AUTODEPS);
 

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

@@ -20,40 +20,10 @@ function Component() {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @enableOptimizeForSSR
+// @enableOptimizeForSSR
 function Component() {
-  const $ = _c(4);
-  const [state, setState] = useState(0);
-  const ref = useRef(null);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = (e) => {
-      setState(e.target.value);
-    };
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  const onChange = t0;
-  let t1;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = () => {
-      log(ref.current.value);
-    };
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  useEffect(t1);
-  let t2;
-  if ($[2] !== state) {
-    t2 = <input value={state} onChange={onChange} ref={ref} />;
-    $[2] = state;
-    $[3] = t2;
-  } else {
-    t2 = $[3];
-  }
-  return t2;
+  const state = 0;
+  return <input value={state} />;
 }
 
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-infer-event-handlers-from-setState.expect.md

@@ -22,40 +22,12 @@ function Component() {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @enableOptimizeForSSR
+// @enableOptimizeForSSR
 function Component() {
-  const $ = _c(4);
-  const [state, setState] = useState(0);
+  const state = 0;
   const ref = useRef(null);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = (e) => {
-      setState(e.target.value);
-    };
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  const onChange = t0;
-  let t1;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = () => {
-      log(ref.current.value);
-    };
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  useEffect(t1);
-  let t2;
-  if ($[2] !== state) {
-    t2 = <CustomInput value={state} onChange={onChange} ref={ref} />;
-    $[2] = state;
-    $[3] = t2;
-  } else {
-    t2 = $[3];
-  }
-  return t2;
+  const onChange = undefined;
+  return <CustomInput value={state} onChange={onChange} ref={ref} />;
 }
 
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-infer-event-handlers-from-startTransition.expect.md

@@ -25,43 +25,13 @@ function Component() {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @enableOptimizeForSSR
+// @enableOptimizeForSSR
 function Component() {
-  const $ = _c(4);
-  const [, startTransition] = useTransition();
-  const [state, setState] = useState(0);
+  useTransition();
+  const state = 0;
   const ref = useRef(null);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = (e) => {
-      startTransition(() => {
-        setState.call(null, e.target.value);
-      });
-    };
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  const onChange = t0;
-  let t1;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = () => {
-      log(ref.current.value);
-    };
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  useEffect(t1);
-  let t2;
-  if ($[2] !== state) {
-    t2 = <CustomInput value={state} onChange={onChange} ref={ref} />;
-    $[2] = state;
-    $[3] = t2;
-  } else {
-    t2 = $[3];
-  }
-  return t2;
+  const onChange = undefined;
+  return <CustomInput value={state} onChange={onChange} ref={ref} />;
 }
 
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-use-reducer-initializer.expect.md

@@ -25,7 +25,7 @@ function Component() {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @enableOptimizeForSSR
+// @enableOptimizeForSSR
 
 import { useReducer } from "react";
 
@@ -34,41 +34,8 @@ const initializer = (x) => {
 };
 
 function Component() {
-  const $ = _c(4);
-  const [state, dispatch] = useReducer(_temp, 0, initializer);
-  const ref = useRef(null);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = (e) => {
-      dispatch(e.target.value);
-    };
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  const onChange = t0;
-  let t1;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = () => {
-      log(ref.current.value);
-    };
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  useEffect(t1);
-  let t2;
-  if ($[2] !== state) {
-    t2 = <input value={state} onChange={onChange} ref={ref} />;
-    $[2] = state;
-    $[3] = t2;
-  } else {
-    t2 = $[3];
-  }
-  return t2;
-}
-function _temp(_, next) {
-  return next;
+  const state = initializer(0);
+  return <input value={state} />;
 }
 
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/ssr/ssr-use-reducer.expect.md

@@ -23,46 +23,13 @@ function Component() {
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime"; // @enableOptimizeForSSR
+// @enableOptimizeForSSR
 
 import { useReducer } from "react";
 
 function Component() {
-  const $ = _c(4);
-  const [state, dispatch] = useReducer(_temp, 0);
-  const ref = useRef(null);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = (e) => {
-      dispatch(e.target.value);
-    };
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  const onChange = t0;
-  let t1;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = () => {
-      log(ref.current.value);
-    };
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  useEffect(t1);
-  let t2;
-  if ($[2] !== state) {
-    t2 = <input value={state} onChange={onChange} ref={ref} />;
-    $[2] = state;
-    $[3] = t2;
-  } else {
-    t2 = $[3];
-  }
-  return t2;
-}
-function _temp(_, next) {
-  return next;
+  const state = 0;
+  return <input value={state} />;
 }
 
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-memo-noemit.expect.md

@@ -2,7 +2,7 @@
 ## Input
 
 ```javascript
-// @outputMode:"lint"
+// @noEmit
 
 function Foo() {
   'use memo';
@@ -19,7 +19,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Code
 
 ```javascript
-// @outputMode:"lint"
+// @noEmit
 
 function Foo() {
   "use memo";

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/use-memo-noemit.js

@@ -1,4 +1,4 @@
-// @outputMode:"lint"
+// @noEmit
 
 function Foo() {
   'use memo';

compiler/packages/eslint-plugin-react-compiler/src/shared/RunReactCompiler.ts

@@ -21,7 +21,7 @@ import {isDeepStrictEqual} from 'util';
 import type {ParseResult} from '@babel/parser';
 
 const COMPILER_OPTIONS: PluginOptions = {
-  outputMode: 'lint',
+  noEmit: true,
   panicThreshold: 'none',
   // Don't emit errors on Flow suppressions--Flow already gave a signal
   flowSuppressions: false,

compiler/packages/snap/src/runner.ts

@@ -53,10 +53,8 @@ const opts: RunnerOptions = yargs
   .default('worker-threads', true)
   .boolean('watch')
   .describe('watch', 'Run compiler in watch mode, re-running after changes')
-  .alias('w', 'watch')
   .default('watch', false)
   .boolean('update')
-  .alias('u', 'update')
   .describe('update', 'Update fixtures')
   .default('update', false)
   .boolean('filter')

packages/eslint-plugin-react-hooks/src/shared/RunReactCompiler.ts

@@ -22,7 +22,7 @@ import {isDeepStrictEqual} from 'util';
 import type {ParseResult} from '@babel/parser';
 
 const COMPILER_OPTIONS: PluginOptions = {
-  outputMode: 'lint',
+  noEmit: true,
   panicThreshold: 'none',
   // Don't emit errors on Flow suppressions--Flow already gave a signal
   flowSuppressions: false,

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

@@ -584,75 +584,4 @@ describe('ProfilerContext', () => {
     await utils.actAsync(() => context.selectFiber(childID, 'Child'));
     expect(inspectedElementID).toBe(parentID);
   });
-
-  it('should toggle profiling when the keyboard shortcut is pressed', async () => {
-    // Context providers
-    const Profiler =
-      require('react-devtools-shared/src/devtools/views/Profiler/Profiler').default;
-    const {
-      TimelineContextController,
-    } = require('react-devtools-timeline/src/TimelineContext');
-    const {
-      SettingsContextController,
-    } = require('react-devtools-shared/src/devtools/views/Settings/SettingsContext');
-    const {
-      ModalDialogContextController,
-    } = require('react-devtools-shared/src/devtools/views/ModalDialog');
-
-    // Dom component for profiling to be enabled
-    const Component = () => null;
-    utils.act(() => render(<Component />));
-
-    const profilerContainer = document.createElement('div');
-    document.body.appendChild(profilerContainer);
-
-    // Create a root for the profiler
-    const profilerRoot = ReactDOMClient.createRoot(profilerContainer);
-
-    // Render the profiler
-    utils.act(() => {
-      profilerRoot.render(
-        <Contexts>
-          <SettingsContextController browserTheme="light">
-            <ModalDialogContextController>
-              <TimelineContextController>
-                <Profiler />
-              </TimelineContextController>
-            </ModalDialogContextController>
-          </SettingsContextController>
-        </Contexts>,
-      );
-    });
-
-    // Verify that the profiler is not profiling.
-    expect(store.profilerStore.isProfilingBasedOnUserInput).toBe(false);
-
-    // Trigger the keyboard shortcut.
-    const ownerWindow = profilerContainer.ownerDocument.defaultView;
-    const isMac =
-      typeof navigator !== 'undefined' &&
-      navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-
-    const keyEvent = new KeyboardEvent('keydown', {
-      key: 'e',
-      metaKey: isMac,
-      ctrlKey: !isMac,
-      bubbles: true,
-    });
-
-    // Dispatch keyboard event to toggle profiling on
-    // Try utils.actAsync with recursivelyFlush=false
-    await utils.actAsync(() => {
-      ownerWindow.dispatchEvent(keyEvent);
-    }, false);
-    expect(store.profilerStore.isProfilingBasedOnUserInput).toBe(true);
-
-    // Dispatch keyboard event to toggle profiling off
-    await utils.actAsync(() => {
-      ownerWindow.dispatchEvent(keyEvent);
-    }, false);
-    expect(store.profilerStore.isProfilingBasedOnUserInput).toBe(false);
-
-    document.body.removeChild(profilerContainer);
-  });
 });

packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js

@@ -8,7 +8,7 @@
  */
 
 import * as React from 'react';
-import {Fragment, useContext, useEffect, useRef, useEffectEvent} from 'react';
+import {Fragment, useContext} from 'react';
 import {ModalDialog} from '../ModalDialog';
 import {ProfilerContext} from './ProfilerContext';
 import TabBar from '../TabBar';
@@ -38,11 +38,6 @@ import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
 import styles from './Profiler.css';
 
 function Profiler(_: {}) {
-  const profilerRef = useRef<HTMLDivElement | null>(null);
-  const isMac =
-    typeof navigator !== 'undefined' &&
-    navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-
   const {
     didRecordCommits,
     isProcessingData,
@@ -52,8 +47,6 @@ function Profiler(_: {}) {
     selectedTabID,
     selectTab,
     supportsProfiling,
-    startProfiling,
-    stopProfiling,
   } = useContext(ProfilerContext);
 
   const {file: timelineTraceEventData, searchInputContainerRef} =
@@ -63,32 +56,6 @@ function Profiler(_: {}) {
 
   const isLegacyProfilerSelected = selectedTabID !== 'timeline';
 
-  // Cmd+E to start/stop profiler recording
-  const handleKeyDown = useEffectEvent((event: KeyboardEvent) => {
-    const correctModifier = isMac ? event.metaKey : event.ctrlKey;
-    if (correctModifier && event.key === 'e') {
-      if (isProfiling) {
-        stopProfiling();
-      } else {
-        startProfiling();
-      }
-      event.preventDefault();
-      event.stopPropagation();
-    }
-  });
-
-  useEffect(() => {
-    const div = profilerRef.current;
-    if (!div) {
-      return;
-    }
-    const ownerWindow = div.ownerDocument.defaultView;
-    ownerWindow.addEventListener('keydown', handleKeyDown);
-    return () => {
-      ownerWindow.removeEventListener('keydown', handleKeyDown);
-    };
-  }, []);
-
   let view = null;
   if (didRecordCommits || selectedTabID === 'timeline') {
     switch (selectedTabID) {
@@ -145,7 +112,7 @@ function Profiler(_: {}) {
 
   return (
     <SettingsModalContextController>
-      <div ref={profilerRef} className={styles.Profiler}>
+      <div className={styles.Profiler}>
         <div className={styles.LeftColumn}>
           <div className={styles.Toolbar}>
             <RecordToggle disabled={!supportsProfiling} />

packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js

@@ -30,19 +30,13 @@ export default function RecordToggle({disabled}: Props): React.Node {
     className = styles.ActiveRecordToggle;
   }
 
-  const isMac =
-    typeof navigator !== 'undefined' &&
-    navigator.platform.toUpperCase().indexOf('MAC') >= 0;
-  const shortcut = isMac ? '⌘E' : 'Ctrl+E';
-  const title = `${isProfiling ? 'Stop' : 'Start'} profiling - ${shortcut}`;
-
   return (
     <Button
       className={className}
       disabled={disabled}
       onClick={isProfiling ? stopProfiling : startProfiling}
       testName="ProfilerToggleButton"
-      title={title}>
+      title={isProfiling ? 'Stop profiling' : 'Start profiling'}>
       <ButtonIcon type="record" />
     </Button>
   );