How to Create an Infinite Scroll Effect using React

Hans Krohn
JavaScript in Plain English
3 min readMay 31, 2022
Photo by Kerde Severin on pexels

In this blog, I will go over how I create the infinite scroll effect in React.

Final product we will be creating

First I created an express API. The API has a single endpoint with a request parameter, page. The end point will return an array with ten data elements that correspond to the specific page. The server code can be seen below.

Next, we will create our React app using the following command npx create-react-app client —-template typescript.

Note: If you are using React version 18.1.0 you may need to remove the. <React.StrictMode> tags from index.tsx. After the most recent update to React you will notice the components mount, unmount, and re-mount when the component is first mounted. You can read more about these changes here. Below you can see how the index.tsx file should look.

Next, we can begin coding in App.tsx. We will begin by creating three states: page, data, and loading. The page state will hold a number which will be updated as we continuously retrieve more data. The data state will be an array that holds all the data which will be displayed. In my example, this data array will be an array of numbers. Lastly, the loading state will be a boolean value that will be used to display a loading animation.

Next, we will also create a function that will generate cards to display our data, as well as a useEffect that will be used to update the data state whenever the page changes. Your App.tsx should look like this at the end, displaying the first ten cards.

Once we have all this, we can begin working on the logic to automatically fetch more date once we scroll to the bottom of the list. For this, we will use the Intersection Observer API and React’s useRef hook.

The Intersection Observer API detects when the observed element is within view. Once the observed element is within view, we will update the page state, triggering the useEffect to fetch more data. In this case, I will only want to observe one element, the final element of the list. This means I will continuously have to update the observed element to the final element in the list. To do this, we can add a new state which I will call elem and I will setElem to the final element in the list. This can be done by modifying the createCard function and the map statement used to render the cards. We will also create an Intersection Observer object with useRef. By utilizing useRef we will be able to keep track of the observer object across re-renders. Below you can see the changes made.

Lastly, we will also create a useEffect that will be used to update the observe element. It will first check if there is currently an element that can be observed. If there is, it will update the observer in order to observe the current element. Once the observed element comes into view, the Intersection Observer callback will be triggered updating the page number and fetching more data. This will then render more cards, triggering setElem. It will begin by unobserving the previous element and then observing the final element in the list, starting the cycle from the beginning. Below you can see how the useEffect should look.

Combining all of this, App.tsx should look something like this.

Hopefully, this guide was helpful. Until next time. Happy coding!

More content at PlainEnglish.io. Sign up for our free weekly newsletter. Follow us on Twitter and LinkedIn. Check out our Community Discord and join our Talent Collective.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Published in JavaScript in Plain English

New JavaScript and Web Development content every day. Follow to join our 3.5M+ monthly readers.

Written by Hans Krohn

Software Engineer @ Microsoft, with a passion for technology.

No responses yet

What are your thoughts?