AgentAlley

Skills · Coding

React State Management

Unverified●31/40

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.

Originally by wshobson · MIT

Claude Code◐PartialHas SKILL.md but declares no allowed-tools — Claude Code will ask for permission each time
Cursor◐PartialPlain prose you can paste in — but no Cursor rules file
Codex◐PartialPlain prose you can paste in — but no AGENTS.md
Gemini CLI◐PartialPlain prose you can paste in
Copilot◐PartialPlain prose you can paste in — but no Copilot instructions file
npx agentalley add react-state-management

This command does not work yet — the CLI is still being built. Until then, use Raw in the reader below to take the file.

Who is stuck, and on what

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.

The whole source

No sign-in, no blur, nothing truncated
react-state-management/SKILL.md135 lines3.9 KBRawView on GitHub
Frontmatter — 2 properties
namereact-state-management
descriptionMaster 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.
1---
2name: react-state-management
3description: 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.
4---A5 — No allowed-tools declared — no way to tell what this skill may touch
5 
6# React State Management
7 
8Comprehensive guide to modern React state management patterns, from local component state to global stores and server state synchronization.
9 
10## When to Use This Skill
11 
12- Setting up global state management in a React app
13- Choosing between Redux Toolkit, Zustand, or Jotai
14- Managing server state with React Query or SWR
15- Implementing optimistic updates
16- Debugging state-related issues
17- Migrating from legacy Redux to modern patterns
18 
19## Core Concepts
20 
21### 1. State Categories
22 
23| Type | Description | Solutions |
24| ---------------- | ---------------------------- | ----------------------------- |
25| **Local State** | Component-specific, UI state | useState, useReducer |
26| **Global State** | Shared across components | Redux Toolkit, Zustand, Jotai |
27| **Server State** | Remote data, caching | React Query, SWR, RTK Query |
28| **URL State** | Route parameters, search | React Router, nuqs |
29| **Form State** | Input values, validation | React Hook Form, Formik |
30 
31### 2. Selection Criteria
32 
33```
34Small app, simple state → Zustand or Jotai
35Large app, complex state → Redux Toolkit
36Heavy server interaction → React Query + light client state
37Atomic/granular updates → Jotai
38```
39 
40## Quick Start
41 
42### Zustand (Simplest)
43 
44```typescript
45// store/useStore.ts
46import { create } from 'zustand'
47import { devtools, persist } from 'zustand/middleware'
48 
49interface AppState {
50 user: User | null
51 theme: 'light' | 'dark'
52 setUser: (user: User | null) => void
53 toggleTheme: () => void
54}
55 
56export const useStore = create<AppState>()(
57 devtools(
58 persist(
59 (set) => ({
60 user: null,
61 theme: 'light',
62 setUser: (user) => set({ user }),
63 toggleTheme: () => set((state) => ({
64 theme: state.theme === 'light' ? 'dark' : 'light'
65 })),
66 }),
67 { name: 'app-storage' }
68 )
69 )
70)
71 
72// Usage in component
73function Header() {
74 const { user, theme, toggleTheme } = useStore()
75 return (
76 <header className={theme}>
77 {user?.name}
78 <button onClick={toggleTheme}>Toggle Theme</button>
79 </header>
80 )
81}
82```
83 
84## Detailed patterns and worked examples
85 
86Detailed pattern documentation lives in `references/details.md`. Read that file when the navigation tier above is insufficient.
87 
88## Best Practices
89 
90### Do's
91 
92- **Colocate state** - Keep state as close to where it's used as possible
93- **Use selectors** - Prevent unnecessary re-renders with selective subscriptions
94- **Normalize data** - Flatten nested structures for easier updates
95- **Type everything** - Full TypeScript coverage prevents runtime errors
96- **Separate concerns** - Server state (React Query) vs client state (Zustand)
97 
98### Don'ts
99 
100- **Don't over-globalize** - Not everything needs to be in global state
101- **Don't duplicate server state** - Let React Query manage it
102- **Don't mutate directly** - Always use immutable updates
103- **Don't store derived data** - Compute it instead
104- **Don't mix paradigms** - Pick one primary solution per category
105 
106## Migration Guides
107 
108### From Legacy Redux to RTK
109 
110```typescript
111// Before (legacy Redux)
112const ADD_TODO = "ADD_TODO";
113const addTodo = (text) => ({ type: ADD_TODO, payload: text });
114function todosReducer(state = [], action) {
115 switch (action.type) {
116 case ADD_TODO:
117 return [...state, { text: action.payload, completed: false }];
118 default:
119 return state;
120 }
121}
122 
123// After (Redux Toolkit)
124const todosSlice = createSlice({
125 name: "todos",
126 initialState: [],
127 reducers: {
128 addTodo: (state, action: PayloadAction<string>) => {
129 // Immer allows "mutations"
130 state.push({ text: action.payload, completed: false });
131 },
132 },
133});
134```
135 

Reviews

Installed this one?Write the first review and take the Trailblazer badge.

Reviews only open after a real install, so this is empty — and we leave it empty rather than invent one.

Alternatives

Also in Coding
Subagent Driven DevelopmentUse when executing implementation plans with independent tasks in the current sessionCoding · MIT◐◐◐◐◐●36/40Python Code Style & DocumentationPython code style, linting, formatting, naming conventions, and documentation standards. Use when writing new code, reviewing style, configuring linters, writing docstrings, or establishing project standards.Coding · MIT◐····●35/40Competitor Price Analysis 💲Competitor pricing strategy analysis and market positioning. Price mapping, pricing gaps identification, elasticity signals evaluation, and strategic pricing optimization. Use when the user asks about competitor pricing, price analysis, pricing strategy, or coCoding · MIT◐····●34/40Competitor Price Tracker 📊Set up competitor price tracking and monitoring workflows. Track price changes, detect promotions, analyze pricing patterns, and get alerts for competitive price movements.Coding · MIT◐····●34/40