Implementing infinite scrolling with suspense in React

16 Oct 2023

Infinite scrolling is a popular technique used in web applications to load and display data dynamically as the user scrolls down the page. With the introduction of React Suspense, handling asynchronous data fetching and rendering has become much simpler.

In this blog post, we will explore how to implement infinite scrolling using React Suspense, a new feature in React 18.

Introduction to Infinite Scrolling
Setting Up React Suspense
Implementing Infinite Scrolling with Suspense
Conclusion

Introduction to Infinite Scrolling

Infinite scrolling allows us to load data progressively as the user approaches the end of a page or container. It provides a seamless user experience by removing the need for pagination and manual reloading of content.

Traditionally, implementing infinite scrolling required managing scroll events, making API requests, and updating the DOM manually. With React Suspense, we can simplify this process by leveraging the Suspense component and the fetch API.

Setting Up React Suspense

Before we dive into implementing infinite scrolling, we need to set up React Suspense in our project.

To enable React Suspense, ensure that you have React version 18 or higher installed. You can do this by running the following command:

npm install react@^18.0.0

Once you have React 18 installed, you can start using React Suspense in your application.

Implementing Infinite Scrolling with Suspense

First, let’s create a component called InfiniteScroll that will handle the infinite scrolling logic:

import { useEffect, useRef } from 'react';

function InfiniteScroll({ fetchMoreData }) {
  const containerRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => {
      const { scrollTop, clientHeight, scrollHeight } = containerRef.current;

      if (scrollTop + clientHeight >= scrollHeight) {
        fetchMoreData();
      }
    };

    containerRef.current.addEventListener('scroll', handleScroll);

    return () => {
      containerRef.current.removeEventListener('scroll', handleScroll);
    };
  }, [fetchMoreData]);

  return (
    <div ref={containerRef} style=>
      {/* Render your content here */}
    </div>
  );
}

In the code above, we create a component named InfiniteScroll that takes a fetchMoreData prop, which is a function responsible for fetching more data when the user reaches the end of the container.
Inside the useEffect hook, we add a scroll event listener to the container element. When the user scrolls to the bottom (scrollTop + clientHeight >= scrollHeight), we call the fetchMoreData function.
Finally, we render a <div> element with a specified height and scrollable behavior, and we pass the container reference to the ref attribute.
Now, let’s use the InfiniteScroll component in our application to fetch and display data:

function App() {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  const fetchMoreData = async () => {
    // Simulate API request delay
    await new Promise((resolve) => setTimeout(resolve, 1000));

    // Fetch more data
    const newData = await fetch('https://api.example.com/data');
    const json = await newData.json();

    setData((prevData) => [...prevData, ...json]);
  };

  useEffect(() => {
    fetchMoreData().then(() => setIsLoading(false));
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
      <InfiniteScroll fetchMoreData={fetchMoreData} />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

In this example, we declare state variables data, isLoading, and define an asynchronous function fetchMoreData responsible for fetching additional data. We simulate the delay using setTimeout.
Inside the useEffect hook, we fetch initial data by calling fetchMoreData and then update the state to indicate that the data has been loaded.
If the data is still loading, we display a loading message. Otherwise, we render the fetched data along with the InfiniteScroll component, passing the fetchMoreData function as a prop.

That’s it! You have successfully implemented infinite scrolling using React Suspense. As the user reaches the end of the container, new data will be fetched and displayed automatically.

Conclusion

In this blog post, we explored how to implement infinite scrolling using React Suspense. With the help of the Suspense component and the fetch API, managing asynchronous data fetching and rendering has become simpler and more declarative.

By using React Suspense, you can create a seamless user experience by loading and displaying data dynamically as the user scrolls down the page.

For more information on React Suspense, check out the official React documentation.

#react #infinite-scrolling

Table of Contents

Introduction to Infinite Scrolling

Setting Up React Suspense

Implementing Infinite Scrolling with Suspense

Conclusion