-
Notifications
You must be signed in to change notification settings - Fork 49k
Description
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-compiler (build issue installing or using the eslint plugin)
- react-compiler-healthcheck (build issue installing or using the healthcheck script)
Link to repro
Repro steps
Hi! I'm hoping the React compiler catches this invalid ref access and bails out of optimizing code like this, but I understand that catching this kind of issue is probably a bigger undertaking than normal.
Our team's codebase has some dubious core library hooks which break React's rules, or at least make it easy to break React's rules without knowing what you're doing. Here, useSyncState
advertises itself as a cooler useState
that lets you see the freshest state, even before React does! (But after memoization, this just means you see stale state). This leads to it being used incorrectly in useEditable
, when we call getValueBeingEdited()
inside of a render.
When I installed the compiler on our codebase, many E2E tests started failing. One of the tests showed us that when we update one EditableCell, the state change doesn't propagate to another cell like it was supposed to. The test passed after I added 'use no memo'
to either useSyncState.ts
or useEditable.ts
. For now, I'm going to add 'use no memo'
to both of these files, but my understanding is that every time I add 'use no memo'
, you'd like to see why I had to do so.
How often does this bug happen?
Every time
What version of React are you using?
Playground
What version of React Compiler are you using?
Playground