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