How to Implement Infinite Scroll in React

Infinite scroll loads more data automatically when the user reaches the bottom of the content. The most performant way to detect this is using the Intersection Observer API, which tells you when a specific DOM element enters or exits the viewport. You place a sentinel element at the bottom of your list and observe it.

Create state variables to hold the list of items, the current page number, a boolean indicating whether more data is loading, and a boolean indicating whether there is more data to load. Initialize the items as an empty array, the page as one, isLoading as false, and hasMore as true.

Write an async function that fetches a page of data from your API using the current page number. After a successful response, append the new items to the existing items array using the spread operator rather than replacing them. Increment the page number. If the API returns fewer items than the page size, set hasMore to false.

Call the fetch function inside a useEffect with an empty dependency array to load the first page of data when the component mounts. This populates the initial list that the user sees before any scrolling happens.

In your JSX, after rendering the list of items, add an empty div element at the very bottom. Attach a ref to this div using useRef. This element acts as the sentinel that you will observe. When the user scrolls it into view, it signals that they have reached the bottom and more data should be loaded.

In a useEffect, create an IntersectionObserver instance and pass it a callback function. The callback receives an array of entries. If the first entry's isIntersecting property is true, the sentinel is visible and you should call the fetch function. Also check that hasMore is true and isLoading is false before fetching to avoid duplicate requests.

After creating the IntersectionObserver, check if the sentinel ref's current value exists and call the observe method on it, passing the sentinel DOM element. Return a cleanup function from the useEffect that calls disconnect on the observer to stop observing when the component unmounts or the effect re-runs.

Below the sentinel element, conditionally render a loading spinner when isLoading is true to give the user feedback that more content is coming. When hasMore is false and items exist, render a message indicating the user has reached the end of the list. These small UI touches significantly improve the perceived quality of the experience.