Building Complex UI with State Machines
summary
Implements an autocomplete search UI using xstate and TypeScript, modeling states for no-results, searching and selecting, invoking actors for keyboard input and async search, and simulating the machine visually. Adds debouncing via after transition (500ms) without extra code, wires guards/actions/assigns for typed events, and ends up with ~200 lines of machine code. Demo works: spinner, keyboard navigation, highlighted first result, and selection; contrasts with a fragile hooks-only implementation.
AI-written summary · about
chapters (11)
- 0:00State machines for UI
- 2:18State machine terms
- 3:01Autocomplete UI with state
- 7:17Guards and actions in xstate
- 12:45State machine in code
- 19:09Keyboard interaction with actors
- 21:45State machine to React UI
- 24:15Debouncing with state transitions
- 26:47State machines vs React hooks
- 27:10Pros and cons of state machines
- 30:04Closing remarks
related talks
38mInto the Visual World of State Machines
27mXState: the Visual Future of State Management
31mXState: the Visual Future of State Management
34mState Machines Meet React Hooks
20mSetState, We Need to Talk!
20mTaming UI complexity with Typed State Machines
32mDAVID KHOURSHID Making state management intelligent
44mIntroduction to statecharts