Async UI needs explicit states: idle/loading, success, and error. Users should never stare at a blank screen wondering if anything happened.
State machine mindset
- Start loading before the request
- On success: store data, clear error, stop loading
- On failure: store an error message, stop loading, keep or clear stale data intentionally
- Offer retry for transient failures
UI patterns
Disable buttons while loading, show skeletons or spinners, surface errors near the action that failed, and log details with printOutput while learning.
Important interview questions and answers
- Q: One boolean or status enum?
A: Enums like'idle' | 'loading' | 'error' | 'success'prevent impossible combos like loading and error simultaneously. - Q: Where to put fetch logic?
A: Custom hooks or data libraries in apps;useEffectin learning examples and small components.
Self-check
- Why separate loading and error UI branches?
- What should a Retry button do?
Challenge
Retry flow
- Click Run — first load may fail (simulated).
- Press Retry until data loads.
- Confirm error message clears on success.
Done when: error UI appears on failure and successful retry shows data.