Function useInfiniteScroll

src/useInfiniteScroll.ts:97–157

({
  next,
  hasMore,
  dataLength,
  scrollThreshold = 0.8,
  scrollableTarget,
  inverse = false,
}: UseInfiniteScrollOptions)

 * ```
 */
export function useInfiniteScroll({
  next,
  hasMore,
  dataLength,
  scrollThreshold = 0.8,
  scrollableTarget,
  inverse = false,
}: UseInfiniteScrollOptions): UseInfiniteScrollResult {
  const [isLoading, setIsLoading] = useState(false);
  const sentinelRef = useRef<HTMLDivElement>(null);
  const actionTriggeredRef = useRef(false);

  // Stable ref so the observer callback always calls the latest next()
  // without triggering observer reconnection when an inline function is passed.
  const nextRef = useRef(next);
  nextRef.current = next;

  const getScrollableNode = useCallback((): HTMLElement | null => {
    if (scrollableTarget instanceof HTMLElement) return scrollableTarget;
    if (typeof scrollableTarget === 'string') {
      return document.getElementById(scrollableTarget);
    }
    return null;
  }, [scrollableTarget]);

  // Reset the load guard when new data arrives.
  useEffect(() => {
    actionTriggeredRef.current = false;
    setIsLoading(false);
  }, [dataLength]);

  // IntersectionObserver lifecycle.
  useEffect(() => {
    if (!hasMore) return;
    if (typeof IntersectionObserver === 'undefined') return;

    const sentinel = sentinelRef.current;
    if (!sentinel) return;

    const root: Element | null = getScrollableNode();

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (!entry.isIntersecting || actionTriggeredRef.current) return;
        actionTriggeredRef.current = true;
        setIsLoading(true);
        nextRef.current();
      },
      {
        root,
        rootMargin: buildRootMargin(scrollThreshold, inverse),
        threshold: 0,
      }
    );

    observer.observe(sentinel);
    return () => observer.disconnect();
  }, [hasMore, scrollThreshold, inverse, getScrollableNode]);