Skip to content
FrontendHaltFrontendHalt
React·Intermediate·Coding·1 min read

How do you avoid impossible async states?

Short interview answer

Use a tagged state union such as idle, loading, success with data, and error with a message rather than independent booleans and optional fields. The reducer then permits only explicit transitions between valid states.

Example

JSX
// Impossible states are representable:{ isLoading: true, error: 'x', data: {...} }
// Only valid states are representable:type State =  | { status: 'idle' }  | { status: 'loading' }  | { status: 'success'; data: Data }  | { status: 'error'; message: string };

Key takeaway

Explain the underlying mental model clearly, then support it with a concrete example and its trade-offs.

← Back to State modeling with reducers

Related questions