How To Set Up An Infinite Scroll Component in React with Hooks

Infinite scrolling pages are cool. I remember when I first noticed this was happening on my facebook page, and I loved it! Here, I will show you how to use an Infinite Scrolling component to dynamically load content, and show an active loading bar while this is happening.

Installation

We will be using React with hooks for this, but I will not go over the specifics here of how they work. Here is a tutorial to get you started if you are not familiar: https://reactjs.org/docs/hooks-intro.html.

The only packages you will need to get started are React-Infinite-Scroll-Component and React-Spinners:

npm i --save react-infinite-scroll-component react-spinners

Import them in to your InfiniteFeed component, along with React, useState, and useEffect like so:

import React, { useState, useEffect } from 'react';
import InfiniteScroll from 'react-infinite-scroll-component';
import BarLoader from 'react-spinners/BarLoader'

Infinite Scroll Component

Our infinite scrolling functional component will take an array of objects, called posts but, this could be whatever you want. We’re then going to define several hooks: displayPosts slice and hasMore .

The displayPosts hooks will be an array that holds all of the posts we want to show on the page. Slice will be the point that we will iterate to load the new data. And hasMore will be a boolean that tells the infinite scroll component if there is more data in the set to load.

The default value for displayPosts should be an empty array, which will get pushed on to when useEffect is called, or when we reach the bottom of the page. The default value for hasMore will be true, so the scrolling component knows to check for more data at least once when reaching the bottom of the page. Slice’s default can be how many posts you’d like to display on the initial load of the component. I’m going with 6.

Your infinite scroll component might look like this:

Next, we need to define our useEffect function! In it, we will set our first set of displayPosts, set slice to our default, and set hasMore to our default so our infinite scroll resets on every props change. So, we also need to define posts as a dependency for useEffect.

Next, we need to define the function that will be called by InfiniteScroll every time it reaches the bottom of the page (if hasMore === true). We will concat a new slice of posts on to displayPosts, using two functions. The first calls the setDisplayPosts hooks, and sets it to the current displayPosts concatenated to our nextSlice. It then iterates slice to whatever increment we want (in this case, 3), and checks if that new slice is higher than the number of total posts. If yes, it sets hasMore to false.

the nextSlice function slices off our next set of posts, and maps them to post components.

Now we can display our InfiniteScroll! There are a few more options or required props to pass, but the core functionality is there now. See https://www.npmjs.com/package/react-infinite-scroll-component for the full documentation on the component. See below for some working code with a dynamic loading bar and a bit of styling: