Tackle React component complexity using Reactive Statecharts
summary
Claim: model component behavior with Reactive Statecharts (XState) so the component becomes a serializable, visual state machine that exposes concrete transitions instead of scattered booleans. Examples: debounced input with cancellation, mutual‑exclusion form states and a carousel with autoplay pause history and animation. Implementation uses JSON statecharts, invoked services for async cancellation, conditional transitions to avoid combinatorial explosion, and machine-driven entry/exit for cleanup. Machines stay implementation detail and the rendered component works and reuses the same logic across platforms.
AI-written summary · about
chapters (10)
- 0:00Start
- 5:37Confusion
- 7:49Let's talk about Behaviour
- 19:08State # State
- 21:20Debouncing input
- 25:35Cancellation
- 27:32Mutual Exclusivity
- 30:10Example 4 Underestimating the complexity growth
- 32:53Cyclic Carousels
- 40:13End user doesn't care if you're using state machines
related talks
01h 01mThe visual future of reactive applications with statecharts
37mReactive State Machines and Statecharts
28msetState Machine
22mMake legacy code delightful with statecharts
13mAbstract component modeling in React
34mSimplifying Complex UIs with Finite Automata & Statecharts
19mIntroducing state machines and statecharts
44mIntroduction to statecharts