JAVASCRIPT
Efficiently Manage DOM Event Listeners with useEventListener
A versatile React hook to add and remove event listeners (e.g., 'click', 'resize', 'scroll') cleanly, ensuring proper cleanup on component unmount.
import { useEffect, useRef } from 'react';
function useEventListener(eventType, 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(eventType, eventListener);
return () => {
element.removeEventListener(eventType, eventListener);
};
}, [eventType, element]);
}
export default useEventListener;
// Example Usage:
// import React, { useState } from 'react';
// import useEventListener from './useEventListener';
//
// function MyComponent() {
// const [coords, setCoords] = useState({ x: 0, y: 0 });
//
// const handler = ({ clientX, clientY }) => {
// setCoords({ x: clientX, y: clientY });
// };
//
// useEventListener('mousemove', handler);
//
// return (
// <div>
// The mouse position is ({coords.x}, {coords.y})
// </div>
// );
// }
// export default MyComponent;
How it works: This `useEventListener` hook simplifies managing DOM event listeners. It takes an event type, a handler function, and an optional target element (defaults to `window`). It uses `useRef` to keep a stable reference to the handler, preventing unnecessary re-subscriptions, and `useEffect` to attach the listener when the component mounts and clean it up when it unmounts, avoiding memory leaks and ensuring efficient resource management.