setState Machine
summary
Statecharts replace brittle flag logic with a deterministic model, implemented here using X State and a thin layer called react automata that wires actions to component methods. Examples: an infinite‑scroll that attaches/detaches handlers and guards fetches correctly, and a calculator built with no nested flags. Tests are autogenerated snapshot tests that traverse every state. A cited experiment finds about 80% fewer bugs when using statecharts, and the examples function as described.
AI-written summary · about
chapters (7)
- 0:00Start
- 1:39Infinite Scroll
- 4:47Bottom-up
- 6:20Automata Theory
- 9:46Statecharts
- 22:40Benefits
- 24:49Takeaways
related talks
19mIntroducing state machines and statecharts
42mTackle React component complexity using Reactive Statecharts
37mReactive State Machines and Statecharts
34mStill Not into State Machines in 2023?!
28mState machines for frontend state management
27mXState: the Visual Future of State Management
32mFormal Forms with State Machines
45mState of the Art User Interfaces with State Machines