JAVASCRIPT
React Hook: useEventListener for DOM Events
Build a versatile React hook `useEventListener` to attach and clean up event listeners dynamically to any DOM element or global object, simplifying event management in your components.
import { useRef, useEffect } from 'react';
const useEventListener = (eventName, handler, element = window) => {
const savedHandler = useRef();
useEffect(() => {
savedHandler.current = handler;
}, [handler]);
useEffect(() => {
const isSupported = element && element.addEventListener;
if (!isSupported) return;
const eventListener = (event) => savedHandler.current(event);
element.addEventListener(eventName, eventListener);
return () => {
element.removeEventListener(eventName, eventListener);
};
}, [eventName, element]);
};
export default useEventListener;
How it works: The `useEventListener` hook makes it easy to add and remove event listeners to any DOM element (defaulting to `window`) or other objects like `document`. It uses `useRef` to keep a stable reference to the `handler` function, preventing unnecessary re-subscriptions when the handler itself is a new function on re-renders. The `useEffect` handles the attachment and cleanup of the event listener, ensuring no memory leaks. This is highly useful for managing global events like `keydown`, `resize`, or custom events on specific elements.