JAVASCRIPT
React `useHover` Hook for Detecting Element Hover State
Easily detect when a specific DOM element is being hovered over in React, enabling dynamic UI changes or effects based on mouse interactions.
import { useState, useRef, useEffect, useCallback } from 'react';
const useHover = () => {
const [isHovered, setIsHovered] = useState(false);
const ref = useRef(null);
const handleMouseEnter = useCallback(() => setIsHovered(true), []);
const handleMouseLeave = useCallback(() => setIsHovered(false), []);
useEffect(() => {
const node = ref.current;
if (node) {
node.addEventListener('mouseenter', handleMouseEnter);
node.addEventListener('mouseleave', handleMouseLeave);
return () => {
node.removeEventListener('mouseenter', handleMouseEnter);
node.removeEventListener('mouseleave', handleMouseLeave);
};
}
}, [handleMouseEnter, handleMouseLeave]); // Dependencies are stable due to useCallback
return [ref, isHovered];
};
export default useHover;
How it works: The `useHover` hook allows components to detect if a referenced DOM element is currently being hovered by the mouse. It returns a `ref` to attach to an element and a boolean `isHovered` state. The hook attaches and cleans up `mouseenter` and `mouseleave` event listeners using `useEffect`, ensuring correct behavior throughout the component's lifecycle and preventing memory leaks. This is useful for implementing custom hover effects.