react-is known bugs

I'm experiencing an iOS-only crash (iOS 26.1) when there's `ViewTransition` with `enter` and another with `exit`: ```js import { Suspense, use } from "react"; import { ViewTransition } from "react"; import "./App.css"; const promise = new Promise((r) => setTimeout(() => r("Done"), 3000)); function Content() { return <div>{use(promise)}</div>; } export default function App() { return ( <Suspense fallback={ <ViewTransition exit="vt-reveal"> <div>Loading...</div> </ViewTransition> } > <ViewTransition enter="vt-reveal"> <Content /> </ViewTransition> </Suspense> ); } ``` ```css ::view-transition-old(.vt-reveal) { animation: 300ms ease-out both vt-out; } ::view-transition-new(.vt-reveal) { animation: 300ms ease-out both vt-in; } @keyframes vt-out { to { opacity: 0; } } @keyframes vt-in { from { opacity: 0; } } ``` This is a hard crash, meaning the browser tab literally dies. Sandbox: https://codesandbox.io/p/sandbox/gns365?file=%2Fsrc%2FApp.js

### What kind of issue is this? - [ ] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) - [ ] babel-plugin-react-compiler (build issue installing or using the Babel plugin) - [x] eslint-plugin-react-hooks (build issue installing or using the eslint plugin) - [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script) ### Link to repro https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAsgJ4DCEAtgA6EKY4AUtMEtYAlEcADrEiUMAgCiaNAlzNmPALwA+XgKKqiaCBFkBuFUQC+XXYID0J9VlwFiAEykAbAIYxH+QmCLOERBBKn4ANwR7Mk8cIhwAC28cDiIINAjoojA4DgQ9DGw3Yg0tHmADIj0YBBxYYkwoe3tjfQEQABoQNMw0PABzFBA8OggYcJwyWm9CgAV7KA68TAB5WhyPfXV2aiIAcgAjR03ggFpaSenMPdLHXD20ujx7BBgTGzwwHHXjAWZ+UxMr2hvXaxIEDsyGKIEcNT4IAEyzA-zA7QQHgmUxm80WRia4EiEAA7gBJJh3TDgsAoNAkhD6IA ### Repro steps eslint rule `react-hooks/immutability` ignores [function hoisting](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#function_hoisting). This ``` function MyComponent(props) { useEffect(() => { foo(); }); // function declarations are effectively at the top of the scope function foo() { } return null; } ``` should not cause error ``` Error: Cannot access variable before it is declared `foo` is accessed before it is declared, which prevents the earlier access from updating when this value changes over time. ``` ### How often does this bug happen? Every time ### What version of React are you using? 19.2 ### What version of React Compiler are you using? 1.0

### What kind of issue is this? - [x] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) - [ ] babel-plugin-react-compiler (build issue installing or using the Babel plugin) - [ ] eslint-plugin-react-hooks (build issue installing or using the eslint plugin) - [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script) ### Link to repro https://playground.react.dev/#N4lgzg9grgTgxgUxALhAejQAgLIILYQCWAXggCaYBGAnpgEolCGc ### Repro steps 1. Open the React Compiler Playground link: https://playground.react.dev/#N4lgzg9grgTgxgUxALhAejQAgLIILYQCWAXggCaYBGAnpgEolCGc 2. Observe the code that has a `const` declaration between React hooks 3. Check the compiled output - you'll see that memoization is not working correctly 4. The compiler should memoize values even when const is between hooks, but it currently doesn't ### How often does this bug happen? Every time ### What version of React are you using? Latest (React 19 or main branch) ### What version of React Compiler are you using? Latest babel-plugin-react-compiler from main branch

### Website or app npx react-devtools ### Repro steps I just run `npx react-devtools`, it recognise my app because does not appear the first page about how to connect it, but I always receive this error even have already checked my FlatList components (I am running React Native Expo development build). And if I close the error, it never loads my components. I receive a "Loading React Element Tree..." in looping. I have already tried `NODE_OPTIONS="--max-old-space-size=4096" react-devtools` but still the same error ### How often does this bug happen? Every time ### DevTools package (automated) react-devtools-core ### DevTools version (automated) 7.0.1-3cde211b0c ### Error message (automated) Children cannot be added or removed during a reorder operation. ### Error call stack (automated) ```text at /Users/mariaferreira/.nvm/versions/node/v24.6.0/lib/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:1:1124896 at f.emit (/Users/mariaferreira/.nvm/versions/node/v24.6.0/lib/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:1:1055367) at /Users/mariaferreira/.nvm/versions/node/v24.6.0/lib/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:1:1057098 at /Users/mariaferreira/.nvm/versions/node/v24.6.0/lib/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:1:1539281 at Array.forEach (<anonymous>) at KS.e.onmessage (/Users/mariaferreira/.nvm/versions/node/v24.6.0/lib/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:1:1539264) at T.s (/Users/mariaferreira/.nvm/versions/node/v24.6.0/lib/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:1:454936) at T.emit (node:events:513:28) at e.exports.B (/Users/mariaferreira/.nvm/versions/node/v24.6.0/lib/node_modules/react-devtools/node_modules/react-devtools-core/dist/standalone.js:1:489080) at e.exports.emit (node:events:513:28) ``` ### Error component stack (automated) ```text ``` ### GitHub query string (automated) ```text https://api.github.com/search/issues?q=Children cannot be added or removed during a reorder operation. in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react ```

### Website or app https://legacy.reactjs.org/versions/ ### Repro steps  ### How often does this bug happen? Every time ### DevTools package (automated) _No response_ ### DevTools version (automated) _No response_ ### Error message (automated) _No response_ ### Error call stack (automated) ```text ``` ### Error component stack (automated) ```text ``` ### GitHub query string (automated) ```text ```

### Website or app http://localhost:3000/en/p2p/purchaseOrders/purchase-order ### Repro steps http://localhost:3000/en/p2p/purchaseOrders/purchase-order ### How often does this bug happen? Every time ### DevTools package (automated) _No response_ ### DevTools version (automated) _No response_ ### Error message (automated) _No response_ ### Error call stack (automated) ```text ``` ### Error component stack (automated) ```text ``` ### GitHub query string (automated) ```text ```

### What kind of issue is this? - [x] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) - [ ] babel-plugin-react-compiler (build issue installing or using the Babel plugin) - [ ] eslint-plugin-react-hooks (build issue installing or using the eslint plugin) - [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script) ### Link to repro https://github.com/hnamekawa/movie-app ### Repro steps 1. Clone the repo 2. Run `npm run dev` The app works fine without any errors 3. Run `npm run build` The React compiler reports the errors shown below, and the app fails to load Description `src/types/Todo.ts` defines a `Todo` interface, and `src/App.tsx` imports and uses that interface. It seems that TypeScript interfaces are not being handled correctly during the build process. When `src/App.tsx` is transpiled, it makes sense that an error occurs because the Todo interface does not exist at runtime. However, `npm run dev` does not show any error, while `npm run build` does. This inconsistency between dev and build is the issue I want to report. `npm run build` error log detail ``` src/App.tsx:2:1 - error TS6133: 'TodoItem' is declared but its value is never read. 2 import { TodoItem } from "./types/Todo"; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/App.tsx:9:38 - error TS2304: Cannot find name 'Todo'. 9 const [todos, setTodos] = useState<Todo[]>([]); ~~~~ src/App.tsx:12:50 - error TS2304: Cannot find name 'Todo'. 12 const [editingTodo, setEditingTodo] = useState<Todo | null>(null); ~~~~ src/App.tsx:40:44 - error TS2304: Cannot find name 'Todo'. 40 const handleCreateOrUpdate = (data: Omit<Todo, "id">) => { ~~~~ src/App.tsx:52:22 - error TS2304: Cannot find name 'Todo'. 52 const newTodo: Todo = { ~~~~ src/components/TodoForm.tsx:2:1 - error TS6133: 'TodoItem' is declared but its value is never read. 2 import { TodoItem } from "../types/Todo"; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/components/TodoForm.tsx:5:25 - error TS2304: Cannot find name 'Todo'. 5 onSubmit: (todo: Omit<Todo, "id">) => void; // pass data to parent ~~~~ src/components/TodoForm.tsx:6:17 - error TS2304: Cannot find name 'Todo'. 6 editingTodo?: Todo | null; // editing ToDo ~~~~ src/components/TodoForm.tsx:12:40 - error TS2304: Cannot find name 'Todo'. 12 const [status, setStatus] = useState<Todo["status"]>("Open"); ~~~~ src/components/TodoList.tsx:2:1 - error TS6133: 'TodoItem' is declared but its value is never read. 2 import { TodoItem } from "../types/Todo"; ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/components/TodoList.tsx:5:10 - error TS2304: Cannot find name 'Todo'. 5 todos: Todo[]; // ToDo list to display ~~~~ src/components/TodoList.tsx:6:18 - error TS2304: Cannot find name 'Todo'. 6 onEdit: (todo: Todo) => void;// edit button clicked ~~~~ Found 12 errors. ``` ### How often does this bug happen? Every time ### What version of React are you using? 19.2.0 ### What version of React Compiler are you using? 1.0

