130: David Khourshid - Building Better UI Components with State Machines

In this episode, Adam talks to David Khourshid about using state machines to build UI components that are simpler and more resilient to bugs.

Topics include:

What exactly is a finite state machine?
Why trying to keep track of a component's status using boolean flags is leads to bugs and complex code
Why it makes so much more sense to keep track of a component's state using some sort of label
How simple it can actually be to implement UI component logic with a state machine and why you shouldn't think of it as complex or over-engineering
How you can think of using state machines in UI programming to be like an inversion of the typical approach you may have taken in the past, where actions become scoped to certain states instead of actions needing to inspect the current state
What events might look like in your state machine and where you're actually sending them from and to
Advice for naming your events
What it means to "transition" between states
How using a state machine makes it easy to provide slightly different behavior for the same action based on the current state
The benefits of visualizing your state machines
Using the XState library to build state machines in JavaScript

Sponsors:

Links:

Full Stack Radio