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.
United States
NORTH AMERICA
Related News
Why Every Developer Needs a Strong Test Suite (Even If You Hate Writing Tests)
1d ago
SOLSTICE SIDEBAR - AI INCIDENT DESK
1d ago
Passkeys in 2026: A Practical Engineering Guide to Passwordless Auth
1d ago
The CFO's AI Playbook: 5 Finance Automations Every Indian Business Should Run in 2026
1d ago
AWS S3 Basics for Beginners
1d ago