React useEventListener hook
Adds an event listener for the specified event type on the given element.
- Use the
useRef()
hook to create a ref that will hold thehandler
. - Use the
useEffect()
hook to update the value of thesavedHandler
ref any time thehandler
changes. - Use the
useEffect()
hook to add an event listener to the given element and clean up when unmounting. - Omit the last argument,
el
, to use theWindow
by default.
const useEventListener = (type, handler, el = window) => { const savedHandler = React.useRef(); React.useEffect(() => { savedHandler.current = handler; }, [handler]); React.useEffect(() => { const listener = e => savedHandler.current(e); el.addEventListener(type, listener); return () => { el.removeEventListener(type, listener); }; }, [type, el]); }; const MyApp = () => { const [coords, setCoords] = React.useState({ x: 0, y: 0 }); const updateCoords = React.useCallback( ({ clientX, clientY }) => { setCoords({ x: clientX, y: clientY }); }, [setCoords] ); useEventListener('mousemove', updateCoords); return ( <p>Mouse coordinates: {coords.x}, {coords.y}</p> ); }; ReactDOM.createRoot(document.getElementById('root')).render( <MyApp /> );