### What kind of issue is this? - [ ] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) - [ ] babel-plugin-react-compiler (build issue installing or using the Babel plugin) - [ ] eslint-plugin-react-hooks (build issue installing or using the eslint plugin) - [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script) ### Link to repro bbxbdx ### Repro steps swwerwe ### How often does this bug happen? Every time ### What version of React are you using? rtah ### What version of React Compiler are you using? trh

### What kind of issue is this? - [ ] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) - [ ] babel-plugin-react-compiler (build issue installing or using the Babel plugin) - [ ] eslint-plugin-react-hooks (build issue installing or using the eslint plugin) - [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script) ### Link to repro https://playground.react.dev/#N4Igzg9grgTgxgUxALhAcimBACOAbASwQDsAXNAbgB1iaCBbABwhlO2GwEE8FWBhAvB4BJOBGIAabABkIAQwAmvAEzYAvtgBmMCPWxo8UOASUBaGAjlxy1Yg2at22TAgBK0UrykuAypfgAFgAKcjBy9GDqWjp6aMQIAB6kAPTEcgBuBADmcqQE4pR0TCxsHD6YjCRY3lg+pLk4Gtq6+hZWNkUOpdgA4hAQWTx8EHgsouJRzbEAAslixfFkYMkEYsTLWf2DCIV2xY4cwsQA1ggIjOPEkzH6s-PMi6TLq+LPJ2eMu-YlTty8pFI-qwACIIMBwGAERh5CZNG5oO66B4kJ7JKAEZJyHisL77boAISgpFIsOiLQRcyR4hRy3RyQARkSScRcV0nHxQgopByYAphmQUdzOaDwZDoflJNgeQoABKWJQwIW8gAqBFIPGu5MRCxpaIxcE5rJ+h2IjCJmpmlJ1Sz1K1NRKNBxkcnpCDwFtuVuRNrpeBdbsd3RcnCJAT4hBRHopa08SWWclDpnwRDIgacLiCEDApBlAyjiIFceSzGzAQGaY4LlcUDIDAQ-M02XzlMLqJgNby9AQSfEjayFewWQQpB8ck0bmHsGIAFUYHgpAQwAA1LEmVyTmAzufNwj0tF5PDxxMWBSCBDWXY0TQ16wSmQDAjEABiLHoAAoAJTsGjYXCvNg6ESvDYAAvM4WDuEBMCfrYv5rNm2BYKEcDBKE4SRGBvj+ChIRhBEME-n+6xsI+mT1DCxDCAooGIdhqF4WAAB0Q6kG+aCkWquQSmgH6wURCEWKQU6zu6YFIYEuHocxw5sYJwlzjxfHwWwCakGGEZkDRwahuGKasbxhHKU4QTTvi0jCHwAD6nDTsqMoAAyWcCADyACynDCAAclIJlmRZlk9M5zk9NIACill8OZoWecqlnCMCUSYRBHZ1g22QEVc-FsCWal5klCCZtmuZZBlhHJMkvTDtgak4Okq4KA01FyZu2DTq40haCw2A5aYoxZI+2Anme1jYG+LjUZoXUIPQcgEO6fWPh+hn-oOw7rqeFjWCJNGfsgiGkJCxBZKBAB836Zb+BCaKNHHkRKVFfsAhG-r+zVXAABpicCINCpi3Vx4jJAAJMA-0UVRajvXxv5qM9g0blcLGjuO65CZuIlvm9IlSGgySKYRai2GVFUvjA2DOSGalSAA7jg8QINRNVaFAeDum1HUkvDG3nmw9JWMc1UQNVAQ4NOwjE+TlMBNg9CYGwBqs3zcAC5zn3vaNZZdt1chDl+1MBKs0sBHIxAKDwkRM6p0v3DwFESwA6jgjByGAkRY3OdpkQDVwu9gACOUC8AAntrDGdWTPVW1zw2kMtxGraQT4s3gHKK-z7M7V+IFnU9F3YFdo2kEHlQQNd1OPgoEDU6BIFgRgpsII28QKDx8No1cuO7C9WXYHzWAZ2B5em1XjGjAaFGMSw2SPkTefldghJzdRCt4ErAsZ+XanYHIjCMDoe8EA0-uBzAIfOwxcNGef6E0fE1fs34yH0ehGXdwXb5g-dCiPXDv7XxEjEsCsXYsQL2FE0ALlAZxcG39oZRDdFgfO11MYI22gAMjQfnZc9VUbyTwCg9uIkPw-zzn-NCACgGyVQQpKQ7s8AGTzrDWgecjIB2DnUQ6x0wL-yYiSDhj4SoMO7m9Y+7CDoCOwAAfmwO9EGfcEDszUMkSRIM2Gn34UdSG2A9qyOAPIxRyQoYE1nnBFaABtRcshFACKkEA4QYArGniOgAXS0rUciCA3yaCxFgBhEs+Ai2VuHSWoZkg+B8M5bAvAdAwEiANDOPDRoIGYoxKQUxuo6EyAqaOm0nhLUykZWAeBQowBiTRcSOFyFMRYmxaJLB8YFJWkUkpMSRQQihBRcpdFJIAJqWgOpMBLJKFFB07iQie6PjVIfYppSuqYTnC0rq0jdHNNmTANpYpOkAB8tnOAWWsyGjELCMD9IgN8yRLLJCyDjfQX49rEGTiYnuZiBm2OHIsmArj8p1CPgAHn2pw7AuyHms2wGdD+dg8hYg+X4xp8czGTRgPQYEuQ5BvMTq+FF9QvngQQD8zwb5c7d2mrNPAe00AQLhs7V21MWAKHJZSzKahYWmPjsbU2PByj0noGqGiLsg7EDgEkva652iMVJvQUK6QURZxznDDAiDiBCy7PQCAaA4bJL3ggaVZBQTeJZvpOBdiHHyCcSVA6gdxm-iAR8t8IL6FPN-AdEORLu49wsGAA1fLqazRUjpDSpBAHZEosQRiJK5qEt-i9cNZLw7ItRWGmac0JBRrITSule1EXxvqIxalYBaW8hTaQ9QLK3XzwCeeAWBcwDBr+lcbxc0GZRvfh6g1kiw1rJIW6l6Nq1koM9XgQNAzGJdldjrHAOz9A+GDfnetpKGYNO7da4c9jHECK8T4hAVq3VvTgTDGgzbkGtsHe2hq9R20uBgF2pdhSsBkzAsewNZ65CMUvXul6OUyxZHbSYFEV0g5jTvYxEwUhXVLqiUm2Nl7E2kqLeB38aQux7Wg4hhAcGl3MvfUwqN891ox0FsLHAj5PAN2osMvIaQ7bFsAp4GAubMABDfCxPDuSMbELgRoceKEkmlOvd3XtMS3zRNndmE2iBS7YA+VIqJpSR1gjAOO7R+gpZ-vHneBtPAW7buXaQVdpr13eMPFujjxiD1woQuys2CBQpJF4GkPA06sghr5WAAVQq3xwy7Llel+hIDGCxGgIFvnICMrfkoWsjZeB7WzJw9Dv5DOr35h86L4ijqEVledfjK6TXWKOm+C1xm4YCZYHa5OpanWn0y26oyj7QKpplsOMs1Fa51z89M9Vxbu7SLkD63lVtdIoiDU5o4gCID+fwWB+De8IBZKi-ncLeRItk19mgTYAweChfg3BLEiXlbsz2ixJOrNU67eOOzT8cWMP5K23tHrvrt7+r0kNkNgDICRs6266bs2YBUT2r+iLRBFT1e7ivNe+2E5HZTjtsH7ULvA5LY6l689hBlxwJsNgIsLDYE3mWc0Q1ck2MQroRrEjaaaWpjoNLxaW1gjbR2mJfG3XFego++nLA5NjqHEC3ZCW14wvfTpvTuWSqGd8VhuGnHcjcaE7xqrIOVoDNcvJxTIF6vCcfKJwVCAJMfPh9I6JHOFNDnh3tIuJdrrCZa-oCA9IABWPNAsYJk2TAAhLXbA9r4e-mkTL5bkQTZBw-IbxTk7ffb398QQPbOyaTt50ltZXulNx+Vh8xHOnbWK+V7rd9xq115dF4VxhpnmGvQRqNOGvzTzpFwH6V2nlwgIFVyATQPAEhaFbz2d0PLiCmACKYUUZwrhqmmmAJMKJgK27lv+sfAoI4JFMAAFm6kHUwABGZQVAQAnSjb86UNeXZgHr12Jv1NTDXlBTNefp-6DUTAMbSup+lXxF7nS3gpgn84HpFkUwB0TZgHPpGP-lYN2CvgAMyb7b4faV4EDV74AH5H6N6b6MDz4ABsEB8OvyRwpw5wlwiEBAAAXo3sAAvgABwaDJCQHga-LJBV6UFLq76chyiKC8B0FUHSiqjqg4BwF14N5N6xikCmDKAJDuiTRkCmBdinhQB6C-7KwCI-7ZABBsD8Fn4sAIBZCASmzoEfbdyOx4DzAIAYHJDsFqg8CsH0HSgbKjLiAnRBA8Auw4A1pOazoEZBzQDLbfTQCaScwxiPiByMTUEWFgjtLijWH1YBGMHygsFhHSj8gkbyy16H68Gb5AGICmAr4ACsWhW2wAAy2ATuHm2hL0vyQIbAdUkIJspATe5G7Yt40qm+++PBx+m+9Ir+MApg1RRgeQ0qyQq+9k2ADUMAxwyALRvIb+IxCoWRW2RRJRAgQgCAuB3BiRTRIAfeS+p+C+9RFBiev4xR2IpAlhIRxAJ0ORBy1BJRBxFEZhVByQJRVxbqH42GhRvyWa2A4gXKPKlRwAlmnKUA3KaonGCRCBTeKRIBi+kxW20BsBgJSR4AzsqRK+G+W+2x2Avy0g-o7oih9AeApMTeMaEBoUkG1BaJroeAdxVBRwZoschR3aJguJkGm+yJTqxciBIAeJIAjJ3UpyCAZYeACoTerhUA0wiQ4QJyyS8wDJ1JbqdUhgRBWaWKL6MaTCUxbq4gASJsQ4IEwAQmGWQCEq8phK2AjERpcpqKUgMae0yS9QMALEjE0pgcJaSpypL0FgAcZ4CgHJp4Cm9Immmpli+mmiyJWxkp1BtBZmypkJDRSxLJIJaRgh4JUxqJ6J2AmJ2JLATeeaBa7pW+IQ6avIRJ6JZJ9BFJRIHJtJSBB+mZEpTpL0ZuLJGZdKVZ1ZnJwBPJfJm+gARASdldmdmNnVl2mymYoJr1m8iOnVmqnsoalalbqnS0QYpIr6kcBGmMQmn1BSDDk+aWmhA2n9kOkckunogngemLgug+mgw5ZmqjlOnd7SAkBZBqSalkGBmFndwhkwGQGJ6-KEjEgTC1nAm-EfH1GLFAmb6n7n54D1GeknkMy+nnkCJqDPlupnl57HQ+4cm-IIVUGOIqCRnAUgD0BtGqCrHY6L7bx7AND96MCPibEYVLqOZ2BHSzpLloVBnVl3Ll6SndxoB0WzodasWXnXFfnMgIXUFZrvmFFam+TmRWQ2R2SOQuTuReTc7YCSX+SBTBRhQRRRQxRxTAhfj5Efk0U7FV44UwkWB+hdEGFIkcVFHGVAUwkuiQCGCeAibDimB9Et6JD5yeARAz60bxnVm-JAFXB2XLGgXJwv6jFtGxwgDYAsVNmvnpCGU2UwEmXLFmVcTSrt6eWT7ZjT6ICz7YD+VOmBXOzBXQnLFf6mBrzqGeHUTIGCHVSJACGyyeAKAqEWA1U1gTTiDNXiBCzKEJCRBQC7y8AGhYBFXVnOQwAck7HJBBVJWzWhnWUJViUBW2XlXRlwmgngFWVNnsAqXSW2QORORuQeSeR5GYIFF7U7GCXiAzUvRlGHxkBN7qFyAr4eCEDxC9nXWqmEDKyamfgznfHWa2abhYh0VHBsSuxqo4xWz2QQL6BYEfB4FOEDQaYLoPH3W-iQXenQVIX+lZD8VNkhUslhWszfXVkLVuqYHvA4FrCxVU3dyxG+E4A47YBI3nD3XUG3VHEcmY3WW-jAAHUBRBQhThSRTCDRSxTxQXXsXXUok81Y3YCPUVEvVhDvVEifWWVK2-WrDHAA2ypK2-jA02a0b2YQ3EBQ1jbtY4xrbbAI1oB9DrYOEzpo3zpaZK1E3Vk42nl+nC5e1Okk0n5n7JwU1OmM1FFO3bDDCjA-b01xXy3M0PKs1qjSxR08Bc3JA81U380BU0FvkfkJ1Lq530FGGcixEoh3HhG8hmErXpa2CPGJBshKD6qDrMyCqdKyD9TEAhBDiA2uoiJXVFHlD-5VAGHFrJ763AARlB2b4eVt7d69794QiD5eUj6+UT5T6aAr75V+Vb7IVLkrWXlV1d2PgSoM0V5hIVBj10EMJMIgASAgBrB9goAgDfCOC1nGSGDd3OSHGRBwjkh8wkmmAnJQDd3mCWDWA9hMCNowD53ZiXiW2urlT3BzTeyuQQBKB7Sb47YSkaAKZ5BgCRaRC2FgOPi-0URgC8QP3gBljUxHBm0+IoAF5qBAA ### Repro steps There is no sense to throw an error about unsupported features inside callbacks ```jsx ./agents-manage-ui/src/app/login/page.tsx Error evaluating Node.js code ReactCompilerError: Found 1 error: Todo: Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement 78 | 79 | // Check if sign-in failed > 80 | if (result?.error) { | ^^^^^^ Support value blocks (conditional, logical, optional chaining, etc) within a try/catch statement 81 | setError(result.error.message || 'Sign in failed'); 82 | setIsLoading(false); 83 | return; ``` ### Issue React Compiler throws hard errors for unsupported features (e.g. optional chaining) inside `try/catch` **within callbacks**, even though the code is valid and runs correctly. This forces large mechanical refactors (100+ cases in our codebase) purely to satisfy compiler limitations. --- ### Proposal Allow opting out of compiler checks for callbacks via a directive: ```ts const handleExternalSignIn = async (...) => { 'use no memo'; // skip React Compiler checks for this callback ``` --- ### Why Callbacks aren’t render-critical, so hard compiler errors for valid JS inside them hurt DX without real benefit. ### How often does this bug happen? Every time ### What version of React are you using? latest ### What version of React Compiler are you using? latest

