Infinite scrolling and React Infinite Query tutorial

— 4 minute read

In the previous article, we looked at using the React Infinite Query. However, we still had a button that we needed to click to load the next set of results.

In this article, I'll help you through the process of making it auto fetch the new data once the user hits the bottom of the list.

It will create an infinite scrolling effect, the ones you see on Instagram, Twitter, and Facebook.

Add the infinite scroll effect to React Infinite Query

We'll keep the implementation as we had in the previous article.

Let's add a reference to the button by using the useRef hook.

const loadMoreRef = useRef();

<button ref={loadMoreRef}>

The useRef hook can be used to reference a dom element, which we can listen to or interact with.

For us, this action is to listen at once. This is at the bottom of the screen.

To allow it to be actioned on, we need to use something else, in our case, an IntersectionObserver. This amazing API can be used to determine when we are intersecting a specific element.

And even attach a margin and threshold to make it work for you.

However, we should wrap this entirely in a useEffect hook, as we want to stop it from evaluating when a specific condition is met.

useEffect(() => {
  if (!hasNextPage) {
    return;
  }

  // The rest of our code
}, [loadMoreRef.current, hasNextPage]);

We listen to both the ref we just set and the hasNextPage query from the Infinite Query. Once this is no longer available, we should stop doing anything else.

Now we can add the intersection observer inside this useEffect hook.

const observer = new IntersectionObserver(
  (entries) => entries.forEach((entry) => entry.isIntersecting && fetchNextPage()),
  {
    root: null,
    margin: '0px',
    treshold: 1.0,
  }
);

Here we define the observer. The first part is the callback function that will execute. In our case, we want to make sure an entry is intersecting, and if this is the case, we fire the fetchNextPage function.

Then we define the parameters. In our case, they are set to some default as we don't need to tweak them. The root set to null refers to the browser's viewport.

Then we want to define if we have a current ref set. If this is the case, we want to start observing it.

const el = loadMoreRef && loadMoreRef.current;

if (!el) {
  return;
}

observer.observe(el);

And that's it. If we now scroll and hit the bottom of the page, it will fire the next page query.

Making it automatically fetch new pages until there are no more to load.

Note: This will be a perfect element to convert to a custom hook 💡

You can try it out in this Code Sandbox.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter