A state machine is an abstract representation of possible states and their transitions.

In this post, we'll look at the characteristics that bring about a state machine.

Each state machine must have:

• A finite number of states
• An initial state
• A finite number of events that can cause transitions
• A finite number of transitions from one state to another

Glossary:

state represents how your application behaves at any given point.

states describe the set of possible states that your application can be in.

events external input that is mostly sent to state machines within event handlers.

transitions occur as a reaction to events and transition your current state to another state. state + event => newState.

Tomorrow we will apply the concepts learned above to create our first state machine with XState. 🎉

About this series

Throughout the first 24 days of December, I'll publish a small blog post each day teaching you about the ins and outs of state machines and statecharts.

The first couple of days will be spent on the fundamentals before we'll progress to more advanced concepts.