### What kind of issue is this? - [x] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) - [ ] babel-plugin-react-compiler (build issue installing or using the Babel plugin) - [ ] eslint-plugin-react-hooks (build issue installing or using the eslint plugin) - [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script) ### Link to repro https://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBUYCAogGaUJx4A0JZVNd5AbggHYNMIDKeAIZ4EBAL4FKMCBgIByGAiF15AbgA6XTDnxECAFQQAPQpOmyFSlXgC0XEWk7qtWnbkLEAwrIBGaLgQAEwBxGCEsAAsARQAZchgZGDBGPABPLDEEpNi0AGsxcxk5eQABCIgAG0qIAHo4SrRuPBdtbA8CQLwASS5KCClihVLrOntHTls4WQwobXTaroD+1q10zIJs3AARESECAF4iLQICBETcZE2LmFyCzS5TpRo8OEirgAoASkOAPgIAArFNBkAA8czyXAgAHcuL8HuIHloTLpCNMuGBCKQEAA5BB4aG4PIAJWUbyEvkqFGotEIRw+cCE1V8Kjynx+B3+7AgaCCHP+wBOfBYtI+QtO3z+4tOnXxvX6ADohEEghxmrlMdxzh8PsQQb1RDAuqSVJEKVSJPzjo8Zba0JQCB99TxzsayWbKWIDt6CHgYFAED9BTbbbbGczWd8HqGZeJpadxF96NKANrhyosuB5AC6yZtXwRSMCxlRBHRmII0QDMDSW2SQIg7F550OjqtwdO5cIKfOSRSBDIeDrYGzrexghECFBdd2whT2d+H3nBdcNtqtQICq3q87EAxhDNXCCVLxBKJJvJnrHzBpbE4PB17el-Rgjq7+l7uEYz3xbwkBAgB1P2SIN4wIe1HQAQh8DB-ECUJwiiOJhwVEEPmAr5QJDUNuV5Agf1eSIozAuNsNIhMVxtbFT0JGASXdc1qVYPBHz+a1bUPY9cXxWj6NNRjiJtRMiyefFYEeUEjFMX4AAkEGqAZaMqIJQVqKS8HhLRES0EB6BAdFKDQABzFB0HaPR1jEYgAUqKAjICAB5LA8DQPcwH-CwShZXx5NsLBbPsrhbFGOxpmwNAqRgWoghBFoi11IV1zCrAIscPcAFkICCBArg0EAmUqPKtIHRwwEMhB3JsuzHOc1yMQLXTwEiGEDVdJkwBQSh2oQcQgA ### Repro steps See the repro link above. Here I'm using an effect event function for its intended purpose, to prevent `useEffect` from re-registering the listener when a change to the `errors` object occurs. According to the docs: https://react.dev/reference/react/useEffectEvent, effect events should not be added to dependency arrays. However, React Compiler treats the effect event function as a dependency and therefore breaks the intended logic. Without React Compiler, this example would be written like this: ```ts const handleNetworkReachable = useEffectEvent(() => { for (const { error, refetch } of errors) { if (!CombinedGraphQLErrors.is(error)) { void refetch(); } } }); useNetworkReachableEffect(useCallback(() => { handleNetworkReachable(); }, [])); // <- notice that `handleNetworkReachable` is not in the dependency list ``` ### How often does this bug happen? Every time ### What version of React are you using? 19.2.3 ### What version of React Compiler are you using? 1.0.0

