facebook/react

[React 19] new compiler handle the memoization of a function used in useEffect

TonyFTannous-Byd opened this issue · 1 comments

previously:

const Component = () => {
const [count, setCount] = useState(0);

const handleAction = useCallback(() => {
console.log(count);
}, [count]);

useEffect(() => {
handleAction();
}, [handleAction]);

return <button onClick={() => setCount((prev) => prev + 1)}>Increment;
};

in react 19 with the new compiler. can i write it simpler like:

const Component = () => {
const [count, setCount] = useState(0);

const handleAction = () => {
console.log(count);
};

useEffect(() => {
handleAction();
}, [handleAction]);

return <button onClick={() => setCount((prev) => prev + 1)}>Increment;
};

and the new compiler handle the memoization of handleAction function ?

Yup, that’s the idea! Note that you have to install the compiler separately from React 19, see docs at https://react.dev/learn/react-compiler