How to paginate data in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Implementing pagination is essential for displaying large datasets efficiently in React applications without overwhelming the user interface. As the creator of CoreUI with over 11 years of React development experience since 2014, I’ve built pagination into countless data tables and lists. The most effective solution is to track the current page in state and slice the data array to show only the relevant items. This approach is simple, performant, and provides full control over the pagination logic.
Use state to track current page and slice data for pagination.
const [currentPage, setCurrentPage] = useState(1)
const itemsPerPage = 10
const data = Array.from({ length: 95 }, (_, i) => ({
id: i + 1,
name: `Item ${i + 1}`
}))
const totalPages = Math.ceil(data.length / itemsPerPage)
const startIndex = (currentPage - 1) * itemsPerPage
const endIndex = startIndex + itemsPerPage
const currentItems = data.slice(startIndex, endIndex)
return (
<div>
{currentItems.map(item => (
<div key={item.id}>{item.name}</div>
))}
<div>
<button
onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
disabled={currentPage === 1}
>
Previous
</button>
<span>Page {currentPage} of {totalPages}</span>
<button
onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
disabled={currentPage === totalPages}
>
Next
</button>
</div>
</div>
)
The current page number is stored in state, starting at 1. The start and end indices are calculated based on the current page and items per page. The slice() method extracts only the items for the current page. Previous and Next buttons update the page number with bounds checking to prevent going below 1 or above the total pages. The disabled attribute prevents navigation beyond valid page ranges.
Best Practice Note
This is the same client-side pagination pattern we use in CoreUI React tables. For large datasets, implement server-side pagination by fetching only the required page from your API. Consider adding features like jump-to-page input or showing page numbers as clickable buttons for better navigation.
