▸ // composition 2

• 01 One machine per entity Don't try to fit ten orders into one machine. per-rowinstanceslifecycle
• 02 Subscribe from React Render off the machine's state with a tiny hook. reacthookrendering

▸ // hooks 3

• 03 Side effects on entry Fire a side effect every time the machine arrives at a state — log it, persist it, page someone — without scattering checks across your call sites. hook_entryanalyticsside-effects
• 04 Transition logging Tap every transition with a single line. hook_any_transitionobservabilityreplay
• 05 Payload-aware actions Most actions carry data — a form submission, a server response, a user id. hook_actiondatasession

▸ // patterns 6

• 06 Acyclic flow A one-way pipeline with a terminal state. pipelineterminalorders
• 07 Auth flow Sign-in, sign-out, and session-expired collapsed into a single machine. authsessionlifecycle
• 08 Optional branch A pipeline with one optional fork — review-then-publish, or skip-and-publish. forkreviewpublish
• 09 Cycle A linear loop with one shared verb. loopshared-actionbeginner
• 10 Data fetch The four-state shape every data hook actually has: idle / loading / ready / failed. asyncloadingerror
• 11 Toggle Two states, one verb. booleantwo-statebeginner

▸ // real world 4

• 12 Fetch with retry A request that can succeed, fail, or be retried — without a tangle of nested if-statements. asyncretrynetwork
• 13 Multi-step form Wizard, checkout, onboarding. wizardnavigationforms
• 14 Optimistic UI Show success immediately, roll back on failure. asyncrollbackux
• 15 Testing transitions Walk every legal path with a tiny generator. testingvitestcoverage

▸ // testing 3

• 16 Jest × Webpack × React The classic CRA-shaped stack. jestwebpackreact
• 17 Vitest × Vite × React Wire jssm machines into a Vitest suite that runs against a Vite-powered React app. vitestvitereact
• 18 Vitest × Vite × Vue Vue 3 + @vue/test-utils against a jssm machine. vitestvitevue