# 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.

```javascript
  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.

```javascript
  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.

```javascript
//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

```javascript
// 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;
```

![inifinite scroll result](https://cdn.hashnode.com/res/hashnode/image/upload/v1699541551270/817dfdba-782e-4269-8601-5a764d072c5f.gif align="center")

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](https://www.youtube.com/watch?v=Ckka1HhE2kM&t=409s)