State machines are a powerful concept but are often underused in web development (despite the critical role it plays in other areas - from networking-protocols to games to embedded systems to AI.).

State Machines are composed of a limited set of possible states and a set of rules that determine the possible transitions from one state to another.
They allow us to think about a system's "current state" at a particular point in time and model state changes to respond to some external inputs. It allows us to structure our application logic in a declarative way, much like React does with UI.

Hopefully, watching this video will make you more aware of state machines, and you will be applying them more often in your future projects.

Links:

Christian Alfoni's full video on State Machines in Overmind:    • Overmind and state machines - ROUND 5  

XState Library:
https://xstate.js.org/docs/