useHover

Requirements

• Export useHover() as a named and default React hook returning [ref, isHovered]. ref is a stable callback ref, not an object ref; isHovered starts as false.
• Attach ref to one element in a React component. Listen to its native mouseenter and mouseleave events. Enter sets true and leave sets false; movement between descendants must not make the whole element stop being hovered.
• The callback accepts an HTMLElement or null. Replacing or detaching the element resets hover state to false and removes both listeners from the old element. Events dispatched on the old element must no longer change state.
• Repeated ref calls with the same node must not reset an active hover or duplicate listeners. The callback identity must remain stable across renders.
• Remove listeners on unmount. Separate instances maintain independent state; Strict Mode effect replay must not duplicate listeners.
• In TypeScript, implement useHover<T extends HTMLElement = HTMLElement>(): [(node: T | null) => void, boolean]. Support an explicit element type such as HTMLButtonElement.
• Mouse hover is the scope. Touch interaction, pointer events, CSS hover rules, and discovering the pointer’s position when a node first attaches are outside scope; attachment always starts unhovered.

Examples

Input: const [ref, hovered] = useHover(); attach ref to a button
Output: hovered is false until the button receives mouseenter.

Input: mouseenter followed by mouseleave
Output: hovered changes from true to false.

Input: Replace the referenced node while hovered
Output: The replacement begins unhovered and the old node no longer affects the hook.