[compiler] Fix fbt for the ∞th time

We now do a single pass over the HIR, building up two data structures:
* One tracks values that are known macro tags or macro calls.
* One tracks operands of macro-related instructions so that we can later group them.

After building up these data structures, we do a pass over the latter structure. For each macro call instruction, we recursively traverse its operands to ensure they're in the same scope. Thus, something like `fbt('hello' + fbt.param(foo(), "..."))` will correctly merge the fbt call, the `+` binary expression, the `fbt.param()` call, and `foo()` into a single scope.

.github/ISSUE_TEMPLATE/compiler_bug_report.yml

@@ -11,7 +11,7 @@ body:
     options:
       - label: React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
       - label: babel-plugin-react-compiler (build issue installing or using the Babel plugin)
-      - label: eslint-plugin-react-hooks (build issue installing or using the eslint plugin)
+      - label: eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
       - label: react-compiler-healthcheck (build issue installing or using the healthcheck script)
 - type: input
   attributes:

.github/workflows/runtime_commit_artifacts.yml

@@ -162,13 +162,10 @@ jobs:
           mv build/facebook-react-native/react-is/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/react-is/
           mv build/facebook-react-native/react-test-renderer/cjs/ $BASE_FOLDER/RKJSModules/vendor/react/react-test-renderer/
 
-          # Delete the OSS renderers, these are sync'd to RN separately.
+          # Delete OSS renderer. OSS renderer is synced through internal script.
           RENDERER_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/implementations/
           rm $RENDERER_FOLDER/ReactFabric-{dev,prod,profiling}.js
-          
-          # Delete the legacy renderer shim, this is not sync'd and will get deleted in the future.
-          SHIM_FOLDER=$BASE_FOLDER/react-native-github/Libraries/Renderer/shims/
-          rm $SHIM_FOLDER/ReactNative.js
+          rm $RENDERER_FOLDER/ReactNativeRenderer-{dev,prod,profiling}.js
 
           # Copy eslint-plugin-react-hooks
           # NOTE: This is different from www, here we include the full package

CHANGELOG.md

