React Pagination & Infinite Scroll
When building modern web apps, displaying large datasets efficiently is a common challenge. Loading hundreds or thousands of items at once can slow down your app and harm user experience. React provides strategies like pagination and infinite scroll to handle large data gracefully, keeping your UI fast and responsive.
Why Use Pagination or Infinite Scroll?
- Performance: Load only a subset of data at a time to reduce render overhead.
- Better UX: Users can navigate through content without being overwhelmed by huge lists.
- Reduced Network Usage: Fetch smaller chunks of data instead of retrieving everything at once.
- Seamless Updates: Works perfectly with React Query, SWR, or traditional API calls.
Pagination in React
Pagination divides data into pages, allowing users to navigate between them.
Example – Simple Pagination:
import React, { useState, useEffect } from "react";
function PaginatedList() {
const [users, setUsers] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 5;
useEffect(() => {
fetch("<https://jsonplaceholder.typicode.com/users>")
.then((res) => res.json())
.then((data) => setUsers(data));
}, []);
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = users.slice(indexOfFirstItem, indexOfLastItem);
const totalPages = Math.ceil(users.length / itemsPerPage);
return (
<div>
<ul>
{currentItems.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
<div>
{Array.from({ length: totalPages }, (_, i) => (
<button key={i} onClick={() => setCurrentPage(i + 1)}>
{i + 1}
</button>
))}
</div>
</div>
);
}
export default PaginatedList;
- Only a subset of
usersis rendered per page. - Users can navigate using page buttons.
slice()ensures only the current page’s data is displayed.
Infinite Scroll in React
Infinite scroll loads more data automatically as the user scrolls, giving a seamless browsing experience.
Example – Infinite Scroll:
import React, { useState, useEffect } from "react";
function InfiniteScrollList() {
const [users, setUsers] = useState([]);
const [visibleCount, setVisibleCount] = useState(5);
useEffect(() => {
fetch("<https://jsonplaceholder.typicode.com/users>")
.then((res) => res.json())
.then((data) => setUsers(data));
}, []);
const loadMore = () => {
setVisibleCount((prev) => prev + 5);
};
return (
<div>
<ul>
{users.slice(0, visibleCount).map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
{visibleCount < users.length && (
<button onClick={loadMore}>Load More</button>
)}
</div>
);
}
export default InfiniteScrollList;
- Initial render shows 5 items.
- Clicking “Load More” fetches the next chunk.
- Can be enhanced with scroll event listeners for automatic infinite scroll.