state-management-architect

Scalable state management combines Context API for domain-scoped state, XState for explicit state machines with transitions and guards, and Zustand or Jotai for global stores. This layered approach separates concerns, enables testing, and optimizes performance through memoization and selectors across complex UI ecosystems.

Use XState state machines for workflows requiring explicit transitions, guards, async services, and side effects—like authentication flows or multi-step forms. Context API suits simpler shared values within component subtrees. XState's visualization and devtools support also aid debugging in complex async scenarios.

Yes. Zustand and Jotai serve different patterns: Zustand provides store-based global state with actions and selectors, while Jotai uses atoms for primitive state composition. Both integrate with Context and XState; choose based on preference for store-centric vs. atom-centric architecture and your deriving-state complexity.

Test custom hooks using react-hooks-testing-library to verify state transitions and side effects in isolation. For XState, test machines separately before component integration. Use selectors and memoization patterns to ensure performance isn't degraded by testing; mock async services and verify guard conditions and action execution.

Global state performance optimization uses selectors to subscribe to specific slices, memoization to prevent unnecessary renders, immutability patterns, batching updates, and code-splitting for lazy-loaded stores. Context subtree boundaries and XState service caching further reduce render cascades in performance-conscious applications.

Yes. Devtools (XState Inspector, Redux DevTools integration with Zustand) enable time-travel debugging and state inspection. Comprehensive testing of state shapes, reducers, guards, and async flows catches edge cases before production. Documentation and typed state ensure maintainability as complexity grows.