Learn / TypeScript and React Product Systems
State Machines for UI Flow
Replace boolean soup with compact discriminated states that explain what the screen can do next.
Course: TypeScript and React Product Systems. Level: Intermediate. Topic: Frontend systems.
Stage: intermediate - Intermediate flow modeling - UI state machines and transition evidence. Move from component contracts into explicit event flows that remove impossible states and make recovery paths reviewable.
Outcomes
- Model impossible states away.
- Keep events typed and auditable.
- Make loading and error states part of the design.
Concepts
- discriminated union
- reducer
- event
- state transition
Concept flow
Show how ui state machines and transition evidence moves from trigger to implementation outcome in TypeScript React.
- Idle
- Loading
- Ready
- Error
- Retry
Session flow
- Model discriminated union (concept, 9 min) — Name the decisions behind discriminated union before writing code.
- Model impossible states away.
- Explain where discriminated union belongs in learning analytics dashboard.
- Build the vertical slice (walkthrough, 16 min) — Implement the smallest useful slice in learning/state.ts.
- Keep events typed and auditable.
- Connect reducer to a working example.
- Verify and harden (exercise, 10 min) — Write a small transition table.
- Make loading and error states part of the design.
- Record one risk or follow-up before moving on.
Code example
TypeScript in learning/state.ts.
type LessonState = {
status: "idle" | "loading" | "ready" | "error";
selectedLessonId: string | null;
};
type Action =
| { type: "open"; lessonId: string }
| { type: "ready" }
| { type: "fail" };
function reducer(state: LessonState, action: Action): LessonState {
switch (action.type) {
case "open":
return { status: "loading", selectedLessonId: action.lessonId };
case "ready":
return { ...state, status: "ready" };
case "fail":
return { ...state, status: "error" };
}
}
Walkthrough examples
- State Machines for UI Flow in a learning analytics dashboard — A team is extending a resilient React product surface and needs this lesson's pattern to be clear enough for review, testing, and future maintenance.
- File: learning/state.ts
- File: tests/state-machines-for-ui.spec
- File: docs/typescript-react/state-machines-for-ui.md
- Start from the provided TypeScript snippet and make the intent visible in names and boundaries.
- Apply the checklist item "List UI states" before adding extra behavior.
- Write down how the implementation changes when reducer fails or becomes slow.
Practice
- Convert three booleans into a union state.
- Add a retry action.
- Write a small transition table.
Checklist
- List UI states
- Define actions
- Remove conflicting booleans
- Test the error path
Quiz prompts
- Why does a discriminated union help UI reliability? — The type system can guide rendering and transitions when each state has a clear shape.
- A teammate wants to hide discriminated union inside a convenient helper. What should you check first? — Place discriminated union at the boundary that keeps learning analytics dashboard behavior explicit, testable, and reviewable.
- Which artifact best proves this TypeScript React lesson is ready for review? — Production-ready learning needs evidence: a test, trace, command, screenshot, or log that catches the risk again.
- Intermediate flow modeling: a teammate says the happy path works, but "Event transition table" is still implicit. What should you ask for before merging? — Event transition table belongs in the intermediate stage only when the decision is visible, testable, and tied to a realistic failure mode.
- A reviewer has five minutes to evaluate this intermediate TypeScript React slice. Which evidence is strongest? — Model an intermediate UI flow with named events, impossible-state removal, retry/error transitions, and evidence a reviewer can run.
Flashcards
- Intermediate flow modeling: what decision does "Event transition table" force you to make? Name every user, network, and retry event before wiring handlers. Evidence prompt: Write a transition table for one form or lesson flow before changing reducer code.
- Intermediate flow modeling: what decision does "Impossible-state removal" force you to make? Use reducer states that prevent loading-with-data, error-with-success, and double-submit ambiguity. Evidence prompt: Turn two incompatible booleans into one reducer state and prove one impossible state is gone.
- Intermediate flow modeling: what decision does "Retry and error transition proof" force you to make? Make retries and failures visible in UI copy, tests, and analytics events. Evidence prompt: Add one retry transition and capture the test or screenshot that proves it is reachable.
- In TypeScript React, what should you remember about discriminated union? discriminated union matters here because it supports "Model impossible states away.".
- In TypeScript React, what should you remember about reducer? reducer matters here because it supports "Keep events typed and auditable.".
- In TypeScript React, what should you remember about event? event matters here because it supports "Make loading and error states part of the design.".
- In TypeScript React, what should you remember about state transition? state transition matters here because it supports "Model impossible states away.".
Labs
- Ship a state machines for ui flow slice — Extend a resilient React product surface with a small but reviewable feature that proves the lesson's architecture in code.
- Model an intermediate UI flow with named events, impossible-state removal, retry/error transitions, and evidence a reviewer can run.
- Write a transition table for one form or lesson flow before changing reducer code.
- Turn two incompatible booleans into one reducer state and prove one impossible state is gone.
- Add one retry transition and capture the test or screenshot that proves it is reachable.
- Convert three booleans into a union state.
- Add a retry action.
- The lab demonstrates the intermediate flow modeling outcome without skipping earlier contract evidence.
- Each subtopic has a concrete artifact: Event transition table, Impossible-state removal, Retry and error transition proof.
- The review notes explain how this level changes ownership, verification, or operational risk.
Challenge
- Review-ready state machines for ui flow (Stretch) — Model an intermediate UI flow with named events, impossible-state removal, retry/error transitions, and evidence a reviewer can run.
- All checklist items are either implemented or documented with a reason.
- The change can be understood from learning/state.ts plus one short note.
- The concept diagram names ownership, failure handling, and verification points.
- A teammate could run the verification steps without asking for hidden context.
Canonical lesson URL