@@ -9,7 +9,7 @@ Read the [React 19.2 release post](https://react.dev/blog/2025/10/01/react-19-2)
 - [`<Activity>`](https://react.dev/reference/react/Activity): A new API to hide and restore the UI and internal state of its children.
 - [`useEffectEvent`](https://react.dev/reference/react/useEffectEvent) is a React Hook that lets you extract non-reactive logic into an [Effect Event](https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event).
 - [`cacheSignal`](https://react.dev/reference/react/cacheSignal) (for RSCs) lets your know when the `cache()` lifetime is over.
-- [React Performance tracks](https://react.dev/reference/dev-tools/react-performance-tracks) appear on the Performance panel’s timeline in your browser developer tools
+- [React Performance tracks](https://react.dev/reference/developer-tooling/react-performance-tracks) appear on the Performance panel’s timeline in your browser developer tools
 
 ### New React DOM Features
 

ReactVersions.js

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

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

@@ -14,7 +14,6 @@ import React, {
   unstable_ViewTransition as ViewTransition,
   unstable_addTransitionType as addTransitionType,
   startTransition,
-  Activity,
 } from 'react';
 import {Resizable} from 're-resizable';
 import {useStore, useStoreDispatch} from '../StoreContext';
@@ -35,8 +34,12 @@ export default function ConfigEditor({
   const [isExpanded, setIsExpanded] = useState(false);
 
   return (
+    // TODO: Use <Activity> when it is compatible with Monaco: https://github.com/suren-atoyan/monaco-react/issues/753
     <>
-      <Activity mode={isExpanded ? 'visible' : 'hidden'}>
+      <div
+        style={{
+          display: isExpanded ? 'block' : 'none',
+        }}>
         <ExpandedEditor
           onToggle={() => {
             startTransition(() => {
@@ -46,8 +49,11 @@ export default function ConfigEditor({
           }}
           formattedAppliedConfig={formattedAppliedConfig}
         />
-      </Activity>
-      <Activity mode={isExpanded ? 'hidden' : 'visible'}>
+      </div>
+      <div
+        style={{
+          display: !isExpanded ? 'block' : 'none',
+        }}>
         <CollapsedEditor
           onToggle={() => {
             startTransition(() => {
@@ -56,7 +62,7 @@ export default function ConfigEditor({
             });
           }}
         />
-      </Activity>
+      </div>
     </>
   );
 }
@@ -116,8 +122,7 @@ function ExpandedEditor({
 
   return (
     <ViewTransition
-      enter={{[CONFIG_PANEL_TRANSITION]: 'slide-in', default: 'none'}}
-      exit={{[CONFIG_PANEL_TRANSITION]: 'slide-out', default: 'none'}}>
+      update={{[CONFIG_PANEL_TRANSITION]: 'slide-in', default: 'none'}}>
       <Resizable
         minWidth={300}
         maxWidth={600}

compiler/apps/playground/package.json

@@ -26,8 +26,8 @@
     "@babel/traverse": "^7.18.9",
     "@babel/types": "7.26.3",
     "@heroicons/react": "^1.0.6",
-    "@monaco-editor/react": "^4.8.0-rc.2",
-    "@playwright/test": "^1.56.1",
+    "@monaco-editor/react": "^4.4.6",
+    "@playwright/test": "^1.51.1",
     "@use-gesture/react": "^10.2.22",
     "hermes-eslint": "^0.25.0",
     "hermes-parser": "^0.25.0",
@@ -40,13 +40,13 @@
     "prettier": "^3.3.3",
     "pretty-format": "^29.3.1",
     "re-resizable": "^6.9.16",
-    "react": "19.2",
-    "react-dom": "19.2"
+    "react": "19.1.1",
+    "react-dom": "19.1.1"
   },
   "devDependencies": {
     "@types/node": "18.11.9",
-    "@types/react": "19.2",
-    "@types/react-dom": "19.2",
+    "@types/react": "19.1.13",
+    "@types/react-dom": "19.1.9",
     "autoprefixer": "^10.4.13",
     "clsx": "^1.2.1",
     "concurrently": "^7.4.0",
@@ -58,7 +58,7 @@
     "wait-on": "^7.2.0"
   },
   "resolutions": {
-    "@types/react": "19.2",
-    "@types/react-dom": "19.2"
+    "@types/react": "19.1.12",
+    "@types/react-dom": "19.1.9"
   }
 }

compiler/apps/playground/styles/globals.css

@@ -79,15 +79,6 @@
 ::view-transition-group(.slide-in) {
   z-index: 1;
 }
-::view-transition-old(.slide-out) {
-  animation-name: slideOutLeft;
-}
-::view-transition-new(.slide-out) {
-  animation-name: slideInLeft;
-}
-::view-transition-group(.slide-out) {
-  z-index: 1;
-}
 
 @keyframes slideOutLeft {
   from {

compiler/apps/playground/yarn.lock

@@ -701,19 +701,19 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@monaco-editor/loader@^1.6.1":
-  version "1.6.1"
-  resolved "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.6.1.tgz#c99177d87765abf10de31a0086084e714acfbc0f"
-  integrity sha512-w3tEnj9HYEC73wtjdpR089AqkUPskFRcdkxsiSFt3SoUc3OHpmu+leP94CXBm4mHfefmhsdfI0ZQu6qJ0wgtPg==
+"@monaco-editor/loader@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.4.0.tgz#f08227057331ec890fa1e903912a5b711a2ad558"
+  integrity sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==
   dependencies:
     state-local "^1.0.6"
 
-"@monaco-editor/react@^4.8.0-rc.2":
-  version "4.8.0-rc.2"
-  resolved "https://registry.npmjs.org/@monaco-editor/react/-/react-4.8.0-rc.2.tgz#e9acf652e23e9f640671a69875f496dde7f098aa"
-  integrity sha512-RzFHKBCnRA4RnozaG/EPhKsbkhX5wcApSa5MElR/AD2ojxhMY+QP+G8aJpxALCnIwKs6L0dec5MJ0nAjMUEqnA==
+"@monaco-editor/react@^4.4.6":
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.6.0.tgz#bcc68671e358a21c3814566b865a54b191e24119"
+  integrity sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==
   dependencies:
-    "@monaco-editor/loader" "^1.6.1"
+    "@monaco-editor/loader" "^1.4.0"
 
 "@next/env@15.6.0-canary.7":
   version "15.6.0-canary.7"
@@ -798,12 +798,12 @@
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
-"@playwright/test@^1.56.1":
-  version "1.56.1"
-  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.56.1.tgz#6e3bf3d0c90c5cf94bf64bdb56fd15a805c8bd3f"
-  integrity sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==
+"@playwright/test@^1.51.1":
+  version "1.51.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.51.1.tgz#75357d513221a7be0baad75f01e966baf9c41a2e"
+  integrity sha512-nM+kEaTSAoVlXmMPH10017vn3FSiFqr/bh4fKg9vmAdMfd9SDqRZNvPSiAHADc/itWak+qPvMPZQOPwCBW7k7Q==
   dependencies:
-    playwright "1.56.1"
+    playwright "1.51.1"
 
 "@rtsao/scc@^1.1.0":
   version "1.1.0"
@@ -854,15 +854,22 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.9.tgz#02d013de7058cea16d36168ef2fc653464cfbad4"
   integrity sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg==
 
-"@types/react-dom@19.2":
-  version "19.2.2"
-  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz#a4cc874797b7ddc9cb180ef0d5dc23f596fc2332"
-  integrity sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==
+"@types/react-dom@19.1.9":
+  version "19.1.9"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.1.9.tgz#5ab695fce1e804184767932365ae6569c11b4b4b"
+  integrity sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==
 
-"@types/react@19.2":
-  version "19.2.2"
-  resolved "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz#ba123a75d4c2a51158697160a4ea2ff70aa6bf36"
-  integrity sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==
+"@types/react@19.1.12":
+  version "19.1.12"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.12.tgz#7bfaa76aabbb0b4fe0493c21a3a7a93d33e8937b"
+  integrity sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==
+  dependencies:
+    csstype "^3.0.2"
+
+"@types/react@19.1.13":
+  version "19.1.13"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.13.tgz#fc650ffa680d739a25a530f5d7ebe00cdd771883"
+  integrity sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==
   dependencies:
     csstype "^3.0.2"
 
@@ -3453,17 +3460,17 @@ pirates@^4.0.1:
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
   integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
 
-playwright-core@1.56.1:
-  version "1.56.1"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.56.1.tgz#24a66481e5cd33a045632230aa2c4f0cb6b1db3d"
-  integrity sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==
+playwright-core@1.51.1:
+  version "1.51.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.51.1.tgz#d57f0393e02416f32a47cf82b27533656a8acce1"
+  integrity sha512-/crRMj8+j/Nq5s8QcvegseuyeZPxpQCZb6HNk3Sos3BlZyAknRjoyJPFWkpNn8v0+P3WiwqFF8P+zQo4eqiNuw==
 
-playwright@1.56.1:
-  version "1.56.1"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.56.1.tgz#62e3b99ddebed0d475e5936a152c88e68be55fbf"
-  integrity sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==
+playwright@1.51.1:
+  version "1.51.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.51.1.tgz#ae1467ee318083968ad28d6990db59f47a55390f"
+  integrity sha512-kkx+MB2KQRkyxjYPc3a0wLZZoDczmppyGJIvQ43l+aZihkaVvmu/21kiyaHeHjiFxjxNNFnUncKmcGIyOojsaw==
   dependencies:
-    playwright-core "1.56.1"
+    playwright-core "1.51.1"
   optionalDependencies:
     fsevents "2.3.2"
 
@@ -3582,12 +3589,12 @@ re-resizable@^6.9.16:
   resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.10.0.tgz#d684a096ab438f1a93f59ad3a580a206b0ce31ee"
   integrity sha512-hysSK0xmA5nz24HBVztlk4yCqCLCvS32E6ZpWxVKop9x3tqCa4yAj1++facrmkOf62JsJHjmjABdKxXofYioCw==
 
-react-dom@19.2:
-  version "19.2.0"
-  resolved "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz#00ed1e959c365e9a9d48f8918377465466ec3af8"
-  integrity sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==
+react-dom@19.1.1:
+  version "19.1.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.1.1.tgz#2daa9ff7f3ae384aeb30e76d5ee38c046dc89893"
+  integrity sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==
   dependencies:
-    scheduler "^0.27.0"
+    scheduler "^0.26.0"
 
 react-is@^16.13.1:
   version "16.13.1"
@@ -3599,10 +3606,10 @@ react-is@^18.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
-react@19.2:
-  version "19.2.0"
-  resolved "https://registry.npmjs.org/react/-/react-19.2.0.tgz#d33dd1721698f4376ae57a54098cb47fc75d93a5"
-  integrity sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==
+react@19.1.1:
+  version "19.1.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-19.1.1.tgz#06d9149ec5e083a67f9a1e39ce97b06a03b644af"
+  integrity sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==
 
 read-cache@^1.0.0:
   version "1.0.0"
@@ -3778,10 +3785,10 @@ safe-regex-test@^1.1.0:
     es-errors "^1.3.0"
     is-regex "^1.2.1"
 
-scheduler@^0.27.0:
-  version "0.27.0"
-  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz#0c4ef82d67d1e5c1e359e8fc76d3a87f045fe5bd"
-  integrity sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==
+scheduler@^0.26.0:
+  version "0.26.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.26.0.tgz#4ce8a8c2a2095f13ea11bf9a445be50c555d6337"
+  integrity sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==
 
 semver@^6.3.1:
   version "6.3.1"

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

@@ -52,8 +52,8 @@
     "react-dom": "0.0.0-experimental-4beb1fd8-20241118",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.2",
-    "zod": "^3.25.0 || ^4.0.0",
-    "zod-validation-error": "^3.5.0 || ^4.0.0"
+    "zod": "^3.22.4 || ^4.0.0",
+    "zod-validation-error": "^3.0.3 || ^4.0.0"
   },
   "resolutions": {
     "./**/@babel/parser": "7.7.4",

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

@@ -12,28 +12,6 @@ import {Err, Ok, Result} from './Utils/Result';
 import {assertExhaustive} from './Utils/utils';
 import invariant from 'invariant';
 
-// Number of context lines to display above the source of an error
-const CODEFRAME_LINES_ABOVE = 2;
-// Number of context lines to display below the source of an error
-const CODEFRAME_LINES_BELOW = 3;
-/*
- * Max number of lines for the _source_ of an error, before we abbreviate
- * the display of the source portion
- */
-const CODEFRAME_MAX_LINES = 10;
-/*
- * When the error source exceeds the above threshold, how many lines of
- * the source should be displayed? We show:
- * - CODEFRAME_LINES_ABOVE context lines
- * - CODEFRAME_ABBREVIATED_SOURCE_LINES of the error
- * - '...' ellipsis
- * - CODEFRAME_ABBREVIATED_SOURCE_LINES of the error
- * - CODEFRAME_LINES_BELOW context lines
- *
- * This value must be at least 2 or else we'll cut off important parts of the error message
- */
-const CODEFRAME_ABBREVIATED_SOURCE_LINES = 5;
-
 export enum ErrorSeverity {
   /**
    * An actionable error that the developer can fix. For example, product code errors should be
@@ -518,7 +496,7 @@ function printCodeFrame(
   loc: t.SourceLocation,
   message: string,
 ): string {
-  const printed = codeFrameColumns(
+  return codeFrameColumns(
     source,
     {
       start: {
@@ -532,25 +510,8 @@ function printCodeFrame(
     },
     {
       message,
-      linesAbove: CODEFRAME_LINES_ABOVE,
-      linesBelow: CODEFRAME_LINES_BELOW,
     },
   );
-  const lines = printed.split(/\r?\n/);
-  if (loc.end.line - loc.start.line < CODEFRAME_MAX_LINES) {
-    return printed;
-  }
-  const pipeIndex = lines[0].indexOf('|');
-  return [
-    ...lines.slice(
-      0,
-      CODEFRAME_LINES_ABOVE + CODEFRAME_ABBREVIATED_SOURCE_LINES,
-    ),
-    ' '.repeat(pipeIndex) + '…',
-    ...lines.slice(
-      -(CODEFRAME_LINES_BELOW + CODEFRAME_ABBREVIATED_SOURCE_LINES),
-    ),
-  ].join('\n');
 }
 
 function printErrorSummary(category: ErrorCategory, message: string): string {
@@ -1027,7 +988,7 @@ function getRuleForCategoryImpl(category: ErrorCategory): LintRule {
         severity: ErrorSeverity.Error,
         name: 'void-use-memo',
         description:
-          'Validates that useMemos always return a value and that the result of the useMemo is used by the component/hook. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.',
+          'Validates that useMemos always return a value. See [`useMemo()` docs](https://react.dev/reference/react/useMemo) for more information.',
         preset: LintRulePreset.RecommendedLatest,
       };
     }

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

@@ -6,7 +6,7 @@
  */
 
 import * as t from '@babel/types';
-import {z} from 'zod/v4';
+import {z} from 'zod';
 import {
   CompilerDiagnostic,
   CompilerError,
@@ -20,7 +20,7 @@ import {
   tryParseExternalFunction,
 } from '../HIR/Environment';
 import {hasOwnProperty} from '../Utils/utils';
-import {fromZodError} from 'zod-validation-error/v4';
+import {fromZodError} from 'zod-validation-error';
 import {CompilerPipelineValue} from './Pipeline';
 
 const PanicThresholdOptionsSchema = z.enum([

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

@@ -103,9 +103,7 @@ import {validateNoFreezingKnownMutableFunctions} from '../Validation/ValidateNoF
 import {inferMutationAliasingEffects} from '../Inference/InferMutationAliasingEffects';
 import {inferMutationAliasingRanges} from '../Inference/InferMutationAliasingRanges';
 import {validateNoDerivedComputationsInEffects} from '../Validation/ValidateNoDerivedComputationsInEffects';
-import {validateNoDerivedComputationsInEffects_exp} from '../Validation/ValidateNoDerivedComputationsInEffects_exp';
 import {nameAnonymousFunctions} from '../Transform/NameAnonymousFunctions';
-import {validateSourceLocations} from '../Validation/ValidateSourceLocations';
 
 export type CompilerPipelineValue =
   | {kind: 'ast'; name: string; value: CodegenFunction}
@@ -273,9 +271,7 @@ function runWithEnvironment(
       validateNoSetStateInRender(hir).unwrap();
     }
 
-    if (env.config.validateNoDerivedComputationsInEffects_exp) {
-      env.logErrors(validateNoDerivedComputationsInEffects_exp(hir));
-    } else if (env.config.validateNoDerivedComputationsInEffects) {
+    if (env.config.validateNoDerivedComputationsInEffects) {
       validateNoDerivedComputationsInEffects(hir);
     }
 
@@ -558,10 +554,6 @@ function runWithEnvironment(
     log({kind: 'ast', name: 'Codegen (outlined)', value: outlined.fn});
   }
 
-  if (env.config.validateSourceLocations) {
-    validateSourceLocations(func, ast).unwrap();
-  }
-
   /**
    * This flag should be only set for unit / fixture tests to check
    * that Forget correctly handles unexpected errors (e.g. exceptions

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

@@ -1568,6 +1568,20 @@ function lowerObjectPropertyKey(
       name: key.node.value,
     };
   } else if (property.node.computed && key.isExpression()) {
+    if (!key.isIdentifier() && !key.isMemberExpression()) {
+      /*
+       * NOTE: allowing complex key expressions can trigger a bug where a mutation is made conditional
+       * see fixture
+       * error.object-expression-computed-key-modified-during-after-construction.js
+       */
+      builder.errors.push({
+        reason: `(BuildHIR::lowerExpression) Expected Identifier, got ${key.type} key in ObjectExpression`,
+        category: ErrorCategory.Todo,
+        loc: key.node.loc ?? null,
+        suggestions: null,
+      });
+      return null;
+    }
     const place = lowerExpressionToTemporary(builder, key);
     return {
       kind: 'computed',

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

@@ -6,8 +6,8 @@
  */
 
 import * as t from '@babel/types';
-import {ZodError, z} from 'zod/v4';
-import {fromZodError} from 'zod-validation-error/v4';
+import {ZodError, z} from 'zod';
+import {fromZodError} from 'zod-validation-error';
 import {CompilerError} from '../CompilerError';
 import {Logger, ProgramContext} from '../Entrypoint';
 import {Err, Ok, Result} from '../Utils/Result';
@@ -83,11 +83,21 @@ export type ExternalFunction = z.infer<typeof ExternalFunctionSchema>;
 export const USE_FIRE_FUNCTION_NAME = 'useFire';
 export const EMIT_FREEZE_GLOBAL_GATING = '__DEV__';
 
-export const MacroSchema = z.string();
+export const MacroMethodSchema = z.union([
+  z.object({type: z.literal('wildcard')}),
+  z.object({type: z.literal('name'), name: z.string()}),
+]);
+
+// Would like to change this to drop the string option, but breaks compatibility with existing configs
+export const MacroSchema = z.union([
+  z.string(),
+  z.tuple([z.string(), z.array(MacroMethodSchema)]),
+]);
 
 export type CompilerMode = 'all_features' | 'no_inferred_memo';
 
 export type Macro = z.infer<typeof MacroSchema>;
+export type MacroMethod = z.infer<typeof MacroMethodSchema>;
 
 const HookSchema = z.object({
   /*
@@ -324,12 +334,6 @@ export const EnvironmentConfigSchema = z.object({
    */
   validateNoDerivedComputationsInEffects: z.boolean().default(false),
 
-  /**
-   * Experimental: Validates that effects are not used to calculate derived data which could instead be computed
-   * during render. Generates a custom error message for each type of violation.
-   */
-  validateNoDerivedComputationsInEffects_exp: z.boolean().default(false),
-
   /**
    * Validates against creating JSX within a try block and recommends using an error boundary
    * instead.
@@ -364,13 +368,6 @@ export const EnvironmentConfigSchema = z.object({
   validateNoCapitalizedCalls: z.nullable(z.array(z.string())).default(null),
   validateBlocklistedImports: z.nullable(z.array(z.string())).default(null),
 
-  /**
-   * Validates that AST nodes generated during codegen have proper source locations.
-   * This is useful for debugging issues with source maps and Istanbul coverage.
-   * When enabled, the compiler will error if important source locations are missing in the generated AST.
-   */
-  validateSourceLocations: z.boolean().default(false),
-
   /**
    * Validate against impure functions called during render
    */
@@ -662,7 +659,7 @@ export const EnvironmentConfigSchema = z.object({
    * Invalid:
    *   useMemo(() => { ... }, [...]);
    */
-  validateNoVoidUseMemo: z.boolean().default(true),
+  validateNoVoidUseMemo: z.boolean().default(false),
 
   /**
    * Validates that Components/Hooks are always defined at module level. This prevents scope
@@ -677,15 +674,6 @@ export const EnvironmentConfigSchema = z.object({
    * from refs need to be stored in state during mount.
    */
   enableAllowSetStateFromRefsInEffects: z.boolean().default(true),
-
-  /**
-   * Enables inference of event handler types for JSX props on built-in DOM elements.
-   * When enabled, functions passed to event handler props (props starting with "on")
-   * on primitive JSX tags are inferred to have the BuiltinEventHandlerId type, which
-   * allows ref access within those functions since DOM event handlers are guaranteed
-   * by React to only execute in response to events, not during render.
-   */
-  enableInferEventHandlers: z.boolean().default(false),
 });
 
 export type EnvironmentConfig = z.infer<typeof EnvironmentConfigSchema>;

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

@@ -29,7 +29,7 @@ import {
   BuiltInUseTransitionId,
   BuiltInWeakMapId,
   BuiltInWeakSetId,
-  BuiltInEffectEventId,
+  BuiltinEffectEventId,
   ReanimatedSharedValueId,
   ShapeRegistry,
   addFunction,
@@ -863,7 +863,7 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
         returnType: {
           kind: 'Function',
           return: {kind: 'Poly'},
-          shapeId: BuiltInEffectEventId,
+          shapeId: BuiltinEffectEventId,
           isConstructor: false,
         },
         calleeEffect: Effect.Read,

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

@@ -16,7 +16,7 @@ import {assertExhaustive} from '../Utils/utils';
 import {Environment, ReactFunctionType} from './Environment';
 import type {HookKind} from './ObjectShape';
 import {Type, makeType} from './Types';
-import {z} from 'zod/v4';
+import {z} from 'zod';
 import type {AliasingEffect} from '../Inference/AliasingEffects';
 import {isReservedWord} from '../Utils/Keyword';
 import {Err, Ok, Result} from '../Utils/Result';

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

@@ -403,9 +403,8 @@ export const BuiltInStartTransitionId = 'BuiltInStartTransition';
 export const BuiltInFireId = 'BuiltInFire';
 export const BuiltInFireFunctionId = 'BuiltInFireFunction';
 export const BuiltInUseEffectEventId = 'BuiltInUseEffectEvent';
-export const BuiltInEffectEventId = 'BuiltInEffectEventFunction';
+export const BuiltinEffectEventId = 'BuiltInEffectEventFunction';
 export const BuiltInAutodepsId = 'BuiltInAutoDepsId';
-export const BuiltInEventHandlerId = 'BuiltInEventHandlerId';
 
 // See getReanimatedModuleType() in Globals.ts — this is part of supporting Reanimated's ref-like types
 export const ReanimatedSharedValueId = 'ReanimatedSharedValueId';
@@ -1244,20 +1243,7 @@ addFunction(
     calleeEffect: Effect.ConditionallyMutate,
     returnValueKind: ValueKind.Mutable,
   },
-  BuiltInEffectEventId,
-);
-
-addFunction(
-  BUILTIN_SHAPES,
-  [],
-  {
-    positionalParams: [],
-    restParam: Effect.ConditionallyMutate,
-    returnType: {kind: 'Poly'},
-    calleeEffect: Effect.ConditionallyMutate,
-    returnValueKind: ValueKind.Mutable,
-  },
-  BuiltInEventHandlerId,
+  BuiltinEffectEventId,
 );
 
 /**

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

@@ -6,7 +6,7 @@
  */
 
 import {isValidIdentifier} from '@babel/types';
-import {z} from 'zod/v4';
+import {z} from 'zod';
 import {Effect, ValueKind} from '..';
 import {
   EffectSchema,

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

@@ -438,6 +438,40 @@ export function dropManualMemoization(
             continue;
           }
 
+          /**
+           * Bailout on void return useMemos. This is an anti-pattern where code might be using
+           * useMemo like useEffect: running arbirtary side-effects synced to changes in specific
+           * values.
+           */
+          if (
+            func.env.config.validateNoVoidUseMemo &&
+            manualMemo.kind === 'useMemo'
+          ) {
+            const funcToCheck = sidemap.functions.get(
+              fnPlace.identifier.id,
+            )?.value;
+            if (funcToCheck !== undefined && funcToCheck.loweredFunc.func) {
+              if (!hasNonVoidReturn(funcToCheck.loweredFunc.func)) {
+                errors.pushDiagnostic(
+                  CompilerDiagnostic.create({
+                    category: ErrorCategory.VoidUseMemo,
+                    reason: 'useMemo() callbacks must return a value',
+                    description: `This ${
+                      manualMemo.loadInstr.value.kind === 'PropertyLoad'
+                        ? 'React.useMemo'
+                        : 'useMemo'
+                    } callback doesn't return a value. useMemo is for computing and caching values, not for arbitrary side effects`,
+                    suggestions: null,
+                  }).withDetails({
+                    kind: 'error',
+                    loc: instr.value.loc,
+                    message: 'useMemo() callbacks must return a value',
+                  }),
+                );
+              }
+            }
+          }
+
           instr.value = getManualMemoizationReplacement(
             fnPlace,
             instr.value.loc,
@@ -595,3 +629,17 @@ function findOptionalPlaces(fn: HIRFunction): Set<IdentifierId> {
   }
   return optionals;
 }
+
+function hasNonVoidReturn(func: HIRFunction): boolean {
+  for (const [, block] of func.body.blocks) {
+    if (block.terminal.kind === 'return') {
+      if (
+        block.terminal.returnVariant === 'Explicit' ||
+        block.terminal.returnVariant === 'Implicit'
+      ) {
+        return true;
+      }
+    }
+  }
+  return false;
+}

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

@@ -19,7 +19,6 @@ import {
   Environment,
   FunctionExpression,
   GeneratedSource,
-  getHookKind,
   HIRFunction,
   Hole,
   IdentifierId,
@@ -199,7 +198,6 @@ export function inferMutationAliasingEffects(
     isFunctionExpression,
     fn,
     hoistedContextDeclarations,
-    findNonMutatedDestructureSpreads(fn),
   );
 
   let iterationCount = 0;
@@ -289,18 +287,15 @@ class Context {
   isFuctionExpression: boolean;
   fn: HIRFunction;
   hoistedContextDeclarations: Map<DeclarationId, Place | null>;
-  nonMutatingSpreads: Set<IdentifierId>;
 
   constructor(
     isFunctionExpression: boolean,
     fn: HIRFunction,
     hoistedContextDeclarations: Map<DeclarationId, Place | null>,
-    nonMutatingSpreads: Set<IdentifierId>,
   ) {
     this.isFuctionExpression = isFunctionExpression;
     this.fn = fn;
     this.hoistedContextDeclarations = hoistedContextDeclarations;
-    this.nonMutatingSpreads = nonMutatingSpreads;
   }
 
   cacheApplySignature(
@@ -327,161 +322,6 @@ class Context {
   }
 }
 
-/**
- * Finds objects created via ObjectPattern spread destructuring
- * (`const {x, ...spread} = ...`) where a) the rvalue is known frozen and
- * b) the spread value cannot possibly be directly mutated. The idea is that
- * for this set of values, we can treat the spread object as frozen.
- *
- * The primary use case for this is props spreading:
- *
- * ```
- * function Component({prop, ...otherProps}) {
- *   const transformedProp = transform(prop, otherProps.foo);
- *   // pass `otherProps` down:
- *   return <Foo {...otherProps} prop={transformedProp} />;
- * }
- * ```
- *
- * Here we know that since `otherProps` cannot be mutated, we don't have to treat
- * it as mutable: `otherProps.foo` only reads a value that must be frozen, so it
- * can be treated as frozen too.
- */
-function findNonMutatedDestructureSpreads(fn: HIRFunction): Set<IdentifierId> {
-  const knownFrozen = new Set<IdentifierId>();
-  if (fn.fnType === 'Component') {
-    const [props] = fn.params;
-    if (props != null && props.kind === 'Identifier') {
-      knownFrozen.add(props.identifier.id);
-    }
-  } else {
-    for (const param of fn.params) {
-      if (param.kind === 'Identifier') {
-        knownFrozen.add(param.identifier.id);
-      }
-    }
-  }
-
-  // Map of temporaries to identifiers for spread objects
-  const candidateNonMutatingSpreads = new Map<IdentifierId, IdentifierId>();
-  for (const block of fn.body.blocks.values()) {
-    if (candidateNonMutatingSpreads.size !== 0) {
-      for (const phi of block.phis) {
-        for (const operand of phi.operands.values()) {
-          const spread = candidateNonMutatingSpreads.get(operand.identifier.id);
-          if (spread != null) {
-            candidateNonMutatingSpreads.delete(spread);
-          }
-        }
-      }
-    }
-    for (const instr of block.instructions) {
-      const {lvalue, value} = instr;
-      switch (value.kind) {
-        case 'Destructure': {
-          if (
-            !knownFrozen.has(value.value.identifier.id) ||
-            !(
-              value.lvalue.kind === InstructionKind.Let ||
-              value.lvalue.kind === InstructionKind.Const
-            ) ||
-            value.lvalue.pattern.kind !== 'ObjectPattern'
-          ) {
-            continue;
-          }
-          for (const item of value.lvalue.pattern.properties) {
-            if (item.kind !== 'Spread') {
-              continue;
-            }
-            candidateNonMutatingSpreads.set(
-              item.place.identifier.id,
-              item.place.identifier.id,
-            );
-          }
-          break;
-        }
-        case 'LoadLocal': {
-          const spread = candidateNonMutatingSpreads.get(
-            value.place.identifier.id,
-          );
-          if (spread != null) {
-            candidateNonMutatingSpreads.set(lvalue.identifier.id, spread);
-          }
-          break;
-        }
-        case 'StoreLocal': {
-          const spread = candidateNonMutatingSpreads.get(
-            value.value.identifier.id,
-          );
-          if (spread != null) {
-            candidateNonMutatingSpreads.set(lvalue.identifier.id, spread);
-            candidateNonMutatingSpreads.set(
-              value.lvalue.place.identifier.id,
-              spread,
-            );
-          }
-          break;
-        }
-        case 'JsxFragment':
-        case 'JsxExpression': {
-          // Passing objects created with spread to jsx can't mutate them
-          break;
-        }
-        case 'PropertyLoad': {
-          // Properties must be frozen since the original value was frozen
-          break;
-        }
-        case 'CallExpression':
-        case 'MethodCall': {
-          const callee =
-            value.kind === 'CallExpression' ? value.callee : value.property;
-          if (getHookKind(fn.env, callee.identifier) != null) {
-            // Hook calls have frozen arguments, and non-ref returns are frozen
-            if (!isRefOrRefValue(lvalue.identifier)) {
-              knownFrozen.add(lvalue.identifier.id);
-            }
-          } else {
-            // Non-hook calls check their operands, since they are potentially mutable
-            if (candidateNonMutatingSpreads.size !== 0) {
-              // Otherwise any reference to the spread object itself may mutate
-              for (const operand of eachInstructionValueOperand(value)) {
-                const spread = candidateNonMutatingSpreads.get(
-                  operand.identifier.id,
-                );
-                if (spread != null) {
-                  candidateNonMutatingSpreads.delete(spread);
-                }
-              }
-            }
-          }
-          break;
-        }
-        default: {
-          if (candidateNonMutatingSpreads.size !== 0) {
-            // Otherwise any reference to the spread object itself may mutate
-            for (const operand of eachInstructionValueOperand(value)) {
-              const spread = candidateNonMutatingSpreads.get(
-                operand.identifier.id,
-              );
-              if (spread != null) {
-                candidateNonMutatingSpreads.delete(spread);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  const nonMutatingSpreads = new Set<IdentifierId>();
-  for (const [key, value] of candidateNonMutatingSpreads) {
-    if (key === value) {
-      nonMutatingSpreads.add(key);
-    }
-  }
-  return nonMutatingSpreads;
-}
-
 function inferParam(
   param: Place | SpreadPattern,
   initialState: InferenceState,
@@ -954,7 +794,6 @@ function applyEffect(
         case ValueKind.Primitive: {
           break;
         }
-        case ValueKind.MaybeFrozen:
         case ValueKind.Frozen: {
           sourceType = 'frozen';
           break;
@@ -2215,9 +2054,7 @@ function computeSignatureForInstruction(
             kind: 'Create',
             into: place,
             reason: ValueReason.Other,
-            value: context.nonMutatingSpreads.has(place.identifier.id)
-              ? ValueKind.Frozen
-              : ValueKind.Mutable,
+            value: ValueKind.Mutable,
           });
           effects.push({
             kind: 'Capture',

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

@@ -7,6 +7,7 @@
 
 import {
   HIRFunction,
+  Identifier,
   IdentifierId,
   InstructionValue,
   makeInstructionId,
@@ -14,35 +15,9 @@ import {
   Place,
   ReactiveScope,
 } from '../HIR';
-import {Macro} from '../HIR/Environment';
+import {Macro, MacroMethod} from '../HIR/Environment';
 import {eachInstructionValueOperand} from '../HIR/visitors';
-
-/**
- * Whether a macro requires its arguments to be transitively inlined (eg fbt)
- * or just avoid having the top-level values be converted to variables (eg fbt.param)
- */
-enum InlineLevel {
-  Transitive = 'Transitive',
-  Shallow = 'Shallow',
-}
-type MacroDefinition = {
-  level: InlineLevel;
-  properties: Map<string, MacroDefinition> | null;
-};
-
-const SHALLOW_MACRO: MacroDefinition = {
-  level: InlineLevel.Shallow,
-  properties: null,
-};
-const TRANSITIVE_MACRO: MacroDefinition = {
-  level: InlineLevel.Transitive,
-  properties: null,
-};
-const FBT_MACRO: MacroDefinition = {
-  level: InlineLevel.Transitive,
-  properties: new Map([['*', SHALLOW_MACRO]]),
-};
-FBT_MACRO.properties!.set('enum', FBT_MACRO);
+import {Iterable_some} from '../Utils/utils';
 
 /**
  * This pass supports the `fbt` translation system (https://facebook.github.io/fbt/)
@@ -67,210 +42,250 @@ FBT_MACRO.properties!.set('enum', FBT_MACRO);
  * ## User-defined macro-like function
  *
  * Users can also specify their own functions to be treated similarly to fbt via the
- * `customMacros` environment configuration. By default, user-supplied custom macros
- * have their arguments transitively inlined.
+ * `customMacros` environment configuration.
  */
 export function memoizeFbtAndMacroOperandsInSameScope(
   fn: HIRFunction,
 ): Set<IdentifierId> {
-  const macroKinds = new Map<Macro, MacroDefinition>([
-    ...Array.from(FBT_TAGS.entries()),
-    ...(fn.env.config.customMacros ?? []).map(
-      name => [name, TRANSITIVE_MACRO] as [Macro, MacroDefinition],
-    ),
+  const fbtMacroTags = new Set<Macro>([
+    ...Array.from(FBT_TAGS).map((tag): Macro => [tag, []]),
+    ...(fn.env.config.customMacros ?? []),
   ]);
   /**
-   * Forward data-flow analysis to identify all macro tags, including
-   * things like `fbt.foo.bar(...)`
+   * Set of all identifiers that load fbt or other macro functions or their nested
+   * properties, as well as values known to be the results of invoking macros
    */
-  const macroTags = populateMacroTags(fn, macroKinds);
-
+  const macroTagsCalls: Set<IdentifierId> = new Set();
   /**
-   * Reverse data-flow analysis to merge arguments to macro *invocations*
-   * based on the kind of the macro
+   * Mapping of lvalue => list of operands for all expressions where either
+   * the lvalue is a known fbt/macro call and/or the operands transitively
+   * contain fbt/macro calls.
+   *
+   * This is the key data structure that powers the scope merging: we start
+   * at the lvalues and merge operands into the lvalue's scope.
    */
-  const macroValues = mergeMacroArguments(fn, macroTags, macroKinds);
+  const macroValues: Map<Identifier, Array<Identifier>> = new Map();
+  // Tracks methods loaded from macros, like fbt.param or idx.foo
+  const macroMethods = new Map<IdentifierId, Array<Array<MacroMethod>>>();
 
-  return macroValues;
+  visit(fn, fbtMacroTags, macroTagsCalls, macroMethods, macroValues);
+
+  for (const root of macroValues.keys()) {
+    const scope = root.scope;
+    if (scope == null) {
+      continue;
+    }
+    // Merge the operands into the same scope if this is a known macro invocation
+    if (!macroTagsCalls.has(root.id)) {
+      continue;
+    }
+    mergeScopes(root, scope, macroValues, macroTagsCalls);
+  }
+
+  return macroTagsCalls;
 }
 
-const FBT_TAGS: Map<string, MacroDefinition> = new Map([
-  ['fbt', FBT_MACRO],
-  ['fbt:param', SHALLOW_MACRO],
-  ['fbt:enum', FBT_MACRO],
-  ['fbt:plural', SHALLOW_MACRO],
-  ['fbs', FBT_MACRO],
-  ['fbs:param', SHALLOW_MACRO],
-  ['fbs:enum', FBT_MACRO],
-  ['fbs:plural', SHALLOW_MACRO],
+export const FBT_TAGS: Set<string> = new Set([
+  'fbt',
+  'fbt:param',
+  'fbt:enum',
+  'fbt:plural',
+  'fbs',
+  'fbs:param',
+  'fbs:enum',
+  'fbs:plural',
 ]);
 export const SINGLE_CHILD_FBT_TAGS: Set<string> = new Set([
   'fbt:param',
   'fbs:param',
 ]);
 
-function populateMacroTags(
+function visit(
   fn: HIRFunction,
-  macroKinds: Map<Macro, MacroDefinition>,
-): Map<IdentifierId, MacroDefinition> {
-  const macroTags = new Map<IdentifierId, MacroDefinition>();
-  for (const block of fn.body.blocks.values()) {
-    for (const instr of block.instructions) {
-      const {lvalue, value} = instr;
-      switch (value.kind) {
-        case 'Primitive': {
-          if (typeof value.value === 'string') {
-            const macroDefinition = macroKinds.get(value.value);
-            if (macroDefinition != null) {
-              /*
-               * We don't distinguish between tag names and strings, so record
-               * all `fbt` string literals in case they are used as a jsx tag.
-               */
-              macroTags.set(lvalue.identifier.id, macroDefinition);
+  fbtMacroTags: Set<Macro>,
+  macroTagsCalls: Set<IdentifierId>,
+  macroMethods: Map<IdentifierId, Array<Array<MacroMethod>>>,
+  macroValues: Map<Identifier, Array<Identifier>>,
+): void {
+  for (const [, block] of fn.body.blocks) {
+    for (const phi of block.phis) {
+      const macroOperands: Array<Identifier> = [];
+      for (const operand of phi.operands.values()) {
+        if (macroValues.has(operand.identifier)) {
+          macroOperands.push(operand.identifier);
+        }
+      }
+      if (macroOperands.length !== 0) {
+        macroValues.set(phi.place.identifier, macroOperands);
+      }
+    }
+    for (const instruction of block.instructions) {
+      const {lvalue, value} = instruction;
+      if (lvalue === null) {
+        continue;
+      }
+      if (
+        value.kind === 'Primitive' &&
+        typeof value.value === 'string' &&
+        matchesExactTag(value.value, fbtMacroTags)
+      ) {
+        /*
+         * We don't distinguish between tag names and strings, so record
+         * all `fbt` string literals in case they are used as a jsx tag.
+         */
+        macroTagsCalls.add(lvalue.identifier.id);
+      } else if (
+        value.kind === 'LoadGlobal' &&
+        matchesExactTag(value.binding.name, fbtMacroTags)
+      ) {
+        // Record references to `fbt` as a global
+        macroTagsCalls.add(lvalue.identifier.id);
+      } else if (
+        value.kind === 'LoadGlobal' &&
+        matchTagRoot(value.binding.name, fbtMacroTags) !== null
+      ) {
+        const methods = matchTagRoot(value.binding.name, fbtMacroTags)!;
+        macroMethods.set(lvalue.identifier.id, methods);
+      } else if (
+        value.kind === 'PropertyLoad' &&
+        macroMethods.has(value.object.identifier.id)
+      ) {
+        const methods = macroMethods.get(value.object.identifier.id)!;
+        const newMethods = [];
+        for (const method of methods) {
+          if (
+            method.length > 0 &&
+            (method[0].type === 'wildcard' ||
+              (method[0].type === 'name' && method[0].name === value.property))
+          ) {
+            if (method.length > 1) {
+              newMethods.push(method.slice(1));
+            } else {
+              macroTagsCalls.add(lvalue.identifier.id);
             }
           }
-          break;
         }
-        case 'LoadGlobal': {
-          let macroDefinition = macroKinds.get(value.binding.name);
-          if (macroDefinition != null) {
-            macroTags.set(lvalue.identifier.id, macroDefinition);
+        if (newMethods.length > 0) {
+          macroMethods.set(lvalue.identifier.id, newMethods);
+        }
+      } else if (
+        value.kind === 'PropertyLoad' &&
+        macroTagsCalls.has(value.object.identifier.id)
+      ) {
+        macroTagsCalls.add(lvalue.identifier.id);
+      } else if (
+        isFbtJsxExpression(fbtMacroTags, macroTagsCalls, value) ||
+        isFbtJsxChild(macroTagsCalls, lvalue, value) ||
+        isFbtCallExpression(macroTagsCalls, value)
+      ) {
+        macroTagsCalls.add(lvalue.identifier.id);
+        macroValues.set(
+          lvalue.identifier,
+          Array.from(
+            eachInstructionValueOperand(value),
+            operand => operand.identifier,
+          ),
+        );
+      } else if (
+        Iterable_some(eachInstructionValueOperand(value), operand =>
+          macroValues.has(operand.identifier),
+        )
+      ) {
+        const macroOperands: Array<Identifier> = [];
+        for (const operand of eachInstructionValueOperand(value)) {
+          if (macroValues.has(operand.identifier)) {
+            macroOperands.push(operand.identifier);
           }
-          break;
-        }
-        case 'PropertyLoad': {
-          if (typeof value.property === 'string') {
-            const macroDefinition = macroTags.get(value.object.identifier.id);
-            if (macroDefinition != null) {
-              const propertyDefinition =
-                macroDefinition.properties != null
-                  ? (macroDefinition.properties.get(value.property) ??
-                    macroDefinition.properties.get('*'))
-                  : null;
-              const propertyMacro = propertyDefinition ?? macroDefinition;
-              macroTags.set(lvalue.identifier.id, propertyMacro);
-            }
-          }
-          break;
         }
+        macroValues.set(lvalue.identifier, macroOperands);
       }
     }
   }
-  return macroTags;
 }
 
-function mergeMacroArguments(
-  fn: HIRFunction,
-  macroTags: Map<IdentifierId, MacroDefinition>,
-  macroKinds: Map<Macro, MacroDefinition>,
-): Set<IdentifierId> {
-  const macroValues = new Set<IdentifierId>(macroTags.keys());
-  for (const block of Array.from(fn.body.blocks.values()).reverse()) {
-    for (let i = block.instructions.length - 1; i >= 0; i--) {
-      const instr = block.instructions[i]!;
-      const {lvalue, value} = instr;
-      switch (value.kind) {
-        case 'DeclareContext':
-        case 'DeclareLocal':
-        case 'Destructure':
-        case 'LoadContext':
-        case 'LoadLocal':
-        case 'PostfixUpdate':
-        case 'PrefixUpdate':
-        case 'StoreContext':
-        case 'StoreLocal': {
-          // Instructions that never need to be merged
-          break;
-        }
-        case 'CallExpression':
-        case 'MethodCall': {
-          const scope = lvalue.identifier.scope;
-          if (scope == null) {
-            continue;
-          }
-          const callee =
-            value.kind === 'CallExpression' ? value.callee : value.property;
-          const macroDefinition =
-            macroTags.get(callee.identifier.id) ??
-            macroTags.get(lvalue.identifier.id);
-          if (macroDefinition != null) {
-            visitOperands(
-              macroDefinition,
-              scope,
-              lvalue,
-              value,
-              macroValues,
-              macroTags,
-            );
-          }
-          break;
-        }
-        case 'JsxExpression': {
-          const scope = lvalue.identifier.scope;
-          if (scope == null) {
-            continue;
-          }
-          let macroDefinition;
-          if (value.tag.kind === 'Identifier') {
-            macroDefinition = macroTags.get(value.tag.identifier.id);
-          } else {
-            macroDefinition = macroKinds.get(value.tag.name);
-          }
-          macroDefinition ??= macroTags.get(lvalue.identifier.id);
-          if (macroDefinition != null) {
-            visitOperands(
-              macroDefinition,
-              scope,
-              lvalue,
-              value,
-              macroValues,
-              macroTags,
-            );
-          }
-          break;
-        }
-        default: {
-          const scope = lvalue.identifier.scope;
-          if (scope == null) {
-            continue;
-          }
-          const macroDefinition = macroTags.get(lvalue.identifier.id);
-          if (macroDefinition != null) {
-            visitOperands(
-              macroDefinition,
-              scope,
-              lvalue,
-              value,
-              macroValues,
-              macroTags,
-            );
-          }
-          break;
-        }
-      }
+function mergeScopes(
+  root: Identifier,
+  scope: ReactiveScope,
+  macroValues: Map<Identifier, Array<Identifier>>,
+  macroTagsCalls: Set<IdentifierId>,
+): void {
+  const operands = macroValues.get(root);
+  if (operands == null) {
+    return;
+  }
+  for (const operand of operands) {
+    operand.scope = scope;
+    expandFbtScopeRange(scope.range, operand.mutableRange);
+    macroTagsCalls.add(operand.id);
+    mergeScopes(operand, scope, macroValues, macroTagsCalls);
+  }
+}
+
+function matchesExactTag(s: string, tags: Set<Macro>): boolean {
+  return Array.from(tags).some(macro =>
+    typeof macro === 'string'
+      ? s === macro
+      : macro[1].length === 0 && macro[0] === s,
+  );
+}
+
+function matchTagRoot(
+  s: string,
+  tags: Set<Macro>,
+): Array<Array<MacroMethod>> | null {
+  const methods: Array<Array<MacroMethod>> = [];
+  for (const macro of tags) {
+    if (typeof macro === 'string') {
+      continue;
     }
-    for (const phi of block.phis) {
-      const scope = phi.place.identifier.scope;
-      if (scope == null) {
-        continue;
-      }
-      const macroDefinition = macroTags.get(phi.place.identifier.id);
-      if (
-        macroDefinition == null ||
-        macroDefinition.level === InlineLevel.Shallow
-      ) {
-        continue;
-      }
-      macroValues.add(phi.place.identifier.id);
-      for (const operand of phi.operands.values()) {
-        operand.identifier.scope = scope;
-        expandFbtScopeRange(scope.range, operand.identifier.mutableRange);
-        macroTags.set(operand.identifier.id, macroDefinition);
-        macroValues.add(operand.identifier.id);
-      }
+    const [tag, rest] = macro;
+    if (tag === s && rest.length > 0) {
+      methods.push(rest);
     }
   }
-  return macroValues;
+  if (methods.length > 0) {
+    return methods;
+  } else {
+    return null;
+  }
+}
+
+function isFbtCallExpression(
+  macroTagsCalls: Set<IdentifierId>,
+  value: InstructionValue,
+): boolean {
+  return (
+    (value.kind === 'CallExpression' &&
+      macroTagsCalls.has(value.callee.identifier.id)) ||
+    (value.kind === 'MethodCall' &&
+      macroTagsCalls.has(value.property.identifier.id))
+  );
+}
+
+function isFbtJsxExpression(
+  fbtMacroTags: Set<Macro>,
+  macroTagsCalls: Set<IdentifierId>,
+  value: InstructionValue,
+): boolean {
+  return (
+    value.kind === 'JsxExpression' &&
+    ((value.tag.kind === 'Identifier' &&
+      macroTagsCalls.has(value.tag.identifier.id)) ||
+      (value.tag.kind === 'BuiltinTag' &&
+        matchesExactTag(value.tag.name, fbtMacroTags)))
+  );
+}
+
+function isFbtJsxChild(
+  macroTagsCalls: Set<IdentifierId>,
+  lvalue: Place | null,
+  value: InstructionValue,
+): boolean {
+  return (
+    (value.kind === 'JsxExpression' || value.kind === 'JsxFragment') &&
+    lvalue !== null &&
+    macroTagsCalls.has(lvalue.identifier.id)
+  );
 }
 
 function expandFbtScopeRange(
@@ -283,22 +298,3 @@ function expandFbtScopeRange(
     );
   }
 }
-
-function visitOperands(
-  macroDefinition: MacroDefinition,
-  scope: ReactiveScope,
-  lvalue: Place,
-  value: InstructionValue,
-  macroValues: Set<IdentifierId>,
-  macroTags: Map<IdentifierId, MacroDefinition>,
-): void {
-  macroValues.add(lvalue.identifier.id);
-  for (const operand of eachInstructionValueOperand(value)) {
-    if (macroDefinition.level === InlineLevel.Transitive) {
-      operand.identifier.scope = scope;
-      expandFbtScopeRange(scope.range, operand.identifier.mutableRange);
-      macroTags.set(operand.identifier.id, macroDefinition);
-    }
-    macroValues.add(operand.identifier.id);
-  }
-}

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

@@ -25,7 +25,6 @@ import {
 } from '../HIR/HIR';
 import {
   BuiltInArrayId,
-  BuiltInEventHandlerId,
   BuiltInFunctionId,
   BuiltInJsxId,
   BuiltInMixedReadonlyId,
@@ -472,41 +471,6 @@ function* generateInstructionTypes(
           }
         }
       }
-      if (env.config.enableInferEventHandlers) {
-        if (
-          value.kind === 'JsxExpression' &&
-          value.tag.kind === 'BuiltinTag' &&
-          !value.tag.name.includes('-')
-        ) {
-          /*
-           * Infer event handler types for built-in DOM elements.
-           * Props starting with "on" (e.g., onClick, onSubmit) on primitive tags
-           * are inferred as event handlers. This allows functions with ref access
-           * to be passed to these props, since DOM event handlers are guaranteed
-           * by React to only execute in response to events, never during render.
-           *
-           * We exclude tags with hyphens to avoid web components (custom elements),
-           * which are required by the HTML spec to contain a hyphen. Web components
-           * may call event handler props during their lifecycle methods (e.g.,
-           * connectedCallback), which would be unsafe for ref access.
-           */
-          for (const prop of value.props) {
-            if (
-              prop.kind === 'JsxAttribute' &&
-              prop.name.startsWith('on') &&
-              prop.name.length > 2 &&
-              prop.name[2] === prop.name[2].toUpperCase()
-            ) {
-              yield equation(prop.place.identifier.type, {
-                kind: 'Function',
-                shapeId: BuiltInEventHandlerId,
-                return: makeType(),
-                isConstructor: false,
-              });
-            }
-          }
-        }
-      }
       yield equation(left, {kind: 'Object', shapeId: BuiltInJsxId});
       break;
     }

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {fromZodError} from 'zod-validation-error/v4';
+import {fromZodError} from 'zod-validation-error';
 import {CompilerError} from '../CompilerError';
 import {
   CompilationMode,
@@ -135,7 +135,16 @@ function parseConfigPragmaEnvironmentForTest(
     } else if (val) {
       const parsedVal = tryParseTestPragmaValue(val).unwrap();
       if (key === 'customMacros' && typeof parsedVal === 'string') {
-        maybeConfig[key] = [parsedVal.split('.')[0]];
+        const valSplit = parsedVal.split('.');
+        const props = [];
+        for (const elt of valSplit.slice(1)) {
+          if (elt === '*') {
+            props.push({type: 'wildcard'});
+          } else if (elt.length > 0) {
+            props.push({type: 'name', name: elt});
+          }
+        }
+        maybeConfig[key] = [[valSplit[0], props]];
         continue;
       }
       maybeConfig[key] = parsedVal;

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

@@ -1,825 +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 {Result} from '../Utils/Result';
-import {CompilerDiagnostic, CompilerError, Effect} from '..';
-import {ErrorCategory} from '../CompilerError';
-import {
-  BlockId,
-  FunctionExpression,
-  HIRFunction,
-  IdentifierId,
-  isSetStateType,
-  isUseEffectHookType,
-  Place,
-  CallExpression,
-  Instruction,
-  isUseStateType,
-  BasicBlock,
-  isUseRefType,
-  SourceLocation,
-  ArrayExpression,
-} from '../HIR';
-import {eachInstructionLValue, eachInstructionOperand} from '../HIR/visitors';
-import {isMutable} from '../ReactiveScopes/InferReactiveScopeVariables';
-import {assertExhaustive} from '../Utils/utils';
-
-type TypeOfValue = 'ignored' | 'fromProps' | 'fromState' | 'fromPropsAndState';
-
-type DerivationMetadata = {
-  typeOfValue: TypeOfValue;
-  place: Place;
-  sourcesIds: Set<IdentifierId>;
-  isStateSource: boolean;
-};
-
-type EffectMetadata = {
-  effect: HIRFunction;
-  dependencies: ArrayExpression;
-};
-
-type ValidationContext = {
-  readonly functions: Map<IdentifierId, FunctionExpression>;
-  readonly candidateDependencies: Map<IdentifierId, ArrayExpression>;
-  readonly errors: CompilerError;
-  readonly derivationCache: DerivationCache;
-  readonly effectsCache: Map<IdentifierId, EffectMetadata>;
-  readonly setStateLoads: Map<IdentifierId, IdentifierId | null>;
-  readonly setStateUsages: Map<IdentifierId, Set<SourceLocation>>;
-};
-
-class DerivationCache {
-  hasChanges: boolean = false;
-  cache: Map<IdentifierId, DerivationMetadata> = new Map();
-  private previousCache: Map<IdentifierId, DerivationMetadata> | null = null;
-
-  takeSnapshot(): void {
-    this.previousCache = new Map();
-    for (const [key, value] of this.cache.entries()) {
-      this.previousCache.set(key, {
-        place: value.place,
-        sourcesIds: new Set(value.sourcesIds),
-        typeOfValue: value.typeOfValue,
-        isStateSource: value.isStateSource,
-      });
-    }
-  }
-
-  checkForChanges(): void {
-    if (this.previousCache === null) {
-      this.hasChanges = true;
-      return;
-    }
-
-    for (const [key, value] of this.cache.entries()) {
-      const previousValue = this.previousCache.get(key);
-      if (
-        previousValue === undefined ||
-        !this.isDerivationEqual(previousValue, value)
-      ) {
-        this.hasChanges = true;
-        return;
-      }
-    }
-
-    if (this.cache.size !== this.previousCache.size) {
-      this.hasChanges = true;
-      return;
-    }
-
-    this.hasChanges = false;
-  }
-
-  snapshot(): boolean {
-    const hasChanges = this.hasChanges;
-    this.hasChanges = false;
-    return hasChanges;
-  }
-
-  addDerivationEntry(
-    derivedVar: Place,
-    sourcesIds: Set<IdentifierId>,
-    typeOfValue: TypeOfValue,
-    isStateSource: boolean,
-  ): void {
-    let finalIsSource = isStateSource;
-    if (!finalIsSource) {
-      for (const sourceId of sourcesIds) {
-        const sourceMetadata = this.cache.get(sourceId);
-        if (
-          sourceMetadata?.isStateSource &&
-          sourceMetadata.place.identifier.name?.kind !== 'named'
-        ) {
-          finalIsSource = true;
-          break;
-        }
-      }
-    }
-
-    this.cache.set(derivedVar.identifier.id, {
-      place: derivedVar,
-      sourcesIds: sourcesIds,
-      typeOfValue: typeOfValue ?? 'ignored',
-      isStateSource: finalIsSource,
-    });
-  }
-
-  private isDerivationEqual(
-    a: DerivationMetadata,
-    b: DerivationMetadata,
-  ): boolean {
-    if (a.typeOfValue !== b.typeOfValue) {
-      return false;
-    }
-    if (a.sourcesIds.size !== b.sourcesIds.size) {
-      return false;
-    }
-    for (const id of a.sourcesIds) {
-      if (!b.sourcesIds.has(id)) {
-        return false;
-      }
-    }
-    return true;
-  }
-}
-
-function isNamedIdentifier(place: Place): place is Place & {
-  identifier: {name: NonNullable<Place['identifier']['name']>};
-} {
-  return (
-    place.identifier.name !== null && place.identifier.name.kind === 'named'
-  );
-}
-
-/**
- * Validates that useEffect is not used for derived computations which could/should
- * be performed in render.
- *
- * See https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state
- *
- * Example:
- *
- * ```
- * // 🔴 Avoid: redundant state and unnecessary Effect
- * const [fullName, setFullName] = useState('');
- * useEffect(() => {
- *   setFullName(firstName + ' ' + lastName);
- * }, [firstName, lastName]);
- * ```
- *
- * Instead use:
- *
- * ```
- * // ✅ Good: calculated during rendering
- * const fullName = firstName + ' ' + lastName;
- * ```
- */
-export function validateNoDerivedComputationsInEffects_exp(
-  fn: HIRFunction,
-): Result<void, CompilerError> {
-  const functions: Map<IdentifierId, FunctionExpression> = new Map();
-  const candidateDependencies: Map<IdentifierId, ArrayExpression> = new Map();
-  const derivationCache = new DerivationCache();
-  const errors = new CompilerError();
-  const effectsCache: Map<IdentifierId, EffectMetadata> = new Map();
-
-  const setStateLoads: Map<IdentifierId, IdentifierId> = new Map();
-  const setStateUsages: Map<IdentifierId, Set<SourceLocation>> = new Map();
-
-  const context: ValidationContext = {
-    functions,
-    candidateDependencies,
-    errors,
-    derivationCache,
-    effectsCache,
-    setStateLoads,
-    setStateUsages,
-  };
-
-  if (fn.fnType === 'Hook') {
-    for (const param of fn.params) {
-      if (param.kind === 'Identifier') {
-        context.derivationCache.cache.set(param.identifier.id, {
-          place: param,
-          sourcesIds: new Set(),
-          typeOfValue: 'fromProps',
-          isStateSource: true,
-        });
-      }
-    }
-  } else if (fn.fnType === 'Component') {
-    const props = fn.params[0];
-    if (props != null && props.kind === 'Identifier') {
-      context.derivationCache.cache.set(props.identifier.id, {
-        place: props,
-        sourcesIds: new Set(),
-        typeOfValue: 'fromProps',
-        isStateSource: true,
-      });
-    }
-  }
-
-  let isFirstPass = true;
-  do {
-    context.derivationCache.takeSnapshot();
-
-    for (const block of fn.body.blocks.values()) {
-      recordPhiDerivations(block, context);
-      for (const instr of block.instructions) {
-        recordInstructionDerivations(instr, context, isFirstPass);
-      }
-    }
-
-    context.derivationCache.checkForChanges();
-    isFirstPass = false;
-  } while (context.derivationCache.snapshot());
-
-  for (const [, effect] of effectsCache) {
-    validateEffect(effect.effect, effect.dependencies, context);
-  }
-
-  return errors.asResult();
-}
-
-function recordPhiDerivations(
-  block: BasicBlock,
-  context: ValidationContext,
-): void {
-  for (const phi of block.phis) {
-    let typeOfValue: TypeOfValue = 'ignored';
-    let sourcesIds: Set<IdentifierId> = new Set();
-    for (const operand of phi.operands.values()) {
-      const operandMetadata = context.derivationCache.cache.get(
-        operand.identifier.id,
-      );
-
-      if (operandMetadata === undefined) {
-        continue;
-      }
-
-      typeOfValue = joinValue(typeOfValue, operandMetadata.typeOfValue);
-      sourcesIds.add(operand.identifier.id);
-    }
-
-    if (typeOfValue !== 'ignored') {
-      context.derivationCache.addDerivationEntry(
-        phi.place,
-        sourcesIds,
-        typeOfValue,
-        false,
-      );
-    }
-  }
-}
-
-function joinValue(
-  lvalueType: TypeOfValue,
-  valueType: TypeOfValue,
-): TypeOfValue {
-  if (lvalueType === 'ignored') return valueType;
-  if (valueType === 'ignored') return lvalueType;
-  if (lvalueType === valueType) return lvalueType;
-  return 'fromPropsAndState';
-}
-
-function getRootSetState(
-  key: IdentifierId,
-  loads: Map<IdentifierId, IdentifierId | null>,
-  visited: Set<IdentifierId> = new Set(),
-): IdentifierId | null {
-  if (visited.has(key)) {
-    return null;
-  }
-  visited.add(key);
-
-  const parentId = loads.get(key);
-
-  if (parentId === undefined) {
-    return null;
-  }
-
-  if (parentId === null) {
-    return key;
-  }
-
-  return getRootSetState(parentId, loads, visited);
-}
-
-function maybeRecordSetState(
-  instr: Instruction,
-  loads: Map<IdentifierId, IdentifierId | null>,
-  usages: Map<IdentifierId, Set<SourceLocation>>,
-): void {
-  for (const operand of eachInstructionLValue(instr)) {
-    if (
-      instr.value.kind === 'LoadLocal' &&
-      loads.has(instr.value.place.identifier.id)
-    ) {
-      loads.set(operand.identifier.id, instr.value.place.identifier.id);
-    } else {
-      if (isSetStateType(operand.identifier)) {
-        // this is a root setState
-        loads.set(operand.identifier.id, null);
-      }
-    }
-
-    const rootSetState = getRootSetState(operand.identifier.id, loads);
-    if (rootSetState !== null && usages.get(rootSetState) === undefined) {
-      usages.set(rootSetState, new Set([operand.loc]));
-    }
-  }
-}
-
-function recordInstructionDerivations(
-  instr: Instruction,
-  context: ValidationContext,
-  isFirstPass: boolean,
-): void {
-  maybeRecordSetState(instr, context.setStateLoads, context.setStateUsages);
-
-  let typeOfValue: TypeOfValue = 'ignored';
-  let isSource: boolean = false;
-  const sources: Set<IdentifierId> = new Set();
-  const {lvalue, value} = instr;
-  if (value.kind === 'FunctionExpression') {
-    context.functions.set(lvalue.identifier.id, value);
-    for (const [, block] of value.loweredFunc.func.body.blocks) {
-      recordPhiDerivations(block, context);
-      for (const instr of block.instructions) {
-        recordInstructionDerivations(instr, context, isFirstPass);
-      }
-    }
-  } else if (value.kind === 'CallExpression' || value.kind === 'MethodCall') {
-    const callee =
-      value.kind === 'CallExpression' ? value.callee : value.property;
-    if (
-      isUseEffectHookType(callee.identifier) &&
-      value.args.length === 2 &&
-      value.args[0].kind === 'Identifier' &&
-      value.args[1].kind === 'Identifier'
-    ) {
-      const effectFunction = context.functions.get(value.args[0].identifier.id);
-      const deps = context.candidateDependencies.get(
-        value.args[1].identifier.id,
-      );
-      if (effectFunction != null && deps != null) {
-        context.effectsCache.set(value.args[0].identifier.id, {
-          effect: effectFunction.loweredFunc.func,
-          dependencies: deps,
-        });
-      }
-    } else if (isUseStateType(lvalue.identifier) && value.args.length > 0) {
-      typeOfValue = 'fromState';
-      context.derivationCache.addDerivationEntry(
-        lvalue,
-        new Set(),
-        typeOfValue,
-        true,
-      );
-      return;
-    }
-  } else if (value.kind === 'ArrayExpression') {
-    context.candidateDependencies.set(lvalue.identifier.id, value);
-  }
-
-  for (const operand of eachInstructionOperand(instr)) {
-    if (context.setStateLoads.has(operand.identifier.id)) {
-      const rootSetStateId = getRootSetState(
-        operand.identifier.id,
-        context.setStateLoads,
-      );
-      if (rootSetStateId !== null) {
-        context.setStateUsages.get(rootSetStateId)?.add(operand.loc);
-      }
-    }
-
-    const operandMetadata = context.derivationCache.cache.get(
-      operand.identifier.id,
-    );
-
-    if (operandMetadata === undefined) {
-      continue;
-    }
-
-    typeOfValue = joinValue(typeOfValue, operandMetadata.typeOfValue);
-    sources.add(operand.identifier.id);
-  }
-
-  if (typeOfValue === 'ignored') {
-    return;
-  }
-
-  for (const lvalue of eachInstructionLValue(instr)) {
-    context.derivationCache.addDerivationEntry(
-      lvalue,
-      sources,
-      typeOfValue,
-      isSource,
-    );
-  }
-
-  for (const operand of eachInstructionOperand(instr)) {
-    switch (operand.effect) {
-      case Effect.Capture:
-      case Effect.Store:
-      case Effect.ConditionallyMutate:
-      case Effect.ConditionallyMutateIterator:
-      case Effect.Mutate: {
-        if (isMutable(instr, operand)) {
-          if (context.derivationCache.cache.has(operand.identifier.id)) {
-            const operandMetadata = context.derivationCache.cache.get(
-              operand.identifier.id,
-            );
-
-            if (operandMetadata !== undefined) {
-              operandMetadata.typeOfValue = joinValue(
-                typeOfValue,
-                operandMetadata.typeOfValue,
-              );
-            }
-          } else {
-            context.derivationCache.addDerivationEntry(
-              operand,
-              sources,
-              typeOfValue,
-              false,
-            );
-          }
-        }
-        break;
-      }
-      case Effect.Freeze:
-      case Effect.Read: {
-        // no-op
-        break;
-      }
-      case Effect.Unknown: {
-        CompilerError.invariant(false, {
-          reason: 'Unexpected unknown effect',
-          description: null,
-          details: [
-            {
-              kind: 'error',
-              loc: operand.loc,
-              message: 'Unexpected unknown effect',
-            },
-          ],
-        });
-      }
-      default: {
-        assertExhaustive(
-          operand.effect,
-          `Unexpected effect kind \`${operand.effect}\``,
-        );
-      }
-    }
-  }
-}
-
-type TreeNode = {
-  name: string;
-  typeOfValue: TypeOfValue;
-  isSource: boolean;
-  children: Array<TreeNode>;
-};
-
-function buildTreeNode(
-  sourceId: IdentifierId,
-  context: ValidationContext,
-  visited: Set<string> = new Set(),
-): Array<TreeNode> {
-  const sourceMetadata = context.derivationCache.cache.get(sourceId);
-  if (!sourceMetadata) {
-    return [];
-  }
-
-  if (sourceMetadata.isStateSource && isNamedIdentifier(sourceMetadata.place)) {
-    return [
-      {
-        name: sourceMetadata.place.identifier.name.value,
-        typeOfValue: sourceMetadata.typeOfValue,
-        isSource: sourceMetadata.isStateSource,
-        children: [],
-      },
-    ];
-  }
-
-  const children: Array<TreeNode> = [];
-
-  const namedSiblings: Set<string> = new Set();
-  for (const childId of sourceMetadata.sourcesIds) {
-    const childNodes = buildTreeNode(
-      childId,
-      context,
-      new Set([
-        ...visited,
-        ...(isNamedIdentifier(sourceMetadata.place)
-          ? [sourceMetadata.place.identifier.name.value]
-          : []),
-      ]),
-    );
-    if (childNodes) {
-      for (const childNode of childNodes) {
-        if (!namedSiblings.has(childNode.name)) {
-          children.push(childNode);
-          namedSiblings.add(childNode.name);
-        }
-      }
-    }
-  }
-
-  if (
-    isNamedIdentifier(sourceMetadata.place) &&
-    !visited.has(sourceMetadata.place.identifier.name.value)
-  ) {
-    return [
-      {
-        name: sourceMetadata.place.identifier.name.value,
-        typeOfValue: sourceMetadata.typeOfValue,
-        isSource: sourceMetadata.isStateSource,
-        children: children,
-      },
-    ];
-  }
-
-  return children;
-}
-
-function renderTree(
-  node: TreeNode,
-  indent: string = '',
-  isLast: boolean = true,
-  propsSet: Set<string>,
-  stateSet: Set<string>,
-): string {
-  const prefix = indent + (isLast ? '└── ' : '├── ');
-  const childIndent = indent + (isLast ? '    ' : '│   ');
-
-  let result = `${prefix}${node.name}`;
-
-  if (node.isSource) {
-    let typeLabel: string;
-    if (node.typeOfValue === 'fromProps') {
-      propsSet.add(node.name);
-      typeLabel = 'Prop';
-    } else if (node.typeOfValue === 'fromState') {
-      stateSet.add(node.name);
-      typeLabel = 'State';
-    } else {
-      propsSet.add(node.name);
-      stateSet.add(node.name);
-      typeLabel = 'Prop and State';
-    }
-    result += ` (${typeLabel})`;
-  }
-
-  if (node.children.length > 0) {
-    result += '\n';
-    node.children.forEach((child, index) => {
-      const isLastChild = index === node.children.length - 1;
-      result += renderTree(child, childIndent, isLastChild, propsSet, stateSet);
-      if (index < node.children.length - 1) {
-        result += '\n';
-      }
-    });
-  }
-
-  return result;
-}
-
-function getFnLocalDeps(
-  fn: FunctionExpression | undefined,
-): Set<IdentifierId> | undefined {
-  if (!fn) {
-    return undefined;
-  }
-
-  const deps: Set<IdentifierId> = new Set();
-
-  for (const [, block] of fn.loweredFunc.func.body.blocks) {
-    for (const instr of block.instructions) {
-      if (instr.value.kind === 'LoadLocal') {
-        deps.add(instr.value.place.identifier.id);
-      }
-    }
-  }
-
-  return deps;
-}
-
-function validateEffect(
-  effectFunction: HIRFunction,
-  dependencies: ArrayExpression,
-  context: ValidationContext,
-): void {
-  const seenBlocks: Set<BlockId> = new Set();
-
-  const effectDerivedSetStateCalls: Array<{
-    value: CallExpression;
-    id: IdentifierId;
-    sourceIds: Set<IdentifierId>;
-    typeOfValue: TypeOfValue;
-  }> = [];
-
-  const effectSetStateUsages: Map<
-    IdentifierId,
-    Set<SourceLocation>
-  > = new Map();
-
-  // Consider setStates in the effect's dependency array as being part of effectSetStateUsages
-  for (const dep of dependencies.elements) {
-    if (dep.kind === 'Identifier') {
-      const root = getRootSetState(dep.identifier.id, context.setStateLoads);
-      if (root !== null) {
-        effectSetStateUsages.set(root, new Set([dep.loc]));
-      }
-    }
-  }
-
-  let cleanUpFunctionDeps: Set<IdentifierId> | undefined;
-
-  const globals: Set<IdentifierId> = new Set();
-  for (const block of effectFunction.body.blocks.values()) {
-    /*
-     * if the block is in an effect and is of type return then its an effect's cleanup function
-     * if the cleanup function depends on a value from which effect-set state is derived then
-     * we can't validate
-     */
-    if (
-      block.terminal.kind === 'return' &&
-      block.terminal.returnVariant === 'Explicit'
-    ) {
-      cleanUpFunctionDeps = getFnLocalDeps(
-        context.functions.get(block.terminal.value.identifier.id),
-      );
-    }
-    for (const pred of block.preds) {
-      if (!seenBlocks.has(pred)) {
-        // skip if block has a back edge
-        return;
-      }
-    }
-
-    for (const instr of block.instructions) {
-      // Early return if any instruction is deriving a value from a ref
-      if (isUseRefType(instr.lvalue.identifier)) {
-        return;
-      }
-
-      maybeRecordSetState(instr, context.setStateLoads, effectSetStateUsages);
-
-      for (const operand of eachInstructionOperand(instr)) {
-        if (context.setStateLoads.has(operand.identifier.id)) {
-          const rootSetStateId = getRootSetState(
-            operand.identifier.id,
-            context.setStateLoads,
-          );
-          if (rootSetStateId !== null) {
-            effectSetStateUsages.get(rootSetStateId)?.add(operand.loc);
-          }
-        }
-      }
-
-      if (
-        instr.value.kind === 'CallExpression' &&
-        isSetStateType(instr.value.callee.identifier) &&
-        instr.value.args.length === 1 &&
-        instr.value.args[0].kind === 'Identifier'
-      ) {
-        const calleeMetadata = context.derivationCache.cache.get(
-          instr.value.callee.identifier.id,
-        );
-
-        /*
-         * If the setState comes from a source other than local state skip
-         * since the fix is not to calculate in render
-         */
-        if (calleeMetadata?.typeOfValue != 'fromState') {
-          continue;
-        }
-
-        const argMetadata = context.derivationCache.cache.get(
-          instr.value.args[0].identifier.id,
-        );
-
-        if (argMetadata !== undefined) {
-          effectDerivedSetStateCalls.push({
-            value: instr.value,
-            id: instr.value.callee.identifier.id,
-            sourceIds: argMetadata.sourcesIds,
-            typeOfValue: argMetadata.typeOfValue,
-          });
-        }
-      } else if (instr.value.kind === 'CallExpression') {
-        const calleeMetadata = context.derivationCache.cache.get(
-          instr.value.callee.identifier.id,
-        );
-
-        if (
-          calleeMetadata !== undefined &&
-          (calleeMetadata.typeOfValue === 'fromProps' ||
-            calleeMetadata.typeOfValue === 'fromPropsAndState')
-        ) {
-          // If the callee is a prop we can't confidently say that it should be derived in render
-          return;
-        }
-
-        if (globals.has(instr.value.callee.identifier.id)) {
-          // If the callee is a global we can't confidently say that it should be derived in render
-          return;
-        }
-      } else if (instr.value.kind === 'LoadGlobal') {
-        globals.add(instr.lvalue.identifier.id);
-        for (const operand of eachInstructionOperand(instr)) {
-          globals.add(operand.identifier.id);
-        }
-      }
-    }
-    seenBlocks.add(block.id);
-  }
-
-  for (const derivedSetStateCall of effectDerivedSetStateCalls) {
-    const rootSetStateCall = getRootSetState(
-      derivedSetStateCall.id,
-      context.setStateLoads,
-    );
-
-    if (
-      rootSetStateCall !== null &&
-      effectSetStateUsages.has(rootSetStateCall) &&
-      context.setStateUsages.has(rootSetStateCall) &&
-      effectSetStateUsages.get(rootSetStateCall)!.size ===
-        context.setStateUsages.get(rootSetStateCall)!.size - 1
-    ) {
-      const propsSet = new Set<string>();
-      const stateSet = new Set<string>();
-
-      const rootNodesMap = new Map<string, TreeNode>();
-      for (const id of derivedSetStateCall.sourceIds) {
-        const nodes = buildTreeNode(id, context);
-        for (const node of nodes) {
-          if (!rootNodesMap.has(node.name)) {
-            rootNodesMap.set(node.name, node);
-          }
-        }
-      }
-      const rootNodes = Array.from(rootNodesMap.values());
-
-      const trees = rootNodes.map((node, index) =>
-        renderTree(
-          node,
-          '',
-          index === rootNodes.length - 1,
-          propsSet,
-          stateSet,
-        ),
-      );
-
-      for (const dep of derivedSetStateCall.sourceIds) {
-        if (cleanUpFunctionDeps !== undefined && cleanUpFunctionDeps.has(dep)) {
-          return;
-        }
-      }
-
-      const propsArr = Array.from(propsSet);
-      const stateArr = Array.from(stateSet);
-
-      let rootSources = '';
-      if (propsArr.length > 0) {
-        rootSources += `Props: [${propsArr.join(', ')}]`;
-      }
-      if (stateArr.length > 0) {
-        if (rootSources) rootSources += '\n';
-        rootSources += `State: [${stateArr.join(', ')}]`;
-      }
-
-      const description = `Using an effect triggers an additional render which can hurt performance and user experience, potentially briefly showing stale values to the user
-
-This setState call is setting a derived value that depends on the following reactive sources:
-
-${rootSources}
-
-Data Flow Tree:
-${trees.join('\n')}
-
-See: https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state`;
-
-      context.errors.pushDiagnostic(
-        CompilerDiagnostic.create({
-          description: description,
-          category: ErrorCategory.EffectDerivationsOfState,
-          reason:
-            'You might not need an effect. Derive values in render, not effects.',
-        }).withDetails({
-          kind: 'error',
-          loc: derivedSetStateCall.value.callee.loc,
-          message: 'This should be computed during render, not in an effect',
-        }),
-      );
-    }
-  }
-}

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

@@ -14,14 +14,12 @@ import {
   BlockId,
   HIRFunction,
   IdentifierId,
-  Identifier,
   Place,
   SourceLocation,
   getHookKindForType,
   isRefValueType,
   isUseRefType,
 } from '../HIR';
-import {BuiltInEventHandlerId} from '../HIR/ObjectShape';
 import {
   eachInstructionOperand,
   eachInstructionValueOperand,
@@ -185,11 +183,6 @@ function refTypeOfType(place: Place): RefAccessType {
   }
 }
 
-function isEventHandlerType(identifier: Identifier): boolean {
-  const type = identifier.type;
-  return type.kind === 'Function' && type.shapeId === BuiltInEventHandlerId;
-}
-
 function tyEqual(a: RefAccessType, b: RefAccessType): boolean {
   if (a.kind !== b.kind) {
     return false;
@@ -526,9 +519,6 @@ function validateNoRefAccessInRenderImpl(
              */
             if (!didError) {
               const isRefLValue = isUseRefType(instr.lvalue.identifier);
-              const isEventHandlerLValue = isEventHandlerType(
-                instr.lvalue.identifier,
-              );
               for (const operand of eachInstructionValueOperand(instr.value)) {
                 /**
                  * By default we check that function call operands are not refs,
@@ -536,16 +526,29 @@ function validateNoRefAccessInRenderImpl(
                  */
                 if (
                   isRefLValue ||
-                  isEventHandlerLValue ||
                   (hookKind != null &&
                     hookKind !== 'useState' &&
                     hookKind !== 'useReducer')
                 ) {
                   /**
-                   * Allow passing refs or ref-accessing functions when:
-                   * 1. lvalue is a ref (mergeRefs pattern: `mergeRefs(ref1, ref2)`)
-                   * 2. lvalue is an event handler (DOM events execute outside render)
-                   * 3. calling hooks (independently validated for ref safety)
+                   * Special cases:
+                   *
+                   * 1. the lvalue is a ref
+                   * In general passing a ref to a function may access that ref
+                   * value during render, so we disallow it.
+                   *
+                   * The main exception is the "mergeRefs" pattern, ie a function
+                   * that accepts multiple refs as arguments (or an array of refs)
+                   * and returns a new, aggregated ref. If the lvalue is a ref,
+                   * we assume that the user is doing this pattern and allow passing
+                   * refs.
+                   *
+                   * Eg `const mergedRef = mergeRefs(ref1, ref2)`
+                   *
+                   * 2. calling hooks
+                   *
+                   * Hooks are independently checked to ensure they don't access refs
+                   * during render.
                    */
                   validateNoDirectRefValueAccess(errors, operand, env);
                 } else if (interpolatedAsJsx.has(instr.lvalue.identifier.id)) {

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

@@ -1,206 +0,0 @@
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import {NodePath} from '@babel/traverse';
-import * as t from '@babel/types';
-import {CompilerDiagnostic, CompilerError, ErrorCategory} from '..';
-import {CodegenFunction} from '../ReactiveScopes';
-import {Result} from '../Utils/Result';
-
-/**
- * IMPORTANT: This validation is only intended for use in unit tests.
- * It is not intended for use in production.
- *
- * This validation is used to ensure that the generated AST has proper source locations
- * for "important" original nodes.
- *
- * There's one big gotcha with this validation: it only works if the "important" original nodes
- * are not optimized away by the compiler.
- *
- * When that scenario happens, we should just update the fixture to not include a node that has no
- * corresponding node in the generated AST due to being completely removed during compilation.
- */
-
-/**
- * Some common node types that are important for coverage tracking.
- * Based on istanbul-lib-instrument
- */
-const IMPORTANT_INSTRUMENTED_TYPES = new Set([
-  'ArrowFunctionExpression',
-  'AssignmentPattern',
-  'ObjectMethod',
-  'ExpressionStatement',
-  'BreakStatement',
-  'ContinueStatement',
-  'ReturnStatement',
-  'ThrowStatement',
-  'TryStatement',
-  'VariableDeclarator',
-  'IfStatement',
-  'ForStatement',
-  'ForInStatement',
-  'ForOfStatement',
-  'WhileStatement',
-  'DoWhileStatement',
-  'SwitchStatement',
-  'SwitchCase',
-  'WithStatement',
-  'FunctionDeclaration',
-  'FunctionExpression',
-  'LabeledStatement',
-  'ConditionalExpression',
-  'LogicalExpression',
-]);
-
-/**
- * Check if a node is a manual memoization call that the compiler optimizes away.
- * These include useMemo and useCallback calls, which are intentionally removed
- * by the DropManualMemoization pass.
- */
-function isManualMemoization(node: t.Node): boolean {
-  // Check if this is a useMemo/useCallback call expression
-  if (t.isCallExpression(node)) {
-    const callee = node.callee;
-    if (t.isIdentifier(callee)) {
-      return callee.name === 'useMemo' || callee.name === 'useCallback';
-    }
-    if (
-      t.isMemberExpression(callee) &&
-      t.isIdentifier(callee.property) &&
-      t.isIdentifier(callee.object)
-    ) {
-      return (
-        callee.object.name === 'React' &&
-        (callee.property.name === 'useMemo' ||
-          callee.property.name === 'useCallback')
-      );
-    }
-  }
-
-  return false;
-}
-
-/**
- * Create a location key for comparison. We compare by line/column/source,
- * not by object identity.
- */
-function locationKey(loc: t.SourceLocation): string {
-  return `${loc.start.line}:${loc.start.column}-${loc.end.line}:${loc.end.column}`;
-}
-
-/**
- * Validates that important source locations from the original code are preserved
- * in the generated AST. This ensures that Istanbul coverage instrumentation can
- * properly map back to the original source code.
- *
- * The validator:
- * 1. Collects locations from "important" nodes in the original AST (those that
- *    Istanbul instruments for coverage tracking)
- * 2. Exempts known compiler optimizations (useMemo/useCallback removal)
- * 3. Verifies that all important locations appear somewhere in the generated AST
- *
- * Missing locations can cause Istanbul to fail to track coverage for certain
- * code paths, leading to inaccurate coverage reports.
- */
-export function validateSourceLocations(
-  func: NodePath<
-    t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression
-  >,
-  generatedAst: CodegenFunction,
-): Result<void, CompilerError> {
-  const errors = new CompilerError();
-
-  // Step 1: Collect important locations from the original source
-  const importantOriginalLocations = new Map<
-    string,
-    {loc: t.SourceLocation; nodeType: string}
-  >();
-
-  func.traverse({
-    enter(path) {
-      const node = path.node;
-
-      // Only track node types that Istanbul instruments
-      if (!IMPORTANT_INSTRUMENTED_TYPES.has(node.type)) {
-        return;
-      }
-
-      // Skip manual memoization that the compiler intentionally removes
-      if (isManualMemoization(node)) {
-        return;
-      }
-
-      // Collect the location if it exists
-      if (node.loc) {
-        const key = locationKey(node.loc);
-        importantOriginalLocations.set(key, {
-          loc: node.loc,
-          nodeType: node.type,
-        });
-      }
-    },
-  });
-
-  // Step 2: Collect all locations from the generated AST
-  const generatedLocations = new Set<string>();
-
-  function collectGeneratedLocations(node: t.Node): void {
-    if (node.loc) {
-      generatedLocations.add(locationKey(node.loc));
-    }
-
-    // Use Babel's VISITOR_KEYS to traverse only actual node properties
-    const keys = t.VISITOR_KEYS[node.type as keyof typeof t.VISITOR_KEYS];
-
-    if (!keys) {
-      return;
-    }
-
-    for (const key of keys) {
-      const value = (node as any)[key];
-
-      if (Array.isArray(value)) {
-        for (const item of value) {
-          if (t.isNode(item)) {
-            collectGeneratedLocations(item);
-          }
-        }
-      } else if (t.isNode(value)) {
-        collectGeneratedLocations(value);
-      }
-    }
-  }
-
-  // Collect from main function body
-  collectGeneratedLocations(generatedAst.body);
-
-  // Collect from outlined functions
-  for (const outlined of generatedAst.outlined) {
-    collectGeneratedLocations(outlined.fn.body);
-  }
-
-  // Step 3: Validate that all important locations are preserved
-  for (const [key, {loc, nodeType}] of importantOriginalLocations) {
-    if (!generatedLocations.has(key)) {
-      errors.pushDiagnostic(
-        CompilerDiagnostic.create({
-          category: ErrorCategory.Todo,
-          reason: 'Important source location missing in generated code',
-          description:
-            `Source location for ${nodeType} is missing in the generated output. This can cause coverage instrumentation ` +
-            `to fail to track this code properly, resulting in inaccurate coverage reports.`,
-        }).withDetails({
-          kind: 'error',
-          loc,
-          message: null,
-        }),
-      );
-    }
-  }
-
-  return errors.asResult();
-}

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

@@ -10,37 +10,16 @@ import {
   CompilerError,
   ErrorCategory,
 } from '../CompilerError';
-import {
-  FunctionExpression,
-  HIRFunction,
-  IdentifierId,
-  SourceLocation,
-} from '../HIR';
-import {
-  eachInstructionValueOperand,
-  eachTerminalOperand,
-} from '../HIR/visitors';
+import {FunctionExpression, HIRFunction, IdentifierId} from '../HIR';
 import {Result} from '../Utils/Result';
 
 export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> {
   const errors = new CompilerError();
-  const voidMemoErrors = new CompilerError();
   const useMemos = new Set<IdentifierId>();
   const react = new Set<IdentifierId>();
   const functions = new Map<IdentifierId, FunctionExpression>();
-  const unusedUseMemos = new Map<IdentifierId, SourceLocation>();
   for (const [, block] of fn.body.blocks) {
     for (const {lvalue, value} of block.instructions) {
-      if (unusedUseMemos.size !== 0) {
-        /**
-         * Most of the time useMemo results are referenced immediately. Don't bother
-         * scanning instruction operands for useMemos unless there is an as-yet-unused
-         * useMemo.
-         */
-        for (const operand of eachInstructionValueOperand(value)) {
-          unusedUseMemos.delete(operand.identifier.id);
-        }
-      }
       switch (value.kind) {
         case 'LoadGlobal': {
           if (value.binding.name === 'useMemo') {
@@ -66,8 +45,10 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> {
         case 'CallExpression': {
           // Is the function being called useMemo, with at least 1 argument?
           const callee =
-            value.kind === 'CallExpression' ? value.callee : value.property;
-          const isUseMemo = useMemos.has(callee.identifier.id);
+            value.kind === 'CallExpression'
+              ? value.callee.identifier.id
+              : value.property.identifier.id;
+          const isUseMemo = useMemos.has(callee);
           if (!isUseMemo || value.args.length === 0) {
             continue;
           }
@@ -123,106 +104,10 @@ export function validateUseMemo(fn: HIRFunction): Result<void, CompilerError> {
             );
           }
 
-          validateNoContextVariableAssignment(body.loweredFunc.func, errors);
-
-          if (fn.env.config.validateNoVoidUseMemo) {
-            if (!hasNonVoidReturn(body.loweredFunc.func)) {
-              voidMemoErrors.pushDiagnostic(
-                CompilerDiagnostic.create({
-                  category: ErrorCategory.VoidUseMemo,
-                  reason: 'useMemo() callbacks must return a value',
-                  description: `This useMemo() callback doesn't return a value. useMemo() is for computing and caching values, not for arbitrary side effects`,
-                  suggestions: null,
-                }).withDetails({
-                  kind: 'error',
-                  loc: body.loc,
-                  message: 'useMemo() callbacks must return a value',
-                }),
-              );
-            } else {
-              unusedUseMemos.set(lvalue.identifier.id, callee.loc);
-            }
-          }
           break;
         }
       }
     }
-    if (unusedUseMemos.size !== 0) {
-      for (const operand of eachTerminalOperand(block.terminal)) {
-        unusedUseMemos.delete(operand.identifier.id);
-      }
-    }
   }
-  if (unusedUseMemos.size !== 0) {
-    /**
-     * Basic check for unused memos, where the result of the call is never referenced. This runs
-     * before DCE so it's more of an AST-level check that something, _anything_, cares about the value.
-     *
-     * This is easy to defeat with e.g. `const _ = useMemo(...)` but it at least gives us something to teach.
-     * Even a DCE-based version could be bypassed with `noop(useMemo(...))`.
-     */
-    for (const loc of unusedUseMemos.values()) {
-      voidMemoErrors.pushDiagnostic(
-        CompilerDiagnostic.create({
-          category: ErrorCategory.VoidUseMemo,
-          reason: 'useMemo() result is unused',
-          description: `This useMemo() value is unused. useMemo() is for computing and caching values, not for arbitrary side effects`,
-          suggestions: null,
-        }).withDetails({
-          kind: 'error',
-          loc,
-          message: 'useMemo() result is unused',
-        }),
-      );
-    }
-  }
-  fn.env.logErrors(voidMemoErrors.asResult());
   return errors.asResult();
 }
-
-function validateNoContextVariableAssignment(
-  fn: HIRFunction,
-  errors: CompilerError,
-): void {
-  const context = new Set(fn.context.map(place => place.identifier.id));
-  for (const block of fn.body.blocks.values()) {
-    for (const instr of block.instructions) {
-      const value = instr.value;
-      switch (value.kind) {
-        case 'StoreContext': {
-          if (context.has(value.lvalue.place.identifier.id)) {
-            errors.pushDiagnostic(
-              CompilerDiagnostic.create({
-                category: ErrorCategory.UseMemo,
-                reason:
-                  'useMemo() callbacks may not reassign variables declared outside of the callback',
-                description:
-                  'useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function',
-                suggestions: null,
-              }).withDetails({
-                kind: 'error',
-                loc: value.lvalue.place.loc,
-                message: 'Cannot reassign variable',
-              }),
-            );
-          }
-          break;
-        }
-      }
-    }
-  }
-}
-
-function hasNonVoidReturn(func: HIRFunction): boolean {
-  for (const [, block] of func.body.blocks) {
-    if (block.terminal.kind === 'return') {
-      if (
-        block.terminal.returnVariant === 'Explicit' ||
-        block.terminal.returnVariant === 'Implicit'
-      ) {
-        return true;
-      }
-    }
-  }
-  return false;
-}

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

@@ -12,5 +12,4 @@ export {validateNoCapitalizedCalls} from './ValidateNoCapitalizedCalls';
 export {validateNoRefAccessInRender} from './ValidateNoRefAccessInRender';
 export {validateNoSetStateInRender} from './ValidateNoSetStateInRender';
 export {validatePreservedManualMemoization} from './ValidatePreservedManualMemoization';
-export {validateSourceLocations} from './ValidateSourceLocations';
 export {validateUseMemo} from './ValidateUseMemo';

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

@@ -1,148 +0,0 @@
-
-## Input
-
-```javascript
-// @enableInferEventHandlers
-import {useRef} from 'react';
-
-// Simulates react-hook-form's handleSubmit
-function handleSubmit<T>(callback: (data: T) => void | Promise<void>) {
-  return (event: any) => {
-    event.preventDefault();
-    callback({} as T);
-  };
-}
-
-// Simulates an upload function
-async function upload(file: any): Promise<{blob: {url: string}}> {
-  return {blob: {url: 'https://example.com/file.jpg'}};
-}
-
-interface SignatureRef {
-  toFile(): any;
-}
-
-function Component() {
-  const ref = useRef<SignatureRef>(null);
-
-  const onSubmit = async (value: any) => {
-    // This should be allowed: accessing ref.current in an async event handler
-    // that's wrapped and passed to onSubmit prop
-    let sigUrl: string;
-    if (value.hasSignature) {
-      const {blob} = await upload(ref.current?.toFile());
-      sigUrl = blob?.url || '';
-    } else {
-      sigUrl = value.signature;
-    }
-    console.log('Signature URL:', sigUrl);
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input type="text" name="signature" />
-      <button type="submit">Submit</button>
-    </form>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @enableInferEventHandlers
-import { useRef } from "react";
-
-// Simulates react-hook-form's handleSubmit
-function handleSubmit(callback) {
-  const $ = _c(2);
-  let t0;
-  if ($[0] !== callback) {
-    t0 = (event) => {
-      event.preventDefault();
-      callback({} as T);
-    };
-    $[0] = callback;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  return t0;
-}
-
-// Simulates an upload function
-async function upload(file) {
-  const $ = _c(1);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = { blob: { url: "https://example.com/file.jpg" } };
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  return t0;
-}
-
-interface SignatureRef {
-  toFile(): any;
-}
-
-function Component() {
-  const $ = _c(4);
-  const ref = useRef(null);
-
-  const onSubmit = async (value) => {
-    let sigUrl;
-    if (value.hasSignature) {
-      const { blob } = await upload(ref.current?.toFile());
-      sigUrl = blob?.url || "";
-    } else {
-      sigUrl = value.signature;
-    }
-
-    console.log("Signature URL:", sigUrl);
-  };
-
-  const t0 = handleSubmit(onSubmit);
-  let t1;
-  let t2;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = <input type="text" name="signature" />;
-    t2 = <button type="submit">Submit</button>;
-    $[0] = t1;
-    $[1] = t2;
-  } else {
-    t1 = $[0];
-    t2 = $[1];
-  }
-  let t3;
-  if ($[2] !== t0) {
-    t3 = (
-      <form onSubmit={t0}>
-        {t1}
-        {t2}
-      </form>
-    );
-    $[2] = t0;
-    $[3] = t3;
-  } else {
-    t3 = $[3];
-  }
-  return t3;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-      
-### Eval output
-(kind: ok) <form><input type="text" name="signature"><button type="submit">Submit</button></form>

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

@@ -1,48 +0,0 @@
-// @enableInferEventHandlers
-import {useRef} from 'react';
-
-// Simulates react-hook-form's handleSubmit
-function handleSubmit<T>(callback: (data: T) => void | Promise<void>) {
-  return (event: any) => {
-    event.preventDefault();
-    callback({} as T);
-  };
-}
-
-// Simulates an upload function
-async function upload(file: any): Promise<{blob: {url: string}}> {
-  return {blob: {url: 'https://example.com/file.jpg'}};
-}
-
-interface SignatureRef {
-  toFile(): any;
-}
-
-function Component() {
-  const ref = useRef<SignatureRef>(null);
-
-  const onSubmit = async (value: any) => {
-    // This should be allowed: accessing ref.current in an async event handler
-    // that's wrapped and passed to onSubmit prop
-    let sigUrl: string;
-    if (value.hasSignature) {
-      const {blob} = await upload(ref.current?.toFile());
-      sigUrl = blob?.url || '';
-    } else {
-      sigUrl = value.signature;
-    }
-    console.log('Signature URL:', sigUrl);
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit)}>
-      <input type="text" name="signature" />
-      <button type="submit">Submit</button>
-    </form>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};

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

@@ -1,101 +0,0 @@
-
-## Input
-
-```javascript
-// @enableInferEventHandlers
-import {useRef} from 'react';
-
-// Simulates react-hook-form's handleSubmit or similar event handler wrappers
-function handleSubmit<T>(callback: (data: T) => void) {
-  return (event: any) => {
-    event.preventDefault();
-    callback({} as T);
-  };
-}
-
-function Component() {
-  const ref = useRef<HTMLInputElement>(null);
-
-  const onSubmit = (data: any) => {
-    // This should be allowed: accessing ref.current in an event handler
-    // that's wrapped by handleSubmit and passed to onSubmit prop
-    if (ref.current !== null) {
-      console.log(ref.current.value);
-    }
-  };
-
-  return (
-    <>
-      <input ref={ref} />
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <button type="submit">Submit</button>
-      </form>
-    </>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @enableInferEventHandlers
-import { useRef } from "react";
-
-// Simulates react-hook-form's handleSubmit or similar event handler wrappers
-function handleSubmit(callback) {
-  const $ = _c(2);
-  let t0;
-  if ($[0] !== callback) {
-    t0 = (event) => {
-      event.preventDefault();
-      callback({} as T);
-    };
-    $[0] = callback;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  return t0;
-}
-
-function Component() {
-  const $ = _c(1);
-  const ref = useRef(null);
-  let t0;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    const onSubmit = (data) => {
-      if (ref.current !== null) {
-        console.log(ref.current.value);
-      }
-    };
-
-    t0 = (
-      <>
-        <input ref={ref} />
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <button type="submit">Submit</button>
-        </form>
-      </>
-    );
-    $[0] = t0;
-  } else {
-    t0 = $[0];
-  }
-  return t0;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-      
-### Eval output
-(kind: ok) <input><form><button type="submit">Submit</button></form>

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

@@ -1,36 +0,0 @@
-// @enableInferEventHandlers
-import {useRef} from 'react';
-
-// Simulates react-hook-form's handleSubmit or similar event handler wrappers
-function handleSubmit<T>(callback: (data: T) => void) {
-  return (event: any) => {
-    event.preventDefault();
-    callback({} as T);
-  };
-}
-
-function Component() {
-  const ref = useRef<HTMLInputElement>(null);
-
-  const onSubmit = (data: any) => {
-    // This should be allowed: accessing ref.current in an event handler
-    // that's wrapped by handleSubmit and passed to onSubmit prop
-    if (ref.current !== null) {
-      console.log(ref.current.value);
-    }
-  };
-
-  return (
-    <>
-      <input ref={ref} />
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <button type="submit">Submit</button>
-      </form>
-    </>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};

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

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

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

@@ -1,21 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-function Component({value, enabled}) {
-  const [localValue, setLocalValue] = useState('');
-
-  useEffect(() => {
-    if (enabled) {
-      setLocalValue(value);
-    } else {
-      setLocalValue('disabled');
-    }
-  }, [value, enabled]);
-
-  return <div>{localValue}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{value: 'test', enabled: true}],
-};

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

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

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

@@ -1,18 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-export default function Component({input = 'empty'}) {
-  const [currInput, setCurrInput] = useState(input);
-  const localConst = 'local const';
-
-  useEffect(() => {
-    setCurrInput(input + localConst);
-  }, [input, localConst]);
-
-  return <div>{currInput}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{input: 'test'}],
-};

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

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

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

@@ -1,15 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-import {useEffect, useState} from 'react';
-
-function Component({shouldChange}) {
-  const [count, setCount] = useState(0);
-
-  useEffect(() => {
-    if (shouldChange) {
-      setCount(count + 1);
-    }
-  }, [count]);
-
-  return <div>{count}</div>;
-}

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

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

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

@@ -1,25 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-function Component({firstName}) {
-  const [lastName, setLastName] = useState('Doe');
-  const [fullName, setFullName] = useState('John');
-
-  const middleName = 'D.';
-
-  useEffect(() => {
-    setFullName(firstName + ' ' + middleName + ' ' + lastName);
-  }, [firstName, middleName, lastName]);
-
-  return (
-    <div>
-      <input value={lastName} onChange={e => setLastName(e.target.value)} />
-      <div>{fullName}</div>
-    </div>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{firstName: 'John'}],
-};

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

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

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

@@ -1,21 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-function Component({initialName}) {
-  const [name, setName] = useState('');
-
-  useEffect(() => {
-    setName(initialName);
-  }, [initialName]);
-
-  return (
-    <div>
-      <input value={name} onChange={e => setName(e.target.value)} />
-    </div>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{initialName: 'John'}],
-};

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

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

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

@@ -1,11 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp
-
-function Component({value}) {
-  const [checked, setChecked] = useState('');
-
-  useEffect(() => {
-    setChecked(value === '' ? [] : value.split(','));
-  }, [value]);
-
-  return <div>{checked}</div>;
-}

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

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

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

@@ -1,20 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-function MockComponent({onSet}) {
-  return <div onClick={() => onSet('clicked')}>Mock Component</div>;
-}
-
-function Component({propValue}) {
-  const [value, setValue] = useState(null);
-  useEffect(() => {
-    setValue(propValue);
-  }, [propValue]);
-
-  return <MockComponent onSet={setValue} />;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{propValue: 'test'}],
-};

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

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

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

@@ -1,18 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-function Component({value}) {
-  const [localValue, setLocalValue] = useState('');
-
-  useEffect(() => {
-    setLocalValue(value);
-    document.title = `Value: ${value}`;
-  }, [value]);
-
-  return <div>{localValue}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{value: 'test'}],
-};

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

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

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

@@ -1,19 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState, useRef} from 'react';
-
-export default function Component({test}) {
-  const [local, setLocal] = useState('');
-
-  const myRef = useRef(null);
-
-  useEffect(() => {
-    setLocal(myRef.current + test);
-  }, [test]);
-
-  return <>{local}</>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{test: 'testString'}],
-};

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

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

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

@@ -1,22 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-function Component({propValue}) {
-  const [value, setValue] = useState(null);
-
-  function localFunction() {
-    console.log('local function');
-  }
-
-  useEffect(() => {
-    setValue(propValue);
-    localFunction();
-  }, [propValue]);
-
-  return <div>{value}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{propValue: 'test'}],
-};

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

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

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

@@ -1,17 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-function Component({propValue, onChange}) {
-  const [value, setValue] = useState(null);
-  useEffect(() => {
-    setValue(propValue);
-    onChange();
-  }, [propValue]);
-
-  return <div>{value}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{propValue: 'test', onChange: () => {}}],
-};

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

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

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

@@ -1,10 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-function Component({prop}) {
-  const [s, setS] = useState(0);
-  useEffect(() => {
-    setS(prop);
-  }, [prop, setS]);
-
-  return <div>{prop}</div>;
-}

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

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

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

@@ -1,21 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-import {useEffect, useState} from 'react';
-
-function Component(file: File) {
-  const [imageUrl, setImageUrl] = useState(null);
-
-  /*
-   * Cleaning up the variable or a source of the variable used to setState
-   * inside the effect communicates that we always need to clean up something
-   * which is a valid use case for useEffect. In which case we want to
-   * avoid an throwing
-   */
-  useEffect(() => {
-    const imageUrlPrepared = URL.createObjectURL(file);
-    setImageUrl(imageUrlPrepared);
-    return () => URL.revokeObjectURL(imageUrlPrepared);
-  }, [file]);
-
-  return <Image src={imageUrl} xstyle={styles.imageSizeLimits} />;
-}

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

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

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

@@ -1,17 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-function Component({propValue}) {
-  const [value, setValue] = useState(null);
-  useEffect(() => {
-    setValue(propValue);
-    globalCall();
-  }, [propValue]);
-
-  return <div>{value}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{propValue: 'test'}],
-};

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

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

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

@@ -1,9 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @enableTreatSetIdentifiersAsStateSetters @loggerTestOnly
-
-function Component({setParentState, prop}) {
-  useEffect(() => {
-    setParentState(prop);
-  }, [prop]);
-
-  return <div>{prop}</div>;
-}

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

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

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

@@ -1,20 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-function Component() {
-  const [firstName, setFirstName] = useState('Taylor');
-  const lastName = 'Swift';
-
-  // 🔴 Avoid: redundant state and unnecessary Effect
-  const [fullName, setFullName] = useState('');
-  useEffect(() => {
-    setFullName(firstName + ' ' + lastName);
-  }, [firstName, lastName]);
-
-  return <div>{fullName}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [],
-};

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

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

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

@@ -1,18 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-export default function Component(props) {
-  const [displayValue, setDisplayValue] = useState('');
-
-  useEffect(() => {
-    const computed = props.prefix + props.value + props.suffix;
-    setDisplayValue(computed);
-  }, [props.prefix, props.value, props.suffix]);
-
-  return <div>{displayValue}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{prefix: '[', value: 'test', suffix: ']'}],
-};

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

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

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

@@ -1,19 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState} from 'react';
-
-export default function Component({props}) {
-  const [fullName, setFullName] = useState(
-    props.firstName + ' ' + props.lastName
-  );
-
-  useEffect(() => {
-    setFullName(props.firstName + ' ' + props.lastName);
-  }, [props.firstName, props.lastName]);
-
-  return <div>{fullName}</div>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{props: {firstName: 'John', lastName: 'Doe'}}],
-};

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

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

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

@@ -1,23 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-import {useEffect, useState, useRef} from 'react';
-
-export default function Component({test}) {
-  const [local, setLocal] = useState(0);
-
-  const myRef = useRef(null);
-
-  useEffect(() => {
-    if (myRef.current) {
-      setLocal(test);
-    } else {
-      setLocal(test + test);
-    }
-  }, [test]);
-
-  return <>{local}</>;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{test: 4}],
-};

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

@@ -1,71 +0,0 @@
-
-## Input
-
-```javascript
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-function Component({prop}) {
-  const [s, setS] = useState();
-  const [second, setSecond] = useState(prop);
-
-  /*
-   * `second` is a source of state. It will inherit the value of `prop` in
-   * the first render, but after that it will no longer be updated when
-   * `prop` changes. So we shouldn't consider `second` as being derived from
-   * `prop`
-   */
-  useEffect(() => {
-    setS(second);
-  }, [second]);
-
-  return <div>{s}</div>;
-}
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime"; // @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-function Component(t0) {
-  const $ = _c(5);
-  const { prop } = t0;
-  const [s, setS] = useState();
-  const [second] = useState(prop);
-  let t1;
-  let t2;
-  if ($[0] !== second) {
-    t1 = () => {
-      setS(second);
-    };
-    t2 = [second];
-    $[0] = second;
-    $[1] = t1;
-    $[2] = t2;
-  } else {
-    t1 = $[1];
-    t2 = $[2];
-  }
-  useEffect(t1, t2);
-  let t3;
-  if ($[3] !== s) {
-    t3 = <div>{s}</div>;
-    $[3] = s;
-    $[4] = t3;
-  } else {
-    t3 = $[4];
-  }
-  return t3;
-}
-
-```
-
-## Logs
-
-```
-{"kind":"CompileSuccess","fnLoc":{"start":{"line":3,"column":0,"index":64},"end":{"line":18,"column":1,"index":500},"filename":"usestate-derived-from-prop-no-show-in-data-flow-tree.ts"},"fnName":"Component","memoSlots":5,"memoBlocks":2,"memoValues":3,"prunedMemoBlocks":0,"prunedMemoValues":0}
-```
-      
-### Eval output
-(kind: exception) Fixture not implemented

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

@@ -1,18 +0,0 @@
-// @validateNoDerivedComputationsInEffects_exp @loggerTestOnly
-
-function Component({prop}) {
-  const [s, setS] = useState();
-  const [second, setSecond] = useState(prop);
-
-  /*
-   * `second` is a source of state. It will inherit the value of `prop` in
-   * the first render, but after that it will no longer be updated when
-   * `prop` changes. So we shouldn't consider `second` as being derived from
-   * `prop`
-   */
-  useEffect(() => {
-    setS(second);
-  }, [second]);
-
-  return <div>{s}</div>;
-}

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

@@ -3,8 +3,6 @@
 
 ```javascript
 // @validateNoDerivedComputationsInEffects
-import {useEffect, useState} from 'react';
-
 function BadExample() {
   const [firstName, setFirstName] = useState('Taylor');
   const [lastName, setLastName] = useState('Swift');
@@ -12,7 +10,7 @@ function BadExample() {
   // 🔴 Avoid: redundant state and unnecessary Effect
   const [fullName, setFullName] = useState('');
   useEffect(() => {
-    setFullName(firstName + ' ' + lastName);
+    setFullName(capitalize(firstName + ' ' + lastName));
   }, [firstName, lastName]);
 
   return <div>{fullName}</div>;
@@ -28,14 +26,14 @@ Found 1 error:
 
 Error: Values derived from props and state should be calculated during render, not in an effect. (https://react.dev/learn/you-might-not-need-an-effect#updating-state-based-on-props-or-state)
 
-error.invalid-derived-computation-in-effect.ts:11:4
-   9 |   const [fullName, setFullName] = useState('');
-  10 |   useEffect(() => {
-> 11 |     setFullName(firstName + ' ' + lastName);
+error.invalid-derived-computation-in-effect.ts:9:4
+   7 |   const [fullName, setFullName] = useState('');
+   8 |   useEffect(() => {
+>  9 |     setFullName(capitalize(firstName + ' ' + lastName));
      |     ^^^^^^^^^^^ 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)
-  12 |   }, [firstName, lastName]);
-  13 |
-  14 |   return <div>{fullName}</div>;
+  10 |   }, [firstName, lastName]);
+  11 |
+  12 |   return <div>{fullName}</div>;
 ```
           
       

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

@@ -1,6 +1,4 @@
 // @validateNoDerivedComputationsInEffects
-import {useEffect, useState} from 'react';
-
 function BadExample() {
   const [firstName, setFirstName] = useState('Taylor');
   const [lastName, setLastName] = useState('Swift');
@@ -8,7 +6,7 @@ function BadExample() {
   // 🔴 Avoid: redundant state and unnecessary Effect
   const [fullName, setFullName] = useState('');
   useEffect(() => {
-    setFullName(firstName + ' ' + lastName);
+    setFullName(capitalize(firstName + ' ' + lastName));
   }, [firstName, lastName]);
 
   return <div>{fullName}</div>;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.expect.md

@@ -1,38 +0,0 @@
-
-## Input
-
-```javascript
-function Component() {
-  let x;
-  const y = useMemo(() => {
-    let z;
-    x = [];
-    z = true;
-    return z;
-  }, []);
-  return [x, y];
-}
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: useMemo() callbacks may not reassign variables declared outside of the callback
-
-useMemo() callbacks must be pure functions and cannot reassign variables defined outside of the callback function.
-
-error.invalid-reassign-variable-in-usememo.ts:5:4
-  3 |   const y = useMemo(() => {
-  4 |     let z;
-> 5 |     x = [];
-    |     ^ Cannot reassign variable
-  6 |     z = true;
-  7 |     return z;
-  8 |   }, []);
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-reassign-variable-in-usememo.js

@@ -1,10 +0,0 @@
-function Component() {
-  let x;
-  const y = useMemo(() => {
-    let z;
-    x = [];
-    z = true;
-    return z;
-  }, []);
-  return [x, y];
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.invalid-uncalled-function-capturing-mutable-values-memoizes-with-captures-values.expect.md

@@ -60,7 +60,29 @@ This argument is a function which may reassign or mutate `cache` after render, w
 > 22 |     // The original issue is that `cache` was not memoized together with the returned
      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 > 23 |     // function. This was because neither appears to ever be mutated — the function
-     …
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 24 |     // is known to mutate `cache` but the function isn't called.
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 25 |     //
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 26 |     // The fix is to detect cases like this — functions that are mutable but not called -
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 27 |     // and ensure that their mutable captures are aliased together into the same scope.
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 28 |     const cache = new WeakMap<TInput, TOutput>();
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 29 |     return input => {
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 30 |       let output = cache.get(input);
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 31 |       if (output == null) {
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 32 |         output = map(input);
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 33 |         cache.set(input, output);
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 34 |       }
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 > 35 |       return output;
      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 > 36 |     };

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-custom-component-event-handler-wrapper.expect.md

@@ -1,69 +0,0 @@
-
-## Input
-
-```javascript
-// @enableInferEventHandlers
-import {useRef} from 'react';
-
-// Simulates a custom component wrapper
-function CustomForm({onSubmit, children}: any) {
-  return <form onSubmit={onSubmit}>{children}</form>;
-}
-
-// Simulates react-hook-form's handleSubmit
-function handleSubmit<T>(callback: (data: T) => void) {
-  return (event: any) => {
-    event.preventDefault();
-    callback({} as T);
-  };
-}
-
-function Component() {
-  const ref = useRef<HTMLInputElement>(null);
-
-  const onSubmit = (data: any) => {
-    // This should error: passing function with ref access to custom component
-    // event handler, even though it would be safe on a native <form>
-    if (ref.current !== null) {
-      console.log(ref.current.value);
-    }
-  };
-
-  return (
-    <>
-      <input ref={ref} />
-      <CustomForm onSubmit={handleSubmit(onSubmit)}>
-        <button type="submit">Submit</button>
-      </CustomForm>
-    </>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-error.ref-value-in-custom-component-event-handler-wrapper.ts:31:41
-  29 |     <>
-  30 |       <input ref={ref} />
-> 31 |       <CustomForm onSubmit={handleSubmit(onSubmit)}>
-     |                                          ^^^^^^^^ Passing a ref to a function may read its value during render
-  32 |         <button type="submit">Submit</button>
-  33 |       </CustomForm>
-  34 |     </>
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-custom-component-event-handler-wrapper.tsx

@@ -1,41 +0,0 @@
-// @enableInferEventHandlers
-import {useRef} from 'react';
-
-// Simulates a custom component wrapper
-function CustomForm({onSubmit, children}: any) {
-  return <form onSubmit={onSubmit}>{children}</form>;
-}
-
-// Simulates react-hook-form's handleSubmit
-function handleSubmit<T>(callback: (data: T) => void) {
-  return (event: any) => {
-    event.preventDefault();
-    callback({} as T);
-  };
-}
-
-function Component() {
-  const ref = useRef<HTMLInputElement>(null);
-
-  const onSubmit = (data: any) => {
-    // This should error: passing function with ref access to custom component
-    // event handler, even though it would be safe on a native <form>
-    if (ref.current !== null) {
-      console.log(ref.current.value);
-    }
-  };
-
-  return (
-    <>
-      <input ref={ref} />
-      <CustomForm onSubmit={handleSubmit(onSubmit)}>
-        <button type="submit">Submit</button>
-      </CustomForm>
-    </>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};

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

@@ -1,55 +0,0 @@
-
-## Input
-
-```javascript
-// @enableInferEventHandlers
-import {useRef} from 'react';
-
-// Simulates a handler wrapper
-function handleClick(value: any) {
-  return () => {
-    console.log(value);
-  };
-}
-
-function Component() {
-  const ref = useRef(null);
-
-  // This should still error: passing ref.current directly to a wrapper
-  // The ref value is accessed during render, not in the event handler
-  return (
-    <>
-      <input ref={ref} />
-      <button onClick={handleClick(ref.current)}>Click</button>
-    </>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};
-
-```
-
-
-## Error
-
-```
-Found 1 error:
-
-Error: Cannot access refs during render
-
-React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
-
-error.ref-value-in-event-handler-wrapper.ts:19:35
-  17 |     <>
-  18 |       <input ref={ref} />
-> 19 |       <button onClick={handleClick(ref.current)}>Click</button>
-     |                                    ^^^^^^^^^^^ Cannot access ref value during render
-  20 |     </>
-  21 |   );
-  22 | }
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.ref-value-in-event-handler-wrapper.tsx

@@ -1,27 +0,0 @@
-// @enableInferEventHandlers
-import {useRef} from 'react';
-
-// Simulates a handler wrapper
-function handleClick(value: any) {
-  return () => {
-    console.log(value);
-  };
-}
-
-function Component() {
-  const ref = useRef(null);
-
-  // This should still error: passing ref.current directly to a wrapper
-  // The ref value is accessed during render, not in the event handler
-  return (
-    <>
-      <input ref={ref} />
-      <button onClick={handleClick(ref.current)}>Click</button>
-    </>
-  );
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Component,
-  params: [{}],
-};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-missing-source-locations.expect.md

@@ -1,224 +0,0 @@
-
-## Input
-
-```javascript
-// @validateSourceLocations
-import {useEffect, useCallback} from 'react';
-
-function Component({prop1, prop2}) {
-  const x = prop1 + prop2;
-  const y = x * 2;
-  const arr = [x, y];
-  const obj = {x, y};
-  const [a, b] = arr;
-  const {x: c, y: d} = obj;
-
-  useEffect(() => {
-    if (a > 10) {
-      console.log(a);
-    }
-  }, [a]);
-
-  const foo = useCallback(() => {
-    return a + b;
-  }, [a, b]);
-
-  function bar() {
-    return (c + d) * 2;
-  }
-
-  console.log('Hello, world!');
-
-  return [y, foo, bar];
-}
-
-```
-
-
-## Error
-
-```
-Found 13 errors:
-
-Todo: Important source location missing in generated code
-
-Source location for VariableDeclarator is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:5:8
-  3 |
-  4 | function Component({prop1, prop2}) {
-> 5 |   const x = prop1 + prop2;
-    |         ^^^^^^^^^^^^^^^^^
-  6 |   const y = x * 2;
-  7 |   const arr = [x, y];
-  8 |   const obj = {x, y};
-
-Todo: Important source location missing in generated code
-
-Source location for VariableDeclarator is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:6:8
-  4 | function Component({prop1, prop2}) {
-  5 |   const x = prop1 + prop2;
-> 6 |   const y = x * 2;
-    |         ^^^^^^^^^
-  7 |   const arr = [x, y];
-  8 |   const obj = {x, y};
-  9 |   const [a, b] = arr;
-
-Todo: Important source location missing in generated code
-
-Source location for VariableDeclarator is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:7:8
-   5 |   const x = prop1 + prop2;
-   6 |   const y = x * 2;
->  7 |   const arr = [x, y];
-     |         ^^^^^^^^^^^^
-   8 |   const obj = {x, y};
-   9 |   const [a, b] = arr;
-  10 |   const {x: c, y: d} = obj;
-
-Todo: Important source location missing in generated code
-
-Source location for VariableDeclarator is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:8:8
-   6 |   const y = x * 2;
-   7 |   const arr = [x, y];
->  8 |   const obj = {x, y};
-     |         ^^^^^^^^^^^^
-   9 |   const [a, b] = arr;
-  10 |   const {x: c, y: d} = obj;
-  11 |
-
-Todo: Important source location missing in generated code
-
-Source location for VariableDeclarator is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:9:8
-   7 |   const arr = [x, y];
-   8 |   const obj = {x, y};
->  9 |   const [a, b] = arr;
-     |         ^^^^^^^^^^^^
-  10 |   const {x: c, y: d} = obj;
-  11 |
-  12 |   useEffect(() => {
-
-Todo: Important source location missing in generated code
-
-Source location for VariableDeclarator is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:10:8
-   8 |   const obj = {x, y};
-   9 |   const [a, b] = arr;
-> 10 |   const {x: c, y: d} = obj;
-     |         ^^^^^^^^^^^^^^^^^^
-  11 |
-  12 |   useEffect(() => {
-  13 |     if (a > 10) {
-
-Todo: Important source location missing in generated code
-
-Source location for ExpressionStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:12:2
-  10 |   const {x: c, y: d} = obj;
-  11 |
-> 12 |   useEffect(() => {
-     |   ^^^^^^^^^^^^^^^^^
-> 13 |     if (a > 10) {
-     | ^^^^^^^^^^^^^^^^^
-> 14 |       console.log(a);
-     | ^^^^^^^^^^^^^^^^^
-> 15 |     }
-     | ^^^^^^^^^^^^^^^^^
-> 16 |   }, [a]);
-     | ^^^^^^^^^^^
-  17 |
-  18 |   const foo = useCallback(() => {
-  19 |     return a + b;
-
-Todo: Important source location missing in generated code
-
-Source location for ExpressionStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:14:6
-  12 |   useEffect(() => {
-  13 |     if (a > 10) {
-> 14 |       console.log(a);
-     |       ^^^^^^^^^^^^^^^
-  15 |     }
-  16 |   }, [a]);
-  17 |
-
-Todo: Important source location missing in generated code
-
-Source location for VariableDeclarator is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:18:8
-  16 |   }, [a]);
-  17 |
-> 18 |   const foo = useCallback(() => {
-     |         ^^^^^^^^^^^^^^^^^^^^^^^^^
-> 19 |     return a + b;
-     | ^^^^^^^^^^^^^^^^^
-> 20 |   }, [a, b]);
-     | ^^^^^^^^^^^^^
-  21 |
-  22 |   function bar() {
-  23 |     return (c + d) * 2;
-
-Todo: Important source location missing in generated code
-
-Source location for ReturnStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:19:4
-  17 |
-  18 |   const foo = useCallback(() => {
-> 19 |     return a + b;
-     |     ^^^^^^^^^^^^^
-  20 |   }, [a, b]);
-  21 |
-  22 |   function bar() {
-
-Todo: Important source location missing in generated code
-
-Source location for ReturnStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:23:4
-  21 |
-  22 |   function bar() {
-> 23 |     return (c + d) * 2;
-     |     ^^^^^^^^^^^^^^^^^^^
-  24 |   }
-  25 |
-  26 |   console.log('Hello, world!');
-
-Todo: Important source location missing in generated code
-
-Source location for ExpressionStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:26:2
-  24 |   }
-  25 |
-> 26 |   console.log('Hello, world!');
-     |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-  27 |
-  28 |   return [y, foo, bar];
-  29 | }
-
-Todo: Important source location missing in generated code
-
-Source location for ReturnStatement is missing in the generated output. This can cause coverage instrumentation to fail to track this code properly, resulting in inaccurate coverage reports..
-
-error.todo-missing-source-locations.ts:28:2
-  26 |   console.log('Hello, world!');
-  27 |
-> 28 |   return [y, foo, bar];
-     |   ^^^^^^^^^^^^^^^^^^^^^
-  29 | }
-  30 |
-```
-          
-      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-missing-source-locations.js

@@ -1,29 +0,0 @@
-// @validateSourceLocations
-import {useEffect, useCallback} from 'react';
-
-function Component({prop1, prop2}) {
-  const x = prop1 + prop2;
-  const y = x * 2;
-  const arr = [x, y];
-  const obj = {x, y};
-  const [a, b] = arr;
-  const {x: c, y: d} = obj;
-
-  useEffect(() => {
-    if (a > 10) {
-      console.log(a);
-    }
-  }, [a]);
-
-  const foo = useCallback(() => {
-    return a + b;
-  }, [a, b]);
-
-  function bar() {
-    return (c + d) * 2;
-  }
-
-  console.log('Hello, world!');
-
-  return [y, foo, bar];
-}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr.expect.md

@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+import {identity, mutate, mutateAndReturn} from 'shared-runtime';
+
+function Component(props) {
+  const key = {};
+  const context = {
+    [(mutate(key), key)]: identity([props.value]),
+  };
+  mutate(key);
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: (BuildHIR::lowerExpression) Expected Identifier, got SequenceExpression key in ObjectExpression
+
+error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr.ts:6:6
+  4 |   const key = {};
+  5 |   const context = {
+> 6 |     [(mutate(key), key)]: identity([props.value]),
+    |       ^^^^^^^^^^^^^^^^ (BuildHIR::lowerExpression) Expected Identifier, got SequenceExpression key in ObjectExpression
+  7 |   };
+  8 |   mutate(key);
+  9 |   return context;
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction-sequence-expr.js

@@ -6,11 +6,10 @@ function Component(props) {
     [(mutate(key), key)]: identity([props.value]),
   };
   mutate(key);
-  return [context, key];
+  return context;
 }
 
 export const FIXTURE_ENTRYPOINT = {
   fn: Component,
   params: [{value: 42}],
-  sequentialRenders: [{value: 42}, {value: 42}],
 };

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction.expect.md

@@ -0,0 +1,41 @@
+
+## Input
+
+```javascript
+import {identity, mutate, mutateAndReturn} from 'shared-runtime';
+
+function Component(props) {
+  const key = {};
+  const context = {
+    [mutateAndReturn(key)]: identity([props.value]),
+  };
+  mutate(key);
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: (BuildHIR::lowerExpression) Expected Identifier, got CallExpression key in ObjectExpression
+
+error.todo-object-expression-computed-key-modified-during-after-construction.ts:6:5
+  4 |   const key = {};
+  5 |   const context = {
+> 6 |     [mutateAndReturn(key)]: identity([props.value]),
+    |      ^^^^^^^^^^^^^^^^^^^^ (BuildHIR::lowerExpression) Expected Identifier, got CallExpression key in ObjectExpression
+  7 |   };
+  8 |   mutate(key);
+  9 |   return context;
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-modified-during-after-construction.js

@@ -12,5 +12,4 @@ function Component(props) {
 export const FIXTURE_ENTRYPOINT = {
   fn: Component,
   params: [{value: 42}],
-  sequentialRenders: [{value: 42}, {value: 42}],
 };

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-computed-key-mutate-key-while-constructing-object.expect.md

@@ -0,0 +1,40 @@
+
+## Input
+
+```javascript
+import {identity, mutate, mutateAndReturn} from 'shared-runtime';
+
+function Component(props) {
+  const key = {};
+  const context = {
+    [mutateAndReturn(key)]: identity([props.value]),
+  };
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: (BuildHIR::lowerExpression) Expected Identifier, got CallExpression key in ObjectExpression
+
+error.todo-object-expression-computed-key-mutate-key-while-constructing-object.ts:6:5
+  4 |   const key = {};
+  5 |   const context = {
+> 6 |     [mutateAndReturn(key)]: identity([props.value]),
+    |      ^^^^^^^^^^^^^^^^^^^^ (BuildHIR::lowerExpression) Expected Identifier, got CallExpression key in ObjectExpression
+  7 |   };
+  8 |   return context;
+  9 | }
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-object-expression-member-expr-call.expect.md

@@ -0,0 +1,42 @@
+
+## Input
+
+```javascript
+import {identity, mutate, mutateAndReturn} from 'shared-runtime';
+
+function Component(props) {
+  const obj = {mutateAndReturn};
+  const key = {};
+  const context = {
+    [obj.mutateAndReturn(key)]: identity([props.value]),
+  };
+  mutate(key);
+  return context;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42}],
+};
+
+```
+
+
+## Error
+
+```
+Found 1 error:
+
+Todo: (BuildHIR::lowerExpression) Expected Identifier, got CallExpression key in ObjectExpression
+
+error.todo-object-expression-member-expr-call.ts:7:5
+   5 |   const key = {};
+   6 |   const context = {
+>  7 |     [obj.mutateAndReturn(key)]: identity([props.value]),
+     |      ^^^^^^^^^^^^^^^^^^^^^^^^ (BuildHIR::lowerExpression) Expected Identifier, got CallExpression key in ObjectExpression
+   8 |   };
+   9 |   mutate(key);
+  10 |   return context;
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.expect.md

@@ -64,7 +64,20 @@ error.todo-preserve-memo-deps-mixed-optional-nonoptional-property-chain.ts:7:25
 >  8 |     return identity({
      | ^^^^^^^^^^^^^^^^^^^^^
 >  9 |       callback: () => {
-     …
+     | ^^^^^^^^^^^^^^^^^^^^^
+> 10 |         // This is a bug in our dependency inference: we stop capturing dependencies
+     | ^^^^^^^^^^^^^^^^^^^^^
+> 11 |         // after x.a.b?.c. But what this dependency is telling us is that if `x.a.b`
+     | ^^^^^^^^^^^^^^^^^^^^^
+> 12 |         // was non-nullish, then we can access `.c.d?.e`. Thus we should take the
+     | ^^^^^^^^^^^^^^^^^^^^^
+> 13 |         // full property chain, exactly as-is with optionals/non-optionals, as a
+     | ^^^^^^^^^^^^^^^^^^^^^
+> 14 |         // dependency
+     | ^^^^^^^^^^^^^^^^^^^^^
+> 15 |         return identity(x.a.b?.c.d?.e);
+     | ^^^^^^^^^^^^^^^^^^^^^
+> 16 |       },
      | ^^^^^^^^^^^^^^^^^^^^^
 > 17 |     });
      | ^^^^^^^^^^^^^^^^^^^^^

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.expect.md

@@ -0,0 +1,64 @@
+
+## Input
+
+```javascript
+// @validateNoVoidUseMemo
+function Component() {
+  const value = useMemo(() => {
+    console.log('computing');
+  }, []);
+  const value2 = React.useMemo(() => {
+    console.log('computing');
+  }, []);
+  return (
+    <div>
+      {value}
+      {value2}
+    </div>
+  );
+}
+
+```
+
+
+## Error
+
+```
+Found 2 errors:
+
+Error: useMemo() callbacks must return a value
+
+This useMemo callback doesn't return a value. useMemo is for computing and caching values, not for arbitrary side effects.
+
+error.useMemo-no-return-value.ts:3:16
+  1 | // @validateNoVoidUseMemo
+  2 | function Component() {
+> 3 |   const value = useMemo(() => {
+    |                 ^^^^^^^^^^^^^^^
+> 4 |     console.log('computing');
+    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+> 5 |   }, []);
+    | ^^^^^^^^^ useMemo() callbacks must return a value
+  6 |   const value2 = React.useMemo(() => {
+  7 |     console.log('computing');
+  8 |   }, []);
+
+Error: useMemo() callbacks must return a value
+
+This React.useMemo callback doesn't return a value. useMemo is for computing and caching values, not for arbitrary side effects.
+
+error.useMemo-no-return-value.ts:6:17
+   4 |     console.log('computing');
+   5 |   }, []);
+>  6 |   const value2 = React.useMemo(() => {
+     |                  ^^^^^^^^^^^^^^^^^^^^^
+>  7 |     console.log('computing');
+     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+>  8 |   }, []);
+     | ^^^^^^^^^ useMemo() callbacks must return a value
+   9 |   return (
+  10 |     <div>
+  11 |       {value}
+```
+          
+      

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.useMemo-no-return-value.js

@@ -1,4 +1,4 @@
-// @validateNoVoidUseMemo @loggerTestOnly
+// @validateNoVoidUseMemo
 function Component() {
   const value = useMemo(() => {
     console.log('computing');

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-leading-whitespace.expect.md

@@ -44,23 +44,15 @@ import fbt from "fbt";
 import { identity } from "shared-runtime";
 
 function Component(props) {
-  const $ = _c(5);
+  const $ = _c(3);
   let t0;
   if ($[0] !== props.count || $[1] !== props.option) {
-    let t1;
-    if ($[3] !== props.count) {
-      t1 = identity(props.count);
-      $[3] = props.count;
-      $[4] = t1;
-    } else {
-      t1 = $[4];
-    }
     t0 = (
       <span>
         {fbt._(
           { "*": "{count} votes for {option}", _1: "1 vote for {option}" },
           [
-            fbt._plural(t1, "count"),
+            fbt._plural(identity(props.count), "count"),
             fbt._param(
               "option",
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-param-with-trailing-whitespace.expect.md

@@ -44,23 +44,15 @@ import fbt from "fbt";
 import { identity } from "shared-runtime";
 
 function Component(props) {
-  const $ = _c(5);
+  const $ = _c(3);
   let t0;
   if ($[0] !== props.count || $[1] !== props.option) {
-    let t1;
-    if ($[3] !== props.count) {
-      t1 = identity(props.count);
-      $[3] = props.count;
-      $[4] = t1;
-    } else {
-      t1 = $[4];
-    }
     t0 = (
       <span>
         {fbt._(
           { "*": "{count} votes for {option}", _1: "1 vote for {option}" },
           [
-            fbt._plural(t1, "count"),
+            fbt._plural(identity(props.count), "count"),
             fbt._param(
               "option",
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbt-preserve-whitespace-two-subtrees.expect.md

@@ -37,7 +37,7 @@ import { c as _c } from "react/compiler-runtime";
 import fbt from "fbt";
 
 function Foo(t0) {
-  const $ = _c(13);
+  const $ = _c(7);
   const { name1, name2 } = t0;
   let t1;
   if ($[0] !== name1 || $[1] !== name2) {
@@ -50,34 +50,19 @@ function Foo(t0) {
       t2 = $[4];
     }
     let t3;
-    if ($[5] !== name1 || $[6] !== t2) {
-      t3 = <span key={name1}>{t2}</span>;
-      $[5] = name1;
-      $[6] = t2;
-      $[7] = t3;
+    if ($[5] !== name2) {
+      t3 = <b>{name2}</b>;
+      $[5] = name2;
+      $[6] = t3;
     } else {
-      t3 = $[7];
-    }
-    let t4;
-    if ($[8] !== name2) {
-      t4 = <b>{name2}</b>;
-      $[8] = name2;
-      $[9] = t4;
-    } else {
-      t4 = $[9];
-    }
-    let t5;
-    if ($[10] !== name2 || $[11] !== t4) {
-      t5 = <span key={name2}>{t4}</span>;
-      $[10] = name2;
-      $[11] = t4;
-      $[12] = t5;
-    } else {
-      t5 = $[12];
+      t3 = $[6];
     }
     t1 = fbt._(
       "{user1} and {user2} accepted your PR!",
-      [fbt._param("user1", t3), fbt._param("user2", t5)],
+      [
+        fbt._param("user1", <span key={name1}>{t2}</span>),
+        fbt._param("user2", <span key={name2}>{t3}</span>),
+      ],
       { hk: "2PxMie" },
     );
     $[0] = name1;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-element-content.expect.md

@@ -29,24 +29,20 @@ import { c as _c } from "react/compiler-runtime";
 import fbt from "fbt";
 
 function Component(t0) {
-  const $ = _c(6);
+  const $ = _c(4);
   const { name, data, icon } = t0;
   let t1;
   if ($[0] !== data || $[1] !== icon || $[2] !== name) {
-    let t2;
-    if ($[4] !== name) {
-      t2 = <Text type="h4">{name}</Text>;
-      $[4] = name;
-      $[5] = t2;
-    } else {
-      t2 = $[5];
-    }
     t1 = (
       <Text type="body4">
         {fbt._(
           "{item author}{icon}{=m2}",
           [
-            fbt._param("item author", t2),
+            fbt._param(
+              "item author",
+
+              <Text type="h4">{name}</Text>,
+            ),
             fbt._param(
               "icon",
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/fbtparam-with-jsx-fragment-value.expect.md

@@ -27,21 +27,16 @@ import fbt from "fbt";
 import { identity } from "shared-runtime";
 
 function Component(props) {
-  const $ = _c(4);
+  const $ = _c(2);
   let t0;
   if ($[0] !== props.text) {
-    const t1 = identity(props.text);
-    let t2;
-    if ($[2] !== t1) {
-      t2 = <>{t1}</>;
-      $[2] = t1;
-      $[3] = t2;
-    } else {
-      t2 = $[3];
-    }
     t0 = (
       <Foo
-        value={fbt._("{value}%", [fbt._param("value", t2)], { hk: "10F5Cc" })}
+        value={fbt._(
+          "{value}%",
+          [fbt._param("value", <>{identity(props.text)}</>)],
+          { hk: "10F5Cc" },
+        )}
       />
     );
     $[0] = props.text;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/fbt/recursively-merge-scopes-jsx.expect.md

@@ -1,109 +0,0 @@
-
-## Input
-
-```javascript
-// @flow
-import {fbt} from 'fbt';
-
-function Example({x}) {
-  // "Inner Text" needs to be visible to fbt: the <Bar> element cannot
-  // be memoized separately
-  return (
-    <fbt desc="Description">
-      Outer Text
-      <Foo key="b" x={x}>
-        <Bar key="a">Inner Text</Bar>
-      </Foo>
-    </fbt>
-  );
-}
-
-function Foo({x, children}) {
-  'use no memo';
-  return (
-    <>
-      <div>{x}</div>
-      <span>{children}</span>
-    </>
-  );
-}
-
-function Bar({children}) {
-  'use no memo';
-  return children;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Example,
-  params: [{x: 'Hello'}],
-};
-
-```
-
-## Code
-
-```javascript
-import { c as _c } from "react/compiler-runtime";
-import { fbt } from "fbt";
-
-function Example(t0) {
-  const $ = _c(2);
-  const { x } = t0;
-  let t1;
-  if ($[0] !== x) {
-    t1 = fbt._(
-      "Outer Text {=m1}",
-      [
-        fbt._implicitParam(
-          "=m1",
-
-          <Foo key="b" x={x}>
-            {fbt._(
-              "{=m1}",
-              [
-                fbt._implicitParam(
-                  "=m1",
-                  <Bar key="a">
-                    {fbt._("Inner Text", null, { hk: "32YB0l" })}
-                  </Bar>,
-                ),
-              ],
-              { hk: "23dJsI" },
-            )}
-          </Foo>,
-        ),
-      ],
-      { hk: "2RVA7V" },
-    );
-    $[0] = x;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  return t1;
-}
-
-function Foo({ x, children }) {
-  "use no memo";
-  return (
-    <>
-      <div>{x}</div>
-      <span>{children}</span>
-    </>
-  );
-}
-
-function Bar({ children }) {
-  "use no memo";
-  return children;
-}
-
-export const FIXTURE_ENTRYPOINT = {
-  fn: Example,
-  params: [{ x: "Hello" }],
-};
-
-```
-      
-### Eval output
-(kind: ok) Outer Text <div>Hello</div><span>Inner Text</span>