observe latest node when ref is used on multiple elements

Author: onderonur

package-lock.json

@@ -10,7 +10,7 @@
 
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
-This is a easy to use React hook package for using [Insersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) declaratively. By using this hook, you can easily track if a component is visible or not, create lazy loading images, trigger animations on entering or leaving the viewport, implement infinite scroll etc.
+This is an easy to use React hook package for using [Insersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) declaratively. By using this hook, you can easily track if a component is visible or not, create lazy loading images, trigger animations on entering or leaving the viewport, implement infinite scroll etc.
 
 **Live demo is [here](https://onderonur.github.io/react-intersection-observer-hook).**
 
@@ -107,6 +107,10 @@ function Example() {
 }
 ```
 
+> [!NOTE]
+> The returned `ref` from `useIntersectionObserver` and `useTrackVisibility` can be attached to **only** one element at a time. If you assign it to multiple elements, only the most recently assigned element will be observed.
+> Currently, there is no support for observing multiple elements by using the same `ref`. Documentation will be updated when this is implemented.
+
 You can find more usage examples in the `demo` app in this repository.
 
 ## Arguments

packages/react-intersection-observer-hook/README.md

@@ -1,6 +1,6 @@
 {
   "name": "react-intersection-observer-hook",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "React hook to use IntersectionObserver declaratively.",
   "keywords": [
     "react",

packages/react-intersection-observer-hook/package.json

@@ -1,6 +1,6 @@
 import { useCallback, useRef, useState } from 'react';
 import { type Omit } from './types';
-import { createObserverCache, type CachedIntersectionObserver } from './utils';
+import { type CachedIntersectionObserver, createObserverCache } from './utils';
 
 const DEFAULT_ROOT_MARGIN = '0px';
 const DEFAULT_THRESHOLD = [0];
@@ -34,6 +34,11 @@ export type IntersectionObserverHookResult = [
   },
 ];
 
+type ReinitializeObserverCallback = (args: {
+  newNode: IntersectionObserverHookRefCallbackNode;
+  newRoot: IntersectionObserverHookRootRefCallbackNode;
+}) => void;
+
 const observerCache = createObserverCache();
 
 // For more info:
@@ -51,65 +56,64 @@ function useIntersectionObserver(
 
   const [entry, setEntry] = useState<IntersectionObserverEntry>();
 
-  const reinitializeObserver = useCallback(() => {
-    function cleanupObserver() {
-      const observer = observerRef.current;
-      const node = nodeRef.current;
-
-      if (node) {
-        observer?.unobserve(node);
-        setEntry(undefined);
-      }
+  const reinitializeObserver = useCallback<ReinitializeObserverCallback>(
+    ({ newNode, newRoot }) => {
+      function cleanupObserver() {
+        const observer = observerRef.current;
+        const node = nodeRef.current;
 
-      observerRef.current = null;
-    }
+        if (node) {
+          observer?.unobserve(node);
+          setEntry(undefined);
+        }
 
-    function initializeObserver() {
-      const node = nodeRef.current;
+        observerRef.current = null;
+      }
 
-      if (!node) return;
+      function initializeObserver() {
+        if (!newNode) return;
 
-      const observer = observerCache.getObserver({
-        root: rootRef.current,
-        rootMargin,
-        threshold,
-      });
+        const newObserver = observerCache.getObserver({
+          root: newRoot,
+          rootMargin,
+          threshold,
+        });
 
-      observer.observe(node, (observedEntry) => {
-        setEntry(observedEntry);
-      });
+        newObserver.observe(newNode, (observedEntry) => {
+          setEntry(observedEntry);
+        });
 
-      observerRef.current = observer;
-    }
+        observerRef.current = newObserver;
+        nodeRef.current = newNode;
+        rootRef.current = newRoot;
+      }
 
-    cleanupObserver();
-    initializeObserver();
-  }, [rootMargin, threshold]);
+      cleanupObserver();
+      initializeObserver();
+    },
+    [rootMargin, threshold],
+  );
 
   // React will call the ref callback with the DOM element when the component mounts,
   // and call its cleanup function when it unmounts.
   // So, we don't need an useEffect etc to unobserve nodes.
   const refCallback = useCallback<IntersectionObserverHookRefCallback>(
     (node) => {
-      nodeRef.current = node;
-      reinitializeObserver();
+      reinitializeObserver({ newNode: node, newRoot: rootRef.current });
 
       return () => {
-        nodeRef.current = null;
-        reinitializeObserver();
+        reinitializeObserver({ newNode: null, newRoot: rootRef.current });
       };
     },
     [reinitializeObserver],
   );
 
   const rootRefCallback = useCallback<IntersectionObserverHookRootRefCallback>(
     (rootNode) => {
-      rootRef.current = rootNode;
-      reinitializeObserver();
+      reinitializeObserver({ newNode: nodeRef.current, newRoot: rootNode });
 
       return () => {
-        rootRef.current = null;
-        reinitializeObserver();
+        reinitializeObserver({ newNode: nodeRef.current, newRoot: null });
       };
     },
     [reinitializeObserver],