Simplify Event Listener Management with `useEventListener` React Hook

import { useEffect, useRef } from 'react';

function useEventListener(eventType, handler, element = window) {
  // Create a ref that stores handler
  const savedHandler = useRef();

  // Update ref.current value if handler changes.
  // This allows our effect below to always get latest handler ...
  // ... without us needing to pass it in effect deps array ...
  // ... and causing effect to re-run every render.
  useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

  useEffect(() => {
    // Make sure element supports addEventListener
    // On Server, window/document is undefined
    const isSupported = element && element.addEventListener;
    if (!isSupported) return;

    // Create event listener that calls handler in a ref
    const eventListener = (event) => savedHandler.current(event);

    element.addEventListener(eventType, eventListener);

    return () => {
      element.removeEventListener(eventType, eventListener);
    };
  }, [eventType, element]); // Re-run if eventType or element changes
}

// Example Usage:
// function MousePositionTracker() {
//   const [coords, setCoords] = useState({ x: 0, y: 0 });

//   const updateMousePosition = useCallback((event) => {
//     setCoords({ x: event.clientX, y: event.clientY });
//   }, []); // memoize handler to prevent infinite loop

//   useEventListener('mousemove', updateMousePosition);

//   return (
//     <p>
//       Mouse X: {coords.x}, Y: {coords.y}
//     </p>
//   );
// }

// To use with a ref:
// function MyDiv() {
//   const divRef = useRef();
//   useEventListener('click', () => console.log('Div clicked!'), divRef.current);
//   return <div ref={divRef}>Click me</div>;
// }