Mastering UIs with Finite State Machines

on YouTube ↗30m

" summary

Argues finite state machines (Mealy-style) replace fragile if/else UI code with a deterministic, idempotent model that makes race conditions and double-fetch bugs impossible; a live demo runs a fetch example in vanilla JavaScript + React and uses commands to register side effects; testing is reduced to walking states with snapshot tests (about 70% coverage reported); production use covers both React Web and React Native, with libraries like XState recommended and a Mars rover cited as a real-world FSM.

AI-written summary · about

" chapters (8)

1. 0:00Start
2. 8:19Top-Down Approach
3. 13:19Key Features
4. 17:43Rendering
5. 18:42Side Effects
6. 20:17Commands
7. 27:30Testing
8. 27:53Resources

" related talks

• 25mMastering UIs with Finite State MachinesRubén Sospedra · JS Kongress 2019
• 45mMastering UIs with Finite State MachinesRubén Sospedra · JSDayES 2018
• 28mState machines for frontend state managementTejesh P · JSFoo Coimbatore 2019
• 47mMastering Complex UI: State Machines and Reactive PatternsAnastasiia Mihal · JavaScript fwdays'25
• 45mState of the Art User Interfaces with State MachinesDavid Khourshid · Craft Conference 2019
• 20mSetState, We Need to Talk!Nikhil Sharma · React Advanced 2021
• 34mState Machines Meet React HooksZain Fathoni · JSConf.Asia 2019
• 38mState of the Art Web User Interfaces with State MachinesDavid Khourshid · Full Stack Fest 2018