skip to content

State Machines

State machines expose hidden complexity and "make impossible states impossible". You can use state machines to visualize app logic and improve communication about how your code works.

Build UI Components With State Machines

The new Zag component library offers UI components powered by finite state machines. Segun Adebayo will teach us how it works!

Visually Create State Machines

Visualizing app logic is a game changer. In this episode, David Khourshid will teach us how Stately lets us visually create state machines and statecharts, then use them directly in React.js apps.

Build Better Apps With State Machines

Using state machines, we can build web apps with low complexity and high confidence. David Khourshid will show us how xstate helps us make sense of state management in web apps.

Use State Machines to Build a Queue for Custom Twitch Overlays

In this episode, Jason will build a state machine (using xstate) to handle subscription events and display them in Twitch overlays.

Build a Cart Powered by State Machines

State machines help us visualize complex UI logic and make our components much more predictable and error resistant. In this episode, Jason creates a state machine using xstate to manage the opening and closing of an animated cart component.

Let's Learn State Machines!

What are state machines? How are they helpful? In this episode, David Khourshid (https://twitter.com/DavidKPiano) walks us through refactoring a React component to use xstate, which helps us clear up some bugs and add more predictability.