State Machines and Statecharts in JavaScript

A few days ago, I heard of using state machines in JavaScript. I’ve been listening to React Roundup podcast episode 069 The State Machines in React with David Khourshid.

David wrote a JavaScript library called XState.

Statecharts are a formalism for modeling stateful, reactive systems. This is useful for declaratively describing the behavior of your application, from the individual components to the overall application logic.

State machines are a way to handle state management in your front-end application. That doesn’t sound exciting.

I’m still not sure what state machines can do. But it looks like we can describe different states of the UI and programmatically derive actions from it. You can make sure that you find edge cases because there can’t be impossible states. You can easily plan and visualize your possible states before coding.

Here are two videos if you want to know more:

David Khourshid: Simplifying Complex UIs with Finite Automata & Statecharts:

Let’s learn state machines with David K. Piano! — Learn With Jason:

Further Reading:

• Pure UI using Xstate and ReactJS
• Using React and XState to Build a Sign In Form
• Welcome to the world of Statecharts
• XState