Three-State Fetching Three-State Data Fetching
Last updated: 2026-11-02
Three-State Fetching Three-State Data Fetching
Every data request has three states: loading while it is in flight, success once the data arrives, and error when it fails. The UI must prepare one frame for each of them, and missing any of them produces a blank screen, an endless wait or a silent failure. This is the mental model shared by hand-written fetch code and by every request library, so learning it once pays off everywhere.
| Group | Data & Engineering |
|---|---|
| Kind | Pattern |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
const [state, setState] = useState({ status: 'loading', data: null, error: null })
useEffect(() => {
fetch(url)
.then(r => r.ok ? r.json() : Promise.reject(new Error('HTTP ' + r.status)))
.then(data => setState({ status: 'success', data, error: null }))
.catch(err => setState({ status: 'error', data: null, error: err }))
}, [url])
if (state.status === 'loading') return <p>Loading…</p>
if (state.status === 'error') return <p>Error: {state.error.message}</p>
return <List data={state.data} />⚙️ Parameters
| status | The current state of the machine: 'loading' | 'success' | 'error'; you can also express it with two fields, isLoading and isError. |
|---|
Returns：No return value; this is a coding pattern rather than a callable API.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
The first automatic request shows "Loading", a successful response reveals the todo title, and when the network or the API fails you get the error message together with a retry button - one frame for each of the three states.💡 Key Points
⚠️ Warning fetch does not reject on a 404 or a 500 (only network level errors reject), so always check r.ok and throw yourself, otherwise business errors slip silently into the success branch.
💡 Tip Keep the status inside one state object instead of three booleans, which rules out illegal combinations such as "loading is true and error has a value".
ℹ️ Info TanStack Query builds this state machine into the library (isPending, isError, data); writing the three states by hand is the best preparation for it.
🏷️ More Data & Engineering
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Can I use three booleans isLoading/isError/hasData instead of a status?
A You can, but illegal combinations become easy (two of them true at once). A single status field is the state machine way and every combination is valid by construction.
Q Should a failed request retry automatically?
A It depends on the business rules: a read can retry two or three times with an exponential backoff, while a write must be confirmed by a human so that no order is submitted twice.
Q Should the UI be disabled while loading?
A Disable the button of a submit request to prevent double submits; a read does not need to lock the whole screen, a skeleton screen keeps the page interactive.
