Simplify Event Listener Management with a Custom React Hook

import { useEffect, useRef } from 'react';

function useEventListener(eventName, 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's dependency array.
  useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

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

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

    // Add event listener
    element.addEventListener(eventName, eventListener);

    // Remove event listener on cleanup
    return () => {
      element.removeEventListener(eventName, eventListener);
    };
  }, [eventName, element]); // Re-run if eventName or element changes
}

export default useEventListener;

// Example Usage:
// function MyComponent() {
//   const handleScroll = () => {
//     console.log('Scrolled!');
//   };
//
//   useEventListener('scroll', handleScroll); // Attaches to window by default
//
//   const buttonRef = useRef(null);
//   const handleClick = () => {
//     console.log('Button clicked!');
//   };
//
//   useEventListener('click', handleClick, buttonRef.current); // Attaches to button
//
//   return (
//     <div style={{ height: '200vh' }}>
//       <button ref={buttonRef}>Click me</button>
//       <p>Scroll down to see console logs.</p>
//     </div>
//   );
// }