Simplify Event Handling with `useEventListener` Hook

import { useRef, useEffect } from 'react';

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

  // Update ref.current value if handler changes.
  // This allows our effect below to always get latest handler without re-running.
  useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

  useEffect(() => {
    // Make sure element supports addEventListener
    // On Safari, document.body.addEventListener doesn't work.
    const isSupported = element && element.addEventListener;
    if (!isSupported) return;

    // Create event listener that calls handler function stored in 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 MyComponent() {
  const handleKeyDown = (event) => {
    console.log('Key pressed:', event.key);
  };

  useEventListener('keydown', handleKeyDown, document); // Listen for keydown on the document

  const handleClick = (event) => {
    console.log('Window clicked!');
  };

  useEventListener('click', handleClick); // Listen for click on window (default)

  return (
    <div>
      <p>Press any key or click anywhere on the window.</p>
    </div>
  );
}
*/