How to Implement Pagination in a React JS Application for Faster Loading and Better UX
When a React application starts to grow, one of the first problems developers face is handling large amounts of data. Imagine loading hundreds of users, products, or blog posts on a single page. The browser becomes slower, the UI feels heavy, and users start losing interest. Pagination solves this by breaking large datasets into smaller, manageable chunks so only a few records are shown at a time.
Pagination is not just about improving performance. It also improves readability, makes navigation easier, and creates a more professional user experience. This is why almost every modern web application — from e-commerce platforms to job portals — uses pagination.
Let’s understand how pagination works in a real React JS application.
At its core, pagination is simply slicing an array of data based on the current page. You decide how many items should appear per page, calculate which records belong to that page, and render only those records.
Assume you have a list of 100 users coming from an API or a database.
const users = Array.from({ length: 100 }, (_, i) => ({
id: i + 1,
name: `User ${i + 1}`
}));
Next, we decide how many records to show per page and track the current page.
import { useState } from "react";
const itemsPerPage = 10;
const PaginationExample = () => {
const [currentPage, setCurrentPage] = useState(1);
};
Now we calculate which items belong to the current page.
const indexOfLastItem = currentPage * itemsPerPage; const indexOfFirstItem = indexOfLastItem - itemsPerPage; const currentItems = users.slice(indexOfFirstItem, indexOfLastItem);
This logic means:
- Page 1 shows items 1–10
- Page 2 shows items 11–20
- Page 3 shows items 21–30
Only these sliced items are rendered, keeping the UI fast and efficient.
To display them in React:
<ul>
{currentItems.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
Next, we need pagination controls so users can move between pages. First, calculate the total number of pages.
const totalPages = Math.ceil(users.length / itemsPerPage);
Then generate page buttons dynamically.
<div>
{Array.from({ length: totalPages }, (_, i) => (
<button key={i} onClick={() => setCurrentPage(i + 1)}>
{i + 1}
</button>
))}
</div>
Every time the user clicks a page number, the currentPage changes and React automatically updates the displayed data.
To make the UI even better, we add Next and Previous buttons.
<button disabled={currentPage === 1} onClick={() => setCurrentPage(currentPage - 1)}>
Previous
</button>
<button disabled={currentPage === totalPages} onClick={() => setCurrentPage(currentPage + 1)}>
Next
</button>
In real production applications, you usually don’t load all records at once. Instead, the backend sends paginated data.
A typical API request looks like this:
fetch(`/api/users?page=${currentPage}&limit=10`)
This way, your React app only downloads what it needs, making it much faster and more scalable.
Well-implemented pagination improves not only performance but also SEO. Search engines prefer pages that load quickly and display structured, clean content. If you keep the page number in the URL and load paginated data properly, your React application becomes both user-friendly and search-engine friendly.
Pagination might look simple, but it is one of the most powerful techniques to build professional, high-performance React applications that scale as your data grows.
Related Tags
react hooks, frontend optimization, ui ux best practices, web performance, api handling, javascript arrays, client side pagination, server side pagination, scalable react apps
Kunal Burangi
Founder & Career Strategist
Kunal is the founder of CreateYourResume and a dedicated career strategist. He helps professionals across the globe build ATS-optimized resumes that land interviews at top companies.
Read more about us
