fix: preserve React 17 fallback callbacks

Author: thebuilder

package.json

@@ -101,7 +101,7 @@
       "path": "dist/index.mjs",
       "name": "useInView",
       "import": "{ useInView }",
-      "limit": "1.32 kB"
+      "limit": "1.36 kB"
     },
     {
       "path": "dist/index.mjs",

src/__tests__/useInView.test.tsx

@@ -481,6 +481,37 @@ test("should handle fallback if unsupported", () => {
   );
 });
 
+test("should use the latest onChange when fallback reattaches synchronously", () => {
+  destroyIntersectionMocking();
+  // @ts-expect-error
+  window.IntersectionObserver = undefined;
+  const firstOnChange = vi.fn();
+  const secondOnChange = vi.fn();
+  const { rerender } = render(
+    <HookComponent
+      options={{
+        fallbackInView: true,
+        onChange: firstOnChange,
+        threshold: 0,
+      }}
+    />,
+  );
+  firstOnChange.mockClear();
+
+  rerender(
+    <HookComponent
+      options={{
+        fallbackInView: true,
+        onChange: secondOnChange,
+        threshold: 1,
+      }}
+    />,
+  );
+
+  expect(firstOnChange).not.toHaveBeenCalled();
+  expect(secondOnChange).toHaveBeenCalledOnce();
+});
+
 test("should handle defaultFallbackInView if unsupported", () => {
   destroyIntersectionMocking();
   // @ts-expect-error

src/useInView.tsx

@@ -10,6 +10,11 @@ type State = {
   entry?: IntersectionObserverEntry;
 };
 
+type RefState = {
+  node: Element | null;
+  reset: boolean;
+};
+
 /**
  * React Hooks make it easy to monitor the `inView` state of your components. Call
  * the `useInView` hook with the (optional) [options](#options) you need. It will
@@ -81,27 +86,38 @@ export function useInView({
     },
   );
 
-  const refState = React.useRef<Element | false | null>(null);
+  const refState = React.useRef<RefState>({
+    node: null,
+    reset: false,
+  });
 
   const setRef = React.useCallback(
     function setRef(node?: Element | null) {
-      if (node) refState.current = node;
-      else if (refState.current) refState.current = false;
+      if (node) {
+        refState.current.node = node;
+        refState.current.reset = false;
+      } else if (refState.current.node) {
+        refState.current.node = null;
+        refState.current.reset = true;
+      }
 
       const cleanup = observerRef(node);
       if (!cleanup) return;
 
       return () => {
         cleanup();
-        if (refState.current === node) refState.current = false;
+        if (refState.current.node === node) {
+          refState.current.node = null;
+          refState.current.reset = true;
+        }
       };
     },
     [observerRef],
   );
 
   useIsomorphicLayoutEffect(() => {
-    if (refState.current !== false) return;
-    refState.current = null;
+    if (!refState.current.reset) return;
+    refState.current.reset = false;
     if (triggerOnce || skip) return;
 
     setState({ inView: !!initialInView, entry: undefined });

src/useIntersectionObserverRef.ts

@@ -5,8 +5,10 @@ import { observe } from "./observe";
 export const useIsomorphicLayoutEffect =
   typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
 
-const useSyncEffect =
-  Reflect.get(React, "useInsertionEffect") || useIsomorphicLayoutEffect;
+const useInsertionEffect = Reflect.get(React, "useInsertionEffect") as
+  | typeof React.useEffect
+  | undefined;
+const useSyncEffect = useInsertionEffect ?? React.useEffect;
 
 export function supportsRefCleanup(version: string | undefined) {
   return version?.startsWith("19.") || false;
@@ -26,6 +28,16 @@ type ObserverRefOptions = IntersectionObserverInitWithOptions & {
   triggerOnce?: boolean;
 };
 
+type ObserverRefCallback<TElement extends Element> = (
+  element: TElement | undefined | null,
+) => (() => void) | undefined;
+
+type ObserverState<TElement extends Element> = {
+  node: TElement | null;
+  stop: (() => void) | undefined;
+  owner: ObserverRefCallback<TElement> | null;
+};
+
 export function useIntersectionObserverRef<TElement extends Element>(
   onIntersectionChange: ObserverCallback<TElement>,
   {
@@ -41,13 +53,17 @@ export function useIntersectionObserverRef<TElement extends Element>(
   }: ObserverRefOptions,
 ) {
   const onIntersectionChangeRef = React.useRef(onIntersectionChange);
-  const observerStateRef = React.useRef<
-    [
-      TElement | null,
-      (() => void) | undefined,
-      ((element?: TElement | null) => void) | null,
-    ]
-  >([null, undefined, null]);
+  const observerStateRef = React.useRef<ObserverState<TElement>>({
+    node: null,
+    stop: undefined,
+    owner: null,
+  });
+
+  // React 17 has no effect that runs before callback refs attach. Keep its
+  // synchronous fallback behavior compatible by publishing during render.
+  if (!useInsertionEffect) {
+    onIntersectionChangeRef.current = onIntersectionChange;
+  }
 
   useSyncEffect(() => {
     onIntersectionChangeRef.current = onIntersectionChange;
@@ -58,41 +74,41 @@ export function useIntersectionObserverRef<TElement extends Element>(
     function setRef(element: TElement | undefined | null) {
       const observerState = observerStateRef.current;
 
-      if (!element && observerState[2] !== setRef) {
+      if (!element && observerState.owner !== setRef) {
         return;
       }
 
-      if (element === observerState[0]) {
-        observerState[2] = setRef;
-        return canUseRefCleanup ? observerState[1] : undefined;
+      if (element === observerState.node) {
+        observerState.owner = setRef;
+        return canUseRefCleanup ? observerState.stop : undefined;
       }
 
-      const cleanup = observerState[1];
-      observerState[1] = undefined;
+      const cleanup = observerState.stop;
+      observerState.stop = undefined;
       cleanup?.();
 
       if (!element || skip) {
-        observerState[0] = null;
-        observerState[2] = element ? setRef : null;
+        observerState.node = null;
+        observerState.owner = element ? setRef : null;
         return;
       }
 
-      observerState[0] = element;
-      observerState[2] = setRef;
+      observerState.node = element;
+      observerState.owner = setRef;
 
       let destroyObserver: (() => void) | undefined;
       let previousInView: boolean | undefined;
 
       function stopObserving() {
         destroyObserver?.();
 
-        if (observerState[1] === stopObserving) {
-          observerState[0] = null;
-          observerState[1] = undefined;
+        if (observerState.stop === stopObserving) {
+          observerState.node = null;
+          observerState.stop = undefined;
         }
       }
 
-      observerState[1] = stopObserving;
+      observerState.stop = stopObserving;
       destroyObserver = observe(
         element,
         (inView, entry) => {
@@ -115,9 +131,9 @@ export function useIntersectionObserverRef<TElement extends Element>(
         fallbackInView,
       );
 
-      if (observerState[1] !== stopObserving) destroyObserver();
+      if (observerState.stop !== stopObserving) destroyObserver();
 
-      return canUseRefCleanup ? observerState[1] : undefined;
+      return canUseRefCleanup ? observerState.stop : undefined;
     },
     [
       Array.isArray(threshold) ? threshold.toString() : threshold,