API Data Fetching
Fetch data from a public REST API and display it in a list. Model the request lifecycle — idle, loading, success, error — as one status value rather than parallel boolean flags. Uses the JSONPlaceholder API.
Requirements
- A "Fetch Posts" button triggers the API call ("Refresh" once loaded)
- Show a loading state (skeleton) while fetching
- Display the fetched posts once loaded; show an error message on failure
- Distinguish the initial idle state from a loaded-but-empty result
Key Patterns
one status: idle | loading | success | error — not parallel loading/error/fetched flagsdiscriminated union so the error message lives only in the error casecheck res.ok before parsing JSON, throw on failure → caught as errordata stored separately; each terminal status sets its own end state (no finally reset)
Important
Interview Tip
Two booleans (loading + error) are perfectly fine for a single fetch — don't reach for more ceremony than the problem needs. The senior signal is naming the tradeoff: as soon as states can contradict each other ("loading AND error" at once) or you need an idle state distinct from "loaded 0 items", collapse them into one status (idle → loading → success | error) so illegal states become unrepresentable. In TS a discriminated union ({ status: "error"; message } | …) lets the compiler guarantee you only read the message in the error branch. Knowing when NOT to use it matters as much as knowing the pattern. Either way, check res.ok before parsing JSON: if (!res.ok) throw new Error("HTTP " + res.status).
Posts
jsonplaceholder.typicode.com
Click “Fetch Posts” to load data from the API