How to Build Infinite Scroll with Fetch and Virtuoso in React 18

React infinite scrolling example. In this step-by-step tutorial, you’ll learn how to build an infinite scrolling feature that retrieves data using a Fetch API and REST API in React js application.

The Fetch API offers a handy asynchronous interface; It allows making requests to the server and returns the response from the server.

We’ll use the Fetch API response to display data on the browser. Not just that, we will show this data through an infinite scroll mechanism.

Infinite scrolling is a feature that allows loading content continuously or as long as a user keeps scrolling down the page.

Twitter, Facebook, and Instagram — these sites don’t use paginations. Instead, these social media sites mainly popularize the trend of infinite scrolling.

Infinite scrolling in React is somewhat identical to load more when scrolling to the bottom.

To integrate infinite scroll, we will use the react-virtuoso package; this package drastically reduces the time of writing code from scratch for creating react infinite scroll component.

Set Up New React Project

There are specific requirements that you need to take care of before you go further:

Make sure to have Node and Npm configured on your development server.

After that, open the code editor, and use the given commands: to install a New React project and penetrate into the project folder.

npx create-react-app react-demo

cd react-demo

Add Virtuoso Library in React

React Virtuoso is a relatively powerful package that offers React components that can render massive data sets.

Start installing react-virtuoso in your application by executing the following command.

npm i react-virtuoso --legacy-peer-deps

Install Bootstrap Library

Next, install the Bootstrap package using the given command.

npm i bootstrap --legacy-peer-deps

Make Component File

There is a src directory located in your project. You have to create components/ folder, and FetchScroll.js file.

import React from 'react'
function FetchScroll() {
  return (
    <div></div>
  )
}
export default FetchScroll

Display Data with Infinite Scroll

You can add the properties to manage virtuoso component behavior, hence update code in the components/FetchScroll.js file.

import React from "react";
import { Virtuoso } from "react-virtuoso";
export default function FetchScroll() {
  const [photos, setPhotos] = React.useState([]);
  const Endpoint = "https://jsonplaceholder.typicode.com/photos";
  const fetchPhotos = () => {
    fetch(Endpoint)
      .then((res) => res.json())
      .then((res) => {
        setPhotos(res);
      });
  };
  React.useEffect(() => {
    fetchPhotos();
  }, [photos]);
  return (
    <div>
      <h2>React Fetch Api Infinite Scroll Example</h2>
      <Virtuoso
        style={{ height: "410px" }}
        totalCount={100}
        itemContent={(index) => (
          <div>
            {photos.map((res, i) => {
              return (
                <div className="card mb-2" key={i}>
                  <div className="card-body">{res.title}</div>
                </div>
              );
            })}
          </div>
        )}
      />
    </div>
  );
}

Add Component to Global Component

The global component is located in App.js file.

That brings us to our next task — you have to import and add the FetchScroll component, also set the bootstrap CSS path.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import FetchScroll from "./components/FetchScroll";
function App() {
  return (
    <div className="container mt-3">
      <FetchScroll />
    </div>
  );
}
export default App;

Run Development Server

React development server should be started using the given command.

As soon as the app started, use the given url to view the app on the browser.

npm start

http://localhost:3000