Ways to Render Large Lists with React

We often have to render large lists in React apps.

In this article, we’ll look at ways to render large lists in React apps.

Pagination

We can use the react-paginate library to add pagination to our React lists.

To install it, we run:

npm i react-paginate

Then we can use it by writing:

import React, { useEffect, useState } from "react";
import ReactPaginate from "react-paginate";

export default function App() {
  const [pagination, setPagination] = useState({
    data: new Array(1000).fill().map((value, index) => ({
      id: index,
      title: index,
      body: index
    })),
    offset: 0,
    numberPerPage: 10,
    pageCount: 0,
    currentData: []
  });
  useEffect(() => {
    setPagination((prevState) => ({
      ...prevState,
      pageCount: prevState.data.length / prevState.numberPerPage,
      currentData: prevState.data.slice(
        pagination.offset,
        pagination.offset + pagination.numberPerPage
      )
    }));
  }, [pagination.numberPerPage, pagination.offset]);
  const handlePageClick = (event) => {
    const selected = event.selected;
    const offset = selected * pagination.numberPerPage;
    setPagination({ ...pagination, offset });
  };
  return (
    <div>
      {pagination.currentData &&
        pagination.currentData.map((item, index) => (
          <div key={item.id} className="post">
            <h3>{item.title}</h3>
            <p>item {item.body}</p>
          </div>
        ))}
      <ReactPaginate
        previousLabel="previous"
        nextLabel="next"
        breakLabel="..."
        pageCount={pagination.pageCount}
        marginPagesDisplayed={2}
        pageRangeDisplayed={5}
        onPageChange={handlePageClick}
        containerClassName={"pagination"}
        activeClassName={"active"}
      />
    </div>
  );
}

The ReactPaginate component lets us add pagination controls into our React app.

We have the handlePageClick method to get the data from the array and slice it to get the items we want given the page number.

currentData has the data for the current page.

We get the page number from the event.selected property.

With pagination, we load a small amount of data per page.

Infinite Scroll

Another way to load large amounts of data is to use infinite scrolling.

When we scroll down, we tet more data attached to the list.

To add infinite scrolling, we can use the react-infinite-scroll-component library.

We can install it by running:

npm i react-infinite-scroll-component

Then we can use it by writing:

import React, { useState } from "react";
import InfiniteScroll from "react-infinite-scroll-component";

export default function App() {
  const data = new Array(1000).fill().map((value, id) => ({
    id: id,
    title: id,
    body: id
  }));

  const [count, setCount] = useState({
    prev: 0,
    next: 10
  });
  const [hasMore, setHasMore] = useState(true);
  const [current, setCurrent] = useState(data.slice(count.prev, count.next));

  const getMoreData = () => {
    if (current.length === data.length) {
      setHasMore(false);
      return;
    }
    setTimeout(() => {
      setCurrent(current.concat(data.slice(count.prev + 10, count.next + 10)));
    }, 2000);
    setCount((prevState) => ({
      prev: prevState.prev + 10,
      next: prevState.next + 10
    }));
  };

  return (
    <InfiniteScroll
      dataLength={current.length}
      next={getMoreData}
      hasMore={hasMore}
      loader={<h4>Loading...</h4>}
    >
      <div>
        {current &&
          current.map((item, index) => (
            <div key={index} className="post">
              <h3>{item.title}</h3>
              <p>item {item.body}</p>
            </div>
          ))}
      </div>
    </InfiniteScroll>
  );
}

We add the InfiniteScroll component to add the infinite scrolling container.

dataLength has the number of items to load when we scroll down.

We get more data from the array with the getMoreData method.

And we load the new data and add it to the current array in the setTimeout callback.

Then update the count.prev and count.next properties to update the indexes of the items we want to get.

Conclusion

We can add pagination and infinite scrolling into our React app to load lots of data in an efficient manner.