Creating an Infinite Scroll with React.js

Infinite Scroll is a user interface pattern that allows loading new items as the user scrolls down the page, instead of requiring the user to manually paginate to view additional items. The purpose of infinite scrolling is to provide a seamless and uninterrupted experience to the user, by constantly loading new items as the user scrolls. This can be especially useful in situations where there are a large number of items to display, or when it’s not practical to show all items on a single page.

Using infinite scrolling can improve the user experience by reducing the amount of effort required to view a large collection of items, and by providing a more intuitive and dynamic interface. It also helps in improving page loading speed, as only a limited number of items are loaded initially, and the rest are loaded as needed. However, it’s important to use infinite scrolling appropriately and not overuse it, as it can lead to performance issues or a cluttered user interface if not implemented properly.

Let’s create an InfiniteScroll component in React.js, then we’ll see how it works.

import React, { useState, useEffect } from "react";

const InfiniteScroll = ({ data, renderItem }) => {
  const [list, setList] = useState(data.slice(0, 10));
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      if (
        window.innerHeight + document.documentElement.scrollTop !==
        document.documentElement.offsetHeight
      )
        return;
      setLoading(true);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  useEffect(() => {
    if (!loading) return;
    if (page * 10 >= data.length) return setLoading(false);
    setTimeout(() => {
      setList(list.concat(data.slice(page * 10, page * 10 + 10)));
      setPage(page + 1);
      setLoading(false);
    }, 1000);
  }, [loading]);

  return (
    <>
      {list.map(renderItem)}
      {loading && <p>Loading...</p>}
    </>
  );
};

export default InfiniteScroll;

This code defines a React component named InfiniteScroll. This component implements an infinite scrolling behavior, where additional data is loaded and displayed as the user scrolls down the page.

The component takes two props, data and renderItem, which represent the data to be displayed and the function to render each item, respectively.

The component uses two useState hooks to manage its state, one to keep track of the list of items currently displayed (list), and another to keep track of the current page being displayed (page).

const [list, setList] = useState(data.slice(0, 10));
const [page, setPage] = useState(1);

The component also uses two useEffect hooks to handle the infinite scrolling behavior. The first useEffect listens to the scroll event of the window, and sets the loading state to true when the user reaches the bottom of the page.

useEffect(() => {
  const handleScroll = () => {
    if (
      window.innerHeight + document.documentElement.scrollTop !==
      document.documentElement.offsetHeight
    )
      return;
    setLoading(true);
  };
  window.addEventListener("scroll", handleScroll);
  return () => window.removeEventListener("scroll", handleScroll);
}, []);

The second useEffect listens to the loading state. When loading is true, it concatenates 10 new items from data to list and increments the page state by 1. The state change is delayed by 1 second to simulate network latency.

useEffect(() => {
  if (!loading) return;
  if (page * 10 >= data.length) return setLoading(false);
  setTimeout(() => {
    setList(list.concat(data.slice(page * 10, page * 10 + 10)));
    setPage(page + 1);
    setLoading(false);
  }, 1000);
}, [loading]);

Finally, the component returns the JSX that renders the list of items using the renderItem prop, and displays a “Loading…” message when loading is true. The component exports itself as the default export.

How to use the Infinite Scroll component

import InfiniteScroll from "./InfiniteScroll";

const App = () => {
  const data = [...list of items];
  const renderItem = item => <p>{item.name}</p>;

  return (
    <InfiniteScroll data={data} renderItem={renderItem} />
  );
};

In the example above, data is an array of items that you want to display using infinite scrolling, and renderItem is a function that takes an item from the data array and returns the JSX code to render it.

When using the InfiniteScroll component, the data prop is required, and the renderItem prop is also required. You can pass any data that you want to display using infinite scrolling to the data prop, and you can customize the appearance of each item by modifying the renderItem function.