<pre class="shiki github-dark shaku"><code>import { Ref, useRef, useState, useCallback } from 'react';/** * useHover is a custom React hook that tracks whether a given DOM element is being hovered. * It returns a callback ref and a boolean indicating hover state. */export function useHover&lt;T extends HTMLElement&gt;(): [Ref&lt;T&gt;, boolean] { const [isHovered, setIsHovered] = useState&lt;boolean&gt;(false); // These callbacks update the hover state. const handleMouseEnter = useCallback(() =&gt; setIsHovered(true), []); const handleMouseLeave = useCallback(() =&gt; setIsHovered(false), []); // Create a mutable ref to hold the DOM element. // It must be typed as `T | null` because: // - When React mounts the element, it passes the DOM node (of type T). // - When React unmounts the element, it calls the ref callback with `null`. const ref = useRef&lt;T | null&gt;(null); /** * This callback ref handles attaching and detaching event listeners. * React will call it: * - with the DOM node (T) when the element mounts * - with `null` when the element unmounts * * We use this opportunity to: * - Clean up event listeners from the previous ref (if any) * - Attach new listeners to the new DOM node */ const callbackRef = useCallback((node: T | null) =&gt; { // Remove event listeners from the previous node (if any) if (ref.current) { ref.current.removeEventListener('mouseenter', handleMouseEnter); ref.current.removeEventListener('mouseleave', handleMouseLeave); } // Update the ref with the new node (or null) ref.current = node; // Add event listeners to the new node (if not null) if (ref.current) { ref.current.addEventListener('mouseenter', handleMouseEnter); ref.current.addEventListener('mouseleave', handleMouseLeave); } }, [handleMouseEnter, handleMouseLeave]); // Return the callback ref and the hover state return [callbackRef, isHovered];}</code></pre>

Type-Safe Hover Detection with Ref<T | null> for Reliable Mount and Unmount Handling

It is common to see conditional rendering based on hover state of some element. We can achive it by CSS pseduo class :hover, but for more complex case…