Data fetching belongs in useEffect (or modern data libraries built on the same ideas). In this playground we simulate an API with setTimeout to avoid CORS and network failures while you learn the pattern.
Typical flow
- Set
loadingtrue when a fetch starts - Store results in state when data arrives
- Capture errors in state or show a fallback UI
- Abort or ignore stale responses if the user navigates away
Production note
Real apps use fetch, React Query, SWR, or server components in Next.js. The state machine—loading, data, error—is the same regardless of transport.
Self-check
- Why fetch inside
useEffectinstead of directly in the component body? - What goes wrong if you forget to handle the loading state?
Challenge
Simulated API
- Click Run and wait for the mock posts to appear.
- Change the delay to 1500ms and observe longer loading.
Done when: loading shows first, then a list of mock posts renders.