How to Build Async Infinite Scroll in React.js

*scroll, fetch, scroll, fetch, scroll…*

Let’s say you’re designing a social media feed and you want to implement an infinite scrolling feature into it. There are two ways you can go about doing this.

1. You make an API call to retrieve all of your posts belonging to a particular feed. After you get all of those posts, you parse them out in the front-end to be displayed to your users.
2. You make an API call for a specific amount of posts every time a user first gets on a page and scrolls to the bottom.

This was the exact crossroads I ran into while creating my capstone project at The Flatiron School. While the first route is the easier of the two, I thought to myself, “if my application has millions of users that have billions of posts between all of them, loading and storing a feed of this scale would break my application!” That was when I decided to go with the second route. How did I make this happen? Well, keep reading and let’s find out!

Disclaimers:

• This application uses a React frontend with a Ruby on Rails backend. If you are unfamiliar with Rails, though are wanting to achieve the same effect in the language of your expertise, I’m 99% certain that the logic found here can be transferable.
• This application uses the fetch keyword. This is how what allowed me to make the API calls to my Rails backend. If you are unfamiliar with how to make fetch happen, then check out some documentation here.

Let’s get to it!

Here is how one of my application’s news feeds looked after this was implemented:

This is the flow of logic that’s taking place:

1. There is a counter stored in a local state that has a default value set to 1.
2. When the component mounts, that default counter value gets sent to the backend to retrieve the first set of posts.
3. When a user scrolls to the bottom of the page, there is an event-listener that is triggered. Once triggered…