InfinityScroll - Just like TikTok!
Tags: webdev, javascript, programming, react
Published: 2024-05-24 22:17:59

{% details 📺 preview.jpg %} 
_Watch it [✨ Live ✨](https://infinitytoken.netlify.app/)_
![Live Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvotoagn2k8l6vx6lxpx.gif)
{% enddetails %}{% details 📝 infinityscroll.js %} 
_Don't dwell on the pain. Just take a quick look. After reading the article, everything will become clear to you. [📝 SOURCE CODE](https://github.com/jorjishasan/infinite-scroller)_
```js
import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

function App() {
  const [numArr, setNumArr] = useState(Array.from({ length: 20 }, (_, i) => i));

  const handleScroll = () => {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
      setNumArr((prevNums) => [
        ...prevNums,
        ...Array.from({ length: 20 }, (_, i) => i + prevNums.length),
      ]);
    }
  };

  // Listen for scroll events
  useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <div className="font-serif text-3xl text-center">
      {numArr.map((num, index) => (
        <div
          key={index}
          className="m-2 p-5 bg-white shadow-md rounded cursor-pointer"
        >
          {num}
        </div>
      ))}
    </div>
  );
}


const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
```
 {% enddetails %}

I promise! Following my steps, you can natively implement Infinity Scrolling. This means you don't have to worry about installing extra packages or adding unnecessary weight to your app.

1. Initial Render
2. Event Listening
3. Event Handling 

Don't be afraid of these jargon words 😄. I'm holding your hands 💪. Once you reach the end of the article, it'll make you proud.

---

**STEP 1:** ⏤ Initial Render 📃
Initially, let's load/fill the page with 20 elements.

CODE:
```js
function App() {
  const [numArr, setNumArr] = useState(Array.from({ length: 20 }, (_, i) => i));

  return (
    <div className="font-serif text-3xl text-center">
      {numArr.map((num, index) => (
        <div
          key={index}
          className="m-2 p-5 bg-white shadow-md rounded cursor-pointer"
        >
          {num}
        </div>
      ))}
    </div>
  );

```
Explain: Create a `numArr` state variable on top of the `App` component with values 0 through 20. Over the return statement, render items of `numArr` as elements. **STEP 1 is done.**

---

**STEP 2:** ⏤ Event Listening 👂
Browsers offer us bunch of events: Mouse(click, mousemove, mouseover), Keybaord Event(keydown, keypress, keyup), and Window Event(scroll, resize, load). 

Since we are implementing a feature based on scrolling, we need to keep track of scroll activity. To get notified, we'll set a watcher inside the `App()` component that continuously checks whether a scroll happens. 

CODE:

```js
function App() {
// Listen for scroll events
   useEffect(() => {
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);
}
```

Explain: We set the watcher or event-listener, that event listener `window.addEventListener("scroll", handleScroll)` takes 2 arguments: the event name `scroll` and a callback-function `handleScroll` that defines what to do when the event is triggered. **Step 2 is done.** The `return` statement does [cleanup](https://dev.to/jorjishasan/cleanup-in-react-5dkc). You can skip it for now with this setup.

---

**STEP-3:** ⏤ Event Handling 💪
Assuming that scrolling happens, the contract of the `handleScroll` function would be to load more data when the user reaches the end of the page.

CODE:

```js
  //This function will invoked when event triggered
  const handleScroll = () => {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
      setNumArr((prevNums) => [
        ...prevNums,
        ...Array.from({ length: 20 }, (_, i) => i + prevNums.length),
      ]);
    }
  };

```
Explain: The if statement verifies that the user has reached the end of the page. The code inside the `if` block accumulates 15 new data to the `numArr` variable. Since `numArr` is a state variable, it will re-render the state after every update. It's react's native [state behavior](https://react.dev/reference/react/useState).

Yay 😀! You have done the **last step.** You have achieved more optimized infinity scrolling.

**NB:** I used numbers as placeholders. In a real scenario, you'll fetch data across pages via API.