### What kind of issue is this? - [x] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) - [ ] babel-plugin-react-compiler (build issue installing or using the Babel plugin) - [ ] eslint-plugin-react-hooks (build issue installing or using the eslint plugin) - [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script) ### Link to repro https://playground.react.dev/#N4Igzg9grgTgxgUxALhAgHgBwjALgAgDMoA7OXASwhPyjAQDEFc4ALBGAZVxwQAp6uSiQDmYfAF58wAL4BKaQB0a+ONTAFgRZmw4AafADpjhHey7NhY-DMn5BVsAG5ly-KvUEEJAG4UY1AC23rhMLOZ2dIxmHHxyLiRu+DDMsDTEZHym4fraORZCFKJgBt5+ASTBJKExMPHKMiB6IGokhBQiKCAUgdh4+LgAnpgI0vgACgA2UCJFAPKYlOo2RAGB+ADkAEYAhlsIkwC0mNOzJIcpO+SHar0UkxwA9AAmFBobCcp8wEmPj7eYe47JYkACyEGeCGQ+EUIB2k0msIa9mBb3aCHEUxm80WVBIYHiTXArAgAHcAJLVDgkeFgFCEWkIGRAA ### Repro steps 1. See the playground link, where the func call at line 6 isn't memoized. 2. Swap line 2 and line 4, and see that func call becomes memoized now. Why does the different order of statements before the func call affect whether the func call is memoized? I'm expecting the func call to be memoized in both cases. ### How often does this bug happen? Every time ### What version of React are you using? Both 19.2.3, and whatever the playground is using ### What version of React Compiler are you using? Both [email protected], and whatever the playground is using

### What kind of issue is this? - [ ] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) - [x] babel-plugin-react-compiler (build issue installing or using the Babel plugin) - [ ] eslint-plugin-react-hooks (build issue installing or using the eslint plugin) - [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script) ### Link to repro https://playground.react.dev/#N4Igzg9grgTgxgUxALhAcimBACOAbASwQDsAXNAbgB1iaCBbABwhlOwCpsBDMbAJQRc4bAGYwI9bGhiDhlGjQQAPZq2wATBCK5Q8oqMWEEIxbAEFGjABQBKbMBrZcJsGwDaCGOJgAabFlIAUS8WAF1sAF5+WVIAOkwEAGVSLlIEAB5XGAJiAHNsAB9sYl08AD4rErw8G2paU2diV2wACy5idTwEAGFCOABrSO4wAE9DbFtIsvtHJ2xSGBGZhrnG5pkwXTYorgB3LgJRLn6EAQBHKARXWzrZ1YB6e+xAGXJooTZuiUYCLph5lvEu14LU8CDuc0e2CoIAAKhB1BBkNhElBLCw2AA3Lh4S7YABGeAgA14VjgJnUh2MxGxfkJuQIcBp2AgjFIVOxuDaORyuT8CFIcBs4KckN2hxaOW480W90ZApa-hSaXoJFI0OF2AIIgmGy2AH5Yp5vHYHCtVv5+cFvFZdXpDSEYLEVWAwFxcghahqnDJSLBiHVzdgAL4KM1OAJWliVUqes1B3CpOAKqwe5aBiMOqxoRISfkSvLYXaqwviPJoWOrEMNIO3Bo+v0TcHpCkYxUjLoRYDAbCMLjqCl5JEAJgADMGg2UNek8VBSKQTMziL0Gf1O20Ol1lwMJ1v+ul7jO5yZJ2H7EaWNgAGSX7DpRhlYDnmBB-f3qurfctk9OWNVmg8MY4GwEQDCMBdtBOc5LmuGwkQABXEegCCwdJZiKbt1FSLgkSyHlgzQ+xsCfJFu2dV13RwhY8PjKtplNb1+QbbtiMIsi3QQJE0AAMQOLp1DQYNgzqKsQB8EAyWIEQCFyFAQAYVQ2FIEZGBwbs4JxeliAAeVZKleHjMQJCkPEuDxBA8AAWkYDScgsmR3gsskmB+Tx7gpVx5HqKx6OwR4nO+PBUipABZeEOKhEBsTwdViHjV02TAKSrmwdSoE0nS2RcWpRPAFoIF2ABJMhPGpPAwBQbQyoQIMgA ### Repro steps I was implementing a normal login flow in a client component using the React Compiler. The issue occurred inside an event handler callback (handleSubmit) that runs in response to a form submit. Inside this callback, I wrapped an async authentication call in a try/catch block and performed basic result checking using optional chaining (e.g. if (result?.error)), which is valid JavaScript and works correctly at runtime. As soon as this code was analyzed by the React Compiler, it threw a hard compilation error saying that value blocks (optional chaining, conditionals, etc.) are not supported inside try/catch. This happens even though the code is not render logic, not memoized, and not part of React’s reactive graph. I wasn’t doing anything unusual or advanced — just standard error handling inside an async callback. Removing the optional chaining or restructuring the logic avoids the error, but that requires large mechanical refactors across the codebase. The issue reproduces consistently whenever optional chaining (or similar expressions) is used inside a try/catch within a callback function. ### How often does this bug happen? Every time ### What version of React are you using? latest ### What version of React Compiler are you using? latest

