Function useOnInView

src/useOnInView.tsx:46–149

(
  onIntersectionChange: IntersectionChangeEffect<TElement>,
  {
    threshold,
    root,
    rootMargin,
    trackVisibility,
    delay,
    triggerOnce,
    skip,
  }: IntersectionEffectOptions = {},
)

 * ```
 */
export const useOnInView = <TElement extends Element>(
  onIntersectionChange: IntersectionChangeEffect<TElement>,
  {
    threshold,
    root,
    rootMargin,
    trackVisibility,
    delay,
    triggerOnce,
    skip,
  }: IntersectionEffectOptions = {},
) => {
  const onIntersectionChangeRef = React.useRef(onIntersectionChange);
  const observedElementRef = React.useRef<TElement | null>(null);
  const observerCleanupRef = React.useRef<(() => void) | undefined>(undefined);
  const lastInViewRef = React.useRef<boolean | undefined>(undefined);

  useSyncEffect(() => {
    onIntersectionChangeRef.current = onIntersectionChange;
  }, [onIntersectionChange]);

  // biome-ignore lint/correctness/useExhaustiveDependencies: Threshold arrays are normalized inside the callback
  return React.useCallback(
    (element: TElement | undefined | null) => {
      // React <19 never calls ref callbacks with `null` during unmount, so we
      // eagerly tear down existing observers manually whenever the target changes.
      const cleanupExisting = () => {
        if (observerCleanupRef.current) {
          const cleanup = observerCleanupRef.current;
          observerCleanupRef.current = undefined;
          cleanup();
        }
      };

      if (element === observedElementRef.current) {
        return observerCleanupRef.current;
      }

      if (!element || skip) {
        cleanupExisting();
        observedElementRef.current = null;
        lastInViewRef.current = undefined;
        return;
      }

      cleanupExisting();

      observedElementRef.current = element;
      let destroyed = false;

      const destroyObserver = observe(
        element,
        (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) {