react-state-management
Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.
By sickn33 · 484 installs
npx skills add sickn33/agentic-awesome-skills --skill react-state-management
Source repository · Upstream listing
React State Management
Comprehensive guide to modern React state management patterns, from local component state to global stores and server state synchronization.
Do not use this skill when
The task is unrelated to react state management
You need a different domain or tool outside this scope
Instructions
Clarify goals, constraints, and required inputs.
Apply relevant best practices and validate outcomes.
Provide actionable steps and verification.
If detailed examples are required, open resources/implementation playbook.md .
Use this skill when
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 parameters, search React Router, nuqs
Form State Input values, validation React Hook Form, Formik
2. Selection Criteria
Quick Start
Zustand (Simplest)
Patterns
Pattern 1: Redux Toolkit with TypeScript
Pattern 2: Zustand with Slices (Scalable)
Pattern 3: Jotai for Atomic State
Pattern 4: React Query for Server State
Pattern 5: Combining Client + Server State
Best Practices
Do's
Colocate state Keep state as close to where it's used as possible
Use selectors Prevent unnecessary re renders with selective subscriptions
Normalize data Flatten nested structures for easier updates
Type everything Full TypeScript coverage prevents runtime errors
Separate concerns Server state (React Query) vs client state (Zustand)
Don'ts
Don't over globalize Not everything needs to be in global state
Don't duplicate server state Let React Query manage it
Don't mutate directly Always use immutable updates
Don't store derived data Compute it instead
Don't mix paradigms Pick one primary solution per category
Migration Guides
From Legacy Redux to RTK
Resources
[Redux Toolkit Documentation](https://redux toolkit.js.org/)
[Zustand GitHub](https://github.com/pmndrs/zustand)
[Jotai Documentation](https://jotai.org/)
[TanStack Query](https://tanstack.com/query)
Limitations
Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.