React useEventListener hook

Angelos Chalaris · React, Hooks, Effect, Event · Sep 1, 2021

Adds an event listener for the specified event type on the given element.

  • Use the useRef() hook to create a ref that will hold the handler.
  • Use the useEffect() hook to update the value of the savedHandler ref any time the handler 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 the Window 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.render(<MyApp />, document.getElementById('root'));

Recommended snippets