Update useIntersectionObserver implementation

Author: tylermcginnis

index.js

@@ -510,33 +510,34 @@ export function useIdle(ms = 1000 * 60) {
 }
 
 export function useIntersectionObserver(options = {}) {
-  const { threshold = 1, root = null, rootMargin = "0%" } = options;
-  const ref = React.useRef(null);
+  const { threshold = 1, root = null, rootMargin = "0px" } = options;
   const [entry, setEntry] = React.useState(null);
 
-  React.useEffect(() => {
-    const node = ref?.current;
-
-    if (!node || typeof IntersectionObserver !== "function") {
-      return;
-    }
+  const previousObserver = React.useRef(null);
 
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        setEntry(entry);
-      },
-      { threshold, root, rootMargin }
-    );
+  const customRef = React.useCallback(
+    (node) => {
+      if (previousObserver.current) {
+        previousObserver.current.disconnect();
+        previousObserver.current = null;
+      }
 
-    observer.observe(node);
+      if (node instanceof HTMLElement) {
+        const observer = new IntersectionObserver(
+          ([entry]) => {
+            setEntry(entry);
+          },
+          { threshold, root, rootMargin }
+        );
 
-    return () => {
-      setEntry(null);
-      observer.disconnect();
-    };
-  }, [threshold, root, rootMargin]);
+        observer.observe(node);
+        previousObserver.current = observer;
+      }
+    },
+    [threshold, root, rootMargin]
+  );
 
-  return [ref, entry];
+  return [customRef, entry];
 }
 
 export function useIsClient() {