### Website or app GitHubRepo/Code Sanbox ### Repro steps  [capstone-LICENSE.txt](https://github.com/user-attachments/files/24765831/capstone-LICENSE.txt) [LICENSE.txt](https://github.com/user-attachments/files/24765832/LICENSE.txt) [yarapython-LICENSE.txt](https://github.com/user-attachments/files/24765838/yarapython-LICENSE.txt) [SourceCode.zip](https://github.com/user-attachments/files/24765843/SourceCode.zip) //github.com/user-attachments/files/24765783/pgbouncer-1.25.1.tar.gz) ### How often does this bug happen? Every time ### DevTools package (automated) _No response_ ### DevTools version (automated) _No response_ ### Error message (automated) _No response_ ### Error call stack (automated) ```text ``` ### Error component stack (automated) ```text ``` ### GitHub query string (automated) ```text ```

### What kind of issue is this? - [x] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) - [x] babel-plugin-react-compiler (build issue installing or using the Babel plugin) - [ ] eslint-plugin-react-hooks (build issue installing or using the eslint plugin) - [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script) ### Link to repro https://playground.react.dev/#N4Igzg9grgTgxgUxALhAHQHacwgHgBwhgBcACAEwQDMBDKAGzKqgzmIEsINSAVGgIwAUASlLBs3UlDAIAolSoI2gkaQC8APjETSu0jTABPVqWasOXUwmJwAFgBEaxGqvGS9pYjEPb3H0nBcYGTkTjTqpADaALoA3Jj+eoEYwRRhAEwRoc4A-AB0VESyNHaC7MQIALbqWsmQ9Ah59BAA5sLxfroAvgFOdqSCCDAwRKJuibp1EA15QyMwggDkssNEVja27BgtpI7OyIsANKRzox2JXQl6l1i3Hoobey7tV13HMS+3VzDWsNyCV10AB4NIDSECAPSgu6kT43ECHEDJKjsFooEDsSqEEieQz4BBiUgABXoUBaWwA8vgLClSD0qCNqot+AIEPQALT4UnkjDsn4lYjswJY9gNGAQ8jsYKLDqYQTjUgQiHC-CipycDAAWQglGQpDQIBo9HoBswPTA6rAKIQYGJ3Mp1I1YHaCPAtggAHcAJIYCowDBGsAoWj0GRdIA ### Repro steps Using the next code reproduce the issue: ```ts export default function Tab() { useEffect(() => { async function fetchData() { try { const data = []; const data2 = data?.forEach(item => console.log); } catch (error) { console.error('Error fetching Data:', error); } } fetchData(); }, []); return ( <> </> ); } ``` ### How often does this bug happen? Every time ### What version of React are you using? Latest version ### What version of React Compiler are you using? Latest version

### What kind of issue is this? - [ ] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) - [x] babel-plugin-react-compiler (build issue installing or using the Babel plugin) - [ ] eslint-plugin-react-hooks (build issue installing or using the eslint plugin) - [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script) ### Link to repro https://playground.react.dev/#N4Igzg9grgTgxgUxALhAgHgBwjALgAgBMEAzAQygBsCSoA7OXASwjvwBUyAjACgEp8wADpt8cVmAKEyuMvgC8+ANoBdEfnxkwATwb5aDZq3wBzBLgAKMCCSaUE-Qeo35cMbU9EuXTEvh4IMNYwAsJe3i64ABbWAO74gcEA3M4R+AC+qRliMnBR-ok4oVka4nSQ9gB0lBAmAUFFWZmizSLOMOawbDxZADwAfCXsCJJ9APSDonwpdM0gADQgZbYmKCBMALbYeK7amAiC+BaUUCZMdADymEbl2STWG-gA5FzcCJQAtJgnZ3QfHWRGB9xFs7IExoQmJInjMRDwwhoxmMQZg7DIWHQALIQYjIfBCEBkSiUAkidL4MDosC2EZHH7nK43MDTBbgKIQWIASTouECdCJYBQ5EoYAQ6SAA ### Repro steps 1. go to the playground 2. use the next code: ```ts export default function Tab() { const data = [] async function getProfile() { try { if (error) { throw error; } } catch (error) { console.log(error) } } return ( <> Test </> ); } ``` you will see the error ### How often does this bug happen? Every time ### What version of React are you using? latest ### What version of React Compiler are you using? latest

### What kind of issue is this? - [x] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) - [ ] babel-plugin-react-compiler (build issue installing or using the Babel plugin) - [ ] eslint-plugin-react-hooks (build issue installing or using the eslint plugin) - [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script) ### Link to repro https://github.com/JonasDoe/FailingReactCompiler ### Repro steps When I combine optional chaining with a `try/catch` pattern, `doSomething ` isn't stable anymore and the `useEffect` callback (hence: the logging) is invoked multiple times. ```tsx export const MinimalFailingCase: React.FC = () => { const [count, setCount] = useState(0); const { doSomething } = useMinimalFailing(); useEffect(() => { console.log('[MinimalFailing] Effect ran - doSomething changed'); // this is logged on every button click }, [doSomething]); return ( <p>Count: {count}</p> <button onClick={() => setCount(c => c + 1)}>Increment</button> ); }; const useClient= ()=> { const [client] = useState({ doThing: async () => 'result' }); return client; } const useMinimalFailing =()=> { const client = useClient(); const doSomething = async () => { try { // ❌ Optional chaining - compiler doesn't memoize const result = await client?.doThing(); return { type: 'ok' as const, result }; } catch { return { type: 'err' as const }; } }; return { doSomething }; } ``` ### How often does this bug happen? Every time ### What version of React are you using? 19.2.3 ### What version of React Compiler are you using? [email protected], if you mean that

### What kind of issue is this? - [ ] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) - [ ] babel-plugin-react-compiler (build issue installing or using the Babel plugin) - [ ] eslint-plugin-react-hooks (build issue installing or using the eslint plugin) - [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script) ### Link to repro https://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBUYCAYrhgMoIwBudASgmFADaEC+BAZjBAwEAOiAB0AelIIAtLyoyyDOjJisOeUQG5hAOz0IAHjnwE8ATywICAVTKUYGAPJY8aCLrAEAvET0ECNV4AUXYHDGQCFgBDODwxFl4nACMAKwQ4gB4ACQAVAFkAGXDQhAwEXUIAHwJdDnYAPh1dLmaDY1xCXihdOPddEnsqAApgf0CEELCqABo9Lki7CioXNw8wTNyALQgAE2o4AAsy6IaASj8Bgjh1wgBtJUYYFjZOGYIyPFplZ-VOAF0fINlo5vk8XhphmdmgFxjdPIQIE8AO4wNB4EEYABq0XYUFYQOG8kcOLxrAu3galwCATQvAIwwAhEFQuExHBYGpKhc1HhYLoYTT4WBCAhpo4gSzxRh2ZyKng2lcAsSGcLCABrBDmAhoAbE7G4-FgC5jJU0ukMzXa3UEMXhE3jGk0u1UO5W-5ieiG6y+fWko1urX-QVOriOghhq6tPQxq68-nUmmPZh-PBzM2fMEp15p8NIuio9GY-2sdMBaMtEAzEDw3hoADmKHQ2E6Zks1mIAAU8fXdat+l4ePxBAQAOTJaLJMUyLA93WqBCxPAyG7YNDsOgSXZoEWjxWjcYSCSrrDr6JrXT5PYISKiXHsUTzD7nnd1gndqC93T99bQqvgQ4IGRABJSo6F0XEwBQPAYHxLggA ### Repro steps Look the playground **NOTE**: even if the error is triggered for line `18` (body of the `overrideFormValues`) , removing line `10` make the compiler happy. It's weird for me. --- Code ```ts import { useFormServerResult } from "./use-form-server-result"; export type UseFormOptions = { refElForm: React.RefObject<HTMLFormElement | null>; }; export function useForm({ refElForm, }: UseFormOptions<TZodSchema>) { const [serverResult, setServerResult] = useFormServerResult(); const overwriteFormValues = (formValues) => { if (!refElForm.current) return; const elForm = refElForm.current; for (const key in formValues) { if (key in elForm) { elForm[key].value = formValues[key]; } } }; return { serverResult, setServerResult, overwriteFormValues, }; } ``` Error ```bash Found 1 error: Error: This value cannot be modified Modifying component props or hook arguments is not allowed. Consider using a local variable instead. 16 | for (const key in formValues) { 17 | if (key in elForm) { > 18 | elForm[key].value = formValues[key]; | ^^^^^^^^^^^ `refElForm` cannot be modified 19 | } 20 | } 21 | }; ``` --- ### How often does this bug happen? Every time ### What version of React are you using? 19.2.3 ### What version of React Compiler are you using? ?

