State Machines Meet React Hooks
summary
Shows a stepwise rebuild of a modal/calendar UI using XState with the useMachine hook, demonstrating hierarchical states, guards and event payloads to route open→view/edit/create/list flows. The claim is concrete: state machines make every state visible and easier to test; the implementation is hooked into Redux devtools and actually works for the examples, but bugs remain from view/state mismatches, so integration tests are required. The demo uses named guards, nested states and event-driven transitions.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 2:49What is state machines
- 6:19The problem
- 8:04Solution Interaction
- 9:52Journey
- 10:20Implementation
- 11:18Simple Machine
- 14:13View vs Edit
- 15:54Hierarchical State
- 17:27Visible State
- 19:27Create Screen
- 23:32New Condition
- 24:36Multiple Data
- 26:01In Solutions
- 28:17Comparison
related talks
31mXState: the Visual Future of State Management
27mXState: the Visual Future of State Management
32mFormal Forms with State Machines
28msetState Machine
30mMastering UIs with Finite State Machines
20mSetState, We Need to Talk!
38mInto the Visual World of State Machines
42mTackle React component complexity using Reactive Statecharts