[Compiler Bug]: ref.current === undefined, !ref.current are not allowed #34278
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
(This may be by design, but still reporting it as it’s causing deopts in valid real-world code.)
In a codebase I'm adopting React compiler on, it's common to have this pattern to initialize refs:
const ref = useRef(undefined)
if (!ref.current) ref.current = something()
// or also:
if (ref.current === undefined) ref.current = something()Right now, React Compiler deopts when encountering this pattern, mentioning “Cannot access refs during render”.
This is likely by design (everywhere in React docs, if you need to initialize a ref to nothing, you’re shown to use null). However, this pattern is still likely to be common in real-world codebases:
- it’s pretty frequent in the codebase I’m working with (it’s a valid way to init, and it’s allowed by TS types)
- it’s automatically emitted by React 19 TypeScript codemod when codemodding an empty
useRef()
Just letting you know about a common source of deopts!
How often does this bug happen?
Every time
What version of React are you using?
19.1.1
What version of React Compiler are you using?
19.1.0-rc.2