react.dev
react.dev copied to clipboard
Bad Example for "Examples of wrapping Effects in custom Hooks"
In example 2 of 3 of Wrapping Effects in Custom Hooks, the useEffect is called per render and isn't the same as before.
Yeah i think the fix would be to wrap useWindowListener with React.memo() to avoid re-rendering on passing same props
As we're passing a new function reference every-time to the custom hook (listener argument), useEffect dependency array is getting changed and it's running on per render. one solution is to wrap the listener in App.js with useCallback.
const handlePointerMove = useCallback(e => setPosition({ x: e.clientX, y: e.clientY }), []);
useWindowListener('pointermove', handlePointerMove);