Pro State Machine

Professional state machine patterns for managing complex React application state, focused on making invalid states impossible through type-safe design.

Architecture Philosophy

1. Events Over State: Capture user intent explicitly rather than mutating state directly
2. Impossible States Prevention: Use TypeScript's type system to make invalid states unrepresentable
3. Separation of Concerns: Keep pure state transitions separate from side effects

Core Rules

• Derive, don't store — compute values during render instead of syncing them with useState + useEffect.
• Model state as a finite state machine — a single status discriminated union, never boolean flag soup (isLoading/isError/isSuccess).
• Combine related state in a reducer — atomic updates, no intermediate invalid states; useState only for simple independent values.
• Drive side effects by events, not reactions — one effect watches status, never cascading useEffect chains.
• Fetch with a dedicated library — TanStack Query or SWR over hand-rolled useEffect fetching.
• Normalize entities — flat maps keyed by ID, not deeply nested arrays.