react-state

Choosing React state management depends on state type: use useState for local UI, Context API for shared UI, React Query for server state, and Zustand for simple global state. This guidance provides a decision-making framework to map use cases to the correct tools.

Use useReducer instead of useState when managing complex state logic involving multiple sub-values or when next state depends on previous state. It offers pattern guidance for transitioning from simple state to reducers to avoid common anti-patterns.

Managing server state with React Query involves fetching, caching, and synchronizing API data separately from client state. This approach provides best practices to handle server data without overlapping into local UI state management tools like useState.

Zustand works well for global UI state by offering a simpler API with less boilerplate than the Context API. This Skill differentiates these tools based on use cases, explaining when Zustand's architecture is optimal over Context for state colocation.

React state architecture anti-patterns often arise from misplacing server state in global UI stores or failing to colocate state. This guidance addresses common pitfalls and offers best practices for optimal state architecture decisions.