[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