IntersectionObserver infinite scroll hook

9825 views

                  import { useEffect, useRef } from 'react';

export function useInfiniteScroll(onLoadMore: () => void, enabled: boolean) {
  const ref = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (!enabled || !ref.current) return;
    const el = ref.current;

    const obs = new IntersectionObserver(
      (entries) => {
        if (entries[0]?.isIntersecting) onLoadMore();
      },
      { rootMargin: '300px' }
    );

    obs.observe(el);
    return () => obs.disconnect();
  }, [enabled, onLoadMore]);

  return ref;
}

Scroll listeners are easy to get wrong and they can cause performance issues on long lists. IntersectionObserver lets the browser do the hard work: I put a sentinel div at the bottom of the list and trigger fetchNextPage when it becomes visible. I also guard against multiple triggers by checking isFetchingNextPage. rootMargin is a great tool—loading a little early avoids the ‘hit the bottom and wait’ feeling. This hook keeps component logic simple and reusable, and paired with cursor pagination on the backend it stays reliable even when new items are inserted while the user is scrolling.

Mateo Rodriguez

More from Mateo Rodriguez

IntersectionObserver infinite scroll hook

0 Comments

More from Mateo Rodriguez