Concept questionMedium~7 min

Interview question

How can a TypeScript discriminated union make asynchronous UI state safer?

Model UI state with discriminated unions

Uses discriminated unions to represent valid UI states and make transitions exhaustive.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

I can model the state as variants such as { status: 'idle' }, { status: 'loading' }, { status: 'success', data }, and { status: 'error', error }. Switching on status narrows the fields available in each branch, so the success branch can read data and the error branch can read the error. This removes invalid combinations created by unrelated isLoading, data, and error values. It also makes the render logic reflect the actual state machine.

Full answer below

Practice focus

Discriminated unions, impossible states, exhaustive narrowing, async state, error models, and component rendering.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
Several independent booleans can describe combinations the product can never mean, such as loading and successful with no data at the same time. A discriminated union makes each valid state explicit.
I can model the state as variants such as { status: 'idle' }, { status: 'loading' }, { status: 'success', data }, and { status: 'error', error }. Switching on status narrows the fields available in each branch, so the success branch can read data and the error branch can read the error. This removes invalid combinations created by unrelated isLoading, data, and error values. It also makes the render logic reflect the actual state machine.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would include distinctions the user experience needs, not every implementation detail. For example, initial loading can be separate from refreshing so existing data remains visible during a background fetch. A mutation may need submitting, success, and recoverable failure variants with the submitted input retained. An exhaustive switch with a never check makes a newly added variant produce a compile-time reminder in every renderer or reducer that must handle it.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
For a larger workflow I would pair the union with a reducer so events such as request started, response received, retry requested, and canceled produce deliberate transitions. Runtime API errors still need to be parsed into the error shape before entering the union. I would avoid storing the same server data in multiple variants or duplicating values that can be derived. Tests can exercise events and assert both the next state and the visible recovery path, which makes race conditions and impossible transitions easier to see.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Representing one state machine with many unrelated booleans.
Adding a catch-all branch that hides an unhandled state.
Putting every transient implementation detail into the union.
Trusting an unvalidated API error as a typed variant.

Red flagsCandidateSigns the approach is fragileSignals that an interviewer may treat as risky.Open details

Details

The UI can show loading, error, and success at once.
A new state silently falls into a generic fallback.
Retry or refresh loses data the user still needs.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

How would you represent background refresh?
When would a reducer help?
How do you make a switch exhaustive?

Continue practice

Move to the linked follow-up, next path step, prerequisite, or deeper variant.

1 linked

Go deeper

Practice the next layer of the same subject.

Client Data Fetching

Opening drill

Concept questionMedium~7 min

Interview question

How can a TypeScript discriminated union make asynchronous UI state safer?

Model UI state with discriminated unions

Uses discriminated unions to represent valid UI states and make transitions exhaustive.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

Full answer below

Practice focus

Discriminated unions, impossible states, exhaustive narrowing, async state, error models, and component rendering.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
Several independent booleans can describe combinations the product can never mean, such as loading and successful with no data at the same time. A discriminated union makes each valid state explicit.
I can model the state as variants such as { status: 'idle' }, { status: 'loading' }, { status: 'success', data }, and { status: 'error', error }. Switching on status narrows the fields available in each branch, so the success branch can read data and the error branch can read the error. This removes invalid combinations created by unrelated isLoading, data, and error values. It also makes the render logic reflect the actual state machine.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would include distinctions the user experience needs, not every implementation detail. For example, initial loading can be separate from refreshing so existing data remains visible during a background fetch. A mutation may need submitting, success, and recoverable failure variants with the submitted input retained. An exhaustive switch with a never check makes a newly added variant produce a compile-time reminder in every renderer or reducer that must handle it.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
For a larger workflow I would pair the union with a reducer so events such as request started, response received, retry requested, and canceled produce deliberate transitions. Runtime API errors still need to be parsed into the error shape before entering the union. I would avoid storing the same server data in multiple variants or duplicating values that can be derived. Tests can exercise events and assert both the next state and the visible recovery path, which makes race conditions and impossible transitions easier to see.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Representing one state machine with many unrelated booleans.
Adding a catch-all branch that hides an unhandled state.
Putting every transient implementation detail into the union.
Trusting an unvalidated API error as a typed variant.

Red flagsCandidateSigns the approach is fragileSignals that an interviewer may treat as risky.Open details

Details

The UI can show loading, error, and success at once.
A new state silently falls into a generic fallback.
Retry or refresh loses data the user still needs.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

How would you represent background refresh?
When would a reducer help?
How do you make a switch exhaustive?

Continue practice

Move to the linked follow-up, next path step, prerequisite, or deeper variant.

1 linked

Go deeper

Practice the next layer of the same subject.

Client Data Fetching

How can a TypeScript discriminated union make asynchronous UI state safer?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue practice

Go deeper

How can a TypeScript discriminated union make asynchronous UI state safer?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue practice

Go deeper