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.