InfinityScroll - Just like TikTok!

📺 preview.jpg

Watch it ✨ Live ✨

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 />);

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:

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:

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

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

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.