XState

I model state machines by first listing events (press/do something), tasks (side effects, split by services (long running and you care about them ending) and actions (sync, take no time at all)) together with lifecycle (when it's active). Services can spawn events.

This guide & docs are great.

Timsy is a nice lean alternative to XState.

Notes

• When should you use XState? When you have something complex to build, with: 1. Many side effects, especially long-running ones like call recording. 2. Sequences of things that MUST happen in a certain order (choose devices, record, preview). Either dead simple (useState) or everything else (XState).
• I use XState anytime I have to write my own useState and it is more than a single boolean per component, or anytime I'd use useEffect.

Links

• XState Docs
• Series of examples showing how to model application state with statechart using xstate
• XState Visualizer - Visualizer for XState machines. (Code)
• Introduction to State Machines Using XState (2021)
• State Machines & XState Workshop
• Why XState? (Tweet)
• XState: the Visual Future of State Management (2021)
• xstate-awaitable-send - Fire an event into an XState Machine and then wait for it to resolve.
• Frontend Masters React + XState workshop (2020) (Code)
• 7guis-xstate-stream - Solve The 7 Tasks of 7GUIs using xstate.
• xstate-parser - Experiments in building a tool for XState to parse basic information about machines declared inside files.
• Why XState is THE State Management Tool (2022)
• XState Docs Speedrun - 2022
• xState+react-query-integration - CodeSandbox
• XState React Template - CodeSandbox
• Modelling Statecharts: A step-by-step guide (2022)
• Designing State Machines #1 - Fetch Logic
• Integrating Form Libraries (in React/Vue/Svelte) with XState (2022)
• Visually Create State Machines with XState (2022)
• Mailbox - Turns XState Machine into a Real Actor.
• Simple model-based-development example using Xstate (and svelte, playwright)
• XSystem - Building Blocks for XState-based Actor Systems.
• AdonisJS + Petite Vue + XState
• Official Beginner’s Guide to XState in React - YouTube
• Robo Wizard - Library for building multi-step forms backed by a state machine.
• Backend XState Machines on Remix
• XState and Stately with Matt Pocock (2022)
• RFCs for XState and Stately tools