### What kind of issue is this? - [x] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) - [ ] babel-plugin-react-compiler (build issue installing or using the Babel plugin) - [ ] eslint-plugin-react-hooks (build issue installing or using the eslint plugin) - [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script) ### Link to repro https://playground.react.dev/#N4Igzg9grgTgxgUxALhAHRFMCAEcA2AlggHYAuGA3GiYQLYAOEMZOweMCAhmQgMIRyCAB5kANDjIBPBrgBifCdNk4AStzhkAchAAmCCVgQBlMj1wBfHADMYEOjgycumqjRqEhMay9zGSLgDWAkKibO5kcIK85Mg4YGQwngDm1CRoZBCyJHEARhAQ+NwkaRkEENgAKvQI0GRx6mSwJJUyCAA8yrXW8Qhk1XS1UGQAfGkW7uRtOADy2f5BuVwwciQ4ALw4ABRRQrHxiSkAlBsjOABuEIS6pSS7CTgLcIFLMCG8YZtwzrzvIqztWbzALPV6rHAAHxwJCg+HwODOWxhcKOtxETBYeEEDyeL2Wf1EAAU7OdrggYHEFO12HAABaEfC6Tg5NQabR6SxnTZbGn0xnMnAWE7rM7ACL3VgAbXOXHwUAMvTIADVZfKALobHBGUzmHCA3EE1hQqAkfTWTwIXQI7Yms0W3SoyZlbGsLKkXGvOJzd0gvErNbc3YxeoHJIkZJHOKXa6ncLpChkbDK1UIHkRDLOvbidMJt0sxLysQ5sr4CoIAZDENJit1LZbYWi4sJ8rYD3LeulBMZCwSABsAAZB0ci-Hu474xZbhlrCbNIRBHhS63fa961GrlaxaPE30VXLU1sGJxzg24xmE4QelsAIRHhAns9dhOcJowNZ386d88Tbcl7gwGthkPY8ADoW3LGo6nHc8MhfZo2BwECkI-CQ8ziHx8GwQUvzIIUpwTatIKA+tYy3GCd2TfctltBBzRIS1oITHscAAJiHTsfwiOC322HN2jbN5on+EDiQgUl9BgC4U3WYA8wEiwRibYA6QZJlSE4p92lyYZMnSX8Ey6dYMG0shdIwJsMkEPgiGeGSSJFR9yJLMsBI7CzcI089FP0jJgBlfcAH4wKE8hPITdoAHoTN07zz0igTDREkkyRgWKyHHScaBAMQQF2c1khQEB6AxVgugQwk5WSTw5jIecSDAQUbDsBwAHIllyBB8AAWgYSrPC65xNC6qJGAZckIt0QgEha240zWHAIoikaGAZHg6oAWQ5OIMFlfBzJIKwwDWsBzQQBqKqgKqSBquqwFRbLwFpCAAHcAEkvACTCUAw7ALCAA ### Repro steps Open playground, see error: > Todo: [PruneHoistedContexts] Rewrite hoisted function references Changing `function closeSnackbar` to `const closeSnackbar` fixes it (among lots of other changes) ### How often does this bug happen? Every time ### What version of React are you using? 19.2.3 ### What version of React Compiler are you using? 1.0.0

### Website or app Amazon package 📦 🤗 ☺️ pvt ltd. Com ### Repro steps Tulsi das sahani ### How often does this bug happen? Every time ### DevTools package (automated) _No response_ ### DevTools version (automated) _No response_ ### Error message (automated) _No response_ ### Error call stack (automated) ```text Hiiii ``` ### Error component stack (automated) ```text Hindi ``` ### GitHub query string (automated) ```text Bahadurganj ```

### What kind of issue is this? - [x] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) - [ ] babel-plugin-react-compiler (build issue installing or using the Babel plugin) - [ ] eslint-plugin-react-hooks (build issue installing or using the eslint plugin) - [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script) ### Link to repro https://playground.react.dev/#N4Igzg9grgTgxgUxALhAejQAgAIIHYCGARgDYICiAtgJYAuAYjAggF4I77FlV0CSeYWjCiV8DCDADmCWjhIQA7ghgBhCHloIAHrQCCcRGDAAdPADMoeOLWrrMUMAnoQIACgAOMCO7ABKTMCmmJhw6oIBZi4ANJhEBDAAvpgAvPaOahratK4AsgCeGZo6vgDcQZhMtLB4mJEQvJTuJB5ePgB0WjF1MXEwpaYJpiBRIKHm1JIoINSNErK0ee7swJgACiRQktR4APLuNmGYSWZelJgA5HFECCQAtE2b27dMBNa3oY3UZDBoACbUgnOZTwplcgRqmAwH3cXwIBzwOQgvwQyEwxhABBIJHRA0wYDhALM1AQYDWGy2u32tgEpWG4AAFop+JoYIQSGAUGZMY4EkA ### Repro steps 1. Open the Playground repro link: https://playground.react.dev/#N4Igzg9grgTgxgUxALhAejQAgAIIHYCGARgDYICiAtgJYAuAYjAggF4I77FlV0CSeYWjCiV8DCDADmCWjhIQA7ghgBhCHloIAHrQCCcRGDAAdPADMoeOLWrrMUMAnoQIACgAOMCO7ABKTMCmmJhw6oIBZi4ANJhEBDAAvpgAvPaOahratK4AsgCeGZo6vgDcQZhMtLB4mJEQvJTuJB5ePgB0WjF1MXEwpaYJpiBRIKHm1JIoINSNErK0ee7swJgACiRQktR4APLuNmGYSWZelJgA5HFECCQAtE2b27dMBNa3oY3UZDBoACbUgnOZTwplcgRqmAwH3cXwIBzwOQgvwQyEwxhABBIJHRA0wYDhALM1AQYDWGy2u32tgEpWG4AAFop+JoYIQSGAUGZMY4EkA 2. In the compiled output, note that compiler-emitted code imports helpers from react-compiler-runtime (for example makeReadOnly / shouldInstrument / useContext_withSelector). 3. In a clean folder, check what react-compiler-runtime actually exports: npm init -y npm i react@18 react-compiler-runtime@latest node -e "const r=require('react-compiler-runtime'); console.log({makeReadOnly:typeof r.makeReadOnly,shouldInstrument:typeof r.shouldInstrument,useContext_withSelector:typeof r.useContext_withSelector, $makeReadOnly:typeof r.$makeReadOnly}); try{r.$makeReadOnly()}catch(e){console.error(e.message)}" 4. Observe: - makeReadOnly, shouldInstrument, and useContext_withSelector are undefined (not exported). - $makeReadOnly exists but throws TODO: implement $makeReadOnly in react-compiler-runtime. 5. This creates a compiler/runtime mismatch: compiler output references helpers that runtime package does not provide. ### How often does this bug happen? Every time ### What version of React are you using? 19.2.3 ### What version of React Compiler are you using? [email protected]. note: [email protected] is the runtime involved in the mismatch.

