Update useHover implementation

Author: tylermcginnis

index.js

@@ -425,31 +425,40 @@ export function useHistoryState(initialPresent = {}) {
 
 export function useHover() {
   const [hovering, setHovering] = React.useState(false);
-  const ref = React.useRef(null);
-
-  React.useEffect(() => {
-    const node = ref.current;
+  const previousNode = React.useRef(null);
 
-    if (!node) return;
+  const handleMouseEnter = React.useCallback(() => {
+    setHovering(true);
+  }, []);
 
-    const handleMouseEnter = () => {
-      setHovering(true);
-    };
+  const handleMouseLeave = React.useCallback(() => {
+    setHovering(false);
+  }, []);
 
-    const handleMouseLeave = () => {
-      setHovering(false);
-    };
+  const customRef = React.useCallback(
+    (node) => {
+      if (previousNode.current instanceof HTMLElement) {
+        previousNode.current.removeEventListener(
+          "mouseenter",
+          handleMouseEnter
+        );
+        previousNode.current.removeEventListener(
+          "mouseleave",
+          handleMouseLeave
+        );
+      }
 
-    node.addEventListener("mouseenter", handleMouseEnter);
-    node.addEventListener("mouseleave", handleMouseLeave);
+      if (node instanceof HTMLElement) {
+        node.addEventListener("mouseenter", handleMouseEnter);
+        node.addEventListener("mouseleave", handleMouseLeave);
+      }
 
-    return () => {
-      node.removeEventListener("mouseenter", handleMouseEnter);
-      node.removeEventListener("mouseleave", handleMouseLeave);
-    };
-  }, []);
+      previousNode.current = node;
+    },
+    [handleMouseEnter, handleMouseLeave]
+  );
 
-  return [ref, hovering];
+  return [customRef, hovering];
 }
 
 export function useIdle(ms = 1000 * 60) {