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
Decision gist · record as of 2026-07-22
React State Management helps you choose between Redux Toolkit, Zustand, Jotai, and React Query for your project's needs. 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.
Use it when
- react-state-management explains that Redux Toolkit suits large applications needing middleware, time-travel debugging.
- react-state-management provides implementation guides for both.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
wshobson/agents/react-state-management · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
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.
React State Management
Comprehensive guide to modern React state management patterns, from local component state to global stores and server state synchronization.
When to Use This Skill
- Setting up global state management in a React app
- Choosing between Redux Toolkit, Zustand, or Jotai
- Managing server state with React Query or SWR
- Implementing optimistic updates
- Debugging state-related issues
- Migrating from legacy Redux to modern patterns
Core Concepts
1. State Categories
| Type | Description | Solutions |
|---|---|---|
| Local State | Component-specific, UI state | useState, useReducer |
| Global State | Shared across components | Redux Toolkit, Zustand, Jotai |
| Server State | Remote data, caching | React Query, SWR, RTK Query |
| URL State | Route |
(truncated - see the full file via the links below)
File tree — 2 files
plugins/frontend-mobile-development/skills/react-state-management/SKILL.md
plugins/frontend-mobile-development/skills/react-state-management/references/details.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Choose the right state management library for my React project”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
React State Management guides you through selecting and implementing the ideal state solution for your architecture. It covers built-in hooks, Context optimization, and third-party libraries like Zustand, Jotai, TanStack Query, and SWR—helping you avoid prop drilling and scale effectively.
Master Redux Toolkit's approach to global state management in React and Next.js projects. Learn to structure slices with createSlice, implement memoized selectors, handle async operations via RTK Query and createAsyncThunk, and apply TypeScript for type safety throughout your store.
Zustand provides lightweight state management for React using hooks instead of providers or complex patterns. It's designed for apps needing global state without Redux overhead, offering direct mutations and flexible hydration for server-side rendering.
Get expert guidance on choosing and implementing the right state solution for your React app. This skill covers Redux Toolkit for complex global state, Zustand for lightweight stores, TanStack Query for server data, and Context API for simple cases, plus patterns to avoid common pitfalls.
Set up production-ready state management using Redux Toolkit, Zustand, MobX, or Context API with useReducer. Choose the right pattern for your app's complexity, from lightweight stores to full-featured solutions with time-travel debugging and async handling.
Learn to architect scalable state solutions for React Native apps using Redux Toolkit for complex app state, Zustand for lightweight global stores, and TanStack Query for server-side caching. This skill covers TypeScript integration, data persistence with AsyncStorage and MMKV, and decision frameworks for choosing the right tool per use case.
More skills zustand-5 (MIT) · zustand-5 (Apache-2.0) · State Management (unlicensed) · State Management (unlicensed)