Infinite scrolling and React Infinite Query tutorial

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

Comments

[Jon Randy 🎖️]

It's a horrible UI pattern that I wish would die. Encourages mindless doomscrolling.

Most implementations are also terrible when it comes to memory/resource usage - but most developers don't seem to give a a s**t about that these days anyway.

It also gets used in the wrong places - places where it would be nice to be able to remember or bookmark the page or location of an item in the list.

[Chris Bongers]

I don't know, quite like the fact that I don't have to perform actions anymore.

Doomscrolling is more a user issue if you ask me.
Replacing it with a pagination for instance would still have the same effect of the user being stuck in some random void. (But maybe that's just me)

Regarding the memory, 100% agree it should always be considered and often it doesn't.

[Azlan-Syed]

something fun keep it up

[Chris Bongers]

Thanks Azlan!
Glad you enjoyed it.