### What kind of issue is this? - [ ] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) - [ ] babel-plugin-react-compiler (build issue installing or using the Babel plugin) - [ ] eslint-plugin-react-hooks (build issue installing or using the eslint plugin) - [x] react-compiler-healthcheck (build issue installing or using the healthcheck script) ### Link to repro N/A — feature request. ### Repro steps Healthcheck only prints "Successfully compiled X out of Y components" and does not show which components failed. **Proposal:** Add a `--verbose` flag to print for each failed component: - file path - location (line/column when available) - error reason The data is already collected in `ActionableFailures` / `OtherFailures` in `reactCompiler.ts`; it only needs to be printed when the flag is set. That would make it possible to fix remaining violations and to trust the reported counts. **Related:** #29078 (closed), #29677 (open — "how do I find the remaining components?"). ### How often does this bug happen? Every time ### What version of React are you using? 19.2.4 ### What version of React Compiler are you using? [email protected] (via Expo SDK 54); [email protected]

Essentially, I see `useDeferredValue` being stuck and never catching up. Not sure if it's possible to extract it out of a Next.js app. I think it's probably a React bug because it seems related to core APIs, but I couldn't simplify it past the "render some JSX from server action" repro case. ## Demo Type "hello world". In dev (`npm run dev`), the second text area catches up. In prod (`npm run build + npm start`), the second text area often gets stuck and never catches up. https://github.com/user-attachments/assets/a44f01ad-1a7d-4420-a6da-cadb277ded72 ## Code Here is a repro case: https://github.com/gaearon/react-udv-bug/ This is the main harness: ```js export function TestPreviewClient() { const [promise, setPromise] = useState<Promise<ReactNode>>(initialPromise); const deferred = useDeferredValue(promise); function handleChange(value: string) { setPromise(renderAction(value)); } return ( <div style={{ padding: 16, fontFamily: "monospace" }}> <textarea placeholder="type here" onChange={(e) => handleChange(e.target.value)} rows={3} style={{ width: "100%", fontFamily: "monospace" }} /> <div data-testid="deferred" style={{ border: "1px solid #ccc", padding: 8, minHeight: 40 }} > <Suspense fallback={<div>loading...</div>}> <Resolved promise={deferred} /> </Suspense> </div> </div> ); } ``` Note these helpers: ```js export function ClientWrapper({ children }: { children: ReactNode }) { const t = performance.now(); while (performance.now() - t < 2) { // do nothing } return <>{children}</>; } function Resolved({ promise }: { promise: Promise<ReactNode> }) { return <>{use(promise)}</>; } ``` And this is the server part: ```js async function AsyncChild({ children, }: { children: ReactNode; }): Promise<ReactNode> { await new Promise((r) => setTimeout(r, 1)); return children; } async function Item({ children }: { children: ReactNode }): Promise<ReactNode> { return ( <ClientWrapper> <AsyncChild>{children}</AsyncChild> </ClientWrapper> ); } export async function renderAction(input: string): Promise<ReactNode> { return ( <Item> <div> <Item> <div>{input}</div> </Item> </div> </Item> ); } ``` You can generally simplify this structure but then it will be harder to reproduce.

### Website or app material-library.com ### Repro steps 1. open the site 2. clicked on the view all button for categories 3. scrolled the page and stopped recording 4. clicked timeline option ### How often does this bug happen? Only once ### DevTools package (automated) react-devtools-extensions ### DevTools version (automated) 7.0.1-3cde211b0c ### Error message (automated) Cannot read properties of null (reading 'ownerDocument') ### Error call stack (automated) ```text at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:919551 at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:919824 at commitHookEffectListMount (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:129924) at commitLayoutEffectOnFiber (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:142040) at recursivelyTraverseLayoutEffects (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:157699) at commitLayoutEffectOnFiber (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:141997) at recursivelyTraverseLayoutEffects (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:157699) at commitLayoutEffectOnFiber (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:141997) at recursivelyTraverseLayoutEffects (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:157699) at commitLayoutEffectOnFiber (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:141997) ``` ### Error component stack (automated) ```text at ContextMenu_ContextMenu (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:918953) at ContextMenuContainer (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:920310) at CanvasPageContextMenu (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1089461) at AutoSizedCanvas (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1091403) at div (<anonymous>) at _t (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:754231) at div (<anonymous>) at src_CanvasPage (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1096981) at TimelineSearchContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1089153) at div (<anonymous>) at Timeline_Timeline (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1116965) at div (<anonymous>) at div (<anonymous>) at div (<anonymous>) at SettingsModalContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:879909) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1144384 at ao (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:898411) at div (<anonymous>) at div (<anonymous>) at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:901116) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:901313 at div (<anonymous>) at div (<anonymous>) at div (<anonymous>) at ThemeProvider (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:901116) at SuspenseTreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1147064) at InspectedElementContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:915935) at TimelineContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:994422) at ProfilerContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:986233) at TreeContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:786019) at SettingsContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:815755) at ModalDialogContextController (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:972480) at DevTools_DevTools (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:1:1175879) ``` ### GitHub query string (automated) ```text https://api.github.com/search/issues?q=Cannot read properties of null (reading 'ownerDocument') in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react ```

### What kind of issue is this? - [x] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) - [x] babel-plugin-react-compiler (build issue installing or using the Babel plugin) - [x] eslint-plugin-react-hooks (build issue installing or using the eslint plugin) - [x] react-compiler-healthcheck (build issue installing or using the healthcheck script) ### Link to repro yangliwen_peter ### Repro steps 1.Trigger dead lock. 2.loop until Long.MAX_VALUE overflow. 3.thread start from zero of array. ### How often does this bug happen? Every time ### What version of React are you using? 2.10 ### What version of React Compiler are you using? 2.00

### What kind of issue is this? - [x] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) - [x] babel-plugin-react-compiler (build issue installing or using the Babel plugin) - [x] eslint-plugin-react-hooks (build issue installing or using the eslint plugin) - [x] react-compiler-healthcheck (build issue installing or using the healthcheck script) ### Link to repro react ### Repro steps 1.compiler wrong with math index unmatch. 2.compiler unable to exact to learn to write jvm.gc collect. 3.wrong design pattern of upload code. ### How often does this bug happen? Every time ### What version of React are you using? 1.11 ### What version of React Compiler are you using? 1.01

### Website or app example; https://yuri.twintail.org/chrome/prerendering/specrules.html ### Repro steps Hello, I'm Takashi from Google Chrome team. I've investigated high-cpu usage issue on prerendering, and noticed that the React Developer Tools seems to be a root cause. The original report for the chromium project is here; https://crbug.com/478909972 Steps: 1. Install React Developer Tools Extension (from the Chrome Web Store) 2. Visit a page that uses specupationrules 3. Open Chrome's Task manager from ... > More tools >, and see CPU usages 4. Usage for the prerender pages shows higher CPU usages 5. Open DevTools 6. Prerender pages' CPU usages get much higher, and frame of the React Developer Tools spends almost 100% This needs that the current page is accessible from the Extensions. e.g., they would not have a permission to touch the New Tab Page, and this doesn't happen there. Also, this happens with Chrome UI triggered pretenders too. So, even if the page doesn't use the speculationrules, the problem could happen when users type something in the Omnibox, and Chrome has confidence on the next navigating page. I suspect this is because the extension doesn't expect the Chrome's recent MPArch: Multi-Page Architecture, and is confused on multiple page navigations. Here is a resource for the prerender and link for its impact on the Extension system. [Prerender pages in Chrome for instant page navigations > Impact on extensions ](https://developer.chrome.com/docs/web-platform/prerender-pages#impact_on_extensions) ### How often does this bug happen? Every time ### DevTools package (automated) _No response_ ### DevTools version (automated) _No response_ ### Error message (automated) _No response_ ### Error call stack (automated) ```text ``` ### Error component stack (automated) ```text ``` ### GitHub query string (automated) ```text ```

