Part 38: Pagination, Infinite Scrolling & Virtualized Lists

Displaying datasets with thousands of items requires smart pagination and rendering techniques to preserve browser memory and rendering performance.

1. Infinite Scrolling with IntersectionObserver

Instead of legacy window scroll listeners, use the modern browser IntersectionObserver API to trigger data fetching when a sentinel element scrolls into view:

import { useEffect, useRef } from 'react';

export function InfiniteList({ items, hasNextPage, isFetchingNextPage, fetchNextPage }) {
  const sentinelRef = useRef(null);

  useEffect(() => {
    if (!hasNextPage || isFetchingNextPage) return;

    const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        fetchNextPage();
      }
    }, { threshold: 1.0 });

    const currentSentinel = sentinelRef.current;
    if (currentSentinel) observer.observe(currentSentinel);

    return () => {
      if (currentSentinel) observer.unobserve(currentSentinel);
    };
  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);

  return (
    <div>
      {items.map(item => (
        <div key={item.id} className="p-4 border-b">{item.title}</div>
      ))}

      {/* Invisible sentinel element at bottom */}
      <div ref={sentinelRef} className="h-10 text-center">
        {isFetchingNextPage && <p>Loading more...</p>}
      </div>
    </div>
  );
}

2. List Virtualization (TanStack Virtual / React Window)

If you must render 10,000+ items, the DOM will freeze if all nodes are created. Virtualization renders only the items currently visible within the viewport (plus a small buffer), recycling DOM elements as the user scrolls.

Key Takeaways

• Use IntersectionObserver for smooth, performant infinite scrolling.
• Use list virtualization libraries for massive lists (1,000+ items) to keep DOM node counts low.

In Part 39, we will learn Debouncing and Throttling to optimize user inputs and searches!