Finite State machines

Note: [State Enums](https://twitter.com/housecor/status/1437765743177777157) provide some of the benefits without all the complexity of learning state charts and XState.

## Key Terms
- **[Event](https://statecharts.github.io/glossary/event.html)** - An external signal that something happened. Events are sent **to** the state machine. An event sets of a `transition`.
- Examples: INPUT (User typed a key). SUBMIT (User submitted a form). RESOLVE (Promise resolved). In XState, the `on` key holds the event name.
- **Action** -
- **States** - Discrete states
- **Transition** - A change from one state to another
- **Activity** - Use for ongoing activities like an alarm clock that writes to the console every second.

[Blog overview - State machines in React](https://gedd.ski/post/state-machines-in-react/)
[Blog - Model based testing in React via state machines](https://css-tricks.com/model-based-testing-in-react-with-state-machines/) - Blog based version of David K Piano's React Rally talk
[XState](https://xstate.js.org/docs/)
[XState Visualizer](https://xstate.js.org/viz/)
[XState Catalog](https://xstate-catalogue.com/)

## Examples
https://github.com/cypress-io/cypress-realworld-app
https://mastery.games/post/state-machines-in-react/
Multistep form: https://codesandbox.io/s/crckp?file=/src/stepMachine.js