How To Use Infinite-Scroll In ReactJS

Hello developer in this blog we are all gonna know about infinite-scroll

what exactly is an infinite scroll?

Infinite scroll is the mechanism that shows data based on an endless scroll event and loads data only as needed to avoid critical performance issues.

First of all, you have to install the following packages on your app.

npm install --save react-infinite-scroll-component


yarn add react-infinite-scroll-component

After installation successfully copy and paste this code into your app.js file and see the magic


import React, { useState } from "react";
import InfiniteScroll from "react-infinite-scroll-component";

const Infinitescroll = () => {
  const style = {
    height: 30,
    border: "1px solid green",
    margin: 6,
    padding: 8,
  const mainStyles = {
    // height: 200,
    position: "absolute",
    left: "35%",
    // top: "40%",
    width: "500px",
    height: "50vh",
  const [items, setItems] = useState(Array.from({ length: 20 }));

  const fetchData = () => {
    setTimeout(() => {
      setItems(items.concat(Array.from({ length: 20 })));
    }, 1500);
  return (
    <div style={mainStyles}>
      <h1 style={{ textAlign: "center" }}>Infinite Scroll</h1>
        dataLength={items.length} //This is important field to render the next data
        {, index) => (
          <div style={style} key={index}>
            div - #{index}

export default Infinitescroll;


Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories