Function useInView

src/useInView.tsx:36–153

({
  threshold,
  delay,
  trackVisibility,
  rootMargin,
  root,
  triggerOnce,
  skip,
  initialInView,
  fallbackInView,
  onChange,
}: IntersectionOptions = {})

 * ```
 */
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);
  const [state, setState] = React.useState<State>({
    inView: !!initialInView,
    entry: 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;
          }

          setState({
            inView,
            entry,
          });
          if (callback.current) callback.current(inView, entry);

          if (entry.isIntersecting && triggerOnce && unobserve) {
            // If it should only trigger once, unobserve the element after it's inView
            unobserve();
            unobserve = undefined;
          }
        },
        {