react-state-management

Comprehensive guide to React state management covering local component state, global stores, and server state synchronization. Compares Redux Toolkit, Zustand, Jotai, and React Query with selection criteria and best practices for each approach.

React State Management helps you choose between Redux Toolkit, Zustand, Jotai, and React Query for your project's needs.

AI-generated summary based on this skill's SKILL.md

★ 38,308 ⁮ 4,097 MIT updated 2026-07-22 by wshobson

Install

wshobson/agents/react-state-management · repository language: Python

Manual (git clone) CLI (skillfed)

git clone https://github.com/wshobson/agents
cp -r agents/plugins/frontend-mobile-development/skills/react-state-management ~/.claude/skills/react-state-management

npx skillfed install wshobson/agents/react-state-management

Frequently asked questions

AI-generated answers based on this skill's SKILL.md and metadata

How to manage state in React with the right library?

react-state-management covers choosing between local component state, global stores, and server state solutions. The skill compares Redux Toolkit for complex apps with middleware needs, Zustand for lightweight global state, Jotai for atomic patterns, and React Query for server synchronization. Selection depends on app scale, team familiarity, and whether you're managing client or server state.

What's the difference between Redux Toolkit vs Zustand?

react-state-management explains that Redux Toolkit suits large applications needing middleware, time-travel debugging, and DevTools integration, while Zustand offers a simpler API for smaller projects prioritizing bundle size and ease of learning. Both handle global state, but Redux Toolkit provides more structure and tooling, whereas Zustand emphasizes minimalism and developer experience.

How do I set up global state with Redux Toolkit or Zustand?

react-state-management provides implementation guides for both. Redux Toolkit uses slices and configureStore for structured state with reducers and actions. Zustand uses a create hook with a simple store function. The skill covers best practices like selector optimization, preventing unnecessary re-renders, and organizing state logic for maintainability in each approach.

How does React Query manage server state and API responses?

react-state-management distinguishes server state from client state, showing how React Query handles caching, synchronization, and background updates. It covers useQuery for fetching, useMutation for updates, and patterns like optimistic updates and stale-while-revalidate. The skill explains when to use React Query alongside Redux Toolkit or Zustand for complete state solutions.

What are modern React state patterns and best practices?

react-state-management teaches separation of concerns between local, global, and server state, selector patterns to prevent re-renders, atomic state design with Jotai, and form state handling. It covers debugging Redux with DevTools, migration strategies from legacy Redux, and how to structure state for scalability in large applications.

How do I migrate legacy Redux code to Redux Toolkit?

react-state-management includes migration guidance from older Redux patterns to Redux Toolkit's modern slice-based approach. It covers converting action creators and reducers to slices, leveraging Immer for immutable updates, and adopting Redux Toolkit's simplified configuration while maintaining existing middleware and selectors during the transition.

SKILL.md

rendered from the published skill — quoted content, verbatim