[compiler] Repro for missed case of global mutation

I realized a pattern of global mutations that we don't currently detect (both in the old and new inference models). If you hide the mutation inside a function returned from another function, we lose track of it:

```js
const f = () => () => {
  global.property = true;
};
f()();
```

Roughly speaking, we need to track that if the return value of `f` is mutated, that it should count as triggering some effects. Right now we encode the idea that a function specifically can have side effects if it is mutated, but other values don't have a way to represent this. I'm thinking that we change the shape of the `Create` effect a bit, and allow room for an optional "mutation effects" array. Then, InferMutationAliasingRanges can visit these effects like it does when trying to find transitive function effects.

.eslintignore

@@ -28,3 +28,6 @@ packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/
 packages/react-devtools-shell/dist
 packages/react-devtools-timeline/dist
 packages/react-devtools-timeline/static
+
+# Imported third-party Flow types
+flow-typed/

.eslintrc.js

@@ -468,6 +468,7 @@ module.exports = {
       files: ['packages/react-server-dom-webpack/**/*.js'],
       globals: {
         __webpack_chunk_load__: 'readonly',
+        __webpack_get_script_filename__: 'readonly',
         __webpack_require__: 'readonly',
       },
     },
@@ -546,13 +547,10 @@ module.exports = {
   },
 
   globals: {
-    $Call: 'readonly',
-    $ElementType: 'readonly',
     $Flow$ModuleRef: 'readonly',
     $FlowFixMe: 'readonly',
     $Keys: 'readonly',
     $NonMaybeType: 'readonly',
-    $PropertyType: 'readonly',
     $ReadOnly: 'readonly',
     $ReadOnlyArray: 'readonly',
     $ArrayBufferView: 'readonly',
@@ -567,6 +565,7 @@ module.exports = {
     BigInt: 'readonly',
     BigInt64Array: 'readonly',
     BigUint64Array: 'readonly',
+    CacheType: 'readonly',
     Class: 'readonly',
     ClientRect: 'readonly',
     CopyInspectedElementPath: 'readonly',
@@ -581,13 +580,15 @@ module.exports = {
     IteratorResult: 'readonly',
     JSONValue: 'readonly',
     JSResourceReference: 'readonly',
+    mixin$Animatable: 'readonly',
     MouseEventHandler: 'readonly',
     NavigateEvent: 'readonly',
+    PerformanceMeasureOptions: 'readonly',
     PropagationPhases: 'readonly',
     PropertyDescriptor: 'readonly',
-    React$AbstractComponent: 'readonly',
+    PropertyDescriptorMap: 'readonly',
+    Proxy$traps: 'readonly',
     React$Component: 'readonly',
-    React$ComponentType: 'readonly',
     React$Config: 'readonly',
     React$Context: 'readonly',
     React$Element: 'readonly',
@@ -619,7 +620,6 @@ module.exports = {
     PropertyIndexedKeyframes: 'readonly',
     KeyframeAnimationOptions: 'readonly',
     GetAnimationsOptions: 'readonly',
-    Animatable: 'readonly',
     ScrollTimeline: 'readonly',
     EventListenerOptionsOrUseCapture: 'readonly',
     FocusOptions: 'readonly',

.github/workflows/compiler_playground.yml

@@ -57,8 +57,6 @@ jobs:
           key: playwright-browsers-v6-${{ runner.arch }}-${{ runner.os }}-${{ steps.playwright_version.outputs.playwright_version }}
       - run: npx playwright install --with-deps chromium
         if: steps.cache_playwright_browsers.outputs.cache-hit != 'true'
-      - run: npx playwright install-deps
-        if: steps.cache_playwright_browsers.outputs.cache-hit == 'true'
       - run: CI=true yarn test
       - run: ls -R test-results
         if: '!cancelled()'

.github/workflows/runtime_build_and_test.yml

@@ -316,7 +316,7 @@ jobs:
         if: steps.node_modules.outputs.cache-hit != 'true'
       - run: ./scripts/react-compiler/build-compiler.sh && ./scripts/react-compiler/link-compiler.sh
       - run: yarn workspace eslint-plugin-react-hooks test
-        
+
   # ----- BUILD -----
   build_and_lint:
     name: yarn build and lint
@@ -811,9 +811,18 @@ jobs:
           pattern: _build_*
           path: build
           merge-multiple: true
-      - run: |
-          npx playwright install
-          sudo npx playwright install-deps
+      - name: Check Playwright version
+        id: playwright_version
+        run: echo "playwright_version=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//' | head -1)" >> "$GITHUB_OUTPUT"
+      - name: Cache Playwright Browsers for version ${{ steps.playwright_version.outputs.playwright_version }}
+        id: cache_playwright_browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-browsers-v6-${{ runner.arch }}-${{ runner.os }}-${{ steps.playwright_version.outputs.playwright_version }}
+      - name: Playwright install deps
+        if: steps.cache_playwright_browsers.outputs.cache-hit != 'true'
+        run: npx playwright install --with-deps chromium
       - run: ./scripts/ci/run_devtools_e2e_tests.js
         env:
           RELEASE_CHANNEL: experimental

.github/workflows/shared_close_direct_sync_branch_prs.yml

@@ -18,6 +18,7 @@ jobs:
     permissions:
       # Used to create a review and close PRs
       pull-requests: write
+      contents: write
     steps:
       - name: Close PR
         uses: actions/github-script@v7

babel.config-ts.js

@@ -8,6 +8,7 @@ module.exports = {
     '@babel/plugin-syntax-jsx',
     '@babel/plugin-transform-flow-strip-types',
     ['@babel/plugin-transform-class-properties', {loose: true}],
+    ['@babel/plugin-transform-private-methods', {loose: true}],
     '@babel/plugin-transform-classes',
   ],
   presets: [

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

@@ -0,0 +1,103 @@
+/**
+ * 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 MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';
+import {parseConfigPragmaAsString} from 'babel-plugin-react-compiler';
+import type {editor} from 'monaco-editor';
+import * as monaco from 'monaco-editor';
+import parserBabel from 'prettier/plugins/babel';
+import * as prettierPluginEstree from 'prettier/plugins/estree';
+import * as prettier from 'prettier/standalone';
+import {useState, useEffect} from 'react';
+import {Resizable} from 're-resizable';
+import {useStore} from '../StoreContext';
+import {monacoOptions} from './monacoOptions';
+
+loader.config({monaco});
+
+export default function ConfigEditor(): JSX.Element {
+  const [, setMonaco] = useState<Monaco | null>(null);
+  const store = useStore();
+
+  // Parse string-based override config from pragma comment and format it
+  const [configJavaScript, setConfigJavaScript] = useState('');
+
+  useEffect(() => {
+    const pragma = store.source.substring(0, store.source.indexOf('\n'));
+    const configString = `(${parseConfigPragmaAsString(pragma)})`;
+
+    prettier
+      .format(configString, {
+        semi: true,
+        parser: 'babel-ts',
+        plugins: [parserBabel, prettierPluginEstree],
+      })
+      .then(formatted => {
+        setConfigJavaScript(formatted);
+      })
+      .catch(error => {
+        console.error('Error formatting config:', error);
+        setConfigJavaScript('({})'); // Return empty object if not valid for now
+        //TODO: Add validation and error handling for config
+      });
+    console.log('Config:', configString);
+  }, [store.source]);
+
+  const handleChange: (value: string | undefined) => void = value => {
+    if (!value) return;
+
+    // TODO: Implement sync logic to update pragma comments in the source
+    console.log('Config changed:', value);
+  };
+
+  const handleMount: (
+    _: editor.IStandaloneCodeEditor,
+    monaco: Monaco,
+  ) => void = (_, monaco) => {
+    setMonaco(monaco);
+
+    const uri = monaco.Uri.parse(`file:///config.js`);
+    const model = monaco.editor.getModel(uri);
+    if (model) {
+      model.updateOptions({tabSize: 2});
+    }
+  };
+
+  return (
+    <div className="relative flex flex-col flex-none border-r border-gray-200">
+      <h2 className="p-4 duration-150 ease-in border-b cursor-default border-grey-200 font-light text-secondary">
+        Config Overrides
+      </h2>
+      <Resizable
+        minWidth={300}
+        maxWidth={600}
+        defaultSize={{width: 350, height: 'auto'}}
+        enable={{right: true}}
+        className="!h-[calc(100vh_-_3.5rem_-_4rem)]">
+        <MonacoEditor
+          path={'config.js'}
+          language={'javascript'}
+          value={configJavaScript}
+          onMount={handleMount}
+          onChange={handleChange}
+          options={{
+            ...monacoOptions,
+            readOnly: true,
+            lineNumbers: 'off',
+            folding: false,
+            renderLineHighlight: 'none',
+            scrollBeyondLastLine: false,
+            hideCursorInOverviewRuler: true,
+            overviewRulerBorder: false,
+            overviewRulerLanes: 0,
+            fontSize: 12,
+          }}
+        />
+      </Resizable>
+    </div>
+  );
+}

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

@@ -37,6 +37,7 @@ import {
   type Store,
 } from '../../lib/stores';
 import {useStore, useStoreDispatch} from '../StoreContext';
+import ConfigEditor from './ConfigEditor';
 import Input from './Input';
 import {
   CompilerOutput,
@@ -46,6 +47,7 @@ import {
 } from './Output';
 import {transformFromAstSync} from '@babel/core';
 import {LoggerEvent} from 'babel-plugin-react-compiler/dist/Entrypoint';
+import {useSearchParams} from 'next/navigation';
 
 function parseInput(
   input: string,
@@ -291,7 +293,13 @@ export default function Editor(): JSX.Element {
     [deferredStore.source],
   );
 
+  // TODO: Remove this once the config editor is more stable
+  const searchParams = useSearchParams();
+  const search = searchParams.get('showConfig');
+  const shouldShowConfig = search === 'true';
+
   useMountEffect(() => {
+    // Initialize store
     let mountStore: Store;
     try {
       mountStore = initStoreFromUrlOrLocalStorage();
@@ -328,6 +336,7 @@ export default function Editor(): JSX.Element {
   return (
     <>
       <div className="relative flex basis top-14">
+        {shouldShowConfig && <ConfigEditor />}
         <div className={clsx('relative sm:basis-1/4')}>
           <Input language={language} errors={errors} />
         </div>

compiler/package.json

@@ -19,7 +19,8 @@
     "test": "yarn workspaces run test",
     "snap": "yarn workspace babel-plugin-react-compiler run snap",
     "snap:build": "yarn workspace snap run build",
-    "npm:publish": "node scripts/release/publish"
+    "npm:publish": "node scripts/release/publish",
+    "eslint-docs": "yarn workspace babel-plugin-react-compiler build && node scripts/build-eslint-docs.js"
   },
   "dependencies": {
     "fs-extra": "^4.0.2",

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

@@ -7,9 +7,10 @@
 
 import * as t from '@babel/types';
 import {codeFrameColumns} from '@babel/code-frame';
-import type {SourceLocation} from './HIR';
+import {type SourceLocation} from './HIR';
 import {Err, Ok, Result} from './Utils/Result';
 import {assertExhaustive} from './Utils/utils';
+import invariant from 'invariant';
 
 export enum ErrorSeverity {
   /**
@@ -47,8 +48,9 @@ export enum ErrorSeverity {
 }
 
 export type CompilerDiagnosticOptions = {
+  category: ErrorCategory;
   severity: ErrorSeverity;
-  category: string;
+  reason: string;
   description: string;
   details: Array<CompilerDiagnosticDetail>;
   suggestions?: Array<CompilerSuggestion> | null | undefined;
@@ -58,11 +60,15 @@ export type CompilerDiagnosticDetail =
   /**
    * A/the source of the error
    */
-  {
-    kind: 'error';
-    loc: SourceLocation | null;
-    message: string;
-  };
+  | {
+      kind: 'error';
+      loc: SourceLocation | null;
+      message: string;
+    }
+  | {
+      kind: 'hint';
+      message: string;
+    };
 
 export enum CompilerSuggestionOperation {
   InsertBefore,
@@ -87,9 +93,10 @@ export type CompilerSuggestion =
     };
 
 export type CompilerErrorDetailOptions = {
+  category: ErrorCategory;
+  severity: ErrorSeverity;
   reason: string;
   description?: string | null | undefined;
-  severity: ErrorSeverity;
   loc: SourceLocation | null;
   suggestions?: Array<CompilerSuggestion> | null | undefined;
 };
@@ -115,8 +122,8 @@ export class CompilerDiagnostic {
     return new CompilerDiagnostic({...options, details: []});
   }
 
-  get category(): CompilerDiagnosticOptions['category'] {
-    return this.options.category;
+  get reason(): CompilerDiagnosticOptions['reason'] {
+    return this.options.reason;
   }
   get description(): CompilerDiagnosticOptions['description'] {
     return this.options.description;
@@ -127,6 +134,9 @@ export class CompilerDiagnostic {
   get suggestions(): CompilerDiagnosticOptions['suggestions'] {
     return this.options.suggestions;
   }
+  get category(): ErrorCategory {
+    return this.options.category;
+  }
 
   withDetail(detail: CompilerDiagnosticDetail): CompilerDiagnostic {
     this.options.details.push(detail);
@@ -134,12 +144,17 @@ export class CompilerDiagnostic {
   }
 
   primaryLocation(): SourceLocation | null {
-    return this.options.details.filter(d => d.kind === 'error')[0]?.loc ?? null;
+    const firstErrorDetail = this.options.details.filter(
+      d => d.kind === 'error',
+    )[0];
+    return firstErrorDetail != null && firstErrorDetail.kind === 'error'
+      ? firstErrorDetail.loc
+      : null;
   }
 
   printErrorMessage(source: string, options: PrintErrorMessageOptions): string {
     const buffer = [
-      printErrorSummary(this.severity, this.category),
+      printErrorSummary(this.severity, this.reason),
       '\n\n',
       this.description,
     ];
@@ -167,9 +182,14 @@ export class CompilerDiagnostic {
           buffer.push(codeFrame);
           break;
         }
+        case 'hint': {
+          buffer.push('\n\n');
+          buffer.push(detail.message);
+          break;
+        }
         default: {
           assertExhaustive(
-            detail.kind,
+            detail,
             `Unexpected detail kind ${(detail as any).kind}`,
           );
         }
@@ -179,7 +199,7 @@ export class CompilerDiagnostic {
   }
 
   toString(): string {
-    const buffer = [printErrorSummary(this.severity, this.category)];
+    const buffer = [printErrorSummary(this.severity, this.reason)];
     if (this.description != null) {
       buffer.push(`. ${this.description}.`);
     }
@@ -217,6 +237,9 @@ export class CompilerErrorDetail {
   get suggestions(): CompilerErrorDetailOptions['suggestions'] {
     return this.options.suggestions;
   }
+  get category(): ErrorCategory {
+    return this.options.category;
+  }
 
   primaryLocation(): SourceLocation | null {
     return this.loc;
@@ -266,13 +289,14 @@ export class CompilerError extends Error {
 
   static invariant(
     condition: unknown,
-    options: Omit<CompilerErrorDetailOptions, 'severity'>,
+    options: Omit<CompilerErrorDetailOptions, 'severity' | 'category'>,
   ): asserts condition {
     if (!condition) {
       const errors = new CompilerError();
       errors.pushErrorDetail(
         new CompilerErrorDetail({
           ...options,
+          category: ErrorCategory.Invariant,
           severity: ErrorSeverity.Invariant,
         }),
       );
@@ -287,23 +311,28 @@ export class CompilerError extends Error {
   }
 
   static throwTodo(
-    options: Omit<CompilerErrorDetailOptions, 'severity'>,
+    options: Omit<CompilerErrorDetailOptions, 'severity' | 'category'>,
   ): never {
     const errors = new CompilerError();
     errors.pushErrorDetail(
-      new CompilerErrorDetail({...options, severity: ErrorSeverity.Todo}),
+      new CompilerErrorDetail({
+        ...options,
+        severity: ErrorSeverity.Todo,
+        category: ErrorCategory.Todo,
+      }),
     );
     throw errors;
   }
 
   static throwInvalidJS(
-    options: Omit<CompilerErrorDetailOptions, 'severity'>,
+    options: Omit<CompilerErrorDetailOptions, 'severity' | 'category'>,
   ): never {
     const errors = new CompilerError();
     errors.pushErrorDetail(
       new CompilerErrorDetail({
         ...options,
         severity: ErrorSeverity.InvalidJS,
+        category: ErrorCategory.Syntax,
       }),
     );
     throw errors;
@@ -323,13 +352,14 @@ export class CompilerError extends Error {
   }
 
   static throwInvalidConfig(
-    options: Omit<CompilerErrorDetailOptions, 'severity'>,
+    options: Omit<CompilerErrorDetailOptions, 'severity' | 'category'>,
   ): never {
     const errors = new CompilerError();
     errors.pushErrorDetail(
       new CompilerErrorDetail({
         ...options,
         severity: ErrorSeverity.InvalidConfig,
+        category: ErrorCategory.Config,
       }),
     );
     throw errors;
@@ -393,6 +423,7 @@ export class CompilerError extends Error {
 
   push(options: CompilerErrorDetailOptions): CompilerErrorDetail {
     const detail = new CompilerErrorDetail({
+      category: options.category,
       reason: options.reason,
       description: options.description ?? null,
       severity: options.severity,
@@ -493,3 +524,358 @@ function printErrorSummary(severity: ErrorSeverity, message: string): string {
   }
   return `${severityCategory}: ${message}`;
 }
+
+/**
+ * See getRuleForCategory() for how these map to ESLint rules
+ */
+export enum ErrorCategory {
+  // Checking for valid hooks usage (non conditional, non-first class, non reactive, etc)
+  Hooks = 'Hooks',
+
+  // Checking for no capitalized calls (not definitively an error, hence separating)
+  CapitalizedCalls = 'CapitalizedCalls',
+
+  // Checking for static components
+  StaticComponents = 'StaticComponents',
+
+  // Checking for valid usage of manual memoization
+  UseMemo = 'UseMemo',
+
+  // Checking for higher order functions acting as factories for components/hooks
+  Factories = 'Factories',
+
+  // Checks that manual memoization is preserved
+  PreserveManualMemo = 'PreserveManualMemo',
+
+  // Checking for no mutations of props, hook arguments, hook return values
+  Immutability = 'Immutability',
+
+  // Checking for assignments to globals
+  Globals = 'Globals',
+
+  // Checking for valid usage of refs, ie no access during render
+  Refs = 'Refs',
+
+  // Checks for memoized effect deps
+  EffectDependencies = 'EffectDependencies',
+
+  // Checks for no setState in effect bodies
+  EffectSetState = 'EffectSetState',
+
+  EffectDerivationsOfState = 'EffectDerivationsOfState',
+
+  // Validates against try/catch in place of error boundaries
+  ErrorBoundaries = 'ErrorBoundaries',
+
+  // Checking for pure functions
+  Purity = 'Purity',
+
+  // Validates against setState in render
+  RenderSetState = 'RenderSetState',
+
+  // Internal invariants
+  Invariant = 'Invariant',
+
+  // Todos
+  Todo = 'Todo',
+
+  // Syntax errors
+  Syntax = 'Syntax',
+
+  // Checks for use of unsupported syntax
+  UnsupportedSyntax = 'UnsupportedSyntax',
+
+  // Config errors
+  Config = 'Config',
+
+  // Gating error
+  Gating = 'Gating',
+
+  // Suppressions
+  Suppression = 'Suppression',
+
+  // Issues with auto deps
+  AutomaticEffectDependencies = 'AutomaticEffectDependencies',
+
+  // Issues with `fire`
+  Fire = 'Fire',
+
+  // fbt-specific issues
+  FBT = 'FBT',
+}
+
+export type LintRule = {
+  // Stores the category the rule corresponds to, used to filter errors when reporting
+  category: ErrorCategory;
+
+  /**
+   * The "name" of the rule as it will be used by developers to enable/disable, eg
+   * "eslint-disable-nest line <name>"
+   */
+  name: string;
+
+  /**
+   * A description of the rule that appears somewhere in ESLint. This does not affect
+   * how error messages are formatted
+   */
+  description: string;
+
+  /**
+   * If true, this rule will automatically appear in the default, "recommended" ESLint
+   * rule set. Otherwise it will be part of an `allRules` export that developers can
+   * use to opt-in to showing output of all possible rules.
+   *
+   * NOTE: not all validations are enabled by default! Setting this flag only affects
+   * whether a given rule is part of the recommended set. The corresponding validation
+   * also should be enabled by default if you want the error to actually show up!
+   */
+  recommended: boolean;
+};
+
+const RULE_NAME_PATTERN = /^[a-z]+(-[a-z]+)*$/;
+
+export function getRuleForCategory(category: ErrorCategory): LintRule {
+  const rule = getRuleForCategoryImpl(category);
+  invariant(
+    RULE_NAME_PATTERN.test(rule.name),
+    `Invalid rule name, got '${rule.name}' but rules must match ${RULE_NAME_PATTERN.toString()}`,
+  );
+  return rule;
+}
+
+function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
+  switch (category) {
+    case ErrorCategory.AutomaticEffectDependencies: {
+      return {
+        category,
+        name: 'automatic-effect-dependencies',
+        description:
+          'Verifies that automatic effect dependencies are compiled if opted-in',
+        recommended: false,
+      };
+    }
+    case ErrorCategory.CapitalizedCalls: {
+      return {
+        category,
+        name: 'capitalized-calls',
+        description:
+          'Validates against calling capitalized functions/methods instead of using JSX',
+        recommended: false,
+      };
+    }
+    case ErrorCategory.Config: {
+      return {
+        category,
+        name: 'config',
+        description: 'Validates the compiler configuration options',
+        recommended: true,
+      };
+    }
+    case ErrorCategory.EffectDependencies: {
+      return {
+        category,
+        name: 'memoized-effect-dependencies',
+        description: 'Validates that effect dependencies are memoized',
+        recommended: false,
+      };
+    }
+    case ErrorCategory.EffectDerivationsOfState: {
+      return {
+        category,
+        name: 'no-deriving-state-in-effects',
+        description:
+          'Validates against deriving values from state in an effect',
+        recommended: false,
+      };
+    }
+    case ErrorCategory.EffectSetState: {
+      return {
+        category,
+        name: 'set-state-in-effect',
+        description:
+          'Validates against calling setState synchronously in an effect, which can lead to re-renders that degrade performance',
+        recommended: true,
+      };
+    }
+    case ErrorCategory.ErrorBoundaries: {
+      return {
+        category,
+        name: 'error-boundaries',
+        description:
+          'Validates usage of error boundaries instead of try/catch for errors in child components',
+        recommended: true,
+      };
+    }
+    case ErrorCategory.Factories: {
+      return {
+        category,
+        name: 'component-hook-factories',
+        description:
+          'Validates against higher order functions defining nested components or hooks. ' +
+          'Components and hooks should be defined at the module level',
+        recommended: true,
+      };
+    }
+    case ErrorCategory.FBT: {
+      return {
+        category,
+        name: 'fbt',
+        description: 'Validates usage of fbt',
+        recommended: false,
+      };
+    }
+    case ErrorCategory.Fire: {
+      return {
+        category,
+        name: 'fire',
+        description: 'Validates usage of `fire`',
+        recommended: false,
+      };
+    }
+    case ErrorCategory.Gating: {
+      return {
+        category,
+        name: 'gating',
+        description:
+          'Validates configuration of [gating mode](https://react.dev/reference/react-compiler/gating)',
+        recommended: true,
+      };
+    }
+    case ErrorCategory.Globals: {
+      return {
+        category,
+        name: 'globals',
+        description:
+          'Validates against assignment/mutation of globals during render, part of ensuring that ' +
+          '[side effects must render outside of render](https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)',
+        recommended: true,
+      };
+    }
+    case ErrorCategory.Hooks: {
+      return {
+        category,
+        name: 'hooks',
+        description: 'Validates the rules of hooks',
+        /**
+         * TODO: the "Hooks" rule largely reimplements the "rules-of-hooks" non-compiler rule.
+         * We need to dedeupe these (moving the remaining bits into the compiler) and then enable
+         * this rule.
+         */
+        recommended: false,
+      };
+    }
+    case ErrorCategory.Immutability: {
+      return {
+        category,
+        name: 'immutability',
+        description:
+          'Validates against mutating props, state, and other values that [are immutable](https://react.dev/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable)',
+        recommended: true,
+      };
+    }
+    case ErrorCategory.Invariant: {
+      return {
+        category,
+        name: 'invariant',
+        description: 'Internal invariants',
+        recommended: false,
+      };
+    }
+    case ErrorCategory.PreserveManualMemo: {
+      return {
+        category,
+        name: 'preserve-manual-memoization',
+        description:
+          'Validates that existing manual memoized is preserved by the compiler. ' +
+          'React Compiler will only compile components and hooks if its inference ' +
+          '[matches or exceeds the existing manual memoization](https://react.dev/learn/react-compiler/introduction#what-should-i-do-about-usememo-usecallback-and-reactmemo)',
+        recommended: true,
+      };
+    }
+    case ErrorCategory.Purity: {
+      return {
+        category,
+        name: 'purity',
+        description:
+          'Validates that [components/hooks are pure](https://react.dev/reference/rules/components-and-hooks-must-be-pure) by checking that they do not call known-impure functions',
+        recommended: true,
+      };
+    }
+    case ErrorCategory.Refs: {
+      return {
+        category,
+        name: 'refs',
+        description:
+          'Validates correct usage of refs, not reading/writing during render. See the "pitfalls" section in [`useRef()` usage](https://react.dev/reference/react/useRef#usage)',
+        recommended: true,
+      };
+    }
+    case ErrorCategory.RenderSetState: {
+      return {
+        category,
+        name: 'set-state-in-render',
+        description:
+          'Validates against setting state during render, which can trigger additional renders and potential infinite render loops',
+        recommended: true,
+      };
+    }
+    case ErrorCategory.StaticComponents: {
+      return {
+        category,
+        name: 'static-components',
+        description:
+          'Validates that components are static, not recreated every render. Components that are recreated dynamically can reset state and trigger excessive re-rendering',
+        recommended: true,
+      };
+    }
+    case ErrorCategory.Suppression: {
+      return {
+        category,
+        name: 'rule-suppression',
+        description: 'Validates against suppression of other rules',
+        recommended: false,
+      };
+    }
+    case ErrorCategory.Syntax: {
+      return {
+        category,
+        name: 'syntax',
+        description: 'Validates against invalid syntax',
+        recommended: false,
+      };
+    }
+    case ErrorCategory.Todo: {
+      return {
+        category,
+        name: 'todo',
+        description: 'Unimplemented features',
+        recommended: false,
+      };
+    }
+    case ErrorCategory.UnsupportedSyntax: {
+      return {
+        category,
+        name: 'unsupported-syntax',
+        description:
+          'Validates against syntax that we do not plan to support in React Compiler',
+        recommended: true,
+      };
+    }
+    case ErrorCategory.UseMemo: {
+      return {
+        category,
+        name: 'use-memo',
+        description:
+          'Validates usage of the useMemo() hook against common mistakes. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.',
+        recommended: true,
+      };
+    }
+    default: {
+      assertExhaustive(category, `Unsupported category ${category}`);
+    }
+  }
+}
+
+export const LintRules: Array<LintRule> = Object.keys(ErrorCategory).map(
+  category => getRuleForCategory(category as any),
+);

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

@@ -9,7 +9,7 @@ import {NodePath} from '@babel/core';
 import * as t from '@babel/types';
 import {Scope as BabelScope} from '@babel/traverse';
 
-import {CompilerError, ErrorSeverity} from '../CompilerError';
+import {CompilerError, ErrorCategory, ErrorSeverity} from '../CompilerError';
 import {
   EnvironmentConfig,
   GeneratedSource,
@@ -38,6 +38,7 @@ export function validateRestrictedImports(
     ImportDeclaration(importDeclPath) {
       if (restrictedImports.has(importDeclPath.node.source.value)) {
         error.push({
+          category: ErrorCategory.Todo,
           severity: ErrorSeverity.Todo,
           reason: 'Bailing out due to blocklisted import',
           description: `Import from module ${importDeclPath.node.source.value}`,
@@ -205,6 +206,7 @@ export class ProgramContext {
     }
     const error = new CompilerError();
     error.push({
+      category: ErrorCategory.Todo,
       severity: ErrorSeverity.Todo,
       reason: 'Encountered conflicting global in generated program',
       description: `Conflict from local binding ${name}`,

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

@@ -10,6 +10,7 @@ import * as t from '@babel/types';
 import {
   CompilerError,
   CompilerErrorDetail,
+  ErrorCategory,
   ErrorSeverity,
 } from '../CompilerError';
 import {ExternalFunction, ReactFunctionType} from '../HIR/Environment';
@@ -105,6 +106,7 @@ function findDirectivesDynamicGating(
           reason: `Dynamic gating directive is not a valid JavaScript identifier`,
           description: `Found '${directive.value.value}'`,
           severity: ErrorSeverity.InvalidReact,
+          category: ErrorCategory.Gating,
           loc: directive.loc ?? null,
           suggestions: null,
         });
@@ -121,6 +123,7 @@ function findDirectivesDynamicGating(
         .map(r => r.directive.value.value)
         .join(', ')}]`,
       severity: ErrorSeverity.InvalidReact,
+      category: ErrorCategory.Gating,
       loc: result[0].directive.loc ?? null,
       suggestions: null,
     });
@@ -456,6 +459,7 @@ export function compileProgram(
           reason:
             'Unexpected compiled functions when module scope opt-out is present',
           severity: ErrorSeverity.Invariant,
+          category: ErrorCategory.Invariant,
           loc: null,
         }),
       );
@@ -490,7 +494,20 @@ function findFunctionsToCompile(
 ): Array<CompileSource> {
   const queue: Array<CompileSource> = [];
   const traverseFunction = (fn: BabelFn, pass: CompilerPass): void => {
+    // In 'all' mode, compile only top level functions
+    if (
+      pass.opts.compilationMode === 'all' &&
+      fn.scope.getProgramParent() !== fn.scope.parent
+    ) {
+      return;
+    }
+
     const fnType = getReactFunctionType(fn, pass);
+
+    if (pass.opts.environment.validateNoDynamicallyCreatedComponentsOrHooks) {
+      validateNoDynamicallyCreatedComponentsOrHooks(fn, pass, programContext);
+    }
+
     if (fnType === null || programContext.alreadyCompiled.has(fn.node)) {
       return;
     }
@@ -811,6 +828,7 @@ function shouldSkipCompilation(
           description:
             "When the 'sources' config options is specified, the React compiler will only compile files with a name",
           severity: ErrorSeverity.InvalidConfig,
+          category: ErrorCategory.Config,
           loc: null,
         }),
       );
@@ -834,6 +852,73 @@ function shouldSkipCompilation(
   return false;
 }
 
+/**
+ * Validates that Components/Hooks are always defined at module level. This prevents scope reference
+ * errors that occur when the compiler attempts to optimize the nested component/hook while its
+ * parent function remains uncompiled.
+ */
+function validateNoDynamicallyCreatedComponentsOrHooks(
+  fn: BabelFn,
+  pass: CompilerPass,
+  programContext: ProgramContext,
+): void {
+  const parentNameExpr = getFunctionName(fn);
+  const parentName =
+    parentNameExpr !== null && parentNameExpr.isIdentifier()
+      ? parentNameExpr.node.name
+      : '<anonymous>';
+
+  const validateNestedFunction = (
+    nestedFn: NodePath<
+      t.FunctionDeclaration | t.FunctionExpression | t.ArrowFunctionExpression
+    >,
+  ): void => {
+    if (
+      nestedFn.node === fn.node ||
+      programContext.alreadyCompiled.has(nestedFn.node)
+    ) {
+      return;
+    }
+
+    if (nestedFn.scope.getProgramParent() !== nestedFn.scope.parent) {
+      const nestedFnType = getReactFunctionType(nestedFn as BabelFn, pass);
+      const nestedFnNameExpr = getFunctionName(nestedFn as BabelFn);
+      const nestedName =
+        nestedFnNameExpr !== null && nestedFnNameExpr.isIdentifier()
+          ? nestedFnNameExpr.node.name
+          : '<anonymous>';
+      if (nestedFnType === 'Component' || nestedFnType === 'Hook') {
+        CompilerError.throwDiagnostic({
+          category: ErrorCategory.Factories,
+          severity: ErrorSeverity.InvalidReact,
+          reason: `Components and hooks cannot be created dynamically`,
+          description: `The function \`${nestedName}\` appears to be a React ${nestedFnType.toLowerCase()}, but it's defined inside \`${parentName}\`. Components and Hooks should always be declared at module scope`,
+          details: [
+            {
+              kind: 'error',
+              message: 'this function dynamically created a component/hook',
+              loc: parentNameExpr?.node.loc ?? fn.node.loc ?? null,
+            },
+            {
+              kind: 'error',
+              message: 'the component is created here',
+              loc: nestedFnNameExpr?.node.loc ?? nestedFn.node.loc ?? null,
+            },
+          ],
+        });
+      }
+    }
+
+    nestedFn.skip();
+  };
+
+  fn.traverse({
+    FunctionDeclaration: validateNestedFunction,
+    FunctionExpression: validateNestedFunction,
+    ArrowFunctionExpression: validateNestedFunction,
+  });
+}
+
 function getReactFunctionType(
   fn: BabelFn,
   pass: CompilerPass,
@@ -872,11 +957,6 @@ function getReactFunctionType(
       return componentSyntaxType;
     }
     case 'all': {
-      // Compile only top level functions
-      if (fn.scope.getProgramParent() !== fn.scope.parent) {
-        return null;
-      }
-
       return getComponentOrHookLike(fn, hookPattern) ?? 'Other';
     }
     default: {

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

@@ -11,6 +11,7 @@ import {
   CompilerDiagnostic,
   CompilerError,
   CompilerSuggestionOperation,
+  ErrorCategory,
   ErrorSeverity,
 } from '../CompilerError';
 import {assertExhaustive} from '../Utils/utils';
@@ -183,9 +184,10 @@ export function suppressionsToCompilerError(
     }
     error.pushDiagnostic(
       CompilerDiagnostic.create({
-        category: reason,
+        reason: reason,
         description: `React Compiler only works when your components follow all the rules of React, disabling them may result in unexpected or incorrect behavior. Found suppression \`${suppressionRange.disableComment.value.trim()}\``,
         severity: ErrorSeverity.InvalidReact,
+        category: ErrorCategory.Suppression,
         suggestions: [
           {
             description: suggestion,

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

@@ -13,7 +13,11 @@ import {getOrInsertWith} from '../Utils/utils';
 import {Environment, GeneratedSource} from '../HIR';
 import {DEFAULT_EXPORT} from '../HIR/Environment';
 import {CompileProgramMetadata} from './Program';
-import {CompilerDiagnostic, CompilerDiagnosticOptions} from '../CompilerError';
+import {
+  CompilerDiagnostic,
+  CompilerDiagnosticOptions,
+  ErrorCategory,
+} from '../CompilerError';
 
 function throwInvalidReact(
   options: Omit<CompilerDiagnosticOptions, 'severity'>,
@@ -92,7 +96,8 @@ function assertValidEffectImportReference(
          */
         throwInvalidReact(
           {
-            category:
+            category: ErrorCategory.AutomaticEffectDependencies,
+            reason:
               'Cannot infer dependencies of this effect. This will break your build!',
             description:
               'To resolve, either pass a dependency array or fix reported compiler bailout diagnostics.' +
@@ -123,8 +128,8 @@ function assertValidFireImportReference(
     );
     throwInvalidReact(
       {
-        category:
-          '[Fire] Untransformed reference to compiler-required feature.',
+        category: ErrorCategory.Fire,
+        reason: '[Fire] Untransformed reference to compiler-required feature.',
         description:
           'Either remove this `fire` call or ensure it is successfully transformed by the compiler' +
           maybeErrorDiagnostic

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

@@ -12,6 +12,7 @@ import {
   CompilerDiagnostic,
   CompilerError,
   CompilerSuggestionOperation,
+  ErrorCategory,
   ErrorSeverity,
 } from '../CompilerError';
 import {Err, Ok, Result} from '../Utils/Result';
@@ -108,7 +109,8 @@ export function lower(
         builder.errors.pushDiagnostic(
           CompilerDiagnostic.create({
             severity: ErrorSeverity.Invariant,
-            category: 'Could not find binding',
+            category: ErrorCategory.Invariant,
+            reason: 'Could not find binding',
             description: `[BuildHIR] Could not find binding for param \`${param.node.name}\`.`,
           }).withDetail({
             kind: 'error',
@@ -172,7 +174,8 @@ export function lower(
       builder.errors.pushDiagnostic(
         CompilerDiagnostic.create({
           severity: ErrorSeverity.Todo,
-          category: `Handle ${param.node.type} parameters`,
+          category: ErrorCategory.Todo,
+          reason: `Handle ${param.node.type} parameters`,
           description: `[BuildHIR] Add support for ${param.node.type} parameters.`,
         }).withDetail({
           kind: 'error',
@@ -203,7 +206,8 @@ export function lower(
     builder.errors.pushDiagnostic(
       CompilerDiagnostic.create({
         severity: ErrorSeverity.InvalidJS,
-        category: `Unexpected function body kind`,
+        category: ErrorCategory.Syntax,
+        reason: `Unexpected function body kind`,
         description: `Expected function body to be an expression or a block statement, got \`${body.type}\`.`,
       }).withDetail({
         kind: 'error',
@@ -273,6 +277,7 @@ function lowerStatement(
           reason:
             '(BuildHIR::lowerStatement) Support ThrowStatement inside of try/catch',
           severity: ErrorSeverity.Todo,
+          category: ErrorCategory.Todo,
           loc: stmt.node.loc ?? null,
           suggestions: null,
         });
@@ -460,6 +465,7 @@ function lowerStatement(
           } else if (!binding.path.isVariableDeclarator()) {
             builder.errors.push({
               severity: ErrorSeverity.Todo,
+              category: ErrorCategory.Todo,
               reason: 'Unsupported declaration type for hoisting',
               description: `variable "${binding.identifier.name}" declared with ${binding.path.type}`,
               suggestions: null,
@@ -469,6 +475,7 @@ function lowerStatement(
           } else {
             builder.errors.push({
               severity: ErrorSeverity.Todo,
+              category: ErrorCategory.Todo,
               reason: 'Handle non-const declarations for hoisting',
               description: `variable "${binding.identifier.name}" declared with ${binding.kind}`,
               suggestions: null,
@@ -549,6 +556,7 @@ function lowerStatement(
             reason:
               '(BuildHIR::lowerStatement) Handle non-variable initialization in ForStatement',
             severity: ErrorSeverity.Todo,
+            category: ErrorCategory.Todo,
             loc: stmt.node.loc ?? null,
             suggestions: null,
           });
@@ -621,6 +629,7 @@ function lowerStatement(
         builder.errors.push({
           reason: `(BuildHIR::lowerStatement) Handle empty test in ForStatement`,
           severity: ErrorSeverity.Todo,
+          category: ErrorCategory.Todo,
           loc: stmt.node.loc ?? null,
           suggestions: null,
         });
@@ -772,6 +781,7 @@ function lowerStatement(
             builder.errors.push({
               reason: `Expected at most one \`default\` branch in a switch statement, this code should have failed to parse`,
               severity: ErrorSeverity.InvalidJS,
+              category: ErrorCategory.Syntax,
               loc: case_.node.loc ?? null,
               suggestions: null,
             });
@@ -844,6 +854,7 @@ function lowerStatement(
         builder.errors.push({
           reason: `(BuildHIR::lowerStatement) Handle ${nodeKind} kinds in VariableDeclaration`,
           severity: ErrorSeverity.Todo,
+          category: ErrorCategory.Todo,
           loc: stmt.node.loc ?? null,
           suggestions: null,
         });
@@ -872,6 +883,7 @@ function lowerStatement(
             builder.errors.push({
               reason: `(BuildHIR::lowerAssignment) Could not find binding for declaration.`,
               severity: ErrorSeverity.Invariant,
+              category: ErrorCategory.Invariant,
               loc: id.node.loc ?? null,
               suggestions: null,
             });
@@ -889,6 +901,7 @@ function lowerStatement(
                 builder.errors.push({
                   reason: `Expect \`const\` declaration not to be reassigned`,
                   severity: ErrorSeverity.InvalidJS,
+                  category: ErrorCategory.Syntax,
                   loc: id.node.loc ?? null,
                   suggestions: [
                     {
@@ -936,6 +949,7 @@ function lowerStatement(
             reason: `Expected variable declaration to be an identifier if no initializer was provided`,
             description: `Got a \`${id.type}\``,
             severity: ErrorSeverity.InvalidJS,
+            category: ErrorCategory.Syntax,
             loc: stmt.node.loc ?? null,
             suggestions: null,
           });
@@ -1044,6 +1058,7 @@ function lowerStatement(
         builder.errors.push({
           reason: `(BuildHIR::lowerStatement) Handle for-await loops`,
           severity: ErrorSeverity.Todo,
+          category: ErrorCategory.Todo,
           loc: stmt.node.loc ?? null,
           suggestions: null,
         });
@@ -1276,6 +1291,7 @@ function lowerStatement(
         builder.errors.push({
           reason: `(BuildHIR::lowerStatement) Handle TryStatement without a catch clause`,
           severity: ErrorSeverity.Todo,
+          category: ErrorCategory.Todo,
           loc: stmt.node.loc ?? null,
           suggestions: null,
         });
@@ -1285,6 +1301,7 @@ function lowerStatement(
         builder.errors.push({
           reason: `(BuildHIR::lowerStatement) Handle TryStatement with a finalizer ('finally') clause`,
           severity: ErrorSeverity.Todo,
+          category: ErrorCategory.Todo,
           loc: stmt.node.loc ?? null,
           suggestions: null,
         });
@@ -1378,6 +1395,7 @@ function lowerStatement(
         reason: `JavaScript 'with' syntax is not supported`,
         description: `'with' syntax is considered deprecated and removed from JavaScript standards, consider alternatives`,
         severity: ErrorSeverity.UnsupportedJS,
+        category: ErrorCategory.UnsupportedSyntax,
         loc: stmtPath.node.loc ?? null,
         suggestions: null,
       });
@@ -1398,6 +1416,7 @@ function lowerStatement(
         reason: 'Inline `class` declarations are not supported',
         description: `Move class declarations outside of components/hooks`,
         severity: ErrorSeverity.UnsupportedJS,
+        category: ErrorCategory.UnsupportedSyntax,
         loc: stmtPath.node.loc ?? null,
         suggestions: null,
       });
@@ -1427,6 +1446,7 @@ function lowerStatement(
         reason:
           'JavaScript `import` and `export` statements may only appear at the top level of a module',
         severity: ErrorSeverity.InvalidJS,
+        category: ErrorCategory.Syntax,
         loc: stmtPath.node.loc ?? null,
         suggestions: null,
       });
@@ -1442,6 +1462,7 @@ function lowerStatement(
         reason:
           'TypeScript `namespace` statements may only appear at the top level of a module',
         severity: ErrorSeverity.InvalidJS,
+        category: ErrorCategory.Syntax,
         loc: stmtPath.node.loc ?? null,
         suggestions: null,
       });
@@ -1520,6 +1541,7 @@ function lowerObjectPropertyKey(
       builder.errors.push({
         reason: `(BuildHIR::lowerExpression) Expected Identifier, got ${key.type} key in ObjectExpression`,
         severity: ErrorSeverity.Todo,
+        category: ErrorCategory.Todo,
         loc: key.node.loc ?? null,
         suggestions: null,
       });
@@ -1545,6 +1567,7 @@ function lowerObjectPropertyKey(
   builder.errors.push({
     reason: `(BuildHIR::lowerExpression) Expected Identifier, got ${key.type} key in ObjectExpression`,
     severity: ErrorSeverity.Todo,
+    category: ErrorCategory.Todo,
     loc: key.node.loc ?? null,
     suggestions: null,
   });
@@ -1602,6 +1625,7 @@ function lowerExpression(
             builder.errors.push({
               reason: `(BuildHIR::lowerExpression) Handle ${valuePath.type} values in ObjectExpression`,
               severity: ErrorSeverity.Todo,
+              category: ErrorCategory.Todo,
               loc: valuePath.node.loc ?? null,
               suggestions: null,
             });
@@ -1628,6 +1652,7 @@ function lowerExpression(
             builder.errors.push({
               reason: `(BuildHIR::lowerExpression) Handle ${propertyPath.node.kind} functions in ObjectExpression`,
               severity: ErrorSeverity.Todo,
+              category: ErrorCategory.Todo,
               loc: propertyPath.node.loc ?? null,
               suggestions: null,
             });
@@ -1649,6 +1674,7 @@ function lowerExpression(
           builder.errors.push({
             reason: `(BuildHIR::lowerExpression) Handle ${propertyPath.type} properties in ObjectExpression`,
             severity: ErrorSeverity.Todo,
+            category: ErrorCategory.Todo,
             loc: propertyPath.node.loc ?? null,
             suggestions: null,
           });
@@ -1682,6 +1708,7 @@ function lowerExpression(
           builder.errors.push({
             reason: `(BuildHIR::lowerExpression) Handle ${element.type} elements in ArrayExpression`,
             severity: ErrorSeverity.Todo,
+            category: ErrorCategory.Todo,
             loc: element.node.loc ?? null,
             suggestions: null,
           });
@@ -1702,6 +1729,7 @@ function lowerExpression(
           reason: `Expected an expression as the \`new\` expression receiver (v8 intrinsics are not supported)`,
           description: `Got a \`${calleePath.node.type}\``,
           severity: ErrorSeverity.InvalidJS,
+          category: ErrorCategory.Syntax,
           loc: calleePath.node.loc ?? null,
           suggestions: null,
         });
@@ -1728,6 +1756,7 @@ function lowerExpression(
         builder.errors.push({
           reason: `Expected Expression, got ${calleePath.type} in CallExpression (v8 intrinsics not supported). This error is likely caused by a bug in React Compiler. Please file an issue`,
           severity: ErrorSeverity.Todo,
+          category: ErrorCategory.Todo,
           loc: calleePath.node.loc ?? null,
           suggestions: null,
         });
@@ -1762,6 +1791,7 @@ function lowerExpression(
         builder.errors.push({
           reason: `(BuildHIR::lowerExpression) Expected Expression, got ${leftPath.type} lval in BinaryExpression`,
           severity: ErrorSeverity.Todo,
+          category: ErrorCategory.Todo,
           loc: leftPath.node.loc ?? null,
           suggestions: null,
         });
@@ -1774,6 +1804,7 @@ function lowerExpression(
         builder.errors.push({
           reason: `(BuildHIR::lowerExpression) Pipe operator not supported`,
           severity: ErrorSeverity.Todo,
+          category: ErrorCategory.Todo,
           loc: leftPath.node.loc ?? null,
           suggestions: null,
         });
@@ -1803,6 +1834,7 @@ function lowerExpression(
           builder.errors.push({
             reason: `Expected sequence expression to have at least one expression`,
             severity: ErrorSeverity.InvalidJS,
+            category: ErrorCategory.Syntax,
             loc: expr.node.loc ?? null,
             suggestions: null,
           });
@@ -2015,6 +2047,7 @@ function lowerExpression(
             reason: `(BuildHIR::lowerExpression) Unsupported syntax on the left side of an AssignmentExpression`,
             description: `Expected an LVal, got: ${left.type}`,
             severity: ErrorSeverity.Todo,
+            category: ErrorCategory.Todo,
             loc: left.node.loc ?? null,
             suggestions: null,
           });
@@ -2043,6 +2076,7 @@ function lowerExpression(
         builder.errors.push({
           reason: `(BuildHIR::lowerExpression) Handle ${operator} operators in AssignmentExpression`,
           severity: ErrorSeverity.Todo,
+          category: ErrorCategory.Todo,
           loc: expr.node.loc ?? null,
           suggestions: null,
         });
@@ -2142,6 +2176,7 @@ function lowerExpression(
           builder.errors.push({
             reason: `(BuildHIR::lowerExpression) Expected Identifier or MemberExpression, got ${expr.type} lval in AssignmentExpression`,
             severity: ErrorSeverity.Todo,
+            category: ErrorCategory.Todo,
             loc: expr.node.loc ?? null,
             suggestions: null,
           });
@@ -2181,6 +2216,7 @@ function lowerExpression(
           builder.errors.push({
             reason: `(BuildHIR::lowerExpression) Handle ${attribute.type} attributes in JSXElement`,
             severity: ErrorSeverity.Todo,
+            category: ErrorCategory.Todo,
             loc: attribute.node.loc ?? null,
             suggestions: null,
           });
@@ -2194,6 +2230,7 @@ function lowerExpression(
             builder.errors.push({
               reason: `(BuildHIR::lowerExpression) Unexpected colon in attribute name \`${propName}\``,
               severity: ErrorSeverity.Todo,
+              category: ErrorCategory.Todo,
               loc: namePath.node.loc ?? null,
               suggestions: null,
             });
@@ -2224,6 +2261,7 @@ function lowerExpression(
             builder.errors.push({
               reason: `(BuildHIR::lowerExpression) Handle ${valueExpr.type} attribute values in JSXElement`,
               severity: ErrorSeverity.Todo,
+              category: ErrorCategory.Todo,
               loc: valueExpr.node?.loc ?? null,
               suggestions: null,
             });
@@ -2234,6 +2272,7 @@ function lowerExpression(
             builder.errors.push({
               reason: `(BuildHIR::lowerExpression) Handle ${expression.type} expressions in JSXExpressionContainer within JSXElement`,
               severity: ErrorSeverity.Todo,
+              category: ErrorCategory.Todo,
               loc: valueExpr.node.loc ?? null,
               suggestions: null,
             });
@@ -2291,7 +2330,8 @@ function lowerExpression(
           if (locations.length > 1) {
             CompilerError.throwDiagnostic({
               severity: ErrorSeverity.Todo,
-              category: 'Support duplicate fbt tags',
+              category: ErrorCategory.FBT,
+              reason: 'Support duplicate fbt tags',
               description: `Support \`<${tagName}>\` tags with multiple \`<${tagName}:${name}>\` values`,
               details: locations.map(loc => {
                 return {
@@ -2352,6 +2392,7 @@ function lowerExpression(
           reason:
             '(BuildHIR::lowerExpression) Handle tagged template with interpolations',
           severity: ErrorSeverity.Todo,
+          category: ErrorCategory.Todo,
           loc: exprPath.node.loc ?? null,
           suggestions: null,
         });
@@ -2370,6 +2411,7 @@ function lowerExpression(
           reason:
             '(BuildHIR::lowerExpression) Handle tagged template where cooked value is different from raw value',
           severity: ErrorSeverity.Todo,
+          category: ErrorCategory.Todo,
           loc: exprPath.node.loc ?? null,
           suggestions: null,
         });
@@ -2392,6 +2434,7 @@ function lowerExpression(
         builder.errors.push({
           reason: `Unexpected quasi and subexpression lengths in template literal`,
           severity: ErrorSeverity.InvalidJS,
+          category: ErrorCategory.Syntax,
           loc: exprPath.node.loc ?? null,
           suggestions: null,
         });
@@ -2402,6 +2445,7 @@ function lowerExpression(
         builder.errors.push({
           reason: `(BuildHIR::lowerAssignment) Handle TSType in TemplateLiteral.`,
           severity: ErrorSeverity.Todo,
+          category: ErrorCategory.Todo,
           loc: exprPath.node.loc ?? null,
           suggestions: null,
         });
@@ -2444,6 +2488,7 @@ function lowerExpression(
           builder.errors.push({
             reason: `Only object properties can be deleted`,
             severity: ErrorSeverity.InvalidJS,
+            category: ErrorCategory.Syntax,
             loc: expr.node.loc ?? null,
             suggestions: [
               {
@@ -2459,6 +2504,7 @@ function lowerExpression(
         builder.errors.push({
           reason: `Throw expressions are not supported`,
           severity: ErrorSeverity.InvalidJS,
+          category: ErrorCategory.Syntax,
           loc: expr.node.loc ?? null,
           suggestions: [
             {
@@ -2580,6 +2626,7 @@ function lowerExpression(
         builder.errors.push({
           reason: `(BuildHIR::lowerExpression) Handle UpdateExpression with ${argument.type} argument`,
           severity: ErrorSeverity.Todo,
+          category: ErrorCategory.Todo,
           loc: exprPath.node.loc ?? null,
           suggestions: null,
         });
@@ -2588,6 +2635,7 @@ function lowerExpression(
         builder.errors.push({
           reason: `(BuildHIR::lowerExpression) Handle UpdateExpression to variables captured within lambdas.`,
           severity: ErrorSeverity.Todo,
+          category: ErrorCategory.Todo,
           loc: exprPath.node.loc ?? null,
           suggestions: null,
         });
@@ -2608,6 +2656,7 @@ function lowerExpression(
           builder.errors.push({
             reason: `(BuildHIR::lowerExpression) Found an invalid UpdateExpression without a previously reported error`,
             severity: ErrorSeverity.Invariant,
+            category: ErrorCategory.Invariant,
             loc: exprLoc,
             suggestions: null,
           });
@@ -2617,6 +2666,7 @@ function lowerExpression(
         builder.errors.push({
           reason: `(BuildHIR::lowerExpression) Support UpdateExpression where argument is a global`,
           severity: ErrorSeverity.Todo,
+          category: ErrorCategory.Todo,
           loc: exprLoc,
           suggestions: null,
         });
@@ -2672,6 +2722,7 @@ function lowerExpression(
       builder.errors.push({
         reason: `(BuildHIR::lowerExpression) Handle MetaProperty expressions other than import.meta`,
         severity: ErrorSeverity.Todo,
+        category: ErrorCategory.Todo,
         loc: exprPath.node.loc ?? null,
         suggestions: null,
       });
@@ -2681,6 +2732,7 @@ function lowerExpression(
       builder.errors.push({
         reason: `(BuildHIR::lowerExpression) Handle ${exprPath.type} expressions`,
         severity: ErrorSeverity.Todo,
+        category: ErrorCategory.Todo,
         loc: exprPath.node.loc ?? null,
         suggestions: null,
       });
@@ -2978,6 +3030,7 @@ function lowerReorderableExpression(
     builder.errors.push({
       reason: `(BuildHIR::node.lowerReorderableExpression) Expression type \`${expr.type}\` cannot be safely reordered`,
       severity: ErrorSeverity.Todo,
+      category: ErrorCategory.Todo,
       loc: expr.node.loc ?? null,
       suggestions: null,
     });
@@ -3174,6 +3227,7 @@ function lowerArguments(
       builder.errors.push({
         reason: `(BuildHIR::lowerExpression) Handle ${argPath.type} arguments in CallExpression`,
         severity: ErrorSeverity.Todo,
+        category: ErrorCategory.Todo,
         loc: argPath.node.loc ?? null,
         suggestions: null,
       });
@@ -3209,6 +3263,7 @@ function lowerMemberExpression(
       builder.errors.push({
         reason: `(BuildHIR::lowerMemberExpression) Handle ${propertyNode.type} property`,
         severity: ErrorSeverity.Todo,
+        category: ErrorCategory.Todo,
         loc: propertyNode.node.loc ?? null,
         suggestions: null,
       });
@@ -3230,6 +3285,7 @@ function lowerMemberExpression(
       builder.errors.push({
         reason: `(BuildHIR::lowerMemberExpression) Expected Expression, got ${propertyNode.type} property`,
         severity: ErrorSeverity.Todo,
+        category: ErrorCategory.Todo,
         loc: propertyNode.node.loc ?? null,
         suggestions: null,
       });
@@ -3289,6 +3345,7 @@ function lowerJsxElementName(
         reason: `Expected JSXNamespacedName to have no colons in the namespace or name`,
         description: `Got \`${namespace}\` : \`${name}\``,
         severity: ErrorSeverity.InvalidJS,
+        category: ErrorCategory.Syntax,
         loc: exprPath.node.loc ?? null,
         suggestions: null,
       });
@@ -3303,6 +3360,7 @@ function lowerJsxElementName(
     builder.errors.push({
       reason: `(BuildHIR::lowerJsxElementName) Handle ${exprPath.type} tags`,
       severity: ErrorSeverity.Todo,
+      category: ErrorCategory.Todo,
       loc: exprPath.node.loc ?? null,
       suggestions: null,
     });
@@ -3401,6 +3459,7 @@ function lowerJsxElement(
     builder.errors.push({
       reason: `(BuildHIR::lowerJsxElement) Unhandled JsxElement, got: ${exprPath.type}`,
       severity: ErrorSeverity.Todo,
+      category: ErrorCategory.Todo,
       loc: exprPath.node.loc ?? null,
       suggestions: null,
     });
@@ -3588,6 +3647,7 @@ function lowerIdentifier(
           description:
             'Eval is an anti-pattern in JavaScript, and the code executed cannot be evaluated by React Compiler',
           severity: ErrorSeverity.UnsupportedJS,
+          category: ErrorCategory.UnsupportedSyntax,
           loc: exprPath.node.loc ?? null,
           suggestions: null,
         });
@@ -3644,6 +3704,7 @@ function lowerIdentifierForAssignment(
       builder.errors.push({
         reason: `(BuildHIR::lowerAssignment) Could not find binding for declaration.`,
         severity: ErrorSeverity.Invariant,
+        category: ErrorCategory.Invariant,
         loc: path.node.loc ?? null,
         suggestions: null,
       });
@@ -3656,6 +3717,7 @@ function lowerIdentifierForAssignment(
     builder.errors.push({
       reason: `Cannot reassign a \`const\` variable`,
       severity: ErrorSeverity.InvalidJS,
+      category: ErrorCategory.Syntax,
       loc: path.node.loc ?? null,
       description:
         binding.identifier.name != null
@@ -3713,6 +3775,7 @@ function lowerAssignment(
           builder.errors.push({
             reason: `Expected \`const\` declaration not to be reassigned`,
             severity: ErrorSeverity.InvalidJS,
+            category: ErrorCategory.Syntax,
             loc: lvalue.node.loc ?? null,
             suggestions: null,
           });
@@ -3727,6 +3790,7 @@ function lowerAssignment(
           builder.errors.push({
             reason: `Unexpected context variable kind`,
             severity: ErrorSeverity.InvalidJS,
+            category: ErrorCategory.Syntax,
             loc: lvalue.node.loc ?? null,
             suggestions: null,
           });
@@ -3798,6 +3862,7 @@ function lowerAssignment(
           builder.errors.push({
             reason: `(BuildHIR::lowerAssignment) Handle ${property.type} properties in MemberExpression`,
             severity: ErrorSeverity.Todo,
+            category: ErrorCategory.Todo,
             loc: property.node.loc ?? null,
             suggestions: null,
           });
@@ -3810,6 +3875,7 @@ function lowerAssignment(
             reason:
               '(BuildHIR::lowerAssignment) Expected private name to appear as a non-computed property',
             severity: ErrorSeverity.Todo,
+            category: ErrorCategory.Todo,
             loc: property.node.loc ?? null,
             suggestions: null,
           });
@@ -3875,6 +3941,7 @@ function lowerAssignment(
             } else if (identifier.kind === 'Global') {
               builder.errors.push({
                 severity: ErrorSeverity.Todo,
+                category: ErrorCategory.Todo,
                 reason:
                   'Expected reassignment of globals to enable forceTemporaries',
                 loc: element.node.loc ?? GeneratedSource,
@@ -3914,6 +3981,7 @@ function lowerAssignment(
           } else if (identifier.kind === 'Global') {
             builder.errors.push({
               severity: ErrorSeverity.Todo,
+              category: ErrorCategory.Todo,
               reason:
                 'Expected reassignment of globals to enable forceTemporaries',
               loc: element.node.loc ?? GeneratedSource,
@@ -3987,6 +4055,7 @@ function lowerAssignment(
             builder.errors.push({
               reason: `(BuildHIR::lowerAssignment) Handle ${argument.node.type} rest element in ObjectPattern`,
               severity: ErrorSeverity.Todo,
+              category: ErrorCategory.Todo,
               loc: argument.node.loc ?? null,
               suggestions: null,
             });
@@ -4018,6 +4087,7 @@ function lowerAssignment(
             } else if (identifier.kind === 'Global') {
               builder.errors.push({
                 severity: ErrorSeverity.Todo,
+                category: ErrorCategory.Todo,
                 reason:
                   'Expected reassignment of globals to enable forceTemporaries',
                 loc: property.node.loc ?? GeneratedSource,
@@ -4035,6 +4105,7 @@ function lowerAssignment(
             builder.errors.push({
               reason: `(BuildHIR::lowerAssignment) Handle ${property.type} properties in ObjectPattern`,
               severity: ErrorSeverity.Todo,
+              category: ErrorCategory.Todo,
               loc: property.node.loc ?? null,
               suggestions: null,
             });
@@ -4044,6 +4115,7 @@ function lowerAssignment(
             builder.errors.push({
               reason: `(BuildHIR::lowerAssignment) Handle computed properties in ObjectPattern`,
               severity: ErrorSeverity.Todo,
+              category: ErrorCategory.Todo,
               loc: property.node.loc ?? null,
               suggestions: null,
             });
@@ -4058,6 +4130,7 @@ function lowerAssignment(
             builder.errors.push({
               reason: `(BuildHIR::lowerAssignment) Expected object property value to be an LVal, got: ${element.type}`,
               severity: ErrorSeverity.Todo,
+              category: ErrorCategory.Todo,
               loc: element.node.loc ?? null,
               suggestions: null,
             });
@@ -4080,6 +4153,7 @@ function lowerAssignment(
             } else if (identifier.kind === 'Global') {
               builder.errors.push({
                 severity: ErrorSeverity.Todo,
+                category: ErrorCategory.Todo,
                 reason:
                   'Expected reassignment of globals to enable forceTemporaries',
                 loc: element.node.loc ?? GeneratedSource,
@@ -4229,6 +4303,7 @@ function lowerAssignment(
       builder.errors.push({
         reason: `(BuildHIR::lowerAssignment) Handle ${lvaluePath.type} assignments`,
         severity: ErrorSeverity.Todo,
+        category: ErrorCategory.Todo,
         loc: lvaluePath.node.loc ?? null,
         suggestions: null,
       });

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

@@ -650,6 +650,13 @@ export const EnvironmentConfigSchema = z.object({
    *   useMemo(() => { ... }, [...]);
    */
   validateNoVoidUseMemo: z.boolean().default(false),
+
+  /**
+   * Validates that Components/Hooks are always defined at module level. This prevents scope
+   * reference errors that occur when the compiler attempts to optimize the nested component/hook
+   * while its parent function remains uncompiled.
+   */
+  validateNoDynamicallyCreatedComponentsOrHooks: z.boolean().default(false),
 });
 
 export type EnvironmentConfig = z.infer<typeof EnvironmentConfigSchema>;

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

@@ -7,7 +7,7 @@
 
 import {BindingKind} from '@babel/traverse';
 import * as t from '@babel/types';
-import {CompilerError, CompilerErrorDetailOptions} from '../CompilerError';
+import {CompilerError} from '../CompilerError';
 import {assertExhaustive} from '../Utils/utils';
 import {Environment, ReactFunctionType} from './Environment';
 import type {HookKind} from './ObjectShape';
@@ -282,30 +282,13 @@ export type HIRFunction = {
   returnTypeAnnotation: t.FlowType | t.TSType | null;
   returns: Place;
   context: Array<Place>;
-  effects: Array<FunctionEffect> | null;
   body: HIR;
   generator: boolean;
   async: boolean;
   directives: Array<string>;
-  aliasingEffects?: Array<AliasingEffect> | null;
+  aliasingEffects: Array<AliasingEffect> | null;
 };
 
-export type FunctionEffect =
-  | {
-      kind: 'GlobalMutation';
-      error: CompilerErrorDetailOptions;
-    }
-  | {
-      kind: 'ReactMutation';
-      error: CompilerErrorDetailOptions;
-    }
-  | {
-      kind: 'ContextMutation';
-      places: ReadonlySet<Place>;
-      effect: Effect;
-      loc: SourceLocation;
-    };
-
 /*
  * Each reactive scope may have its own control-flow, so the instructions form
  * a control-flow graph. The graph comprises a set of basic blocks which reference

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

@@ -7,7 +7,7 @@
 
 import {Binding, NodePath} from '@babel/traverse';
 import * as t from '@babel/types';
-import {CompilerError, ErrorSeverity} from '../CompilerError';
+import {CompilerError, ErrorCategory, ErrorSeverity} from '../CompilerError';
 import {Environment} from './Environment';
 import {
   BasicBlock,
@@ -310,7 +310,8 @@ export default class HIRBuilder {
     if (node.name === 'fbt') {
       CompilerError.throwDiagnostic({
         severity: ErrorSeverity.Todo,
-        category: 'Support local variables named `fbt`',
+        category: ErrorCategory.FBT,
+        reason: 'Support local variables named `fbt`',
         description:
           'Local variables named `fbt` may conflict with the fbt plugin and are not yet supported',
         details: [
@@ -322,6 +323,22 @@ export default class HIRBuilder {
         ],
       });
     }
+    if (node.name === 'this') {
+      CompilerError.throwDiagnostic({
+        severity: ErrorSeverity.UnsupportedJS,
+        category: ErrorCategory.UnsupportedSyntax,
+        reason: '`this` is not supported syntax',
+        description:
+          'React Compiler does not support compiling functions that use `this`',
+        details: [
+          {
+            kind: 'error',
+            message: '`this` was used here',
+            loc: node.loc ?? GeneratedSource,
+          },
+        ],
+      });
+    }
     const originalName = node.name;
     let name = originalName;
     let index = 0;

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

@@ -554,23 +554,11 @@ export function printInstructionValue(instrValue: ReactiveValue): string {
       const context = instrValue.loweredFunc.func.context
         .map(dep => printPlace(dep))
         .join(',');
-      const effects =
-        instrValue.loweredFunc.func.effects
-          ?.map(effect => {
-            if (effect.kind === 'ContextMutation') {
-              return `ContextMutation places=[${[...effect.places]
-                .map(place => printPlace(place))
-                .join(', ')}] effect=${effect.effect}`;
-            } else {
-              return `GlobalMutation`;
-            }
-          })
-          .join(', ') ?? '';
       const aliasingEffects =
         instrValue.loweredFunc.func.aliasingEffects
           ?.map(printAliasingEffect)
           ?.join(', ') ?? '';
-      value = `${kind} ${name} @context[${context}] @effects[${effects}] @aliasingEffects=[${aliasingEffects}]\n${fn}`;
+      value = `${kind} ${name} @context[${context}] @aliasingEffects=[${aliasingEffects}]\n${fn}`;
       break;
     }
     case 'TaggedTemplateExpression': {
@@ -892,7 +880,8 @@ export function printType(type: Type): string {
   if (type.kind === 'Object' && type.shapeId != null) {
     return `:T${type.kind}<${type.shapeId}>`;
   } else if (type.kind === 'Function' && type.shapeId != null) {
-    return `:T${type.kind}<${type.shapeId}>`;
+    const returnType = printType(type.return);
+    return `:T${type.kind}<${type.shapeId}>()${returnType !== '' ? `:  ${returnType}` : ''}`;
   } else {
     return `:T${type.kind}`;
   }
@@ -995,16 +984,16 @@ export function printAliasingEffect(effect: AliasingEffect): string {
     case 'MutateConditionally':
     case 'MutateTransitive':
     case 'MutateTransitiveConditionally': {
-      return `${effect.kind} ${printPlaceForAliasEffect(effect.value)}`;
+      return `${effect.kind} ${printPlaceForAliasEffect(effect.value)}${effect.kind === 'Mutate' && effect.reason?.kind === 'AssignCurrentProperty' ? ' (assign `.current`)' : ''}`;
     }
     case 'MutateFrozen': {
-      return `MutateFrozen ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.category)}`;
+      return `MutateFrozen ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.reason)}`;
     }
     case 'MutateGlobal': {
-      return `MutateGlobal ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.category)}`;
+      return `MutateGlobal ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.reason)}`;
     }
     case 'Impure': {
-      return `Impure ${printPlaceForAliasEffect(effect.place)} reason=${JSON.stringify(effect.error.category)}`;
+      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/Inference/AliasingEffects.ts

@@ -231,7 +231,7 @@ export function hashEffect(effect: AliasingEffect): string {
         effect.kind,
         effect.place.identifier.id,
         effect.error.severity,
-        effect.error.category,
+        effect.error.reason,
         effect.error.description,
         printSourceLocation(effect.error.primaryLocation() ?? GeneratedSource),
       ].join(':');

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

@@ -11,6 +11,7 @@ import {
   ErrorSeverity,
   SourceLocation,
 } from '..';
+import {ErrorCategory} from '../CompilerError';
 import {
   CallExpression,
   Effect,
@@ -300,8 +301,9 @@ function extractManualMemoizationArgs(
   if (fnPlace == null) {
     errors.pushDiagnostic(
       CompilerDiagnostic.create({
+        category: ErrorCategory.UseMemo,
         severity: ErrorSeverity.InvalidReact,
-        category: `Expected a callback function to be passed to ${kind}`,
+        reason: `Expected a callback function to be passed to ${kind}`,
         description: `Expected a callback function to be passed to ${kind}`,
         suggestions: null,
       }).withDetail({
@@ -315,8 +317,9 @@ function extractManualMemoizationArgs(
   if (fnPlace.kind === 'Spread' || depsListPlace?.kind === 'Spread') {
     errors.pushDiagnostic(
       CompilerDiagnostic.create({
+        category: ErrorCategory.UseMemo,
         severity: ErrorSeverity.InvalidReact,
-        category: `Unexpected spread argument to ${kind}`,
+        reason: `Unexpected spread argument to ${kind}`,
         description: `Unexpected spread argument to ${kind}`,
         suggestions: null,
       }).withDetail({
@@ -335,8 +338,9 @@ function extractManualMemoizationArgs(
     if (maybeDepsList == null) {
       errors.pushDiagnostic(
         CompilerDiagnostic.create({
+          category: ErrorCategory.UseMemo,
           severity: ErrorSeverity.InvalidReact,
-          category: `Expected the dependency list for ${kind} to be an array literal`,
+          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,
         }).withDetail({
@@ -353,8 +357,9 @@ function extractManualMemoizationArgs(
       if (maybeDep == null) {
         errors.pushDiagnostic(
           CompilerDiagnostic.create({
+            category: ErrorCategory.UseMemo,
             severity: ErrorSeverity.InvalidReact,
-            category: `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 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,
           }).withDetail({
@@ -459,7 +464,8 @@ export function dropManualMemoization(
                 errors.pushDiagnostic(
                   CompilerDiagnostic.create({
                     severity: ErrorSeverity.InvalidReact,
-                    category: 'useMemo() callbacks must return a value',
+                    category: ErrorCategory.UseMemo,
+                    reason: 'useMemo() callbacks must return a value',
                     description: `This ${
                       manualMemo.loadInstr.value.kind === 'PropertyLoad'
                         ? 'React.useMemo'
@@ -498,8 +504,9 @@ export function dropManualMemoization(
             if (!sidemap.functions.has(fnPlace.identifier.id)) {
               errors.pushDiagnostic(
                 CompilerDiagnostic.create({
+                  category: ErrorCategory.UseMemo,
                   severity: ErrorSeverity.InvalidReact,
-                  category: `Expected the first argument to be an inline function expression`,
+                  reason: `Expected the first argument to be an inline function expression`,
                   description: `Expected the first argument to be an inline function expression`,
                   suggestions: [],
                 }).withDetail({

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

@@ -25,8 +25,8 @@ import {
   IdentifierId,
   Instruction,
   InstructionKind,
-  InstructionValue,
   isArrayType,
+  isJsxType,
   isMapType,
   isPrimitiveType,
   isRefOrRefValue,
@@ -56,7 +56,6 @@ import {
   printAliasingSignature,
   printIdentifier,
   printInstruction,
-  printInstructionValue,
   printPlace,
   printSourceLocation,
 } from '../HIR/PrintHIR';
@@ -69,6 +68,7 @@ import {
   hashEffect,
   MutationReason,
 } from './AliasingEffects';
+import {ErrorCategory} from '../CompilerError';
 
 const DEBUG = false;
 
@@ -106,11 +106,11 @@ export function inferMutationAliasingEffects(
   const statesByBlock: Map<BlockId, InferenceState> = new Map();
 
   for (const ref of fn.context) {
-    // TODO: using InstructionValue as a bit of a hack, but it's pragmatic
-    const value: InstructionValue = {
-      kind: 'ObjectExpression',
-      properties: [],
-      loc: ref.loc,
+    const value: AliasingEffect = {
+      kind: 'Create',
+      into: ref,
+      value: ValueKind.Context,
+      reason: ValueReason.Other,
     };
     initialState.initialize(value, {
       kind: ValueKind.Context,
@@ -143,10 +143,11 @@ export function inferMutationAliasingEffects(
     }
     if (ref != null) {
       const place = ref.kind === 'Identifier' ? ref : ref.place;
-      const value: InstructionValue = {
-        kind: 'ObjectExpression',
-        properties: [],
-        loc: place.loc,
+      const value: AliasingEffect = {
+        kind: 'Create',
+        into: place,
+        value: ValueKind.Mutable,
+        reason: ValueReason.Other,
       };
       initialState.initialize(value, {
         kind: ValueKind.Mutable,
@@ -263,8 +264,6 @@ function findHoistedContextDeclarations(
 class Context {
   internedEffects: Map<string, AliasingEffect> = new Map();
   instructionSignatureCache: Map<Instruction, InstructionSignature> = new Map();
-  effectInstructionValueCache: Map<AliasingEffect, InstructionValue> =
-    new Map();
   applySignatureCache: Map<
     AliasingSignature,
     Map<AliasingEffect, Array<AliasingEffect> | null>
@@ -316,10 +315,11 @@ function inferParam(
   paramKind: AbstractValue,
 ): void {
   const place = param.kind === 'Identifier' ? param : param.place;
-  const value: InstructionValue = {
-    kind: 'Primitive',
-    loc: place.loc,
-    value: undefined,
+  const value: AliasingEffect = {
+    kind: 'Create',
+    into: place,
+    value: paramKind.kind,
+    reason: ValueReason.Other,
   };
   initialState.initialize(value, paramKind);
   initialState.define(place, value);
@@ -452,8 +452,9 @@ function applySignature(
                 ? `\`${effect.value.identifier.name.value}\``
                 : 'value';
             const diagnostic = CompilerDiagnostic.create({
+              category: ErrorCategory.Immutability,
               severity: ErrorSeverity.InvalidReact,
-              category: 'This value cannot be modified',
+              reason: 'This value cannot be modified',
               description: `${reason}.`,
             }).withDetail({
               kind: 'error',
@@ -465,8 +466,7 @@ function applySignature(
               effect.reason?.kind === 'AssignCurrentProperty'
             ) {
               diagnostic.withDetail({
-                kind: 'error',
-                loc: effect.value.loc,
+                kind: 'hint',
                 message: `Hint: If this value is a Ref (value returned by \`useRef()\`), rename the variable to end in "Ref".`,
               });
             }
@@ -540,20 +540,11 @@ function applyEffect(
       });
       initialized.add(effect.into.identifier.id);
 
-      let value = context.effectInstructionValueCache.get(effect);
-      if (value == null) {
-        value = {
-          kind: 'ObjectExpression',
-          properties: [],
-          loc: effect.into.loc,
-        };
-        context.effectInstructionValueCache.set(effect, value);
-      }
-      state.initialize(value, {
+      state.initialize(effect, {
         kind: effect.value,
         reason: new Set([effect.reason]),
       });
-      state.define(effect.into, value);
+      state.define(effect.into, effect);
       effects.push(effect);
       break;
     }
@@ -580,20 +571,11 @@ function applyEffect(
       initialized.add(effect.into.identifier.id);
 
       const fromValue = state.kind(effect.from);
-      let value = context.effectInstructionValueCache.get(effect);
-      if (value == null) {
-        value = {
-          kind: 'ObjectExpression',
-          properties: [],
-          loc: effect.into.loc,
-        };
-        context.effectInstructionValueCache.set(effect, value);
-      }
-      state.initialize(value, {
+      state.initialize(effect, {
         kind: fromValue.kind,
         reason: new Set(fromValue.reason),
       });
-      state.define(effect.into, value);
+      state.define(effect.into, effect);
       switch (fromValue.kind) {
         case ValueKind.Primitive:
         case ValueKind.Global: {
@@ -681,11 +663,11 @@ function applyEffect(
           operand.effect = Effect.Read;
         }
       }
-      state.initialize(effect.function, {
+      state.initialize(effect, {
         kind: isMutable ? ValueKind.Mutable : ValueKind.Frozen,
         reason: new Set([]),
       });
-      state.define(effect.into, effect.function);
+      state.define(effect.into, effect);
       for (const capture of effect.captures) {
         applyEffect(
           context,
@@ -791,38 +773,20 @@ function applyEffect(
             initialized,
             effects,
           );
-          let value = context.effectInstructionValueCache.get(effect);
-          if (value == null) {
-            value = {
-              kind: 'Primitive',
-              value: undefined,
-              loc: effect.from.loc,
-            };
-            context.effectInstructionValueCache.set(effect, value);
-          }
-          state.initialize(value, {
+          state.initialize(effect, {
             kind: fromKind,
             reason: new Set(fromValue.reason),
           });
-          state.define(effect.into, value);
+          state.define(effect.into, effect);
           break;
         }
         case ValueKind.Global:
         case ValueKind.Primitive: {
-          let value = context.effectInstructionValueCache.get(effect);
-          if (value == null) {
-            value = {
-              kind: 'Primitive',
-              value: undefined,
-              loc: effect.from.loc,
-            };
-            context.effectInstructionValueCache.set(effect, value);
-          }
-          state.initialize(value, {
+          state.initialize(effect, {
             kind: fromKind,
             reason: new Set(fromValue.reason),
           });
-          state.define(effect.into, value);
+          state.define(effect.into, effect);
           break;
         }
         default: {
@@ -837,14 +801,15 @@ function applyEffect(
       const functionValues = state.values(effect.function);
       if (
         functionValues.length === 1 &&
-        functionValues[0].kind === 'FunctionExpression' &&
-        functionValues[0].loweredFunc.func.aliasingEffects != null
+        functionValues[0].kind === 'CreateFunction' &&
+        functionValues[0].function.kind === 'FunctionExpression' &&
+        functionValues[0].function.loweredFunc.func.aliasingEffects != null
       ) {
         /*
          * We're calling a locally declared function, we already know it's effects!
          * We just have to substitute in the args for the params
          */
-        const functionExpr = functionValues[0];
+        const functionExpr = functionValues[0].function;
         let signature = context.functionSignatureCache.get(functionExpr);
         if (signature == null) {
           signature = buildSignatureFromFunctionExpression(
@@ -1037,8 +1002,9 @@ function applyEffect(
             effect.value.identifier.declarationId,
           );
           const diagnostic = CompilerDiagnostic.create({
+            category: ErrorCategory.Immutability,
             severity: ErrorSeverity.InvalidReact,
-            category: 'Cannot access variable before it is declared',
+            reason: 'Cannot access variable before it is declared',
             description: `${variable ?? 'This variable'} is accessed before it is declared, which prevents the earlier access from updating when this value changes over time.`,
           });
           if (hoistedAccess != null && hoistedAccess.loc != effect.value.loc) {
@@ -1076,8 +1042,9 @@ function applyEffect(
               ? `\`${effect.value.identifier.name.value}\``
               : 'value';
           const diagnostic = CompilerDiagnostic.create({
+            category: ErrorCategory.Immutability,
             severity: ErrorSeverity.InvalidReact,
-            category: 'This value cannot be modified',
+            reason: 'This value cannot be modified',
             description: `${reason}.`,
           }).withDetail({
             kind: 'error',
@@ -1089,8 +1056,7 @@ function applyEffect(
             effect.reason?.kind === 'AssignCurrentProperty'
           ) {
             diagnostic.withDetail({
-              kind: 'error',
-              loc: effect.value.loc,
+              kind: 'hint',
               message: `Hint: If this value is a Ref (value returned by \`useRef()\`), rename the variable to end in "Ref".`,
             });
           }
@@ -1133,19 +1099,19 @@ class InferenceState {
   #isFunctionExpression: boolean;
 
   // The kind of each value, based on its allocation site
-  #values: Map<InstructionValue, AbstractValue>;
+  #values: Map<AliasingEffect, AbstractValue>;
   /*
    * The set of values pointed to by each identifier. This is a set
    * to accomodate phi points (where a variable may have different
    * values from different control flow paths).
    */
-  #variables: Map<IdentifierId, Set<InstructionValue>>;
+  #variables: Map<IdentifierId, Set<AliasingEffect>>;
 
   constructor(
     env: Environment,
     isFunctionExpression: boolean,
-    values: Map<InstructionValue, AbstractValue>,
-    variables: Map<IdentifierId, Set<InstructionValue>>,
+    values: Map<AliasingEffect, AbstractValue>,
+    variables: Map<IdentifierId, Set<AliasingEffect>>,
   ) {
     this.env = env;
     this.#isFunctionExpression = isFunctionExpression;
@@ -1165,18 +1131,11 @@ class InferenceState {
   }
 
   // (Re)initializes a @param value with its default @param kind.
-  initialize(value: InstructionValue, kind: AbstractValue): void {
-    CompilerError.invariant(value.kind !== 'LoadLocal', {
-      reason:
-        '[InferMutationAliasingEffects] Expected all top-level identifiers to be defined as variables, not values',
-      description: null,
-      loc: value.loc,
-      suggestions: null,
-    });
+  initialize(value: AliasingEffect, kind: AbstractValue): void {
     this.#values.set(value, kind);
   }
 
-  values(place: Place): Array<InstructionValue> {
+  values(place: Place): Array<AliasingEffect> {
     const values = this.#variables.get(place.identifier.id);
     CompilerError.invariant(values != null, {
       reason: `[InferMutationAliasingEffects] Expected value kind to be initialized`,
@@ -1239,13 +1198,13 @@ class InferenceState {
   }
 
   // Defines (initializing or updating) a variable with a specific kind of value.
-  define(place: Place, value: InstructionValue): void {
+  define(place: Place, value: AliasingEffect): void {
     CompilerError.invariant(this.#values.has(value), {
       reason: `[InferMutationAliasingEffects] Expected value to be initialized at '${printSourceLocation(
-        value.loc,
+        place.loc,
       )}'`,
-      description: printInstructionValue(value),
-      loc: value.loc,
+      description: printAliasingEffect(value),
+      loc: place.loc,
       suggestions: null,
     });
     this.#variables.set(place.identifier.id, new Set([value]));
@@ -1285,17 +1244,17 @@ class InferenceState {
     }
   }
 
-  freezeValue(value: InstructionValue, reason: ValueReason): void {
+  freezeValue(value: AliasingEffect, reason: ValueReason): void {
     this.#values.set(value, {
       kind: ValueKind.Frozen,
       reason: new Set([reason]),
     });
     if (
-      value.kind === 'FunctionExpression' &&
+      value.kind === 'CreateFunction' &&
       (this.env.config.enablePreserveExistingMemoizationGuarantees ||
         this.env.config.enableTransitivelyFreezeFunctionExpressions)
     ) {
-      for (const place of value.loweredFunc.func.context) {
+      for (const place of value.function.loweredFunc.func.context) {
         this.freeze(place, reason);
       }
     }
@@ -1370,8 +1329,8 @@ class InferenceState {
    * termination.
    */
   merge(other: InferenceState): InferenceState | null {
-    let nextValues: Map<InstructionValue, AbstractValue> | null = null;
-    let nextVariables: Map<IdentifierId, Set<InstructionValue>> | null = null;
+    let nextValues: Map<AliasingEffect, AbstractValue> | null = null;
+    let nextVariables: Map<IdentifierId, Set<AliasingEffect>> | null = null;
 
     for (const [id, thisValue] of this.#values) {
       const otherValue = other.#values.get(id);
@@ -1395,7 +1354,7 @@ class InferenceState {
     for (const [id, thisValues] of this.#variables) {
       const otherValues = other.#variables.get(id);
       if (otherValues !== undefined) {
-        let mergedValues: Set<InstructionValue> | null = null;
+        let mergedValues: Set<AliasingEffect> | null = null;
         for (const otherValue of otherValues) {
           if (!thisValues.has(otherValue)) {
             mergedValues = mergedValues ?? new Set(thisValues);
@@ -1448,8 +1407,8 @@ class InferenceState {
    */
   debug(): any {
     const result: any = {values: {}, variables: {}};
-    const objects: Map<InstructionValue, number> = new Map();
-    function identify(value: InstructionValue): number {
+    const objects: Map<AliasingEffect, number> = new Map();
+    function identify(value: AliasingEffect): number {
       let id = objects.get(value);
       if (id == null) {
         id = objects.size;
@@ -1461,7 +1420,7 @@ class InferenceState {
       const id = identify(value);
       result.values[id] = {
         abstract: this.debugAbstractValue(kind),
-        value: printInstructionValue(value),
+        value: printAliasingEffect(value),
       };
     }
     for (const [variable, values] of this.#variables) {
@@ -1478,7 +1437,7 @@ class InferenceState {
   }
 
   inferPhi(phi: Phi): void {
-    const values: Set<InstructionValue> = new Set();
+    const values: Set<AliasingEffect> = new Set();
     for (const [_, operand] of phi.operands) {
       const operandValues = this.#variables.get(operand.identifier.id);
       // This is a backedge that will be handled later by State.merge
@@ -1869,6 +1828,23 @@ function computeSignatureForInstruction(
             });
           }
         }
+        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,
+            });
+          }
+        }
       }
       break;
     }
@@ -2035,8 +2011,9 @@ function computeSignatureForInstruction(
         kind: 'MutateGlobal',
         place: value.value,
         error: CompilerDiagnostic.create({
+          category: ErrorCategory.Globals,
           severity: ErrorSeverity.InvalidReact,
-          category:
+          reason:
             'Cannot reassign variables declared outside of the component/hook',
           description: `Variable ${variable} is declared outside of the component/hook. Reassigning this value during render is a form of side effect, which can cause unpredictable behavior depending on when the component happens to re-render. If this variable is used in rendering, use useState instead. Otherwise, consider updating it in an effect. (https://react.dev/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render)`,
         }).withDetail({
@@ -2134,8 +2111,9 @@ function computeEffectsForLegacySignature(
       kind: 'Impure',
       place: receiver,
       error: CompilerDiagnostic.create({
+        category: ErrorCategory.Purity,
         severity: ErrorSeverity.InvalidReact,
-        category: 'Cannot call impure function during render',
+        reason: 'Cannot call impure function during render',
         description:
           (signature.canonicalName != null
             ? `\`${signature.canonicalName}\` is an impure function. `
@@ -2325,8 +2303,9 @@ function areArgumentsImmutableAndNonMutating(
     const values = state.values(place);
     for (const value of values) {
       if (
-        value.kind === 'FunctionExpression' &&
-        value.loweredFunc.func.params.some(param => {
+        value.kind === 'CreateFunction' &&
+        value.function.kind === 'FunctionExpression' &&
+        value.function.loweredFunc.func.params.some(param => {
           const place = param.kind === 'Identifier' ? param : param.place;
           const range = place.identifier.mutableRange;
           return range.end > range.start + 1;
@@ -2519,10 +2498,47 @@ function computeEffectsForSignature(
         break;
       }
       case 'CreateFunction': {
-        CompilerError.throwTodo({
-          reason: `Support CreateFrom effects in signatures`,
-          loc: receiver.loc,
+        const applyInto = substitutions.get(effect.into.identifier.id);
+        if (applyInto == null || applyInto.length !== 1) {
+          return null;
+        }
+        const captures: Array<Place> = [];
+        for (let i = 0; i < effect.captures.length; i++) {
+          const substitution = substitutions.get(
+            effect.captures[i].identifier.id,
+          );
+          if (substitution == null || substitution.length !== 1) {
+            return null;
+          }
+          captures.push(substitution[0]);
+        }
+        const context: Array<Place> = [];
+        const originalContext = effect.function.loweredFunc.func.context;
+        for (let i = 0; i < originalContext.length; i++) {
+          const substitution = substitutions.get(
+            originalContext[i].identifier.id,
+          );
+          if (substitution == null || substitution.length !== 1) {
+            return null;
+          }
+          context.push(substitution[0]);
+        }
+        effects.push({
+          kind: 'CreateFunction',
+          into: applyInto[0],
+          function: {
+            ...effect.function,
+            loweredFunc: {
+              ...effect.function.loweredFunc,
+              func: {
+                ...effect.function.loweredFunc.func,
+                context,
+              },
+            },
+          },
+          captures,
         });
+        break;
       }
       default: {
         assertExhaustive(

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

@@ -27,7 +27,7 @@ import {
 } from '../HIR/visitors';
 import {assertExhaustive, getOrInsertWith} from '../Utils/utils';
 import {Err, Ok, Result} from '../Utils/Result';
-import {AliasingEffect} from './AliasingEffects';
+import {AliasingEffect, MutationReason} from './AliasingEffects';
 
 /**
  * This pass builds an abstract model of the heap and interprets the effects of the
@@ -101,6 +101,7 @@ export function inferMutationAliasingRanges(
     transitive: boolean;
     kind: MutationKind;
     place: Place;
+    reason: MutationReason | null;
   }> = [];
   const renders: Array<{index: number; place: Place}> = [];
 
@@ -140,7 +141,7 @@ export function inferMutationAliasingRanges(
         } else if (effect.kind === 'CreateFunction') {
           state.create(effect.into, {
             kind: 'Function',
-            function: effect.function.loweredFunc.func,
+            effect,
           });
         } else if (effect.kind === 'CreateFrom') {
           state.createFrom(index++, effect.from, effect.into);
@@ -155,7 +156,7 @@ export function inferMutationAliasingRanges(
            * invariant here.
            */
           if (!state.nodes.has(effect.into.identifier)) {
-            state.create(effect.into, {kind: 'Object'});
+            state.create(effect.into, {kind: 'Assign'});
           }
           state.assign(index++, effect.from, effect.into);
         } else if (effect.kind === 'Alias') {
@@ -176,6 +177,7 @@ export function inferMutationAliasingRanges(
               effect.kind === 'MutateTransitive'
                 ? MutationKind.Definite
                 : MutationKind.Conditional,
+            reason: null,
             place: effect.value,
           });
         } else if (
@@ -190,6 +192,7 @@ export function inferMutationAliasingRanges(
               effect.kind === 'Mutate'
                 ? MutationKind.Definite
                 : MutationKind.Conditional,
+            reason: effect.kind === 'Mutate' ? (effect.reason ?? null) : null,
             place: effect.value,
           });
         } else if (
@@ -241,6 +244,7 @@ export function inferMutationAliasingRanges(
       mutation.transitive,
       mutation.kind,
       mutation.place.loc,
+      mutation.reason,
       errors,
     );
   }
@@ -267,6 +271,7 @@ export function inferMutationAliasingRanges(
         functionEffects.push({
           kind: 'Mutate',
           value: {...place, loc: node.local.loc},
+          reason: node.mutationReason,
         });
       }
     }
@@ -469,6 +474,99 @@ export function inferMutationAliasingRanges(
     }
   }
 
+  const tracked: Array<Place> = [];
+  for (const param of [...fn.params, ...fn.context, fn.returns]) {
+    const place = param.kind === 'Identifier' ? param : param.place;
+    tracked.push(place);
+  }
+
+  const returned: Set<Node> = new Set();
+  const queue: Array<Node> = [state.nodes.get(fn.returns.identifier)!];
+  const seen: Set<Node> = new Set();
+  while (queue.length !== 0) {
+    const node = queue.pop()!;
+    if (seen.has(node)) {
+      continue;
+    }
+    seen.add(node);
+    for (const id of node.aliases.keys()) {
+      queue.push(state.nodes.get(id)!);
+    }
+    for (const id of node.createdFrom.keys()) {
+      queue.push(state.nodes.get(id)!);
+    }
+    if (node.id.id === fn.returns.identifier.id) {
+      continue;
+    }
+    switch (node.value.kind) {
+      case 'Assign':
+      case 'CreateFrom': {
+        break;
+      }
+      case 'Phi':
+      case 'Object':
+      case 'Function': {
+        returned.add(node);
+        break;
+      }
+      default: {
+        assertExhaustive(
+          node.value,
+          `Unexpected node value kind '${(node.value as any).kind}'`,
+        );
+      }
+    }
+  }
+  const returnedValues = [...returned];
+  if (
+    returnedValues.length === 1 &&
+    returnedValues[0].value.kind === 'Object' &&
+    tracked.some(place => place.identifier.id === returnedValues[0].id.id)
+  ) {
+    const from = tracked.find(
+      place => place.identifier.id === returnedValues[0].id.id,
+    )!;
+    functionEffects.push({
+      kind: 'Assign',
+      from,
+      into: fn.returns,
+    });
+  } else if (
+    returnedValues.length === 1 &&
+    returnedValues[0].value.kind === 'Function'
+  ) {
+    const outerContext = new Set(fn.context.map(p => p.identifier.id));
+    const effect = returnedValues[0].value.effect;
+    functionEffects.push({
+      kind: 'CreateFunction',
+      function: {
+        ...effect.function,
+        loweredFunc: {
+          func: {
+            ...effect.function.loweredFunc.func,
+            context: effect.function.loweredFunc.func.context.filter(p =>
+              outerContext.has(p.identifier.id),
+            ),
+          },
+        },
+      },
+      captures: effect.captures.filter(p => outerContext.has(p.identifier.id)),
+      into: fn.returns,
+    });
+  } else {
+    const returns = fn.returns.identifier;
+    functionEffects.push({
+      kind: 'Create',
+      into: fn.returns,
+      value: isPrimitiveType(returns)
+        ? ValueKind.Primitive
+        : isJsxType(returns.type)
+          ? ValueKind.Frozen
+          : ValueKind.Mutable,
+      reason: ValueReason.KnownReturnSignature,
+    });
+  }
+
   /**
    * Part 3
    * Finish populating the externally visible effects. Above we bubble-up the side effects
@@ -476,28 +574,12 @@ export function inferMutationAliasingRanges(
    * Here we populate an effect to create the return value as well as populating alias/capture
    * effects for how data flows between the params, context vars, and return.
    */
-  const returns = fn.returns.identifier;
-  functionEffects.push({
-    kind: 'Create',
-    into: fn.returns,
-    value: isPrimitiveType(returns)
-      ? ValueKind.Primitive
-      : isJsxType(returns.type)
-        ? ValueKind.Frozen
-        : ValueKind.Mutable,
-    reason: ValueReason.KnownReturnSignature,
-  });
   /**
    * Determine precise data-flow effects by simulating transitive mutations of the params/
    * captures and seeing what other params/context variables are affected. Anything that
    * would be transitively mutated needs a capture relationship.
    */
-  const tracked: Array<Place> = [];
   const ignoredErrors = new CompilerError();
-  for (const param of [...fn.params, ...fn.context, fn.returns]) {
-    const place = param.kind === 'Identifier' ? param : param.place;
-    tracked.push(place);
-  }
   for (const into of tracked) {
     const mutationIndex = index++;
     state.mutate(
@@ -507,6 +589,7 @@ export function inferMutationAliasingRanges(
       true,
       MutationKind.Conditional,
       into.loc,
+      null,
       ignoredErrors,
     );
     for (const from of tracked) {
@@ -580,10 +663,16 @@ type Node = {
   transitive: {kind: MutationKind; loc: SourceLocation} | null;
   local: {kind: MutationKind; loc: SourceLocation} | null;
   lastMutated: number;
+  mutationReason: MutationReason | null;
   value:
+    | {kind: 'Assign'}
+    | {kind: 'CreateFrom'}
     | {kind: 'Object'}
     | {kind: 'Phi'}
-    | {kind: 'Function'; function: HIRFunction};
+    | {
+        kind: 'Function';
+        effect: Extract<AliasingEffect, {kind: 'CreateFunction'}>;
+      };
 };
 class AliasingState {
   nodes: Map<Identifier, Node> = new Map();
@@ -599,12 +688,13 @@ class AliasingState {
       transitive: null,
       local: null,
       lastMutated: 0,
+      mutationReason: null,
       value,
     });
   }
 
   createFrom(index: number, from: Place, into: Place): void {
-    this.create(into, {kind: 'Object'});
+    this.create(into, {kind: 'CreateFrom'});
     const fromNode = this.nodes.get(from.identifier);
     const toNode = this.nodes.get(into.identifier);
     if (fromNode == null || toNode == null) {
@@ -666,7 +756,10 @@ class AliasingState {
         continue;
       }
       if (node.value.kind === 'Function') {
-        appendFunctionErrors(errors, node.value.function);
+        appendFunctionErrors(
+          errors,
+          node.value.effect.function.loweredFunc.func,
+        );
       }
       for (const [alias, when] of node.createdFrom) {
         if (when >= index) {
@@ -697,6 +790,7 @@ class AliasingState {
     transitive: boolean,
     startKind: MutationKind,
     loc: SourceLocation,
+    reason: MutationReason | null,
     errors: CompilerError,
   ): void {
     const seen = new Map<Identifier, MutationKind>();
@@ -717,6 +811,7 @@ class AliasingState {
       if (node == null) {
         continue;
       }
+      node.mutationReason ??= reason;
       node.lastMutated = Math.max(node.lastMutated, index);
       if (end != null) {
         node.id.mutableRange.end = makeInstructionId(
@@ -728,7 +823,10 @@ class AliasingState {
         node.transitive == null &&
         node.local == null
       ) {
-        appendFunctionErrors(errors, node.value.function);
+        appendFunctionErrors(
+          errors,
+          node.value.effect.function.loweredFunc.func,
+        );
       }
       if (transitive) {
         if (node.transitive == null || node.transitive.kind < kind) {

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

@@ -42,6 +42,7 @@ import {
   mapInstructionValueOperands,
   mapTerminalOperands,
 } from '../HIR/visitors';
+import {ErrorCategory} from '../CompilerError';
 
 type InlinedJsxDeclarationMap = Map<
   DeclarationId,
@@ -83,6 +84,7 @@ export function inlineJsxTransform(
           kind: 'CompileDiagnostic',
           fnLoc: null,
           detail: {
+            category: ErrorCategory.Todo,
             reason: 'JSX Inlining is not supported on value blocks',
             loc: instr.loc,
           },

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

@@ -255,7 +255,6 @@ function emitSelectorFn(env: Environment, keys: Array<string>): Instruction {
     returnTypeAnnotation: null,
     returns: createTemporaryPlace(env, GeneratedSource),
     context: [],
-    effects: null,
     body: {
       entry: block.id,
       blocks: new Map([[block.id, block]]),
@@ -263,6 +262,7 @@ function emitSelectorFn(env: Environment, keys: Array<string>): Instruction {
     generator: false,
     async: false,
     directives: [],
+    aliasingEffects: [],
   };
 
   reversePostorderBlocks(fn.body);

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

@@ -370,7 +370,6 @@ function emitOutlinedFn(
     returnTypeAnnotation: null,
     returns: createTemporaryPlace(env, GeneratedSource),
     context: [],
-    effects: null,
     body: {
       entry: block.id,
       blocks: new Map([[block.id, block]]),
@@ -378,6 +377,7 @@ function emitOutlinedFn(
     generator: false,
     async: false,
     directives: [],
+    aliasingEffects: [],
   };
   return fn;
 }

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

@@ -13,7 +13,7 @@ import {
   pruneUnusedLabels,
   renameVariables,
 } from '.';
-import {CompilerError, ErrorSeverity} from '../CompilerError';
+import {CompilerError, ErrorCategory, ErrorSeverity} from '../CompilerError';
 import {Environment, ExternalFunction} from '../HIR';
 import {
   ArrayPattern,
@@ -2185,6 +2185,7 @@ function codegenInstructionValue(
                 (declarator.id as t.Identifier).name
               }'`,
               severity: ErrorSeverity.Todo,
+              category: ErrorCategory.Todo,
               loc: declarator.loc ?? null,
               suggestions: null,
             });
@@ -2193,6 +2194,7 @@ function codegenInstructionValue(
             cx.errors.push({
               reason: `(CodegenReactiveFunction::codegenInstructionValue) Handle conversion of ${stmt.type} to expression`,
               severity: ErrorSeverity.Todo,
+              category: ErrorCategory.Todo,
               loc: stmt.loc ?? null,
               suggestions: null,
             });

compiler/packages/babel-plugin-react-compiler/src/Transform/TransformFire.ts

@@ -42,6 +42,7 @@ import {
 import {eachInstructionOperand} from '../HIR/visitors';
 import {printSourceLocationLine} from '../HIR/PrintHIR';
 import {USE_FIRE_FUNCTION_NAME} from '../HIR/Environment';
+import {ErrorCategory} from '../CompilerError';
 
 /*
  * TODO(jmbrown):
@@ -133,6 +134,7 @@ function replaceFireFunctions(fn: HIRFunction, context: Context): void {
                   loc: value.loc,
                   description: null,
                   severity: ErrorSeverity.Invariant,
+                  category: ErrorCategory.Invariant,
                   reason: '[InsertFire] No LoadGlobal found for useEffect call',
                   suggestions: null,
                 });
@@ -179,6 +181,7 @@ function replaceFireFunctions(fn: HIRFunction, context: Context): void {
                 description:
                   'You must use an array literal for an effect dependency array when that effect uses `fire()`',
                 severity: ErrorSeverity.Invariant,
+                category: ErrorCategory.Fire,
                 reason: CANNOT_COMPILE_FIRE,
                 suggestions: null,
               });
@@ -189,6 +192,7 @@ function replaceFireFunctions(fn: HIRFunction, context: Context): void {
               description:
                 'You must use an array literal for an effect dependency array when that effect uses `fire()`',
               severity: ErrorSeverity.Invariant,
+              category: ErrorCategory.Fire,
               reason: CANNOT_COMPILE_FIRE,
               suggestions: null,
             });
@@ -223,6 +227,7 @@ function replaceFireFunctions(fn: HIRFunction, context: Context): void {
                 loc: value.loc,
                 description: null,
                 severity: ErrorSeverity.Invariant,
+                category: ErrorCategory.Invariant,
                 reason:
                   '[InsertFire] No loadLocal found for fire call argument',
                 suggestions: null,
@@ -246,6 +251,7 @@ function replaceFireFunctions(fn: HIRFunction, context: Context): void {
               description:
                 '`fire()` can only receive a function call such as `fire(fn(a,b)). Method calls and other expressions are not allowed',
               severity: ErrorSeverity.InvalidReact,
+              category: ErrorCategory.Fire,
               reason: CANNOT_COMPILE_FIRE,
               suggestions: null,
             });
@@ -264,6 +270,7 @@ function replaceFireFunctions(fn: HIRFunction, context: Context): void {
             loc: value.loc,
             description,
             severity: ErrorSeverity.InvalidReact,
+            category: ErrorCategory.Fire,
             reason: CANNOT_COMPILE_FIRE,
             suggestions: null,
           });
@@ -395,6 +402,7 @@ function ensureNoRemainingCalleeCaptures(
 this effect or not used with a fire() call at all. ${calleeName} was used with fire() on line \
 ${printSourceLocationLine(calleeInfo.fireLoc)} in this effect`,
         severity: ErrorSeverity.InvalidReact,
+        category: ErrorCategory.Fire,
         reason: CANNOT_COMPILE_FIRE,
         suggestions: null,
       });
@@ -411,6 +419,7 @@ function ensureNoMoreFireUses(fn: HIRFunction, context: Context): void {
       context.pushError({
         loc: place.identifier.loc,
         description: 'Cannot use `fire` outside of a useEffect function',
+        category: ErrorCategory.Fire,
         severity: ErrorSeverity.Invariant,
         reason: CANNOT_COMPILE_FIRE,
         suggestions: null,

compiler/packages/babel-plugin-react-compiler/src/TypeInference/InferTypes.ts

@@ -777,6 +777,15 @@ class Unifier {
       return {kind: 'Phi', operands: type.operands.map(o => this.get(o))};
     }
 
+    if (type.kind === 'Function') {
+      return {
+        kind: 'Function',
+        isConstructor: type.isConstructor,
+        shapeId: type.shapeId,
+        return: this.get(type.return),
+      };
+    }
+
     return type;
   }
 }

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

@@ -90,10 +90,13 @@ export function Ok<T>(val: T): OkImpl<T> {
 }
 
 class OkImpl<T> implements Result<T, never> {
-  constructor(private val: T) {}
+  #val: T;
+  constructor(val: T) {
+    this.#val = val;
+  }
 
   map<U>(fn: (val: T) => U): Result<U, never> {
-    return new OkImpl(fn(this.val));
+    return new OkImpl(fn(this.#val));
   }
 
   mapErr<F>(_fn: (val: never) => F): Result<T, F> {
@@ -101,15 +104,15 @@ class OkImpl<T> implements Result<T, never> {
   }
 
   mapOr<U>(_fallback: U, fn: (val: T) => U): U {
-    return fn(this.val);
+    return fn(this.#val);
   }
 
   mapOrElse<U>(_fallback: () => U, fn: (val: T) => U): U {
-    return fn(this.val);
+    return fn(this.#val);
   }
 
   andThen<U>(fn: (val: T) => Result<U, never>): Result<U, never> {
-    return fn(this.val);
+    return fn(this.#val);
   }
 
   and<U>(res: Result<U, never>): Result<U, never> {
@@ -133,30 +136,30 @@ class OkImpl<T> implements Result<T, never> {
   }
 
   expect(_msg: string): T {
-    return this.val;
+    return this.#val;
   }
 
   expectErr(msg: string): never {
-    throw new Error(`${msg}: ${this.val}`);
+    throw new Error(`${msg}: ${this.#val}`);
   }
 
   unwrap(): T {
-    return this.val;
+    return this.#val;
   }
 
   unwrapOr(_fallback: T): T {
-    return this.val;
+    return this.#val;
   }
 
   unwrapOrElse(_fallback: (val: never) => T): T {
-    return this.val;
+    return this.#val;
   }
 
   unwrapErr(): never {
-    if (this.val instanceof Error) {
-      throw this.val;
+    if (this.#val instanceof Error) {
+      throw this.#val;
     }
-    throw new Error(`Can't unwrap \`Ok\` to \`Err\`: ${this.val}`);
+    throw new Error(`Can't unwrap \`Ok\` to \`Err\`: ${this.#val}`);
   }
 }
 
@@ -165,14 +168,17 @@ export function Err<E>(val: E): ErrImpl<E> {
 }
 
 class ErrImpl<E> implements Result<never, E> {
-  constructor(private val: E) {}
+  #val: E;
+  constructor(val: E) {
+    this.#val = val;
+  }
 
   map<U>(_fn: (val: never) => U): Result<U, E> {
     return this;
   }
 
   mapErr<F>(fn: (val: E) => F): Result<never, F> {
-    return new ErrImpl(fn(this.val));
+    return new ErrImpl(fn(this.#val));
   }
 
   mapOr<U>(fallback: U, _fn: (val: never) => U): U {
@@ -196,7 +202,7 @@ class ErrImpl<E> implements Result<never, E> {
   }
 
   orElse<F>(fn: (val: E) => ErrImpl<F>): Result<never, F> {
-    return fn(this.val);
+    return fn(this.#val);
   }
 
   isOk(): this is OkImpl<never> {
@@ -208,18 +214,18 @@ class ErrImpl<E> implements Result<never, E> {
   }
 
   expect(msg: string): never {
-    throw new Error(`${msg}: ${this.val}`);
+    throw new Error(`${msg}: ${this.#val}`);
   }
 
   expectErr(_msg: string): E {
-    return this.val;
+    return this.#val;
   }
 
   unwrap(): never {
-    if (this.val instanceof Error) {
-      throw this.val;
+    if (this.#val instanceof Error) {
+      throw this.#val;
     }
-    throw new Error(`Can't unwrap \`Err\` to \`Ok\`: ${this.val}`);
+    throw new Error(`Can't unwrap \`Err\` to \`Ok\`: ${this.#val}`);
   }
 
   unwrapOr<T>(fallback: T): T {
@@ -227,10 +233,10 @@ class ErrImpl<E> implements Result<never, E> {
   }
 
   unwrapOrElse<T>(fallback: (val: E) => T): T {
-    return fallback(this.val);
+    return fallback(this.#val);
   }
 
   unwrapErr(): E {
-    return this.val;
+    return this.#val;
   }
 }

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

@@ -182,6 +182,11 @@ export function parseConfigPragmaForTests(
     environment?: PartialEnvironmentConfig;
   },
 ): PluginOptions {
+  const overridePragma = parseConfigPragmaAsString(pragma);
+  if (overridePragma !== '') {
+    return parseConfigStringAsJS(overridePragma, defaults);
+  }
+
   const environment = parseConfigPragmaEnvironmentForTest(
     pragma,
     defaults.environment ?? {},
@@ -217,3 +222,104 @@ export function parseConfigPragmaForTests(
   }
   return parsePluginOptions(options);
 }
+
+export function parseConfigPragmaAsString(pragma: string): string {
+  // Check if it's in JS override format
+  for (const {key, value: val} of splitPragma(pragma)) {
+    if (key === 'OVERRIDE' && val != null) {
+      return val;
+    }
+  }
+  return '';
+}
+
+function parseConfigStringAsJS(
+  configString: string,
+  defaults: {
+    compilationMode: CompilationMode;
+    environment?: PartialEnvironmentConfig;
+  },
+): PluginOptions {
+  let parsedConfig: any;
+  try {
+    // Parse the JavaScript object literal
+    parsedConfig = new Function(`return ${configString}`)();
+  } catch (error) {
+    CompilerError.invariant(false, {
+      reason: 'Failed to parse config pragma as JavaScript object',
+      description: `Could not parse: ${configString}. Error: ${error}`,
+      loc: null,
+      suggestions: null,
+    });
+  }
+
+  console.log('OVERRIDE:', parsedConfig);
+
+  const options: Record<keyof PluginOptions, unknown> = {
+    ...defaultOptions,
+    panicThreshold: 'all_errors',
+    compilationMode: defaults.compilationMode,
+    environment: defaults.environment ?? defaultOptions.environment,
+  };
+
+  // Apply parsed config, merging environment if it exists
+  if (parsedConfig.environment) {
+    const mergedEnvironment = {
+      ...(options.environment as Record<string, unknown>),
+      ...parsedConfig.environment,
+    };
+
+    // Apply complex defaults for environment flags that are set to true
+    const environmentConfig: Partial<Record<keyof EnvironmentConfig, unknown>> =
+      {};
+    for (const [key, value] of Object.entries(mergedEnvironment)) {
+      if (hasOwnProperty(EnvironmentConfigSchema.shape, key)) {
+        if (value === true && key in testComplexConfigDefaults) {
+          environmentConfig[key] = testComplexConfigDefaults[key];
+        } else {
+          environmentConfig[key] = value;
+        }
+      }
+    }
+
+    // Validate environment config
+    const validatedEnvironment =
+      EnvironmentConfigSchema.safeParse(environmentConfig);
+    if (!validatedEnvironment.success) {
+      CompilerError.invariant(false, {
+        reason: 'Invalid environment configuration in config pragma',
+        description: `${fromZodError(validatedEnvironment.error)}`,
+        loc: null,
+        suggestions: null,
+      });
+    }
+
+    if (validatedEnvironment.data.enableResetCacheOnSourceFileChanges == null) {
+      validatedEnvironment.data.enableResetCacheOnSourceFileChanges = false;
+    }
+
+    options.environment = validatedEnvironment.data;
+  }
+
+  // Apply other config options
+  for (const [key, value] of Object.entries(parsedConfig)) {
+    if (key === 'environment') {
+      continue;
+    }
+
+    if (hasOwnProperty(defaultOptions, key)) {
+      if (value === true && key in testComplexPluginOptionDefaults) {
+        options[key] = testComplexPluginOptionDefaults[key];
+      } else if (key === 'target' && value === 'donotuse_meta_internal') {
+        options[key] = {
+          kind: value,
+          runtimeModule: 'react',
+        };
+      } else {
+        options[key] = value;
+      }
+    }
+  }
+
+  return parsePluginOptions(options);
+}

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

@@ -9,6 +9,7 @@ import * as t from '@babel/types';
 import {
   CompilerError,
   CompilerErrorDetail,
+  ErrorCategory,
   ErrorSeverity,
 } from '../CompilerError';
 import {computeUnconditionalBlocks} from '../HIR/ComputeUnconditionalBlocks';
@@ -124,6 +125,7 @@ export function validateHooksUsage(
       recordError(
         place.loc,
         new CompilerErrorDetail({
+          category: ErrorCategory.Hooks,
           description: null,
           reason,
           loc: place.loc,
@@ -140,6 +142,7 @@ export function validateHooksUsage(
       recordError(
         place.loc,
         new CompilerErrorDetail({
+          category: ErrorCategory.Hooks,
           description: null,
           reason:
             'Hooks may not be referenced as normal values, they must be called. See https://react.dev/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values',
@@ -157,6 +160,7 @@ export function validateHooksUsage(
       recordError(
         place.loc,
         new CompilerErrorDetail({
+          category: ErrorCategory.Hooks,
           description: null,
           reason:
             'Hooks must be the same function on every render, but this value may change over time to a different function. See https://react.dev/reference/rules/react-calls-components-and-hooks#dont-dynamically-use-hooks',
@@ -424,7 +428,7 @@ export function validateHooksUsage(
   }
 
   for (const [, error] of errorsByPlace) {
-    errors.push(error);
+    errors.pushErrorDetail(error);
   }
   return errors.asResult();
 }
@@ -448,6 +452,7 @@ function visitFunctionExpression(errors: CompilerError, fn: HIRFunction): void {
           if (hookKind != null) {
             errors.pushErrorDetail(
               new CompilerErrorDetail({
+                category: ErrorCategory.Hooks,
                 severity: ErrorSeverity.InvalidReact,
                 reason:
                   'Hooks must be called at the top level in the body of a function component or custom hook, and may not be called within function expressions. See the Rules of Hooks (https://react.dev/warnings/invalid-hook-call-warning)',

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

@@ -6,6 +6,7 @@
  */
 
 import {CompilerDiagnostic, CompilerError, Effect, ErrorSeverity} from '..';
+import {ErrorCategory} from '../CompilerError';
 import {HIRFunction, IdentifierId, Place} from '../HIR';
 import {
   eachInstructionLValue,
@@ -36,8 +37,9 @@ export function validateLocalsNotReassignedAfterRender(fn: HIRFunction): void {
         : 'variable';
     errors.pushDiagnostic(
       CompilerDiagnostic.create({
+        category: ErrorCategory.Immutability,
         severity: ErrorSeverity.InvalidReact,
-        category: 'Cannot reassign variable after render completes',
+        reason: 'Cannot reassign variable after render completes',
         description: `Reassigning ${variable} after render has completed can cause inconsistent behavior on subsequent renders. Consider using state instead.`,
       }).withDetail({
         kind: 'error',
@@ -91,8 +93,9 @@ function getContextReassignment(
                   : 'variable';
               errors.pushDiagnostic(
                 CompilerDiagnostic.create({
+                  category: ErrorCategory.Immutability,
                   severity: ErrorSeverity.InvalidReact,
-                  category: 'Cannot reassign variable in async function',
+                  reason: 'Cannot reassign variable in async function',
                   description:
                     'Reassigning a variable in an async function can cause inconsistent behavior on subsequent renders. Consider using state instead',
                 }).withDetail({

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

@@ -6,6 +6,7 @@
  */
 
 import {CompilerError, ErrorSeverity} from '..';
+import {ErrorCategory} from '../CompilerError';
 import {
   Identifier,
   Instruction,
@@ -108,6 +109,7 @@ class Visitor extends ReactiveFunctionVisitor<CompilerError> {
           isUnmemoized(deps.identifier, this.scopes))
       ) {
         state.push({
+          category: ErrorCategory.EffectDependencies,
           reason:
             'React Compiler has skipped optimizing this component because the effect dependencies could not be memoized. Unmemoized effect dependencies can trigger an infinite loop or other unexpected behavior',
           description: null,

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

@@ -6,6 +6,7 @@
  */
 
 import {CompilerError, EnvironmentConfig, ErrorSeverity} from '..';
+import {ErrorCategory} from '../CompilerError';
 import {HIRFunction, IdentifierId} from '../HIR';
 import {DEFAULT_GLOBALS} from '../HIR/Globals';
 import {Result} from '../Utils/Result';
@@ -56,6 +57,7 @@ export function validateNoCapitalizedCalls(
           const calleeName = capitalLoadGlobals.get(calleeIdentifier);
           if (calleeName != null) {
             CompilerError.throwInvalidReact({
+              category: ErrorCategory.CapitalizedCalls,
               reason,
               description: `${calleeName} may be a component.`,
               loc: value.loc,
@@ -79,6 +81,7 @@ export function validateNoCapitalizedCalls(
           const propertyName = capitalizedProperties.get(propertyIdentifier);
           if (propertyName != null) {
             errors.push({
+              category: ErrorCategory.CapitalizedCalls,
               severity: ErrorSeverity.InvalidReact,
               reason,
               description: `${propertyName} may be a component.`,

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

@@ -6,6 +6,7 @@
  */
 
 import {CompilerError, ErrorSeverity, SourceLocation} from '..';
+import {ErrorCategory} from '../CompilerError';
 import {
   ArrayExpression,
   BlockId,
@@ -219,6 +220,7 @@ function validateEffect(
 
   for (const loc of setStateLocations) {
     errors.push({
+      category: ErrorCategory.EffectDerivationsOfState,
       reason:
         'Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)',
       description: null,

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

@@ -6,11 +6,10 @@
  */
 
 import {CompilerDiagnostic, CompilerError, Effect, ErrorSeverity} from '..';
+import {ErrorCategory} from '../CompilerError';
 import {
-  FunctionEffect,
   HIRFunction,
   IdentifierId,
-  isMutableEffect,
   isRefOrRefLikeMutableType,
   Place,
 } from '../HIR';
@@ -18,8 +17,8 @@ import {
   eachInstructionValueOperand,
   eachTerminalOperand,
 } from '../HIR/visitors';
+import {AliasingEffect} from '../Inference/AliasingEffects';
 import {Result} from '../Utils/Result';
-import {Iterable_some} from '../Utils/utils';
 
 /**
  * Validates that functions with known mutations (ie due to types) cannot be passed
@@ -50,14 +49,14 @@ export function validateNoFreezingKnownMutableFunctions(
   const errors = new CompilerError();
   const contextMutationEffects: Map<
     IdentifierId,
-    Extract<FunctionEffect, {kind: 'ContextMutation'}>
+    Extract<AliasingEffect, {kind: 'Mutate'} | {kind: 'MutateTransitive'}>
   > = new Map();
 
   function visitOperand(operand: Place): void {
     if (operand.effect === Effect.Freeze) {
       const effect = contextMutationEffects.get(operand.identifier.id);
       if (effect != null) {
-        const place = [...effect.places][0];
+        const place = effect.value;
         const variable =
           place != null &&
           place.identifier.name != null &&
@@ -66,8 +65,9 @@ export function validateNoFreezingKnownMutableFunctions(
             : 'a local variable';
         errors.pushDiagnostic(
           CompilerDiagnostic.create({
+            category: ErrorCategory.Immutability,
             severity: ErrorSeverity.InvalidReact,
-            category: 'Cannot modify local variables after render completes',
+            reason: 'Cannot modify local variables after render completes',
             description: `This argument is a function which may reassign or mutate ${variable} after render, which can cause inconsistent behavior on subsequent renders. Consider using state instead.`,
           })
             .withDetail({
@@ -77,7 +77,7 @@ export function validateNoFreezingKnownMutableFunctions(
             })
             .withDetail({
               kind: 'error',
-              loc: effect.loc,
+              loc: effect.value.loc,
               message: `This modifies ${variable}`,
             }),
         );
@@ -108,24 +108,7 @@ export function validateNoFreezingKnownMutableFunctions(
           break;
         }
         case 'FunctionExpression': {
-          const knownMutation = (value.loweredFunc.func.effects ?? []).find(
-            effect => {
-              return (
-                effect.kind === 'ContextMutation' &&
-                (effect.effect === Effect.Store ||
-                  effect.effect === Effect.Mutate) &&
-                Iterable_some(effect.places, place => {
-                  return (
-                    isMutableEffect(place.effect, place.loc) &&
-                    !isRefOrRefLikeMutableType(place.identifier.type)
-                  );
-                })
-              );
-            },
-          );
-          if (knownMutation && knownMutation.kind === 'ContextMutation') {
-            contextMutationEffects.set(lvalue.identifier.id, knownMutation);
-          } else if (value.loweredFunc.func.aliasingEffects != null) {
+          if (value.loweredFunc.func.aliasingEffects != null) {
             const context = new Set(
               value.loweredFunc.func.context.map(p => p.identifier.id),
             );
@@ -146,12 +129,7 @@ export function validateNoFreezingKnownMutableFunctions(
                     context.has(effect.value.identifier.id) &&
                     !isRefOrRefLikeMutableType(effect.value.identifier.type)
                   ) {
-                    contextMutationEffects.set(lvalue.identifier.id, {
-                      kind: 'ContextMutation',
-                      effect: Effect.Mutate,
-                      loc: effect.value.loc,
-                      places: new Set([effect.value]),
-                    });
+                    contextMutationEffects.set(lvalue.identifier.id, effect);
                     break effects;
                   }
                   break;

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

@@ -6,6 +6,7 @@
  */
 
 import {CompilerDiagnostic, CompilerError, ErrorSeverity} from '..';
+import {ErrorCategory} from '../CompilerError';
 import {HIRFunction} from '../HIR';
 import {getFunctionCallSignature} from '../Inference/InferMutationAliasingEffects';
 import {Result} from '../Utils/Result';
@@ -36,7 +37,8 @@ export function validateNoImpureFunctionsInRender(
         if (signature != null && signature.impure === true) {
           errors.pushDiagnostic(
             CompilerDiagnostic.create({
-              category: 'Cannot call impure function during render',
+              category: ErrorCategory.Purity,
+              reason: 'Cannot call impure function during render',
               description:
                 (signature.canonicalName != null
                   ? `\`${signature.canonicalName}\` is an impure function. `

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

@@ -6,6 +6,7 @@
  */
 
 import {CompilerDiagnostic, CompilerError, ErrorSeverity} from '..';
+import {ErrorCategory} from '../CompilerError';
 import {BlockId, HIRFunction} from '../HIR';
 import {Result} from '../Utils/Result';
 import {retainWhere} from '../Utils/utils';
@@ -36,8 +37,9 @@ export function validateNoJSXInTryStatement(
           case 'JsxFragment': {
             errors.pushDiagnostic(
               CompilerDiagnostic.create({
+                category: ErrorCategory.ErrorBoundaries,
                 severity: ErrorSeverity.InvalidReact,
-                category: 'Avoid constructing JSX within try/catch',
+                reason: 'Avoid constructing JSX within try/catch',
                 description: `React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)`,
               }).withDetail({
                 kind: 'error',

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

@@ -8,6 +8,7 @@
 import {
   CompilerDiagnostic,
   CompilerError,
+  ErrorCategory,
   ErrorSeverity,
 } from '../CompilerError';
 import {
@@ -468,8 +469,9 @@ function validateNoRefAccessInRenderImpl(
                 didError = true;
                 errors.pushDiagnostic(
                   CompilerDiagnostic.create({
+                    category: ErrorCategory.Refs,
                     severity: ErrorSeverity.InvalidReact,
-                    category: 'Cannot access refs during render',
+                    reason: 'Cannot access refs during render',
                     description: ERROR_DESCRIPTION,
                   }).withDetail({
                     kind: 'error',
@@ -731,8 +733,9 @@ function guardCheck(errors: CompilerError, operand: Place, env: Env): void {
   if (env.get(operand.identifier.id)?.kind === 'Guard') {
     errors.pushDiagnostic(
       CompilerDiagnostic.create({
+        category: ErrorCategory.Refs,
         severity: ErrorSeverity.InvalidReact,
-        category: 'Cannot access refs during render',
+        reason: 'Cannot access refs during render',
         description: ERROR_DESCRIPTION,
       }).withDetail({
         kind: 'error',
@@ -755,8 +758,9 @@ function validateNoRefValueAccess(
   ) {
     errors.pushDiagnostic(
       CompilerDiagnostic.create({
+        category: ErrorCategory.Refs,
         severity: ErrorSeverity.InvalidReact,
-        category: 'Cannot access refs during render',
+        reason: 'Cannot access refs during render',
         description: ERROR_DESCRIPTION,
       }).withDetail({
         kind: 'error',
@@ -781,8 +785,9 @@ function validateNoRefPassedToFunction(
   ) {
     errors.pushDiagnostic(
       CompilerDiagnostic.create({
+        category: ErrorCategory.Refs,
         severity: ErrorSeverity.InvalidReact,
-        category: 'Cannot access refs during render',
+        reason: 'Cannot access refs during render',
         description: ERROR_DESCRIPTION,
       }).withDetail({
         kind: 'error',
@@ -803,8 +808,9 @@ function validateNoRefUpdate(
   if (type?.kind === 'Ref' || type?.kind === 'RefValue') {
     errors.pushDiagnostic(
       CompilerDiagnostic.create({
+        category: ErrorCategory.Refs,
         severity: ErrorSeverity.InvalidReact,
-        category: 'Cannot access refs during render',
+        reason: 'Cannot access refs during render',
         description: ERROR_DESCRIPTION,
       }).withDetail({
         kind: 'error',
@@ -824,8 +830,9 @@ function validateNoDirectRefValueAccess(
   if (type?.kind === 'RefValue') {
     errors.pushDiagnostic(
       CompilerDiagnostic.create({
+        category: ErrorCategory.Refs,
         severity: ErrorSeverity.InvalidReact,
-        category: 'Cannot access refs during render',
+        reason: 'Cannot access refs during render',
         description: ERROR_DESCRIPTION,
       }).withDetail({
         kind: 'error',

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

@@ -8,6 +8,7 @@
 import {
   CompilerDiagnostic,
   CompilerError,
+  ErrorCategory,
   ErrorSeverity,
 } from '../CompilerError';
 import {
@@ -96,7 +97,8 @@ export function validateNoSetStateInEffects(
               if (setState !== undefined) {
                 errors.pushDiagnostic(
                   CompilerDiagnostic.create({
-                    category:
+                    category: ErrorCategory.EffectSetState,
+                    reason:
                       'Calling setState synchronously within an effect can trigger cascading renders',
                     description:
                       'Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. ' +

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

@@ -8,6 +8,7 @@
 import {
   CompilerDiagnostic,
   CompilerError,
+  ErrorCategory,
   ErrorSeverity,
 } from '../CompilerError';
 import {HIRFunction, IdentifierId, isSetStateType} from '../HIR';
@@ -128,7 +129,8 @@ function validateNoSetStateInRenderImpl(
             if (activeManualMemoId !== null) {
               errors.pushDiagnostic(
                 CompilerDiagnostic.create({
-                  category:
+                  category: ErrorCategory.RenderSetState,
+                  reason:
                     'Calling setState from useMemo may trigger an infinite loop',
                   description:
                     'Each time the memo callback is evaluated it will change state. This can cause a memoization dependency to change, running the memo function again and causing an infinite loop. Instead of setting state in useMemo(), prefer deriving the value during render. (https://react.dev/reference/react/useState)',
@@ -143,7 +145,8 @@ function validateNoSetStateInRenderImpl(
             } else if (unconditionalBlocks.has(block.id)) {
               errors.pushDiagnostic(
                 CompilerDiagnostic.create({
-                  category:
+                  category: ErrorCategory.RenderSetState,
+                  reason:
                     'Calling setState during render may trigger an infinite loop',
                   description:
                     'Calling setState during render will trigger another render, and can lead to infinite loops. (https://react.dev/reference/react/useState)',
@@ -152,7 +155,7 @@ function validateNoSetStateInRenderImpl(
                 }).withDetail({
                   kind: 'error',
                   loc: callee.loc,
-                  message: 'Found setState() within useMemo()',
+                  message: 'Found setState() in render',
                 }),
               );
             }

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

@@ -8,6 +8,7 @@
 import {
   CompilerDiagnostic,
   CompilerError,
+  ErrorCategory,
   ErrorSeverity,
 } from '../CompilerError';
 import {
@@ -281,8 +282,9 @@ function validateInferredDep(
   }
   errorState.pushDiagnostic(
     CompilerDiagnostic.create({
+      category: ErrorCategory.PreserveManualMemo,
       severity: ErrorSeverity.CannotPreserveMemoization,
-      category:
+      reason:
         'Compilation skipped because existing memoization could not be preserved',
       description: [
         'React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. ',
@@ -535,8 +537,9 @@ class Visitor extends ReactiveFunctionVisitor<VisitorState> {
         ) {
           state.errors.pushDiagnostic(
             CompilerDiagnostic.create({
+              category: ErrorCategory.PreserveManualMemo,
               severity: ErrorSeverity.CannotPreserveMemoization,
-              category:
+              reason:
                 'Compilation skipped because existing memoization could not be preserved',
               description: [
                 'React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. ',
@@ -583,8 +586,9 @@ class Visitor extends ReactiveFunctionVisitor<VisitorState> {
             if (isUnmemoized(identifier, this.scopes)) {
               state.errors.pushDiagnostic(
                 CompilerDiagnostic.create({
+                  category: ErrorCategory.PreserveManualMemo,
                   severity: ErrorSeverity.CannotPreserveMemoization,
-                  category:
+                  reason:
                     'Compilation skipped because existing memoization could not be preserved',
                   description: [
                     'React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. This value was memoized in source but not in compilation output. ',

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

@@ -8,6 +8,7 @@
 import {
   CompilerDiagnostic,
   CompilerError,
+  ErrorCategory,
   ErrorSeverity,
 } from '../CompilerError';
 import {HIRFunction, IdentifierId, SourceLocation} from '../HIR';
@@ -65,8 +66,9 @@ export function validateStaticComponents(
             if (location != null) {
               error.pushDiagnostic(
                 CompilerDiagnostic.create({
+                  category: ErrorCategory.StaticComponents,
                   severity: ErrorSeverity.InvalidReact,
-                  category: 'Cannot create components during render',
+                  reason: 'Cannot create components during render',
                   description: `Components created during render will reset their state each time they are created. Declare components outside of render. `,
                 })
                   .withDetail({

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

@@ -8,6 +8,7 @@
 import {
   CompilerDiagnostic,
   CompilerError,
+  ErrorCategory,
   ErrorSeverity,
 } from '../CompilerError';
 import {FunctionExpression, HIRFunction, IdentifierId} from '../HIR';
@@ -74,8 +75,9 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> {
                 : firstParam.place.loc;
             errors.pushDiagnostic(
               CompilerDiagnostic.create({
+                category: ErrorCategory.UseMemo,
                 severity: ErrorSeverity.InvalidReact,
-                category: 'useMemo() callbacks may not accept parameters',
+                reason: 'useMemo() callbacks may not accept parameters',
                 description:
                   'useMemo() callbacks are called by React to cache calculations across re-renders. They should not take parameters. Instead, directly reference the props, state, or local variables needed for the computation.',
                 suggestions: null,
@@ -90,8 +92,9 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> {
           if (body.loweredFunc.func.async || body.loweredFunc.func.generator) {
             errors.pushDiagnostic(
               CompilerDiagnostic.create({
+                category: ErrorCategory.UseMemo,
                 severity: ErrorSeverity.InvalidReact,
-                category:
+                reason:
                   'useMemo() callbacks may not be async or generator functions',
                 description:
                   'useMemo() callbacks are called once and must synchronously return a value.',

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

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

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-ref-in-effect-hint.expect.md

@@ -0,0 +1,37 @@
+
+## Input
+
+```javascript
+// Fixture to test that we show a hint to name as `ref` or `-Ref` when attempting
+// to assign .current inside an effect
+function Component({foo}) {
+  useEffect(() => {
+    foo.current = true;
+  }, [foo]);
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying component props or hook arguments is not allowed. Consider using a local variable instead.
+
+error.assign-ref-in-effect-hint.ts:5:4
+  3 | function Component({foo}) {
+  4 |   useEffect(() => {
+> 5 |     foo.current = true;
+    |     ^^^ `foo` cannot be modified
+  6 |   }, [foo]);
+  7 | }
+  8 |
+
+Hint: If this value is a Ref (value returned by `useRef()`), rename the variable to end in "Ref".
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.assign-ref-in-effect-hint.js

@@ -0,0 +1,7 @@
+// Fixture to test that we show a hint to name as `ref` or `-Ref` when attempting
+// to assign .current inside an effect
+function Component({foo}) {
+  useEffect(() => {
+    foo.current = true;
+  }, [foo]);
+}

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

@@ -0,0 +1,7 @@
+function Component() {
+  const f = () => () => {
+    global.property = true;
+  };
+  f()();
+  return <div>Ooops</div>;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-assing-to-ref-current-in-render.expect.md

@@ -30,13 +30,7 @@ Modifying a value returned from a hook is not allowed. Consider moving the modif
   7 | }
   8 |
 
-  3 | component Foo() {
-  4 |   const foo = useFoo();
-> 5 |   foo.current = true;
-    |   ^^^ Hint: If this value is a Ref (value returned by `useRef()`), rename the variable to end in "Ref".
-  6 |   return <div />;
-  7 | }
-  8 |
+Hint: If this value is a Ref (value returned by `useRef()`), rename the variable to end in "Ref".
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-context-in-callback.expect.md

@@ -38,6 +38,8 @@ error.invalid-mutate-context-in-callback.ts:12:4
   13 |   };
   14 |   return <div onClick={onClick} />;
   15 | }
+
+Hint: If this value is a Ref (value returned by `useRef()`), rename the variable to end in "Ref".
 ```
           
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-global-in-render-helper-phi-return-prop.expect.md

@@ -0,0 +1,44 @@
+
+## Input
+
+```javascript
+function Component() {
+  const renderItem = item => {
+    // Multiple returns so that the return type is a Phi (union)
+    if (item == null) {
+      return null;
+    }
+    // Normally we assume that it's safe to mutate globals in a function passed
+    // as a prop, because the prop could be used as an event handler or effect.
+    // But if the function returns JSX we can assume it's a render helper, ie
+    // called during render, and thus it's unsafe to mutate globals or call
+    // other impure code.
+    global.property = true;
+    return <Item item={item} value={rand} />;
+  };
+  return <ItemList renderItem={renderItem} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a variable defined outside a component or hook is not allowed. Consider using an effect.
+
+error.invalid-mutate-global-in-render-helper-phi-return-prop.ts:12:4
+  10 |     // called during render, and thus it's unsafe to mutate globals or call
+  11 |     // other impure code.
+> 12 |     global.property = true;
+     |     ^^^^^^ value cannot be modified
+  13 |     return <Item item={item} value={rand} />;
+  14 |   };
+  15 |   return <ItemList renderItem={renderItem} />;
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-global-in-render-helper-phi-return-prop.js

@@ -0,0 +1,16 @@
+function Component() {
+  const renderItem = item => {
+    // Multiple returns so that the return type is a Phi (union)
+    if (item == null) {
+      return null;
+    }
+    // Normally we assume that it's safe to mutate globals in a function passed
+    // as a prop, because the prop could be used as an event handler or effect.
+    // But if the function returns JSX we can assume it's a render helper, ie
+    // called during render, and thus it's unsafe to mutate globals or call
+    // other impure code.
+    global.property = true;
+    return <Item item={item} value={rand} />;
+  };
+  return <ItemList renderItem={renderItem} />;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-global-in-render-helper-prop.expect.md

@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+function Component() {
+  const renderItem = item => {
+    // Normally we assume that it's safe to mutate globals in a function passed
+    // as a prop, because the prop could be used as an event handler or effect.
+    // But if the function returns JSX we can assume it's a render helper, ie
+    // called during render, and thus it's unsafe to mutate globals or call
+    // other impure code.
+    global.property = true;
+    return <Item item={item} value={rand} />;
+  };
+  return <ItemList renderItem={renderItem} />;
+}
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: This value cannot be modified
+
+Modifying a variable defined outside a component or hook is not allowed. Consider using an effect.
+
+error.invalid-mutate-global-in-render-helper-prop.ts:8:4
+   6 |     // called during render, and thus it's unsafe to mutate globals or call
+   7 |     // other impure code.
+>  8 |     global.property = true;
+     |     ^^^^^^ value cannot be modified
+   9 |     return <Item item={item} value={rand} />;
+  10 |   };
+  11 |   return <ItemList renderItem={renderItem} />;
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-mutate-global-in-render-helper-prop.js

@@ -0,0 +1,12 @@
+function Component() {
+  const renderItem = item => {
+    // Normally we assume that it's safe to mutate globals in a function passed
+    // as a prop, because the prop could be used as an event handler or effect.
+    // But if the function returns JSX we can assume it's a render helper, ie
+    // called during render, and thus it's unsafe to mutate globals or call
+    // other impure code.
+    global.property = true;
+    return <Item item={item} value={rand} />;
+  };
+  return <ItemList renderItem={renderItem} />;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-unconditional-set-state-in-render.expect.md

@@ -29,7 +29,7 @@ error.invalid-unconditional-set-state-in-render.ts:6:2
   4 |   const aliased = setX;
   5 |
 > 6 |   setX(1);
-    |   ^^^^ Found setState() within useMemo()
+    |   ^^^^ Found setState() in render
   7 |   aliased(2);
   8 |
   9 |   return x;
@@ -42,7 +42,7 @@ error.invalid-unconditional-set-state-in-render.ts:7:2
    5 |
    6 |   setX(1);
 >  7 |   aliased(2);
-     |   ^^^^^^^ Found setState() within useMemo()
+     |   ^^^^^^^ Found setState() in render
    8 |
    9 |   return x;
   10 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nested-component-in-normal-function.expect.md

@@ -0,0 +1,54 @@
+
+## Input
+
+```javascript
+// @validateNoDynamicallyCreatedComponentsOrHooks
+export function getInput(a) {
+  const Wrapper = () => {
+    const handleChange = () => {
+      a.onChange();
+    };
+
+    return <input onChange={handleChange} />;
+  };
+
+  return Wrapper;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: getInput,
+  isComponent: false,
+  params: [{onChange() {}}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Components and hooks cannot be created dynamically
+
+The function `Wrapper` appears to be a React component, but it's defined inside `getInput`. Components and Hooks should always be declared at module scope
+
+error.nested-component-in-normal-function.ts:2:16
+  1 | // @validateNoDynamicallyCreatedComponentsOrHooks
+> 2 | export function getInput(a) {
+    |                 ^^^^^^^^ this function dynamically created a component/hook
+  3 |   const Wrapper = () => {
+  4 |     const handleChange = () => {
+  5 |       a.onChange();
+
+error.nested-component-in-normal-function.ts:3:8
+  1 | // @validateNoDynamicallyCreatedComponentsOrHooks
+  2 | export function getInput(a) {
+> 3 |   const Wrapper = () => {
+    |         ^^^^^^^ the component is created here
+  4 |     const handleChange = () => {
+  5 |       a.onChange();
+  6 |     };
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nested-component-in-normal-function.js

@@ -0,0 +1,18 @@
+// @validateNoDynamicallyCreatedComponentsOrHooks
+export function getInput(a) {
+  const Wrapper = () => {
+    const handleChange = () => {
+      a.onChange();
+    };
+
+    return <input onChange={handleChange} />;
+  };
+
+  return Wrapper;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: getInput,
+  isComponent: false,
+  params: [{onChange() {}}],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nested-hook-in-normal-function.expect.md

@@ -0,0 +1,59 @@
+
+## Input
+
+```javascript
+// @validateNoDynamicallyCreatedComponentsOrHooks
+import {useState} from 'react';
+
+function createCustomHook(config) {
+  function useConfiguredState() {
+    const [state, setState] = useState(0);
+
+    const increment = () => {
+      setState(state + config.step);
+    };
+
+    return [state, increment];
+  }
+
+  return useConfiguredState;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createCustomHook,
+  isComponent: false,
+  params: [{step: 1}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Error: Components and hooks cannot be created dynamically
+
+The function `useConfiguredState` appears to be a React hook, but it's defined inside `createCustomHook`. Components and Hooks should always be declared at module scope
+
+error.nested-hook-in-normal-function.ts:4:9
+  2 | import {useState} from 'react';
+  3 |
+> 4 | function createCustomHook(config) {
+    |          ^^^^^^^^^^^^^^^^ this function dynamically created a component/hook
+  5 |   function useConfiguredState() {
+  6 |     const [state, setState] = useState(0);
+  7 |
+
+error.nested-hook-in-normal-function.ts:5:11
+  3 |
+  4 | function createCustomHook(config) {
+> 5 |   function useConfiguredState() {
+    |            ^^^^^^^^^^^^^^^^^^ the component is created here
+  6 |     const [state, setState] = useState(0);
+  7 |
+  8 |     const increment = () => {
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.nested-hook-in-normal-function.js

@@ -0,0 +1,22 @@
+// @validateNoDynamicallyCreatedComponentsOrHooks
+import {useState} from 'react';
+
+function createCustomHook(config) {
+  function useConfiguredState() {
+    const [state, setState] = useState(0);
+
+    const increment = () => {
+      setState(state + config.step);
+    };
+
+    return [state, increment];
+  }
+
+  return useConfiguredState;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: createCustomHook,
+  isComponent: false,
+  params: [{step: 1}],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-after-loop-break.expect.md

@@ -32,7 +32,7 @@ error.unconditional-set-state-in-render-after-loop-break.ts:11:2
    9 |     }
   10 |   }
 > 11 |   setState(true);
-     |   ^^^^^^^^ Found setState() within useMemo()
+     |   ^^^^^^^^ Found setState() in render
   12 |   return state;
   13 | }
   14 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-after-loop.expect.md

@@ -27,7 +27,7 @@ error.unconditional-set-state-in-render-after-loop.ts:6:2
   4 |   for (const _ of props) {
   5 |   }
 > 6 |   setState(true);
-    |   ^^^^^^^^ Found setState() within useMemo()
+    |   ^^^^^^^^ Found setState() in render
   7 |   return state;
   8 | }
   9 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-in-render-with-loop-throw.expect.md

@@ -32,7 +32,7 @@ error.unconditional-set-state-in-render-with-loop-throw.ts:11:2
    9 |     }
   10 |   }
 > 11 |   setState(true);
-     |   ^^^^^^^^ Found setState() within useMemo()
+     |   ^^^^^^^^ Found setState() in render
   12 |   return state;
   13 | }
   14 |

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-lambda.expect.md

@@ -30,7 +30,7 @@ error.unconditional-set-state-lambda.ts:8:2
    6 |     setX(1);
    7 |   };
 >  8 |   foo();
-     |   ^^^ Found setState() within useMemo()
+     |   ^^^ Found setState() in render
    9 |
   10 |   return [x];
   11 | }

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.unconditional-set-state-nested-function-expressions.expect.md

@@ -38,7 +38,7 @@ error.unconditional-set-state-nested-function-expressions.ts:16:2
   14 |     bar();
   15 |   };
 > 16 |   baz();
-     |   ^^^ Found setState() within useMemo()
+     |   ^^^ Found setState() in render
   17 |
   18 |   return [x];
   19 | }

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

@@ -58,7 +58,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":206},"end":{"line":16,"column":1,"index":433},"filename":"dynamic-gating-bailout-nopanic.ts"},"detail":{"options":{"severity":"CannotPreserveMemoization","category":"Compilation skipped because existing memoization could not be preserved","description":"React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `value`, but the source dependencies were []. Inferred dependency not present in source.","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":9,"column":31,"index":288},"end":{"line":9,"column":52,"index":309},"filename":"dynamic-gating-bailout-nopanic.ts"},"message":"Could not preserve existing manual memoization"}]}}}
+{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":206},"end":{"line":16,"column":1,"index":433},"filename":"dynamic-gating-bailout-nopanic.ts"},"detail":{"options":{"category":"PreserveManualMemo","severity":"CannotPreserveMemoization","reason":"Compilation skipped because existing memoization could not be preserved","description":"React Compiler has skipped optimizing this component because the existing manual memoization could not be preserved. The inferred dependencies did not match the manually specified dependencies, which could cause the value to change more or less frequently than expected. The inferred dependency was `value`, but the source dependencies were []. Inferred dependency not present in source.","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":9,"column":31,"index":288},"end":{"line":9,"column":52,"index":309},"filename":"dynamic-gating-bailout-nopanic.ts"},"message":"Could not preserve existing manual memoization"}]}}}
 ```
       
 ### Eval output

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

@@ -38,7 +38,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileError","fnLoc":{"start":{"line":3,"column":0,"index":86},"end":{"line":7,"column":1,"index":190},"filename":"dynamic-gating-invalid-multiple.ts"},"detail":{"options":{"reason":"Multiple dynamic gating directives found","description":"Expected a single directive but found [use memo if(getTrue), use memo if(getFalse)]","severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":4,"column":2,"index":105},"end":{"line":4,"column":25,"index":128},"filename":"dynamic-gating-invalid-multiple.ts"}}}}
+{"kind":"CompileError","fnLoc":{"start":{"line":3,"column":0,"index":86},"end":{"line":7,"column":1,"index":190},"filename":"dynamic-gating-invalid-multiple.ts"},"detail":{"options":{"category":"Gating","reason":"Multiple dynamic gating directives found","description":"Expected a single directive but found [use memo if(getTrue), use memo if(getFalse)]","severity":"InvalidReact","suggestions":null,"loc":{"start":{"line":4,"column":2,"index":105},"end":{"line":4,"column":25,"index":128},"filename":"dynamic-gating-invalid-multiple.ts"}}}}
 ```
       
 ### Eval output

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-optional-chain.expect.md

@@ -48,7 +48,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":149},"end":{"line":12,"column":1,"index":404},"filename":"mutate-after-useeffect-optional-chain.ts"},"detail":{"options":{"severity":"InvalidReact","category":"This value cannot be modified","description":"Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect().","details":[{"kind":"error","loc":{"start":{"line":10,"column":2,"index":365},"end":{"line":10,"column":5,"index":368},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}
+{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":149},"end":{"line":12,"column":1,"index":404},"filename":"mutate-after-useeffect-optional-chain.ts"},"detail":{"options":{"category":"Immutability","severity":"InvalidReact","reason":"This value cannot be modified","description":"Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect().","details":[{"kind":"error","loc":{"start":{"line":10,"column":2,"index":365},"end":{"line":10,"column":5,"index":368},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}
 {"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":9,"column":2,"index":314},"end":{"line":9,"column":49,"index":361},"filename":"mutate-after-useeffect-optional-chain.ts"},"decorations":[{"start":{"line":9,"column":24,"index":336},"end":{"line":9,"column":27,"index":339},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"}]}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":149},"end":{"line":12,"column":1,"index":404},"filename":"mutate-after-useeffect-optional-chain.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect-ref-access.expect.md

@@ -47,7 +47,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":158},"end":{"line":11,"column":1,"index":331},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"options":{"severity":"InvalidReact","category":"Cannot access refs during render","description":"React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":289},"end":{"line":9,"column":16,"index":303},"filename":"mutate-after-useeffect-ref-access.ts"},"message":"Cannot update ref during render"}]}}}
+{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":158},"end":{"line":11,"column":1,"index":331},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"options":{"category":"Refs","severity":"InvalidReact","reason":"Cannot access refs during render","description":"React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":289},"end":{"line":9,"column":16,"index":303},"filename":"mutate-after-useeffect-ref-access.ts"},"message":"Cannot update ref during render"}]}}}
 {"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":237},"end":{"line":8,"column":50,"index":285},"filename":"mutate-after-useeffect-ref-access.ts"},"decorations":[{"start":{"line":8,"column":24,"index":259},"end":{"line":8,"column":30,"index":265},"filename":"mutate-after-useeffect-ref-access.ts","identifierName":"arrRef"}]}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":158},"end":{"line":11,"column":1,"index":331},"filename":"mutate-after-useeffect-ref-access.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/infer-effect-dependencies/bailout-retry/mutate-after-useeffect.expect.md

@@ -47,7 +47,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":111},"end":{"line":11,"column":1,"index":242},"filename":"mutate-after-useeffect.ts"},"detail":{"options":{"severity":"InvalidReact","category":"This value cannot be modified","description":"Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect().","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":214},"end":{"line":9,"column":5,"index":217},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}
+{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":111},"end":{"line":11,"column":1,"index":242},"filename":"mutate-after-useeffect.ts"},"detail":{"options":{"category":"Immutability","severity":"InvalidReact","reason":"This value cannot be modified","description":"Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect().","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":214},"end":{"line":9,"column":5,"index":217},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}
 {"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":6,"column":2,"index":159},"end":{"line":8,"column":14,"index":210},"filename":"mutate-after-useeffect.ts"},"decorations":[{"start":{"line":7,"column":4,"index":181},"end":{"line":7,"column":7,"index":184},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":4,"index":181},"end":{"line":7,"column":7,"index":184},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":13,"index":190},"end":{"line":7,"column":16,"index":193},"filename":"mutate-after-useeffect.ts","identifierName":"foo"}]}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":111},"end":{"line":11,"column":1,"index":242},"filename":"mutate-after-useeffect.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```

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

@@ -54,7 +54,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## 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":{"severity":"InvalidReact","category":"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":"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","severity":"InvalidReact","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}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-catch-in-outer-try-with-catch.expect.md

@@ -65,7 +65,7 @@ function Component(props) {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Avoid constructing JSX within try/catch","description":"React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)","details":[{"kind":"error","loc":{"start":{"line":11,"column":11,"index":222},"end":{"line":11,"column":32,"index":243},"filename":"invalid-jsx-in-catch-in-outer-try-with-catch.ts"},"message":"Avoid constructing JSX within try/catch"}]}},"fnLoc":null}
+{"kind":"CompileError","detail":{"options":{"category":"ErrorBoundaries","severity":"InvalidReact","reason":"Avoid constructing JSX within try/catch","description":"React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)","details":[{"kind":"error","loc":{"start":{"line":11,"column":11,"index":222},"end":{"line":11,"column":32,"index":243},"filename":"invalid-jsx-in-catch-in-outer-try-with-catch.ts"},"message":"Avoid constructing JSX within try/catch"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":91},"end":{"line":17,"column":1,"index":298},"filename":"invalid-jsx-in-catch-in-outer-try-with-catch.ts"},"fnName":"Component","memoSlots":4,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-jsx-in-try-with-catch.expect.md

@@ -42,7 +42,7 @@ function Component(props) {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Avoid constructing JSX within try/catch","description":"React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)","details":[{"kind":"error","loc":{"start":{"line":5,"column":9,"index":104},"end":{"line":5,"column":16,"index":111},"filename":"invalid-jsx-in-try-with-catch.ts"},"message":"Avoid constructing JSX within try/catch"}]}},"fnLoc":null}
+{"kind":"CompileError","detail":{"options":{"category":"ErrorBoundaries","severity":"InvalidReact","reason":"Avoid constructing JSX within try/catch","description":"React does not immediately render components when JSX is rendered, so any errors from this component will not be caught by the try/catch. To catch errors in rendering a given component, wrap that component in an error boundary. (https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)","details":[{"kind":"error","loc":{"start":{"line":5,"column":9,"index":104},"end":{"line":5,"column":16,"index":111},"filename":"invalid-jsx-in-try-with-catch.ts"},"message":"Avoid constructing JSX within try/catch"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":49},"end":{"line":10,"column":1,"index":160},"filename":"invalid-jsx-in-try-with-catch.ts"},"fnName":"Component","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/invalid-setState-in-useEffect-transitive.expect.md

@@ -65,7 +65,7 @@ function _temp(s) {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"category":"Calling setState synchronously within an effect can trigger cascading renders","description":"Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect)","severity":"InvalidReact","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":13,"column":4,"index":265},"end":{"line":13,"column":5,"index":266},"filename":"invalid-setState-in-useEffect-transitive.ts","identifierName":"g"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null}
+{"kind":"CompileError","detail":{"options":{"category":"EffectSetState","reason":"Calling setState synchronously within an effect can trigger cascading renders","description":"Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect)","severity":"InvalidReact","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":13,"column":4,"index":265},"end":{"line":13,"column":5,"index":266},"filename":"invalid-setState-in-useEffect-transitive.ts","identifierName":"g"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":92},"end":{"line":16,"column":1,"index":293},"filename":"invalid-setState-in-useEffect-transitive.ts"},"fnName":"Component","memoSlots":2,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       

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

@@ -45,7 +45,7 @@ function _temp(s) {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"category":"Calling setState synchronously within an effect can trigger cascading renders","description":"Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect)","severity":"InvalidReact","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":7,"column":4,"index":180},"end":{"line":7,"column":12,"index":188},"filename":"invalid-setState-in-useEffect.ts","identifierName":"setState"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null}
+{"kind":"CompileError","detail":{"options":{"category":"EffectSetState","reason":"Calling setState synchronously within an effect can trigger cascading renders","description":"Effects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:\n* Update external systems with the latest state from React.\n* Subscribe for updates from some external system, calling setState in a callback function when external state changes.\n\nCalling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect)","severity":"InvalidReact","suggestions":null,"details":[{"kind":"error","loc":{"start":{"line":7,"column":4,"index":180},"end":{"line":7,"column":12,"index":188},"filename":"invalid-setState-in-useEffect.ts","identifierName":"setState"},"message":"Avoid calling setState() directly within an effect"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":92},"end":{"line":10,"column":1,"index":225},"filename":"invalid-setState-in-useEffect.ts"},"fnName":"Component","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-optional-chain.expect.md

@@ -48,7 +48,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":181},"end":{"line":12,"column":1,"index":436},"filename":"mutate-after-useeffect-optional-chain.ts"},"detail":{"options":{"severity":"InvalidReact","category":"This value cannot be modified","description":"Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect().","details":[{"kind":"error","loc":{"start":{"line":10,"column":2,"index":397},"end":{"line":10,"column":5,"index":400},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}
+{"kind":"CompileError","fnLoc":{"start":{"line":5,"column":0,"index":181},"end":{"line":12,"column":1,"index":436},"filename":"mutate-after-useeffect-optional-chain.ts"},"detail":{"options":{"category":"Immutability","severity":"InvalidReact","reason":"This value cannot be modified","description":"Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect().","details":[{"kind":"error","loc":{"start":{"line":10,"column":2,"index":397},"end":{"line":10,"column":5,"index":400},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}
 {"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":9,"column":2,"index":346},"end":{"line":9,"column":49,"index":393},"filename":"mutate-after-useeffect-optional-chain.ts"},"decorations":[{"start":{"line":9,"column":24,"index":368},"end":{"line":9,"column":27,"index":371},"filename":"mutate-after-useeffect-optional-chain.ts","identifierName":"arr"}]}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":5,"column":0,"index":181},"end":{"line":12,"column":1,"index":436},"filename":"mutate-after-useeffect-optional-chain.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect-ref-access.expect.md

@@ -47,7 +47,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":190},"end":{"line":11,"column":1,"index":363},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"options":{"severity":"InvalidReact","category":"Cannot access refs during render","description":"React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":321},"end":{"line":9,"column":16,"index":335},"filename":"mutate-after-useeffect-ref-access.ts"},"message":"Cannot update ref during render"}]}}}
+{"kind":"CompileError","fnLoc":{"start":{"line":6,"column":0,"index":190},"end":{"line":11,"column":1,"index":363},"filename":"mutate-after-useeffect-ref-access.ts"},"detail":{"options":{"category":"Refs","severity":"InvalidReact","reason":"Cannot access refs during render","description":"React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef)","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":321},"end":{"line":9,"column":16,"index":335},"filename":"mutate-after-useeffect-ref-access.ts"},"message":"Cannot update ref during render"}]}}}
 {"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":8,"column":2,"index":269},"end":{"line":8,"column":50,"index":317},"filename":"mutate-after-useeffect-ref-access.ts"},"decorations":[{"start":{"line":8,"column":24,"index":291},"end":{"line":8,"column":30,"index":297},"filename":"mutate-after-useeffect-ref-access.ts","identifierName":"arrRef"}]}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":6,"column":0,"index":190},"end":{"line":11,"column":1,"index":363},"filename":"mutate-after-useeffect-ref-access.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/mutate-after-useeffect.expect.md

@@ -47,7 +47,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## Logs
 
 ```
-{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":143},"end":{"line":11,"column":1,"index":274},"filename":"mutate-after-useeffect.ts"},"detail":{"options":{"severity":"InvalidReact","category":"This value cannot be modified","description":"Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect().","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":246},"end":{"line":9,"column":5,"index":249},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}
+{"kind":"CompileError","fnLoc":{"start":{"line":4,"column":0,"index":143},"end":{"line":11,"column":1,"index":274},"filename":"mutate-after-useeffect.ts"},"detail":{"options":{"category":"Immutability","severity":"InvalidReact","reason":"This value cannot be modified","description":"Modifying a value used previously in an effect function or as an effect dependency is not allowed. Consider moving the modification before calling useEffect().","details":[{"kind":"error","loc":{"start":{"line":9,"column":2,"index":246},"end":{"line":9,"column":5,"index":249},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},"message":"value cannot be modified"}]}}}
 {"kind":"AutoDepsDecorations","fnLoc":{"start":{"line":6,"column":2,"index":191},"end":{"line":8,"column":14,"index":242},"filename":"mutate-after-useeffect.ts"},"decorations":[{"start":{"line":7,"column":4,"index":213},"end":{"line":7,"column":7,"index":216},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":4,"index":213},"end":{"line":7,"column":7,"index":216},"filename":"mutate-after-useeffect.ts","identifierName":"arr"},{"start":{"line":7,"column":13,"index":222},"end":{"line":7,"column":16,"index":225},"filename":"mutate-after-useeffect.ts","identifierName":"foo"}]}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":4,"column":0,"index":143},"end":{"line":11,"column":1,"index":274},"filename":"mutate-after-useeffect.ts"},"fnName":"Component","memoSlots":0,"memoBlocks":0,"memoValues":0,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```

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

@@ -54,7 +54,7 @@ export const FIXTURE_ENTRYPOINT = {
 ## 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":{"severity":"InvalidReact","category":"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":"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","severity":"InvalidReact","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}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/repro-returned-inner-fn-reassigns-context.expect.md

@@ -55,7 +55,7 @@ import { makeArray, Stringify, useIdentity } from "shared-runtime";
  */
 function Foo(t0) {
   "use memo";
-  const $ = _c(3);
+  const $ = _c(5);
   const { b } = t0;
 
   const fnFactory = () => () => {
@@ -66,18 +66,26 @@ function Foo(t0) {
   useIdentity();
 
   const fn = fnFactory();
-  const arr = makeArray(b);
-  fn(arr);
   let t1;
-  if ($[0] !== arr || $[1] !== myVar) {
-    t1 = <Stringify cb={myVar} value={arr} shouldInvokeFns={true} />;
-    $[0] = arr;
-    $[1] = myVar;
-    $[2] = t1;
+  if ($[0] !== b) {
+    t1 = makeArray(b);
+    $[0] = b;
+    $[1] = t1;
   } else {
-    t1 = $[2];
+    t1 = $[1];
   }
-  return t1;
+  const arr = t1;
+  fn(arr);
+  let t2;
+  if ($[2] !== arr || $[3] !== myVar) {
+    t2 = <Stringify cb={myVar} value={arr} shouldInvokeFns={true} />;
+    $[2] = arr;
+    $[3] = myVar;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  return t2;
 }
 function _temp2() {
   return console.log("b");

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-conditionally-assigned-dynamically-constructed-component-in-render.expect.md

@@ -50,7 +50,7 @@ function Example(props) {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. ","details":[{"kind":"error","loc":{"start":{"line":9,"column":10,"index":202},"end":{"line":9,"column":19,"index":211},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":5,"column":16,"index":124},"end":{"line":5,"column":33,"index":141},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
+{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","severity":"InvalidReact","reason":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. ","details":[{"kind":"error","loc":{"start":{"line":9,"column":10,"index":202},"end":{"line":9,"column":19,"index":211},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":5,"column":16,"index":124},"end":{"line":5,"column":33,"index":141},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":45},"end":{"line":10,"column":1,"index":217},"filename":"invalid-conditionally-assigned-dynamically-constructed-component-in-render.ts"},"fnName":"Example","memoSlots":3,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-construct-component-in-render.expect.md

@@ -32,7 +32,7 @@ function Example(props) {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. ","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":120},"end":{"line":4,"column":19,"index":129},"filename":"invalid-dynamically-construct-component-in-render.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":91},"end":{"line":3,"column":37,"index":108},"filename":"invalid-dynamically-construct-component-in-render.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
+{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","severity":"InvalidReact","reason":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. ","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":120},"end":{"line":4,"column":19,"index":129},"filename":"invalid-dynamically-construct-component-in-render.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":91},"end":{"line":3,"column":37,"index":108},"filename":"invalid-dynamically-construct-component-in-render.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":45},"end":{"line":5,"column":1,"index":135},"filename":"invalid-dynamically-construct-component-in-render.ts"},"fnName":"Example","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-function.expect.md

@@ -37,7 +37,7 @@ function Example(props) {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. ","details":[{"kind":"error","loc":{"start":{"line":6,"column":10,"index":130},"end":{"line":6,"column":19,"index":139},"filename":"invalid-dynamically-constructed-component-function.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":2,"index":73},"end":{"line":5,"column":3,"index":119},"filename":"invalid-dynamically-constructed-component-function.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
+{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","severity":"InvalidReact","reason":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. ","details":[{"kind":"error","loc":{"start":{"line":6,"column":10,"index":130},"end":{"line":6,"column":19,"index":139},"filename":"invalid-dynamically-constructed-component-function.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":2,"index":73},"end":{"line":5,"column":3,"index":119},"filename":"invalid-dynamically-constructed-component-function.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":45},"end":{"line":7,"column":1,"index":145},"filename":"invalid-dynamically-constructed-component-function.ts"},"fnName":"Example","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-method-call.expect.md

@@ -41,7 +41,7 @@ function Example(props) {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. ","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":118},"end":{"line":4,"column":19,"index":127},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":91},"end":{"line":3,"column":35,"index":106},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
+{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","severity":"InvalidReact","reason":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. ","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":118},"end":{"line":4,"column":19,"index":127},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":91},"end":{"line":3,"column":35,"index":106},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":45},"end":{"line":5,"column":1,"index":133},"filename":"invalid-dynamically-constructed-component-method-call.ts"},"fnName":"Example","memoSlots":4,"memoBlocks":2,"memoValues":2,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/static-components/invalid-dynamically-constructed-component-new.expect.md

@@ -32,7 +32,7 @@ function Example(props) {
 ## Logs
 
 ```
-{"kind":"CompileError","detail":{"options":{"severity":"InvalidReact","category":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. ","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":125},"end":{"line":4,"column":19,"index":134},"filename":"invalid-dynamically-constructed-component-new.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":91},"end":{"line":3,"column":42,"index":113},"filename":"invalid-dynamically-constructed-component-new.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
+{"kind":"CompileError","detail":{"options":{"category":"StaticComponents","severity":"InvalidReact","reason":"Cannot create components during render","description":"Components created during render will reset their state each time they are created. Declare components outside of render. ","details":[{"kind":"error","loc":{"start":{"line":4,"column":10,"index":125},"end":{"line":4,"column":19,"index":134},"filename":"invalid-dynamically-constructed-component-new.ts"},"message":"This component is created during render"},{"kind":"error","loc":{"start":{"line":3,"column":20,"index":91},"end":{"line":3,"column":42,"index":113},"filename":"invalid-dynamically-constructed-component-new.ts"},"message":"The component is created during render here"}]}},"fnLoc":null}
 {"kind":"CompileSuccess","fnLoc":{"start":{"line":2,"column":0,"index":45},"end":{"line":5,"column":1,"index":140},"filename":"invalid-dynamically-constructed-component-new.ts"},"fnName":"Example","memoSlots":1,"memoBlocks":1,"memoValues":1,"prunedMemoBlocks":0,"prunedMemoValues":0}
 ```
       

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

@@ -12,9 +12,11 @@ export {
   CompilerDiagnostic,
   CompilerSuggestionOperation,
   ErrorSeverity,
+  LintRules,
   type CompilerErrorDetailOptions,
   type CompilerDiagnosticOptions,
   type CompilerDiagnosticDetail,
+  type LintRule,
 } from './CompilerError';
 export {
   compileFn as compile,
@@ -46,7 +48,10 @@ export {
   printReactiveFunction,
   printReactiveFunctionWithOutlined,
 } from './ReactiveScopes';
-export {parseConfigPragmaForTests} from './Utils/TestUtils';
+export {
+  parseConfigPragmaForTests,
+  parseConfigPragmaAsString,
+} from './Utils/TestUtils';
 declare global {
   let __DEV__: boolean | null | undefined;
 }

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

@@ -0,0 +1,39 @@
+/**
+ * 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 {
+  ErrorCategory,
+  getRuleForCategory,
+} from 'babel-plugin-react-compiler/src/CompilerError';
+import {normalizeIndent, testRule, makeTestCaseError} from './shared-utils';
+import {allRules} from '../src/rules/ReactCompilerRule';
+
+testRule(
+  'no impure function calls rule',
+  allRules[getRuleForCategory(ErrorCategory.Purity).name],
+  {
+    valid: [],
+    invalid: [
+      {
+        name: 'Known impure function calls are caught',
+        code: normalizeIndent`
+      function Component() {
+        const date = Date.now();
+        const now = performance.now();
+        const rand = Math.random();
+        return <Foo date={date} now={now} rand={rand} />;
+      }
+    `,
+        errors: [
+          makeTestCaseError('Cannot call impure function during render'),
+          makeTestCaseError('Cannot call impure function during render'),
+          makeTestCaseError('Cannot call impure function during render'),
+        ],
+      },
+    ],
+  },
+);

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

@@ -0,0 +1,100 @@
+/**
+ * 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 {
+  ErrorCategory,
+  getRuleForCategory,
+} from 'babel-plugin-react-compiler/src/CompilerError';
+import {normalizeIndent, makeTestCaseError, testRule} from './shared-utils';
+import {allRules} from '../src/rules/ReactCompilerRule';
+
+testRule(
+  'rules-of-hooks',
+  allRules[getRuleForCategory(ErrorCategory.Hooks).name],
+  {
+    valid: [
+      {
+        name: 'Basic example',
+        code: normalizeIndent`
+        function Component() {
+          useHook();
+          return <div>Hello world</div>;
+        }
+      `,
+      },
+      {
+        name: 'Violation with Flow suppression',
+        code: `
+      // Valid since error already suppressed with flow.
+      function useHook() {
+        if (cond) {
+          // $FlowFixMe[react-rule-hook]
+          useConditionalHook();
+        }
+      }
+    `,
+      },
+      {
+        // OK because invariants are only meant for the compiler team's consumption
+        name: '[Invariant] Defined after use',
+        code: normalizeIndent`
+        function Component(props) {
+          let y = function () {
+            m(x);
+          };
+
+          let x = { a };
+          m(x);
+          return y;
+        }
+      `,
+      },
+      {
+        name: "Classes don't throw",
+        code: normalizeIndent`
+        class Foo {
+          #bar() {}
+        }
+      `,
+      },
+    ],
+    invalid: [
+      {
+        name: 'Simple violation',
+        code: normalizeIndent`
+      function useConditional() {
+        if (cond) {
+          useConditionalHook();
+        }
+      }
+    `,
+        errors: [
+          makeTestCaseError(
+            'Hooks must always be called in a consistent order',
+          ),
+        ],
+      },
+      {
+        name: 'Multiple diagnostics within the same function are surfaced',
+        code: normalizeIndent`
+        function useConditional() {
+          cond ?? useConditionalHook();
+          props.cond && useConditionalHook();
+          return <div>Hello world</div>;
+        }`,
+        errors: [
+          makeTestCaseError(
+            'Hooks must always be called in a consistent order',
+          ),
+          makeTestCaseError(
+            'Hooks must always be called in a consistent order',
+          ),
+        ],
+      },
+    ],
+  },
+);

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

@@ -0,0 +1,38 @@
+/**
+ * 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 {
+  ErrorCategory,
+  getRuleForCategory,
+} from 'babel-plugin-react-compiler/src/CompilerError';
+import {normalizeIndent, testRule, makeTestCaseError} from './shared-utils';
+import {allRules} from '../src/rules/ReactCompilerRule';
+
+testRule(
+  'no ambiguous JSX rule',
+  allRules[getRuleForCategory(ErrorCategory.ErrorBoundaries).name],
+  {
+    valid: [],
+    invalid: [
+      {
+        name: 'JSX in try blocks are warned against',
+        code: normalizeIndent`
+      function Component(props) {
+        let el;
+        try {
+          el = <Child />;
+        } catch {
+          return null;
+        }
+        return el;
+      }
+    `,
+        errors: [makeTestCaseError('Avoid constructing JSX within try/catch')],
+      },
+    ],
+  },
+);

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

@@ -0,0 +1,71 @@
+/**
+ * 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 {
+  ErrorCategory,
+  getRuleForCategory,
+} from 'babel-plugin-react-compiler/src/CompilerError';
+import {normalizeIndent, makeTestCaseError, testRule} from './shared-utils';
+import {allRules} from '../src/rules/ReactCompilerRule';
+
+testRule(
+  'no-capitalized-calls',
+  allRules[getRuleForCategory(ErrorCategory.CapitalizedCalls).name],
+  {
+    valid: [],
+    invalid: [
+      {
+        name: 'Simple violation',
+        code: normalizeIndent`
+        import Child from './Child';
+        function Component() {
+          return <>
+            {Child()}
+          </>;
+        }
+      `,
+        errors: [
+          makeTestCaseError(
+            'Capitalized functions are reserved for components',
+          ),
+        ],
+      },
+      {
+        name: 'Method call violation',
+        code: normalizeIndent`
+        import myModule from './MyModule';
+        function Component() {
+          return <>
+            {myModule.Child()}
+          </>;
+        }
+      `,
+        errors: [
+          makeTestCaseError(
+            'Capitalized functions are reserved for components',
+          ),
+        ],
+      },
+      {
+        name: 'Multiple diagnostics within the same function are surfaced',
+        code: normalizeIndent`
+        import Child1 from './Child1';
+        import MyModule from './MyModule';
+        function Component() {
+          return <>
+            {Child1()}
+            {MyModule.Child2()}
+          </>;
+        }`,
+        errors: [
+          makeTestCaseError(
+            'Capitalized functions are reserved for components',
+          ),
+        ],
+      },
+    ],
+  },
+);

compiler/packages/eslint-plugin-react-compiler/__tests__/NoRefAccessInRender-tests.ts

@@ -0,0 +1,34 @@
+/**
+ * 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 {
+  ErrorCategory,
+  getRuleForCategory,
+} from 'babel-plugin-react-compiler/src/CompilerError';
+import {normalizeIndent, testRule, makeTestCaseError} from './shared-utils';
+import {allRules} from '../src/rules/ReactCompilerRule';
+
+testRule(
+  'no ref access in render rule',
+  allRules[getRuleForCategory(ErrorCategory.Refs).name],
+  {
+    valid: [],
+    invalid: [
+      {
+        name: 'validate against simple ref access in render',
+        code: normalizeIndent`
+      function Component(props) {
+        const ref = useRef(null);
+        const value = ref.current;
+        return value;
+      }
+    `,
+        errors: [makeTestCaseError('Cannot access refs during render')],
+      },
+    ],
+  },
+);

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

@@ -0,0 +1,58 @@
+/**
+ * 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 {NoUnusedDirectivesRule} from '../src/rules/ReactCompilerRule';
+import {normalizeIndent, testRule} from './shared-utils';
+
+testRule('no unused directives rule', NoUnusedDirectivesRule, {
+  valid: [],
+  invalid: [
+    {
+      name: "Unused 'use no forget' directive is reported when no errors are present on components",
+      code: normalizeIndent`
+        function Component() {
+          'use no forget';
+          return <div>Hello world</div>
+        }
+      `,
+      errors: [
+        {
+          message: "Unused 'use no forget' directive",
+          suggestions: [
+            {
+              output:
+                // yuck
+                '\nfunction Component() {\n  \n  return <div>Hello world</div>\n}\n',
+            },
+          ],
+        },
+      ],
+    },
+
+    {
+      name: "Unused 'use no forget' directive is reported when no errors are present on non-components or hooks",
+      code: normalizeIndent`
+        function notacomponent() {
+          'use no forget';
+          return 1 + 1;
+        }
+      `,
+      errors: [
+        {
+          message: "Unused 'use no forget' directive",
+          suggestions: [
+            {
+              output:
+                // yuck
+                '\nfunction notacomponent() {\n  \n  return 1 + 1;\n}\n',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+});

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

@@ -0,0 +1,158 @@
+/**
+ * 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 {
+  ErrorCategory,
+  getRuleForCategory,
+} from 'babel-plugin-react-compiler/src/CompilerError';
+import {
+  normalizeIndent,
+  testRule,
+  makeTestCaseError,
+  TestRecommendedRules,
+} from './shared-utils';
+import {allRules} from '../src/rules/ReactCompilerRule';
+
+testRule('plugin-recommended', TestRecommendedRules, {
+  valid: [
+    {
+      name: 'Basic example with component syntax',
+      code: normalizeIndent`
+        export default component HelloWorld(
+          text: string = 'Hello!',
+          onClick: () => void,
+        ) {
+          return <div onClick={onClick}>{text}</div>;
+        }
+      `,
+    },
+
+    {
+      // OK because invariants are only meant for the compiler team's consumption
+      name: '[Invariant] Defined after use',
+      code: normalizeIndent`
+            function Component(props) {
+              let y = function () {
+                m(x);
+              };
+    
+              let x = { a };
+              m(x);
+              return y;
+            }
+          `,
+    },
+    {
+      name: "Classes don't throw",
+      code: normalizeIndent`
+            class Foo {
+              #bar() {}
+            }
+          `,
+    },
+  ],
+  invalid: [
+    {
+      // TODO: actually return multiple diagnostics in this case
+      name: 'Multiple diagnostic kinds from the same function are surfaced',
+      code: normalizeIndent`
+        import Child from './Child';
+        function Component() {
+          const result = cond ?? useConditionalHook();
+          return <>
+            {Child(result)}
+          </>;
+        }
+      `,
+      errors: [
+        makeTestCaseError('Hooks must always be called in a consistent order'),
+      ],
+    },
+    {
+      name: 'Multiple diagnostics within the same file are surfaced',
+      code: normalizeIndent`
+        function useConditional1() {
+          'use memo';
+          return cond ?? useConditionalHook();
+        }
+        function useConditional2(props) {
+          'use memo';
+          return props.cond && useConditionalHook();
+        }`,
+      errors: [
+        makeTestCaseError('Hooks must always be called in a consistent order'),
+        makeTestCaseError('Hooks must always be called in a consistent order'),
+      ],
+    },
+    {
+      name: "'use no forget' does not disable eslint rule",
+      code: normalizeIndent`
+        let count = 0;
+        function Component() {
+          'use no forget';
+          return cond ?? useConditionalHook();
+
+        }
+      `,
+      errors: [
+        makeTestCaseError('Hooks must always be called in a consistent order'),
+      ],
+    },
+    {
+      name: 'Multiple non-fatal useMemo diagnostics are surfaced',
+      code: normalizeIndent`
+      import {useMemo, useState} from 'react';
+      
+      function Component({item, cond}) {
+        const [prevItem, setPrevItem] = useState(item);
+        const [state, setState] = useState(0);
+        
+        useMemo(() => {
+          if (cond) {
+            setPrevItem(item);
+            setState(0);
+          }
+        }, [cond, item, init]);
+            
+        return <Child x={state} />;
+        }`,
+      errors: [makeTestCaseError('useMemo() callbacks must return a value')],
+    },
+    {
+      name: 'Pipeline errors are reported',
+      code: normalizeIndent`
+            import useMyEffect from 'useMyEffect';
+            import {AUTODEPS} from 'react';
+            function Component({a}) {
+              'use no memo';
+              useMyEffect(() => console.log(a.b), AUTODEPS);
+              return <div>Hello world</div>;
+            }
+          `,
+      options: [
+        {
+          environment: {
+            inferEffectDependencies: [
+              {
+                function: {
+                  source: 'useMyEffect',
+                  importSpecifierName: 'default',
+                },
+                autodepsIndex: 1,
+              },
+            ],
+          },
+        },
+      ],
+      errors: [
+        {
+          message: /Cannot infer dependencies of this effect/,
+        },
+      ],
+    },
+  ],
+});

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

@@ -1,287 +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 {ErrorSeverity} from 'babel-plugin-react-compiler/src';
-import {RuleTester as ESLintTester} from 'eslint';
-import ReactCompilerRule from '../src/rules/ReactCompilerRule';
-
-/**
- * A string template tag that removes padding from the left side of multi-line strings
- * @param {Array} strings array of code strings (only one expected)
- */
-function normalizeIndent(strings: TemplateStringsArray): string {
-  const codeLines = strings[0].split('\n');
-  const leftPadding = codeLines[1].match(/\s+/)![0];
-  return codeLines.map(line => line.slice(leftPadding.length)).join('\n');
-}
-
-type CompilerTestCases = {
-  valid: ESLintTester.ValidTestCase[];
-  invalid: ESLintTester.InvalidTestCase[];
-};
-
-const tests: CompilerTestCases = {
-  valid: [
-    {
-      name: 'Basic example',
-      code: normalizeIndent`
-        function foo(x, y) {
-          if (x) {
-            return foo(false, y);
-          }
-          return [y * 10];
-        }
-      `,
-    },
-    {
-      name: 'Violation with Flow suppression',
-      code: `
-      // Valid since error already suppressed with flow.
-      function useHookWithHook() {
-        if (cond) {
-          // $FlowFixMe[react-rule-hook]
-          useConditionalHook();
-        }
-      }
-    `,
-    },
-    {
-      name: 'Basic example with component syntax',
-      code: normalizeIndent`
-        export default component HelloWorld(
-          text: string = 'Hello!',
-          onClick: () => void,
-        ) {
-          return <div onClick={onClick}>{text}</div>;
-        }
-      `,
-    },
-    {
-      name: 'Unsupported syntax',
-      code: normalizeIndent`
-        function foo(x) {
-          var y = 1;
-          return y * x;
-        }
-      `,
-    },
-    {
-      // OK because invariants are only meant for the compiler team's consumption
-      name: '[Invariant] Defined after use',
-      code: normalizeIndent`
-        function Component(props) {
-          let y = function () {
-            m(x);
-          };
-
-          let x = { a };
-          m(x);
-          return y;
-        }
-      `,
-    },
-    {
-      name: "Classes don't throw",
-      code: normalizeIndent`
-        class Foo {
-          #bar() {}
-        }
-      `,
-    },
-  ],
-  invalid: [
-    {
-      name: 'Reportable levels can be configured',
-      options: [{reportableLevels: new Set([ErrorSeverity.Todo])}],
-      code: normalizeIndent`
-        function Foo(x) {
-          var y = 1;
-          return <div>{y * x}</div>;
-        }`,
-      errors: [
-        {
-          message: /Handle var kinds in VariableDeclaration/,
-        },
-      ],
-    },
-    {
-      name: '[InvalidReact] ESlint suppression',
-      // Indentation is intentionally weird so it doesn't add extra whitespace
-      code: normalizeIndent`
-  function Component(props) {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-    return <div>{props.foo}</div>;
-  }`,
-      errors: [
-        {
-          message: /React Compiler has skipped optimizing this component/,
-          suggestions: [
-            {
-              output: normalizeIndent`
-  function Component(props) {
-
-    return <div>{props.foo}</div>;
-  }`,
-            },
-          ],
-        },
-        {
-          message:
-            "Definition for rule 'react-hooks/rules-of-hooks' was not found.",
-        },
-      ],
-    },
-    {
-      name: 'Multiple diagnostics are surfaced',
-      options: [
-        {
-          reportableLevels: new Set([
-            ErrorSeverity.Todo,
-            ErrorSeverity.InvalidReact,
-          ]),
-        },
-      ],
-      code: normalizeIndent`
-        function Foo(x) {
-          var y = 1;
-          return <div>{y * x}</div>;
-        }
-        function Bar(props) {
-          props.a.b = 2;
-          return <div>{props.c}</div>
-        }`,
-      errors: [
-        {
-          message: /Handle var kinds in VariableDeclaration/,
-        },
-        {
-          message: /Modifying component props or hook arguments is not allowed/,
-        },
-      ],
-    },
-    {
-      name: 'Test experimental/unstable report all bailouts mode',
-      options: [
-        {
-          reportableLevels: new Set([ErrorSeverity.InvalidReact]),
-          __unstable_donotuse_reportAllBailouts: true,
-        },
-      ],
-      code: normalizeIndent`
-        function Foo(x) {
-          var y = 1;
-          return <div>{y * x}</div>;
-        }`,
-      errors: [
-        {
-          message: /Handle var kinds in VariableDeclaration/,
-        },
-      ],
-    },
-    {
-      name: "'use no forget' does not disable eslint rule",
-      code: normalizeIndent`
-        let count = 0;
-        function Component() {
-          'use no forget';
-          count = count + 1;
-          return <div>Hello world {count}</div>
-        }
-      `,
-      errors: [
-        {
-          message:
-            /Cannot reassign variables declared outside of the component\/hook/,
-        },
-      ],
-    },
-    {
-      name: "Unused 'use no forget' directive is reported when no errors are present on components",
-      code: normalizeIndent`
-        function Component() {
-          'use no forget';
-          return <div>Hello world</div>
-        }
-      `,
-      errors: [
-        {
-          message: "Unused 'use no forget' directive",
-          suggestions: [
-            {
-              output:
-                // yuck
-                '\nfunction Component() {\n  \n  return <div>Hello world</div>\n}\n',
-            },
-          ],
-        },
-      ],
-    },
-    {
-      name: "Unused 'use no forget' directive is reported when no errors are present on non-components or hooks",
-      code: normalizeIndent`
-        function notacomponent() {
-          'use no forget';
-          return 1 + 1;
-        }
-      `,
-      errors: [
-        {
-          message: "Unused 'use no forget' directive",
-          suggestions: [
-            {
-              output:
-                // yuck
-                '\nfunction notacomponent() {\n  \n  return 1 + 1;\n}\n',
-            },
-          ],
-        },
-      ],
-    },
-    {
-      name: 'Pipeline errors are reported',
-      code: normalizeIndent`
-        import useMyEffect from 'useMyEffect';
-        import {AUTODEPS} from 'react';
-        function Component({a}) {
-          'use no memo';
-          useMyEffect(() => console.log(a.b), AUTODEPS);
-          return <div>Hello world</div>;
-        }
-      `,
-      options: [
-        {
-          environment: {
-            inferEffectDependencies: [
-              {
-                function: {
-                  source: 'useMyEffect',
-                  importSpecifierName: 'default',
-                },
-                autodepsIndex: 1,
-              },
-            ],
-          },
-        },
-      ],
-      errors: [
-        {
-          message: /Cannot infer dependencies of this effect/,
-        },
-      ],
-    },
-  ],
-};
-
-const eslintTester = new ESLintTester({
-  parser: require.resolve('hermes-eslint'),
-  parserOptions: {
-    ecmaVersion: 2015,
-    sourceType: 'module',
-    enableExperimentalComponentSyntax: true,
-  },
-});
-eslintTester.run('react-compiler', ReactCompilerRule, tests);

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

@@ -6,22 +6,11 @@
  */
 
 import {RuleTester} from 'eslint';
-import ReactCompilerRule from '../src/rules/ReactCompilerRule';
-
-/**
- * A string template tag that removes padding from the left side of multi-line strings
- * @param {Array} strings array of code strings (only one expected)
- */
-function normalizeIndent(strings: TemplateStringsArray): string {
-  const codeLines = strings[0].split('\n');
-  const leftPadding = codeLines[1].match(/\s+/)[0];
-  return codeLines.map(line => line.slice(leftPadding.length)).join('\n');
-}
-
-type CompilerTestCases = {
-  valid: RuleTester.ValidTestCase[];
-  invalid: RuleTester.InvalidTestCase[];
-};
+import {
+  CompilerTestCases,
+  normalizeIndent,
+  TestRecommendedRules,
+} from './shared-utils';
 
 const tests: CompilerTestCases = {
   valid: [
@@ -70,6 +59,7 @@ const tests: CompilerTestCases = {
 };
 
 const eslintTester = new RuleTester({
+  // @ts-ignore[2353] - outdated types
   parser: require.resolve('@typescript-eslint/parser'),
 });
-eslintTester.run('react-compiler', ReactCompilerRule, tests);
+eslintTester.run('react-compiler', TestRecommendedRules, tests);

compiler/packages/eslint-plugin-react-compiler/__tests__/shared-utils.ts

@@ -0,0 +1,76 @@
+import {RuleTester as ESLintTester, Rule} from 'eslint';
+import {type ErrorCategory} from 'babel-plugin-react-compiler/src/CompilerError';
+import escape from 'regexp.escape';
+import {configs} from '../src/index';
+import {allRules} from '../src/rules/ReactCompilerRule';
+
+/**
+ * A string template tag that removes padding from the left side of multi-line strings
+ * @param {Array} strings array of code strings (only one expected)
+ */
+export function normalizeIndent(strings: TemplateStringsArray): string {
+  const codeLines = strings[0].split('\n');
+  const leftPadding = codeLines[1].match(/\s+/)![0];
+  return codeLines.map(line => line.slice(leftPadding.length)).join('\n');
+}
+
+export type CompilerTestCases = {
+  valid: ESLintTester.ValidTestCase[];
+  invalid: ESLintTester.InvalidTestCase[];
+};
+
+export function makeTestCaseError(reason: string): ESLintTester.TestCaseError {
+  return {
+    message: new RegExp(escape(reason)),
+  };
+}
+
+export function testRule(
+  name: string,
+  rule: Rule.RuleModule,
+  tests: {
+    valid: ESLintTester.ValidTestCase[];
+    invalid: ESLintTester.InvalidTestCase[];
+  },
+): void {
+  const eslintTester = new ESLintTester({
+    // @ts-ignore[2353] - outdated types
+    parser: require.resolve('hermes-eslint'),
+    parserOptions: {
+      ecmaVersion: 2015,
+      sourceType: 'module',
+      enableExperimentalComponentSyntax: true,
+    },
+  });
+
+  eslintTester.run(name, rule, tests);
+}
+
+/**
+ * Aggregates all recommended rules from the plugin.
+ */
+export const TestRecommendedRules: Rule.RuleModule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Disallow capitalized function calls',
+      category: 'Possible Errors',
+      recommended: true,
+    },
+    // validation is done at runtime with zod
+    schema: [{type: 'object', additionalProperties: true}],
+  },
+  create(context) {
+    for (const rule of Object.values(
+      configs.recommended.plugins['react-compiler'].rules,
+    )) {
+      const listener = rule.create(context);
+      if (Object.entries(listener).length !== 0) {
+        throw new Error('TODO: handle rules that return listeners to eslint');
+      }
+    }
+    return {};
+  },
+};
+
+test('no test', () => {});

compiler/packages/eslint-plugin-react-compiler/package.json

@@ -24,11 +24,13 @@
     "@babel/preset-typescript": "^7.18.6",
     "@babel/types": "^7.26.0",
     "@types/eslint": "^8.56.12",
+    "@types/jest": "^30.0.0",
     "@types/node": "^20.2.5",
     "babel-jest": "^29.0.3",
     "eslint": "8.57.0",
     "hermes-eslint": "^0.25.1",
-    "jest": "^29.5.0"
+    "jest": "^29.5.0",
+    "regexp.escape": "^2.0.1"
   },
   "engines": {
     "node": "^14.17.0 || ^16.0.0 || >= 18.0.0"

compiler/packages/eslint-plugin-react-compiler/src/index.ts

@@ -5,29 +5,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ReactCompilerRule from './rules/ReactCompilerRule';
+import {allRules, recommendedRules} from './rules/ReactCompilerRule';
 
 const meta = {
   name: 'eslint-plugin-react-compiler',
 };
 
-const rules = {
-  'react-compiler': ReactCompilerRule,
-};
-
 const configs = {
   recommended: {
     plugins: {
       'react-compiler': {
-        rules: {
-          'react-compiler': ReactCompilerRule,
-        },
+        rules: allRules,
       },
     },
-    rules: {
-      'react-compiler/react-compiler': 'error' as const,
-    },
+    rules: Object.fromEntries(
+      Object.keys(recommendedRules).map(ruleName => [
+        'react-compiler/' + ruleName,
+        'error',
+      ]),
+    ) as Record<string, 'error' | 'warn'>,
   },
 };
 
-export {configs, rules, meta};
+export {configs, allRules as rules, meta};

compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts

@@ -5,43 +5,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {transformFromAstSync} from '@babel/core';
-// @ts-expect-error: no types available
-import PluginProposalPrivateMethods from '@babel/plugin-proposal-private-methods';
 import type {SourceLocation as BabelSourceLocation} from '@babel/types';
-import BabelPluginReactCompiler, {
-  CompilerDiagnostic,
+import {
   CompilerDiagnosticOptions,
-  CompilerErrorDetail,
   CompilerErrorDetailOptions,
   CompilerSuggestionOperation,
-  ErrorSeverity,
-  parsePluginOptions,
-  validateEnvironmentConfig,
-  OPT_OUT_DIRECTIVES,
-  type PluginOptions,
 } from 'babel-plugin-react-compiler/src';
-import {Logger, LoggerEvent} from 'babel-plugin-react-compiler/src/Entrypoint';
 import type {Rule} from 'eslint';
-import {Statement} from 'estree';
-import * as HermesParser from 'hermes-parser';
+import runReactCompiler, {RunCacheEntry} from '../shared/RunReactCompiler';
+import {
+  LintRules,
+  type LintRule,
+} from 'babel-plugin-react-compiler/src/CompilerError';
 
 function assertExhaustive(_: never, errorMsg: string): never {
   throw new Error(errorMsg);
 }
 
-const DEFAULT_REPORTABLE_LEVELS = new Set([
-  ErrorSeverity.InvalidReact,
-  ErrorSeverity.InvalidJS,
-]);
-let reportableLevels = DEFAULT_REPORTABLE_LEVELS;
-
-function isReportableDiagnostic(
-  detail: CompilerErrorDetail | CompilerDiagnostic,
-): boolean {
-  return reportableLevels.has(detail.severity);
-}
-
 function makeSuggestions(
   detail: CompilerErrorDetailOptions | CompilerDiagnosticOptions,
 ): Array<Rule.SuggestionReportDescriptor> {
@@ -95,28 +75,95 @@ function makeSuggestions(
   return suggest;
 }
 
-const COMPILER_OPTIONS: Partial<PluginOptions> = {
-  noEmit: true,
-  panicThreshold: 'none',
-  // Don't emit errors on Flow suppressions--Flow already gave a signal
-  flowSuppressions: false,
-  environment: validateEnvironmentConfig({
-    validateRefAccessDuringRender: true,
-    validateNoSetStateInRender: true,
-    validateNoSetStateInEffects: true,
-    validateNoJSXInTryStatements: true,
-    validateNoImpureFunctionsInRender: true,
-    validateStaticComponents: true,
-    validateNoFreezingKnownMutableFunctions: true,
-    validateNoVoidUseMemo: true,
-  }),
-};
+function getReactCompilerResult(context: Rule.RuleContext): RunCacheEntry {
+  // Compat with older versions of eslint
+  const sourceCode = context.sourceCode ?? context.getSourceCode();
+  const filename = context.filename ?? context.getFilename();
+  const userOpts = context.options[0] ?? {};
 
-const rule: Rule.RuleModule = {
+  const results = runReactCompiler({
+    sourceCode,
+    filename,
+    userOpts,
+  });
+
+  return results;
+}
+
+function hasFlowSuppression(
+  program: RunCacheEntry,
+  nodeLoc: BabelSourceLocation,
+  suppressions: Array<string>,
+): boolean {
+  for (const commentNode of program.flowSuppressions) {
+    if (
+      suppressions.includes(commentNode.code) &&
+      commentNode.line === nodeLoc.start.line - 1
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function makeRule(rule: LintRule): Rule.RuleModule {
+  const create = (context: Rule.RuleContext): Rule.RuleListener => {
+    const result = getReactCompilerResult(context);
+
+    for (const event of result.events) {
+      if (event.kind === 'CompileError') {
+        const detail = event.detail;
+        if (detail.category === rule.category) {
+          const loc = detail.primaryLocation();
+          if (loc == null || typeof loc === 'symbol') {
+            continue;
+          }
+          if (
+            hasFlowSuppression(result, loc, [
+              'react-rule-hook',
+              'react-rule-unsafe-ref',
+            ])
+          ) {
+            // If Flow already caught this error, we don't need to report it again.
+            continue;
+          }
+          /*
+           * TODO: if multiple rules report the same linter category,
+           * we should deduplicate them with a "reported" set
+           */
+          context.report({
+            message: detail.printErrorMessage(result.sourceCode, {
+              eslint: true,
+            }),
+            loc,
+            suggest: makeSuggestions(detail.options),
+          });
+        }
+      }
+    }
+    return {};
+  };
+
+  return {
+    meta: {
+      type: 'problem',
+      docs: {
+        description: rule.description,
+        recommended: rule.recommended,
+      },
+      fixable: 'code',
+      hasSuggestions: true,
+      // validation is done at runtime with zod
+      schema: [{type: 'object', additionalProperties: true}],
+    },
+    create,
+  };
+}
+
+export const NoUnusedDirectivesRule: Rule.RuleModule = {
   meta: {
-    type: 'problem',
+    type: 'suggestion',
     docs: {
-      description: 'Surfaces diagnostics from React Forget',
       recommended: true,
     },
     fixable: 'code',
@@ -124,234 +171,47 @@ const rule: Rule.RuleModule = {
     // validation is done at runtime with zod
     schema: [{type: 'object', additionalProperties: true}],
   },
-  create(context: Rule.RuleContext) {
-    // Compat with older versions of eslint
-    const sourceCode = context.sourceCode ?? context.getSourceCode();
-    const filename = context.filename ?? context.getFilename();
-    const userOpts = context.options[0] ?? {};
-    if (
-      userOpts.reportableLevels != null &&
-      userOpts.reportableLevels instanceof Set
-    ) {
-      reportableLevels = userOpts.reportableLevels;
-    } else {
-      reportableLevels = DEFAULT_REPORTABLE_LEVELS;
-    }
-    /**
-     * Experimental setting to report all compilation bailouts on the compilation
-     * unit (e.g. function or hook) instead of the offensive line.
-     * Intended to be used when a codebase is 100% reliant on the compiler for
-     * memoization (i.e. deleted all manual memo) and needs compilation success
-     * signals for perf debugging.
-     */
-    let __unstable_donotuse_reportAllBailouts: boolean = false;
-    if (
-      userOpts.__unstable_donotuse_reportAllBailouts != null &&
-      typeof userOpts.__unstable_donotuse_reportAllBailouts === 'boolean'
-    ) {
-      __unstable_donotuse_reportAllBailouts =
-        userOpts.__unstable_donotuse_reportAllBailouts;
-    }
+  create(context: Rule.RuleContext): Rule.RuleListener {
+    const results = getReactCompilerResult(context);
 
-    let shouldReportUnusedOptOutDirective = true;
-    const options: PluginOptions = parsePluginOptions({
-      ...COMPILER_OPTIONS,
-      ...userOpts,
-      environment: {
-        ...COMPILER_OPTIONS.environment,
-        ...userOpts.environment,
-      },
-    });
-    const userLogger: Logger | null = options.logger;
-    options.logger = {
-      logEvent: (eventFilename, event): void => {
-        userLogger?.logEvent(eventFilename, event);
-        if (event.kind === 'CompileError') {
-          shouldReportUnusedOptOutDirective = false;
-          const detail = event.detail;
-          const suggest = makeSuggestions(detail.options);
-          if (__unstable_donotuse_reportAllBailouts && event.fnLoc != null) {
-            const loc = detail.primaryLocation();
-            const locStr =
-              loc != null && typeof loc !== 'symbol'
-                ? ` (@:${loc.start.line}:${loc.start.column})`
-                : '';
-            /**
-             * Report bailouts with a smaller span (just the first line).
-             * Compiler bailout lints only serve to flag that a react function
-             * has not been optimized by the compiler for codebases which depend
-             * on compiler memo heavily for perf. These lints are also often not
-             * actionable.
-             */
-            let endLoc;
-            if (event.fnLoc.end.line === event.fnLoc.start.line) {
-              endLoc = event.fnLoc.end;
-            } else {
-              endLoc = {
-                line: event.fnLoc.start.line,
-                // Babel loc line numbers are 1-indexed
-                column:
-                  sourceCode.text.split(/\r?\n|\r|\n/g)[
-                    event.fnLoc.start.line - 1
-                  ]?.length ?? 0,
-              };
-            }
-            const firstLineLoc = {
-              start: event.fnLoc.start,
-              end: endLoc,
-            };
-            context.report({
-              message: `${detail.printErrorMessage(sourceCode.text, {eslint: true})} ${locStr}`,
-              loc: firstLineLoc,
-              suggest,
-            });
-          }
-
-          const loc = detail.primaryLocation();
-          if (
-            !isReportableDiagnostic(detail) ||
-            loc == null ||
-            typeof loc === 'symbol'
-          ) {
-            return;
-          }
-          if (
-            hasFlowSuppression(loc, 'react-rule-hook') ||
-            hasFlowSuppression(loc, 'react-rule-unsafe-ref')
-          ) {
-            // If Flow already caught this error, we don't need to report it again.
-            return;
-          }
-          if (loc != null) {
-            context.report({
-              message: detail.printErrorMessage(sourceCode.text, {
-                eslint: true,
-              }),
-              loc,
-              suggest,
-            });
-          }
-        }
-      },
-    };
-
-    try {
-      options.environment = validateEnvironmentConfig(
-        options.environment ?? {},
-      );
-    } catch (err: unknown) {
-      options.logger?.logEvent('', err as LoggerEvent);
-    }
-
-    function hasFlowSuppression(
-      nodeLoc: BabelSourceLocation,
-      suppression: string,
-    ): boolean {
-      const comments = sourceCode.getAllComments();
-      const flowSuppressionRegex = new RegExp(
-        '\\$FlowFixMe\\[' + suppression + '\\]',
-      );
-      for (const commentNode of comments) {
-        if (
-          flowSuppressionRegex.test(commentNode.value) &&
-          commentNode.loc!.end.line === nodeLoc.start.line - 1
-        ) {
-          return true;
-        }
-      }
-      return false;
-    }
-
-    let babelAST;
-    if (filename.endsWith('.tsx') || filename.endsWith('.ts')) {
-      try {
-        const {parse: babelParse} = require('@babel/parser');
-        babelAST = babelParse(sourceCode.text, {
-          filename,
-          sourceType: 'unambiguous',
-          plugins: ['typescript', 'jsx'],
-        });
-      } catch {
-        /* empty */
-      }
-    } else {
-      try {
-        babelAST = HermesParser.parse(sourceCode.text, {
-          babel: true,
-          enableExperimentalComponentSyntax: true,
-          sourceFilename: filename,
-          sourceType: 'module',
-        });
-      } catch {
-        /* empty */
-      }
-    }
-
-    if (babelAST != null) {
-      try {
-        transformFromAstSync(babelAST, sourceCode.text, {
-          filename,
-          highlightCode: false,
-          retainLines: true,
-          plugins: [
-            [PluginProposalPrivateMethods, {loose: true}],
-            [BabelPluginReactCompiler, options],
-          ],
-          sourceType: 'module',
-          configFile: false,
-          babelrc: false,
-        });
-      } catch (err) {
-        /* errors handled by injected logger */
-      }
-    }
-
-    function reportUnusedOptOutDirective(stmt: Statement) {
-      if (
-        stmt.type === 'ExpressionStatement' &&
-        stmt.expression.type === 'Literal' &&
-        typeof stmt.expression.value === 'string' &&
-        OPT_OUT_DIRECTIVES.has(stmt.expression.value) &&
-        stmt.loc != null
-      ) {
-        context.report({
-          message: `Unused '${stmt.expression.value}' directive`,
-          loc: stmt.loc,
-          suggest: [
-            {
-              desc: 'Remove the directive',
-              fix(fixer) {
-                return fixer.remove(stmt);
-              },
+    for (const directive of results.unusedOptOutDirectives) {
+      context.report({
+        message: `Unused '${directive.directive}' directive`,
+        loc: directive.loc,
+        suggest: [
+          {
+            desc: 'Remove the directive',
+            fix(fixer): Rule.Fix {
+              return fixer.removeRange(directive.range);
             },
-          ],
-        });
-      }
-    }
-    if (shouldReportUnusedOptOutDirective) {
-      return {
-        FunctionDeclaration(fnDecl) {
-          for (const stmt of fnDecl.body.body) {
-            reportUnusedOptOutDirective(stmt);
-          }
-        },
-        ArrowFunctionExpression(fnExpr) {
-          if (fnExpr.body.type === 'BlockStatement') {
-            for (const stmt of fnExpr.body.body) {
-              reportUnusedOptOutDirective(stmt);
-            }
-          }
-        },
-        FunctionExpression(fnExpr) {
-          for (const stmt of fnExpr.body.body) {
-            reportUnusedOptOutDirective(stmt);
-          }
-        },
-      };
-    } else {
-      return {};
+          },
+        ],
+      });
     }
+    return {};
   },
 };
 
-export default rule;
+type RulesObject = {[name: string]: Rule.RuleModule};
+
+export const allRules: RulesObject = LintRules.reduce(
+  (acc, rule) => {
+    acc[rule.name] = makeRule(rule);
+    return acc;
+  },
+  {
+    'no-unused-directives': NoUnusedDirectivesRule,
+  } as RulesObject,
+);
+
+export const recommendedRules: RulesObject = LintRules.filter(
+  rule => rule.recommended,
+).reduce(
+  (acc, rule) => {
+    acc[rule.name] = makeRule(rule);
+    return acc;
+  },
+  {
+    'no-unused-directives': NoUnusedDirectivesRule,
+  } as RulesObject,
+);

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

@@ -0,0 +1,287 @@
+/**
+ * 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 {transformFromAstSync, traverse} from '@babel/core';
+import {parse as babelParse} from '@babel/parser';
+import {Directive, File} from '@babel/types';
+// @ts-expect-error: no types available
+import PluginProposalPrivateMethods from '@babel/plugin-proposal-private-methods';
+import BabelPluginReactCompiler, {
+  parsePluginOptions,
+  validateEnvironmentConfig,
+  OPT_OUT_DIRECTIVES,
+  type PluginOptions,
+} from 'babel-plugin-react-compiler/src';
+import {Logger, LoggerEvent} from 'babel-plugin-react-compiler/src/Entrypoint';
+import type {SourceCode} from 'eslint';
+import {SourceLocation} from 'estree';
+// @ts-expect-error: no types available
+import * as HermesParser from 'hermes-parser';
+import {isDeepStrictEqual} from 'util';
+import type {ParseResult} from '@babel/parser';
+
+const COMPILER_OPTIONS: Partial<PluginOptions> = {
+  noEmit: true,
+  panicThreshold: 'none',
+  // Don't emit errors on Flow suppressions--Flow already gave a signal
+  flowSuppressions: false,
+  environment: validateEnvironmentConfig({
+    validateRefAccessDuringRender: true,
+    validateNoSetStateInRender: true,
+    validateNoSetStateInEffects: true,
+    validateNoJSXInTryStatements: true,
+    validateNoImpureFunctionsInRender: true,
+    validateStaticComponents: true,
+    validateNoFreezingKnownMutableFunctions: true,
+    validateNoVoidUseMemo: true,
+    // TODO: remove, this should be in the type system
+    validateNoCapitalizedCalls: [],
+    validateHooksUsage: true,
+    validateNoDerivedComputationsInEffects: true,
+  }),
+};
+
+export type UnusedOptOutDirective = {
+  loc: SourceLocation;
+  range: [number, number];
+  directive: string;
+};
+export type RunCacheEntry = {
+  sourceCode: string;
+  filename: string;
+  userOpts: PluginOptions;
+  flowSuppressions: Array<{line: number; code: string}>;
+  unusedOptOutDirectives: Array<UnusedOptOutDirective>;
+  events: Array<LoggerEvent>;
+};
+
+type RunParams = {
+  sourceCode: SourceCode;
+  filename: string;
+  userOpts: PluginOptions;
+};
+const FLOW_SUPPRESSION_REGEX = /\$FlowFixMe\[([^\]]*)\]/g;
+
+function getFlowSuppressions(
+  sourceCode: SourceCode,
+): Array<{line: number; code: string}> {
+  const comments = sourceCode.getAllComments();
+  const results: Array<{line: number; code: string}> = [];
+
+  for (const commentNode of comments) {
+    const matches = commentNode.value.matchAll(FLOW_SUPPRESSION_REGEX);
+    for (const match of matches) {
+      if (match.index != null && commentNode.loc != null) {
+        const code = match[1];
+        results.push({
+          line: commentNode.loc!.end.line,
+          code,
+        });
+      }
+    }
+  }
+  return results;
+}
+
+function filterUnusedOptOutDirectives(
+  directives: ReadonlyArray<Directive>,
+): Array<UnusedOptOutDirective> {
+  const results: Array<UnusedOptOutDirective> = [];
+  for (const directive of directives) {
+    if (
+      OPT_OUT_DIRECTIVES.has(directive.value.value) &&
+      directive.loc != null
+    ) {
+      results.push({
+        loc: directive.loc,
+        directive: directive.value.value,
+        range: [directive.start!, directive.end!],
+      });
+    }
+  }
+  return results;
+}
+
+function runReactCompilerImpl({
+  sourceCode,
+  filename,
+  userOpts,
+}: RunParams): RunCacheEntry {
+  // Compat with older versions of eslint
+  const options: PluginOptions = parsePluginOptions({
+    ...COMPILER_OPTIONS,
+    ...userOpts,
+    environment: {
+      ...COMPILER_OPTIONS.environment,
+      ...userOpts.environment,
+    },
+  });
+  const results: RunCacheEntry = {
+    sourceCode: sourceCode.text,
+    filename,
+    userOpts,
+    flowSuppressions: [],
+    unusedOptOutDirectives: [],
+    events: [],
+  };
+  const userLogger: Logger | null = options.logger;
+  options.logger = {
+    logEvent: (eventFilename, event): void => {
+      userLogger?.logEvent(eventFilename, event);
+      results.events.push(event);
+    },
+  };
+
+  try {
+    options.environment = validateEnvironmentConfig(options.environment ?? {});
+  } catch (err: unknown) {
+    options.logger?.logEvent(filename, err as LoggerEvent);
+  }
+
+  let babelAST: ParseResult<File> | null = null;
+  if (filename.endsWith('.tsx') || filename.endsWith('.ts')) {
+    try {
+      babelAST = babelParse(sourceCode.text, {
+        sourceFilename: filename,
+        sourceType: 'unambiguous',
+        plugins: ['typescript', 'jsx'],
+      });
+    } catch {
+      /* empty */
+    }
+  } else {
+    try {
+      babelAST = HermesParser.parse(sourceCode.text, {
+        babel: true,
+        enableExperimentalComponentSyntax: true,
+        sourceFilename: filename,
+        sourceType: 'module',
+      });
+    } catch {
+      /* empty */
+    }
+  }
+
+  if (babelAST != null) {
+    results.flowSuppressions = getFlowSuppressions(sourceCode);
+    try {
+      transformFromAstSync(babelAST, sourceCode.text, {
+        filename,
+        highlightCode: false,
+        retainLines: true,
+        plugins: [
+          [PluginProposalPrivateMethods, {loose: true}],
+          [BabelPluginReactCompiler, options],
+        ],
+        sourceType: 'module',
+        configFile: false,
+        babelrc: false,
+      });
+
+      if (results.events.filter(e => e.kind === 'CompileError').length === 0) {
+        traverse(babelAST, {
+          FunctionDeclaration(path) {
+            path.node;
+            results.unusedOptOutDirectives.push(
+              ...filterUnusedOptOutDirectives(path.node.body.directives),
+            );
+          },
+          ArrowFunctionExpression(path) {
+            if (path.node.body.type === 'BlockStatement') {
+              results.unusedOptOutDirectives.push(
+                ...filterUnusedOptOutDirectives(path.node.body.directives),
+              );
+            }
+          },
+          FunctionExpression(path) {
+            results.unusedOptOutDirectives.push(
+              ...filterUnusedOptOutDirectives(path.node.body.directives),
+            );
+          },
+        });
+      }
+    } catch (err) {
+      /* errors handled by injected logger */
+    }
+  }
+
+  return results;
+}
+
+const SENTINEL = Symbol();
+
+// Array backed LRU cache -- should be small < 10 elements
+class LRUCache<K, T> {
+  // newest at headIdx, then headIdx + 1, ..., tailIdx
+  #values: Array<[K, T | Error] | [typeof SENTINEL, void]>;
+  #headIdx: number = 0;
+
+  constructor(size: number) {
+    this.#values = new Array(size).fill(SENTINEL);
+  }
+
+  // gets a value and sets it as "recently used"
+  get(key: K): T | null {
+    let idx = this.#values.findIndex(entry => entry[0] === key);
+    // If found, move to front
+    if (idx === this.#headIdx) {
+      return this.#values[this.#headIdx][1] as T;
+    } else if (idx < 0) {
+      return null;
+    }
+
+    const entry: [K, T] = this.#values[idx] as [K, T];
+
+    const len = this.#values.length;
+    for (let i = 0; i < Math.min(idx, len - 1); i++) {
+      this.#values[(this.#headIdx + i + 1) % len] =
+        this.#values[(this.#headIdx + i) % len];
+    }
+    this.#values[this.#headIdx] = entry;
+    return entry[1];
+  }
+  push(key: K, value: T): void {
+    this.#headIdx =
+      (this.#headIdx - 1 + this.#values.length) % this.#values.length;
+    this.#values[this.#headIdx] = [key, value];
+  }
+}
+const cache = new LRUCache<string, RunCacheEntry>(10);
+
+export default function runReactCompiler({
+  sourceCode,
+  filename,
+  userOpts,
+}: RunParams): RunCacheEntry {
+  const entry = cache.get(filename);
+  if (
+    entry != null &&
+    entry.sourceCode === sourceCode.text &&
+    isDeepStrictEqual(entry.userOpts, userOpts)
+  ) {
+    return entry;
+  } else if (entry != null) {
+    if (process.env['DEBUG']) {
+      console.log(
+        `Cache hit for ${filename}, but source code or options changed, recomputing`,
+      );
+    }
+  }
+
+  const runEntry = runReactCompilerImpl({
+    sourceCode,
+    filename,
+    userOpts,
+  });
+  // If we have a cache entry, we can update it
+  if (entry != null) {
+    Object.assign(entry, runEntry);
+  } else {
+    cache.push(filename, runEntry);
+  }
+  return {...runEntry};
+}