Fetching latest headlines…
πŸš€ New React Challenge: Simple Pagination
NORTH AMERICA
πŸ‡ΊπŸ‡Έ United Statesβ€’June 21, 2026

πŸš€ New React Challenge: Simple Pagination

0 views0 likes0 comments
Originally published byDev.to

In a time where AI writes most of our boilerplate, manually wiring a fetch with loading, error, and pagination states is exactly the kind of thing that slips through the cracks β€” and exactly what keeps coming up in job interviews.

🧩 Overview

A plain fetch with pagination and manual loading and error handling. No libraries, no abstractions β€” just useState, useEffect, and a mock API that delays, paginates, and randomly fails. The kind of challenge that keeps your fundamentals sharp.

πŸ‘‰ https://www.reactchallenges.com/challenges/simple-pagination

βœ… Requirements

  • Fetch users from https://example/users?page={page} and display them in a table (ID, Name, Last name). The API returns up to 10 users per page.
  • Show a loading skeleton while fetching.
  • Display page info: Page {page} of {totalPages} ({count} users).
  • Pagination buttons:
    • First: goes to page 0. Disabled when on page 0.
    • Previous: goes to the previous page. Disabled when on page 0.
    • Next: goes to the next page. Disabled when on the last page.
    • Last: goes to the last page. Disabled when on the last page.
  • All buttons disabled when count is 0 or while loading.
  • Display an error message when the request fails.

If you've been leaning on AI for the boilerplate lately, this one will remind you how much muscle memory matters. Simple fetch, clean state, solid edge cases β€” exactly what separates a working prototype from interview-ready code.

πŸ”₯ Start the Challenge Now

Comments (0)

Sign in to join the discussion

Be the first to comment!