Implementing Infinite Scroll in a React Application

Infinite scrolling is a popular technique in web development that allows you to load content as the user scrolls down a web page, eliminating the need for pagination buttons. In this blog post, we'll learn how to implement infinite scroll in a React application for beginners.

Setup

For the code setup, I have set up a CodeSandbox environment with react and tailwind CSS for the styling. You can easily do this in your own create-react-app application or any other existing react project.

Let's dive in

For the starter let's start by creating some variables. For that, I have defined a cardsArr to store the cards. And create another variable using useState for the count of the cards.

  const [count, setCount] = useState(10); //initial card count
  const cardsArr = [];

Now let's fill in the cards into the cardsArr . And display it into the UI.

  for (let i = 0; i < count; i++) {
    cardsArr.push(
      <div className="text-white font-semibold text-xl w-full h-auto bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 mx-auto my-10 p-4 rounded-lg">
        Card {i + 1}
      </div>
    );
  }

 // Render the cards
  return (
    <main className="min-h-screen">
      <h2 className="text-center text-4xl font-bold text-blue-900">
        React Infinite Scroll
      </h2>
      <div className="p-6">{cardsArr}</div>
    </main>
  );

How Infinite Scroll Works

An infinite scroll is implemented in the useEffect hook. When the user scrolls the page, the onScrollEnd function is called. This function checks if the user has scrolled to the bottom of the page by comparing the window's scroll position and the document's height. If the scroll position has reached the bottom or is close to the bottom (within the threshold of given pixels), it increases the count state, causing more cards to be added to the cardsArr, and the page appears to load new content.

//pagination logic
  useEffect(() => {
    const onScrollEnd = () => {
      if (
        window.innerHeight + window.scrollY >=
        window.document.body.offsetHeight - 50 //adding 50px as threshold for on end reached
      ) {
        //your operation goes here to add data
        setCount((prev) => prev + 50); //adding 50 more cards
      }
    };

    window.addEventListener("scroll", onScrollEnd);

    //clean up
    return () => window.removeEventListener("scroll", onScrollEnd);
  }, [count]);

And you're done! let's look at the complete code

// Dependencies
import React, { useEffect, useState } from "react";
// Styles
import "./tailwind.output.css";

const App = () => {
  const [count, setCount] = useState(10); //initial card count
  const cardsArr = [];

  for (i = 0; i < count; i++) {
    cardsArr.push(
      <div className="text-white font-semibold text-xl w-full h-auto bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 mx-auto my-10 p-4 rounded-lg">
        Card {i + 1}
      </div>
    );
  }

  //pagination logic
  useEffect(() => {
    const onScrollEnd = () => {
      if (
        window.innerHeight + window.scrollY >=
        window.document.body.offsetHeight - 50 //adding 50px as threshold for on end reached
      ) {
        //your operation goes here to add data
        setCount((prev) => prev + 50); //adding 50 more cards
      }
    };

    window.addEventListener("scroll", onScrollEnd);

    //clean up
    return () => window.removeEventListener("scroll", onScrollEnd);
  }, [count]);

  return (
    <main className="min-h-screen">
      <h2 className="text-center text-4xl font-bold text-blue-900">
        React Infinite Scroll
      </h2>
      <div className="p-6">{cardsArr}</div>
    </main>
  );
};

export default App;

You can customize and extend this example to fit your specific needs and build dynamic, content-rich web applications.

Remember that infinite scrolling can have performance implications, so be mindful of the number of items you load at once and ensure your code is optimized for a smooth user experience.

Resoursces:

Do check out Leanersbucket youtube channel