feat: refactor useInView to utilize useOnInView and simplify options handling

Author: thebuilder

README.md

@@ -215,8 +215,7 @@ Provide these as the options argument in the `useInView` hook or as props on the
 | **initialInView**      | `boolean`                 | `false`     | Set the initial value of the `inView` boolean. This can be used if you expect the element to be in the viewport to start with, and you want to trigger something when it leaves.                                                                                                                |
 | **fallbackInView**     | `boolean`                 | `undefined` | If the `IntersectionObserver` API isn't available in the client, the default behavior is to throw an Error. You can set a specific fallback behavior, and the `inView` value will be set to this instead of failing. To set a global default, you can set it with the `defaultFallbackInView()` |
 
-`useOnInView` accepts the same options as `useInView` except `onChange`,
-`initialInView`, and `fallbackInView`.
+`useOnInView` accepts the same options as `useInView` except `onChange`.
 
 ### InView Props
 

src/__tests__/useOnInView.test.tsx

@@ -1,9 +1,11 @@
 import { render } from "@testing-library/react";
-import { useCallback, useEffect, useState } from "react";
+import * as React from "react";
 import type { IntersectionEffectOptions } from "..";
+import { supportsRefCleanup } from "../reactVersion";
 import { intersectionMockInstance, mockAllIsIntersecting } from "../test-utils";
 import { useOnInView } from "../useOnInView";
 
