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.
Top comments (0)