lang-react

External state management with Zustand, XState, or TanStack Query keeps logic decoupled from components. Store your business logic, data fetching, and state transitions in these tools, then have components consume that state via hooks. This makes components purely presentational and your logic testable in isolation.

TanStack Query and Zustand handle remote data fetching and caching at the store level. Define queries or mutations in your store, manage loading and error states there, and pass only the resolved data to components. Components become simple renderers of store state.

XState lets you define state machines outside components and invoke them as stores. Machine logic handles all state transitions deterministically; components subscribe to machine state and dispatch events. Test machines independently to verify behavior before connecting UI.

Yes. Zustand works well for simpler, action-based state while XState excels at complex state machines. Use Zustand for UI state and remote data caching, XState for multi-step workflows or domain logic. Both integrate cleanly with React hooks.

Components with internal logic become harder to test, reuse, and reason about. External stores centralize logic, making it testable in isolation and reusable across components. Keeping components declarative and store-centric improves maintainability and catches bugs earlier.

No. Start with one based on your needs: TanStack Query for remote data, Zustand for application state, XState for state machines. Many apps use just one or two. The pattern is about externalizing logic; the tool choice depends on complexity and scale.