Statecharts (aka state machines) are becoming the de facto way of managing component states and events. This talk will explain how they work and how to build common UI widgets with them.
Segun is the creator and maintainer of Chakra UI. He is passionate about building tools, design systems, and accessible components that help bridge the gap between design and code.
- Anatomy of a Stopwatch component
- Why State machines?
- Basics of State Machines
- Delayed and Interval events
- Explain each state and transitions
- Create and Visualize Statechart
- Connect to UI
- New requirement from PM
- start after a delay
- reset stopwatch while ticking
- Review