Make legacy code delightful with statecharts
summary
Shows that messy React useEffect dependency soup (examples: a Pokémon fetcher and an async image/video hover player) becomes an executable state chart using XState / Stately, with explicit events and a runnable diagram that is literally the code. The result is intent-first, statically analyzable UI logic, easier debugging and targeted fixes, and straightforward model-based tests — demonstrated working on live examples and claimed to cut maintenance cognitive load.
AI-written summary · about
chapters (23)
- 0:00Make legacy code delightful with statecharts Matt Pocock
- 0:15Legacy code is everywhere
- 0:27Legacy code is code without an organisational advocate
- 0:56When you understand the intent of legacy code, it stops being legacy
- 1:11Legacy Code in React
- 1:28useEffect
- 2:01Let's look at some code
- 3:24What's wrong with this process?
- 3:35You need to track all the dependencies first
- 3:48Then, understand all the implementation details
- 4:00The intent of the code is the last thing you understand
- 4:11Is this process delightful?
- 4:34Let's go again!
- 4:59mattpocock/react-finland-talk
- 7:40This problem scales with complexity
- 8:01How would you mitigate it?
- 8:57External Docs
- 10:21What's the solution?
- 12:03Intent first, implementation second
- 12:35Explicit events Implicit dependencies
- 13:31Tired: the diagram represents the code
- 14:06Statically Analyzable Code
- 14:42Code that can speak for itself
related talks
01h 01mThe visual future of reactive applications with statecharts
42mTackle React component complexity using Reactive Statecharts
37mReactive State Machines and Statecharts
27mMaking Application Logic Visually Collaborative
27mXState: the Visual Future of State Management
34mSimplifying Complex UIs with Finite Automata & Statecharts
28msetState Machine
44mIntroduction to statecharts