React Infinite Scroll Component

As increasing amounts of data are loaded into a web application, it can become necessary to introduce pagination patterns to improve the performance as well as the user experience. A common pattern for handling this is the "infinite scroll" paradigm. Infinite scroll is a design pattern that loads content continuously as the user scrolls down the page, eliminating the need for traditional pagination controls.

Many data fetching libraries support this style of pagination, and provide easy ways to integrate data fetching. One example is TanStack Query's useInfiniteQuery hook. These libraries leave it up to you to decide when to fetch more data, and one of the more elegant ways I've found to handle this is to create a reusable component whose sole concern is to request more data. Below is an InfiniteScroll React component using the IntersectionObserver API.

import { InfiniteScroll } from './InfiniteScroll';

export default function App() {
  const fetchMore = () => console.log('fetching more');

  return (
    <div>
      <h1>Scroll to fetch more</h1>

      <InfiniteScroll fetchMore={fetchMore} hasMore>
        {Array.from({ length: 50 }).map((_, i) => (
          <div key={i}>Item {i + 1}</div>
        ))}
      </InfiniteScroll>
    </div>
  );
}

All that is left to do is wire up the data fetching logic to the exposed properties: children, fetchMore, and hasMore.