+const { useCallback, useEffect, useState } = React;
 const OnInViewChangedComponent = ({
   options,
   unmount,
@@ -309,6 +311,9 @@ const MultipleCallbacksComponent = ({
   const mergedRefs = useCallback(
     (node: Element | null) => {
       const cleanup = [ref1(node), ref2(node), ref3(node)];
+      if (!supportsRefCleanup) {
+        return;
+      }
       return () =>
         cleanup.forEach((fn) => {
           fn?.();

src/index.tsx

@@ -90,7 +90,4 @@ export type InViewHookResponse = [
   entry?: IntersectionObserverEntry;
 };
 
-export type IntersectionEffectOptions = Omit<
-  IntersectionOptions,
-  "onChange" | "fallbackInView" | "initialInView"
->;
+export type IntersectionEffectOptions = IntersectionOptions;

src/reactVersion.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+
+const major = Number.parseInt(React.version?.split(".")[0] ?? "", 10);
+// NaN => unknown version; default to false to avoid returning ref cleanup on <19.
+export const supportsRefCleanup = Number.isFinite(major) && major >= 19;

src/useInView.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import type { IntersectionOptions, InViewHookResponse } from "./index";
-import { observe } from "./observe";
+import { supportsRefCleanup } from "./reactVersion";
+import { useOnInView } from "./useOnInView";
 
 type State = {
   inView: boolean;
@@ -33,116 +34,61 @@ type State = {
  * };
  * ```
  */
-export function useInView({
-  threshold,
-  delay,
-  trackVisibility,
-  rootMargin,
-  root,
-  triggerOnce,
-  skip,
-  initialInView,
-  fallbackInView,
-  onChange,
-}: IntersectionOptions = {}): InViewHookResponse {
-  const [ref, setRef] = React.useState<Element | null>(null);
-  const callback = React.useRef<IntersectionOptions["onChange"]>(onChange);
-  const lastInViewRef = React.useRef<boolean | undefined>(initialInView);
+export function useInView(
+  options: IntersectionOptions = {},
+): InViewHookResponse {
   const [state, setState] = React.useState<State>({
-    inView: !!initialInView,
+    inView: !!options.initialInView,
     entry: undefined,
   });
+  const optionsRef = React.useRef(options);
+  optionsRef.current = options;
+  const entryTargetRef = React.useRef<Element | undefined>(undefined);
 
-  // Store the onChange callback in a `ref`, so we can access the latest instance
-  // inside the `useEffect`, but without triggering a rerender.
-  callback.current = onChange;
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: threshold is not correctly detected as a dependency
-  React.useEffect(
-    () => {
-      if (lastInViewRef.current === undefined) {
-        lastInViewRef.current = initialInView;
-      }
-      // Ensure we have node ref, and that we shouldn't skip observing
-      if (skip || !ref) return;
-
-      let unobserve: (() => void) | undefined;
-      unobserve = observe(
-        ref,
-        (inView, entry) => {
-          const previousInView = lastInViewRef.current;
-          lastInViewRef.current = inView;
-
-          // Ignore the very first `false` notification so consumers only hear about actual state changes.
-          if (previousInView === undefined && !inView) {
-            return;
-          }
+  const inViewRef = useOnInView((inView, entry) => {
+    entryTargetRef.current = entry.target;
+    setState({ inView, entry });
+    if (optionsRef.current.onChange) {
+      optionsRef.current.onChange(inView, entry);
+    }
+  }, options);
 
+  const refCallback = React.useCallback(
+    (node: Element | null) => {
+      const resetIfNeeded = () => {
+        const {
+          skip,
+          triggerOnce,
+          initialInView: latestInitialInView,
+        } = optionsRef.current;
+        if (!skip && !triggerOnce && entryTargetRef.current) {
           setState({
-            inView,
-            entry,
+            inView: !!latestInitialInView,
+            entry: undefined,
           });
-          if (callback.current) callback.current(inView, entry);
+          entryTargetRef.current = undefined;
+        }
+      };
+      const cleanup = inViewRef(node);
 
-          if (entry.isIntersecting && triggerOnce && unobserve) {
-            // If it should only trigger once, unobserve the element after it's inView
-            unobserve();
-            unobserve = undefined;
-          }
-        },
-        {
-          root,
-          rootMargin,
-          threshold,
-          // @ts-expect-error
-          trackVisibility,
-          delay,
-        },
-        fallbackInView,
-      );
+      if (!node) {
+        resetIfNeeded();
+        return;
+      }
+
+      if (!supportsRefCleanup) {
+        return;
+      }
 
       return () => {
-        if (unobserve) {
-          unobserve();
-        }
+        cleanup?.();
+        resetIfNeeded();
       };
     },
-    // We break the rule here, because we aren't including the actual `threshold` variable
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      // If the threshold is an array, convert it to a string, so it won't change between renders.
-      Array.isArray(threshold) ? threshold.toString() : threshold,
-      ref,
-      root,
-      rootMargin,
-      triggerOnce,
-      skip,
-      trackVisibility,
-      fallbackInView,
-      delay,
-    ],
+    [inViewRef],
   );
 
-  const entryTarget = state.entry?.target;
-  const previousEntryTarget = React.useRef<Element | undefined>(undefined);
-  if (
-    !ref &&
-    entryTarget &&
-    !triggerOnce &&
-    !skip &&
-    previousEntryTarget.current !== entryTarget
-  ) {
-    // If we don't have a node ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)
-    // This ensures we correctly reflect the current state - If you aren't observing anything, then nothing is inView
-    previousEntryTarget.current = entryTarget;
-    setState({
-      inView: !!initialInView,
-      entry: undefined,
-    });
-    lastInViewRef.current = initialInView;
-  }
-
-  const result = [setRef, state.inView, state.entry] as InViewHookResponse;
+  const result = [refCallback, state.inView, state.entry] as InViewHookResponse;
 
   // Support object destructuring, by adding the specific values.
   result.ref = result[0];

src/useOnInView.tsx

@@ -4,6 +4,7 @@ import type {
   IntersectionEffectOptions,
 } from "./index";
 import { observe } from "./observe";
+import { supportsRefCleanup } from "./reactVersion";
 
 const useSyncEffect =
   (
@@ -55,18 +56,21 @@ export const useOnInView = <TElement extends Element>(
     delay,
     triggerOnce,
     skip,
+    initialInView,
+    fallbackInView,
   }: IntersectionEffectOptions = {},
 ) => {
   const onIntersectionChangeRef = React.useRef(onIntersectionChange);
+  const initialInViewValue = initialInView ? true : undefined;
   const observedElementRef = React.useRef<TElement | null>(null);
   const observerCleanupRef = React.useRef<(() => void) | undefined>(undefined);
-  const lastInViewRef = React.useRef<boolean | undefined>(undefined);
+  const lastInViewRef = React.useRef<boolean | undefined>(initialInViewValue);
 
   useSyncEffect(() => {
     onIntersectionChangeRef.current = onIntersectionChange;
   }, [onIntersectionChange]);
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: Threshold arrays are normalized inside the callback
+  // biome-ignore lint/correctness/useExhaustiveDependencies: threshold array handled inside
   return React.useCallback(
     (element: TElement | undefined | null) => {
       // React <19 never calls ref callbacks with `null` during unmount, so we
@@ -80,19 +84,20 @@ export const useOnInView = <TElement extends Element>(
       };
 
       if (element === observedElementRef.current) {
-        return observerCleanupRef.current;
+        return supportsRefCleanup ? observerCleanupRef.current : undefined;
       }
 
       if (!element || skip) {
         cleanupExisting();
         observedElementRef.current = null;
-        lastInViewRef.current = undefined;
-        return;
+        lastInViewRef.current = initialInViewValue;
+        return undefined;
       }
 
       cleanupExisting();
 
       observedElementRef.current = element;
+      lastInViewRef.current = initialInViewValue;
       let destroyed = false;
 
       const destroyObserver = observe(
@@ -121,6 +126,7 @@ export const useOnInView = <TElement extends Element>(
           trackVisibility,
           delay,
         } as IntersectionObserverInit,
+        fallbackInView,
       );
 
       function stopObserving() {
@@ -136,7 +142,7 @@ export const useOnInView = <TElement extends Element>(
 
       observerCleanupRef.current = stopObserving;
 
-      return observerCleanupRef.current;
+      return supportsRefCleanup ? observerCleanupRef.current : undefined;
     },
     [
       Array.isArray(threshold) ? threshold.toString() : threshold,
@@ -146,6 +152,8 @@ export const useOnInView = <TElement extends Element>(
       delay,
       triggerOnce,
       skip,
+      initialInViewValue,
+      fallbackInView,
     ],
   );
 };