React Infinite Scroll Show Records using Fetch API Tutorial

Infinite scrolling is a popular feature in web development that loads the data seamlessly as the user scrolls the bottom to the page. It eliminates the requirement of numbered pagination.

All the modern and popular websites such as Facebook, Twitter, and Instagram are the perfect example of infinite scrolling functionality.

This step-by-step tutorial will show you how to implement infinite scrolling in React web application using React Virtuoso.

React Virtuoso is a home of powerful yet easy-to-use React components that can render enormous data sets. This tutorial covers how to use React Virtuoso library in React app and build the infinite scrolling component in React.

We will create a React application and fetch the records from the server using Fetch API. We’ll display the results using the bootstrap library and then integrate the results into the React infinite scrolling component.

Build the Project

Get started with creating a new React application using the following command:

npx create-react-app react-infinite-scroll

Get inside the project folder using given command:

cd react-infinite-scroll

Create Component

Head over to src/ folder, in here make a new directory, name it features/.

Here you have to define the new component by the name of InfiniteScroll.js, you can form the component using the provided code.

import React from 'react'

function InfiniteScroll() {
  return (
    <div>InfiniteScroll</div>
  )
}

export default InfiniteScroll

Install React Virtuoso

We are going to install React virtuoso library, this will help us creating the React Infinite Scrolling component.

npm install react-virtuoso

Implement Infinite Scrolling in React

We are using the Fetch API to bring the data from the server and bind it to the Virtuoso component.

The virtuoso component offers a dedicated component through which displaying data via infinite scrolling is simple.

You can pass the properties to customize the infinite scrolling component.

Ensure that you have added the suggested code in the features/InfiniteScroll.js file.

import React, { useState, useEffect } from "react";

import { Virtuoso } from "react-virtuoso";

function InfiniteScroll() {
  const [comments, setComments] = useState([]);

  const API = "https://jsonplaceholder.typicode.com/comments";

  const getData = () => {
    fetch(API)
      .then((res) => res.json())
      .then((res) => {
        console.log(res);
        setComments(res);
      });
  };

  useEffect(() => {
    getData();
  }, [comments]);

  return (
    <div>
      <Virtuoso
        style={{ height: "400px" }}
        totalCount={200}
        itemContent={(index) => (
          <div>
            {comments.map((res, i) => {
              return (
                <div className="card mb-3" key={i}>
                  <div class="card-body">{res.name}</div>
                </div>
              );
            })}
          </div>
        )}
      />
    </div>
  );
}

export default InfiniteScroll;

Register Infinite Scroll Component

Move to the App.js file; you have to do two things in this file:

First, Import the Bootstrap library to design the component that is displaying the data. Secondly, add the component which is handling the infinite scrolling.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import InfiniteScroll from "./features/InfiniteScroll";

function App() {
  return (
    <div className="container mt-5">
      <h2 className="mb-4">React Show Records using Infinite Scroll Example</h2>
      <InfiniteScroll />
    </div>
  );
}

export default App;

View App on Browser

To view the application, you have to run the following command; start the app using the provided url.

npm start
http://localhost:3000

React Infinite Scroll Show Records using Fetch API Tutorial

Conclusion

This guide taught us how to integrate infinite scrolling in a React application. Infinite scrolling is an excellent yet user-friendly feature primarily used in modern web and mobile applications.

It enhances user engagement and, at the same time, offers them a seamless experience.