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.
