Open
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
The compiler assumes that ref.current is called during render when inside of useMemo(), even when useMemo is returning a callback that is only called in a useEffect and never during render. See playground for the code.
The most common use case for specifying a callback with useMemo instead of useCallback, is when the callback is wrapped in a debouncing technique, like lodash/throttle:
const throttledFocus = useMemo(
() =>
throttle(
() => ref.current?.focus(),
500,
{
leading: false,
trailing: true,
},
),
[focus],
);It's as if the compiler isn't differentiating the closure that returns the memoized value (and thus is indeed firing during render), and useMemo returning a callback 🤔
How often does this bug happen?
Every time
What version of React are you using?
^18.3.1
What version of React Compiler are you using?
19.0.0-beta-6fc168f-20241025