Building an Infinite Scroll Component in React

Introduction

Infinite scrolling is a common feature in modern applications, especially social media platforms that encourage continuous engagement. While excessive scrolling isn't always beneficial, building an infinite scroll component from scratch is a great learning experience for developers.

In this guide, you'll learn how to implement an optimized infinite scroll in React. This tutorial covers:

Setting up the environment
Building the infinite scroll component
Styling with CSS
Optimizing scroll performance

Let's get started!

Internal Dispatch

How to Choose the Best React UI Framework for Your Project

Discover how to choose the best React UI framework for your project. Explore top libraries like shadcn/ui and Material UI for efficient development.

Read Internal Bulletin»

Environment Setup

We will use Create React App (CRA) to set up the project. Run the following command:

    npx create-react-app infinite-scroll

Alternatively, you can use Vite or Next.js with minimal modifications.

Note: Ensure Node.js is installed before running the command. Also, clean up the CRA boilerplate code.

Next, install Axios to fetch data from an API:

    npm install axios

Now, let's build the component.

App Component

We'll fetch popular movie data from TMDB API. Obtain a free API key from their website.

App.js

import "./App.css";
import { useState, useEffect } from "react";
import axios from "axios";
import { MovieCard } from "./MovieCard";

function App() {
  const [page, setPage] = useState(1);
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  const fetchMovie = async () => {
    const URL = `https://api.themoviedb.org/3/movie/popular?language=en-US&page=${page}`;
    const response = await axios.get(URL, {
      headers: {
        Authorization: "Bearer YOUR_API_KEY",
        Accept: "application/json",
      },
    });
    setData((prevData) => [...prevData, ...response.data.results]);
    setLoading(false);
  };

  useEffect(() => {
    fetchMovie();
  }, [page]);

  return (
    <div className="App">
      <header className="App-header">
        <h1>Popular Movies from TMDB</h1>
        <div className="movieCardContainer">
          {data.map((item) => (
            <MovieCard
              key={item.id}
              title={item.original_title}
              description={item.overview}
              rating={item.vote_average}
              imageURL={item.poster_path}
            />
          ))}
          {loading && <h2>Loading...</h2>}
        </div>
      </header>
    </div>
  );
}

export default App;

MovieCard.js

import React from "react";

export const MovieCard = ({ title, description, imageURL, rating }) => {
  const imagePath = `https://image.tmdb.org/t/p/w500${imageURL}`;
  return (
    <div className="movieCard">
      <img src={imagePath} height={400} alt={title} />
      <div className="movieInfo">
        <h3>{title}</h3>
        <p>{description}</p>
        <p>{rating.toFixed(1)}⭐</p>
      </div>
    </div>
  );
};

Infinite Scroll Implementation

To achieve infinite scrolling, we'll monitor the scrollbar position and trigger data fetching when reaching the bottom.

Detecting Scroll Position

const handleScroll = () => {
  if (document.documentElement.scrollHeight - 300 < window.scrollY + window.innerHeight) {
    setLoading(true);
  }
};

useEffect(() => {
  if (loading) setPage((prevPage) => prevPage + 1);
}, [loading]);

Optimizing Performance with Debounce

To prevent excessive function calls, we'll debounce the scroll event:

const debounce = (func, delay) => {
  let timeoutId;
  return (...args) => {
    if (timeoutId) clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func(...args), delay);
  };
};

window.addEventListener("scroll", debounce(handleScroll, 500));

Internal Dispatch

5 Code Refactoring Techniques to Improve Your Code

Discover 5 essential code refactoring techniques to improve readability, maintainability, and performance while reducing technical debt effectively.

Read Internal Bulletin»

Final Thoughts

Building an infinite scroll component enhances your understanding of state management, event listeners, and performance optimization. With this implementation, you can further customize the scroll behavior to suit your needs.

Let's Connect 🚀

Happy coding! 🎉

Infinite Scroll Demo