### Website or app https://honing-forecast.pages.dev/Newchar ### ~~Repro steps~~ 1. ~~Open the site with the extension enabled on Chrome (and any Chromium browsers it seems) or Firefox~~ ~~The memory footprint shoots up like crazy (seen with chrome task manager, it's usually <250MB, with the extension on it's gigabytes), the cpu is stuck at 100+% and eventually Chrome crashes. I've tried taking a heap snapshot with chrome devtool but it only shows a 20MB footprint.~~ ~~I should note this does not occur with the extension disabled. I'd love to provide more insight, but the site is not even using React (and the extension says as much). I'm incredibly confused as to why this might be happening (the source code of my site is [available here](https://github.com/Kenivia/Honing-Forecast)).~~ Initial symptom was resolved, see discussion below! ### How often does this bug happen? Every time ### DevTools package (automated) _No response_ ### DevTools version (automated) _No response_ ### Error message (automated) _No response_ ### Error call stack (automated) ```text ``` ### Error component stack (automated) ```text ``` ### GitHub query string (automated) ```text ```

### What kind of issue is this? - [x] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) - [ ] babel-plugin-react-compiler (build issue installing or using the Babel plugin) - [ ] eslint-plugin-react-hooks (build issue installing or using the eslint plugin) - [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script) ### Link to repro https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAJABTBwAWeANgCYwKYC+AlEcADrFFM6xiAHnp4AbgD5KNBk1ZCA9KMk8WPHggAeABwgwcRegjQBDKLQMZs+QkQCyATwCC27WQ7de-QUSEkJQlQAjBIAEgi0tBBEAOp6DACEisEBCv6qPCAANCBwhGh4AOYoIHgAtrr6RDgO2gicRAAKtFCFeJgA8to2mGBELERoMBBlRADkAEYmExEAtNotbZizTCa4s3kVdAgwSnhgOGMA3OqYFDxERAoKm9p0Jj12EEbIRFwgJpHvqkRgD-sFBB9ZqtdpdHpgNhHbLgKgQADuAElMDgdphPmAUKZaGAECwgA ### Repro steps In my codebase, I have a utility component called `<$>` that I use as a succinct shortcut for inline styles. ```tsx // this <$ fs="10em" x="30%" y="10%"> <h1>Hello World!</h1> </$> // is equivalent to this <h1 style={{fontSize: "10em", left: "30%", position: "absolute", top: "10%"}}>Hello World!</h1> ``` This works in Server Components, but breaks in Client Components. It seems that React Compiler uses `$` and `_c` as reserved variables, which overwrite my component. So either 1. the Compiler should detect when `$` in the scope and choose a different variable name, or 2. the docs should include a warning about this (apologies if they already do, I couldn't find any) <img width="978" height="507" alt="Image" src="https://github.com/user-attachments/assets/b7c3230f-7be3-4500-95a4-81316534b924" /> ### How often does this bug happen? Every time ### What version of React are you using? 19.2.4 ### What version of React Compiler are you using? 1.0.0

### What kind of issue is this? - [x] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) - [ ] babel-plugin-react-compiler (build issue installing or using the Babel plugin) - [ ] eslint-plugin-react-hooks (build issue installing or using the eslint plugin) - [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script) ### Link to repro https://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBcMCAhnggMIQB2VAHngDQFRg31OvucCyCDBAIBfAgDMYEDAQA6IMuTh4FAbjl1NEqHRVp6JcgBs4UY5QQBlPJTAAKXABMEMMMnZ0A1nQgB3OgBtAF0ASiJNOTwyPFg6AmdXMAA6YwQ6AHM8AAsNOlFIugRGHHwSejBCADkoDAAjVwAxXAxKWgZiwgBeEiUqdp57Ir8CAEkGY2Sa+qaWyntQ0LztXX1DDgRphphmmFa8BYitaIRYmHiNgc77Ldm9tu5Opc0CrToAeneCACFyJwIALRGUzmSw2OwEXyEDBCCBoABeCCcmmKpUIOj0eAM8QA8kV7MREm4xB5CTAXG4PLofP4gsExOFgJE8HAKoQwLUCD17IcugA+I5RKIxOLAswWKjgvAOIlgZ7HUShBbLY6suiVAhYGBoRC3HZzbp8Ta1ba7fbKwrC06igA8-AAnjioHgsM6CE5KOQusAtTrjTN9fc8MkJAb7ByMKFxO8+XlXppPgQMhAIP8gXATOKwbZpQQ0GACDDhAikSiSrh0assYYACp+CAEhLkpIkohNinuTw0gIhBmCllsggRrkEHnhfn9q1neIZkES6w5mXNtzyqKKi1vKJqjW+3Umu77EcbPVm+ar44i84EO2O52uwge2zeiPR2MvQqJ5OpwFi0GSxd5gWRYQPCaClkU5ZlBiazxDW2RkAgjayq2ZIdlS3i+D29KKv227spyPQbIIwhjlyApMscU6irOWb-nYjjLnKyx4KIbCBLKYQqlug67v6poGkenAnmG55UVeN5Oi6bqPl6PranuAansGoZBuGtRRgQMZxpoIAsCAaoSGgGQoCAFEEJp7ystgaASti-CpggHgKCYxgKC8ungNk-jjFQ5wmGAKASP5CCiEAA ### Repro steps I'm sorry for a wishy-washy title. I'm struggling to describe in words what exactly are the conditions I've hit here. This might be a duplicate of https://github.com/facebook/react/issues/33050 or https://github.com/facebook/react/issues/31631, but I'm not certain. Note: Desired memoization seems to be easily restorable with manual `useMemo` call. Given that, I think this is a bug in compiler, but I would be completely okay with this being something that compiler just cannot handle, and that requires manual intervention via `useMemo`, if react compiler _told_ me that it didn't work. But it does not! Far more serious issue in my opinion is that despite ``` plugins: [["babel-plugin-react-compiler", { panicThreshold: "all_errors" }]] ``` The only way for me to notice that original (`One`) code didn't memoize is by randomly pasting the code into the playground. Is there a way to get even more panics, to indicate when compiler gives up? ### How often does this bug happen? Every time ### What version of React are you using? 19.2.4 ### What version of React Compiler are you using? 1.0.0

### What kind of issue is this? - [x] React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) - [ ] babel-plugin-react-compiler (build issue installing or using the Babel plugin) - [ ] eslint-plugin-react-hooks (build issue installing or using the eslint plugin) - [ ] react-compiler-healthcheck (build issue installing or using the healthcheck script) ### Link to repro https://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBUYCAyngIZ4IEC+BAZjBBgQOQwJVx4cBuADoA7UUygi+aCCIIAxNABsEAFW4IAFAEoioggTiywhYrzxoAbggAiEOADkqGOowC8JMnbhQXIvADCsrQAHng6wnKGxoQA2ljclgCC0tbeTi4ANARkeAAKiSkWafYZCAC6BB6kFNS0muZWtqXOCNqR+gRoTAQNqc2OrQQAhG4eCQjJ-emtusCdBrkFk0VNMy59xQNl7Z30op3ceLByADwAJlYEAPQAfKL7IiCZIEYiTGgA5igg81FCIAQIksaFYIj8eAByD0YhAlioSjQ5xoCAcEHICDwlBRAEkRAAlIHnBAwKEEPAwKAIPYPZ7gAAWEAA7njaDARAiwCgmJyEPQgA ### Repro steps Replace `if (activeDocName !== prevActiveDocName) {` with `if (true) {` and you will receive ``` Found 1 error: Error: Cannot call setState during render Calling setState during render may trigger an infinite loop. * To reset state when other state/props change, store the previous value in state and update conditionally: https://react.dev/reference/react/useState#storing-information-from-previous-renders * To derive data from other state/props, compute the derived data during render without using state. 6 | 7 | if (true) { > 8 | setPrevActiveDocName(activeDocName); | ^^^^^^^^^^^^^^^^^^^^ Found setState() in render 9 | } 10 | 11 | return <div /> ``` I expected to receive the same error when using the condition `if (activeDocName !== prevActiveDocName) {`. cc @sleitor tagging you if it something that you want to fix based on your previous amazing contributions 🙏 ### How often does this bug happen? Every time ### What version of React are you using? latest ### What version of React Compiler are you using? latest