How to implement pagination in React

· Category: React

Short answer

Manage current page state with useState, slice data or fetch pages from an API, and render navigation controls. For memoizing expensive computations during pagination, see how to optimize react renders with usememo and usecallback. For performance best practices, see how to improve core web vitals.

Steps

  1. Track current page: const [page, setPage] = useState(1)
  2. Calculate items to show: data.slice((page - 1) * pageSize, page * pageSize)
  3. Render page buttons and prev/next controls
  4. Fetch new pages from the API when the page changes
  5. Update the URL query string for shareable links

Tips

  • Use cursor-based pagination for large, dynamic datasets
  • Disable buttons while fetching to prevent double-clicks
  • For server-side rendering, see what are react server components