React State Management

by wshobson46891e7e60daNo licenseListed Oct 8, 2026Updated Oct 8, 2026

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.

Instructions onlySoftware Development

AI-generated overview

Guides React state management choices and patterns across Redux Toolkit, Zustand, Jotai, and React Query.

What it does: This skill provides guidance on modern React state management, covering local, global, server, URL, and form state categories. It offers selection criteria for choosing between Redux Toolkit, Zustand, Jotai, React Query, and SWR, plus a Zustand quick-start example, best practices, and a legacy Redux to Redux Toolkit migration example. It also points to a references file for deeper pattern documentation.
When to use it: Use it when setting up global state in a React app, choosing between state management libraries, managing server state, implementing optimistic updates, debugging state issues, or migrating from legacy Redux.
Requirements: No scripts or packages are required beyond the agent; it is an instructions-only skill with an optional reference document.

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 parameters, search	React Router, nuqs
Form State	Input values, validation	React Hook Form, Formik

2. Selection Criteria

Small app, simple state → Zustand or JotaiLarge app, complex state → Redux ToolkitHeavy server interaction → React Query + light client stateAtomic/granular updates → Jotai

Small app, simple state → Zustand or JotaiLarge app, complex state → Redux ToolkitHeavy server interaction → React Query + light client stateAtomic/granular updates → Jotai

Quick Start

Zustand (Simplest)

typescript

// store/useStore.tsimport { create } from 'zustand'import { devtools, persist } from 'zustand/middleware'
interface AppState {  user: User | null  theme: 'light' | 'dark'  setUser: (user: User | null) => void  toggleTheme: () => void}
export const useStore = create<AppState>()(  devtools(    persist(      (set) => ({        user: null,        theme: 'light',        setUser: (user) => set({ user }),        toggleTheme: () => set((state) => ({          theme: state.theme === 'light' ? 'dark' : 'light'        })),      }),      { name: 'app-storage' }    )  ))
// Usage in componentfunction Header() {  const { user, theme, toggleTheme } = useStore()  return (    <header className={theme}>      {user?.name}      <button onClick={toggleTheme}>Toggle Theme</button>    </header>  )}

// store/useStore.tsimport { create } from 'zustand'import { devtools, persist } from 'zustand/middleware'
interface AppState {  user: User | null  theme: 'light' | 'dark'  setUser: (user: User | null) => void  toggleTheme: () => void}
export const useStore = create<AppState>()(  devtools(    persist(      (set) => ({        user: null,        theme: 'light',        setUser: (user) => set({ user }),        toggleTheme: () => set((state) => ({          theme: state.theme === 'light' ? 'dark' : 'light'        })),      }),      { name: 'app-storage' }    )  ))
// Usage in componentfunction Header() {  const { user, theme, toggleTheme } = useStore()  return (    <header className={theme}>      {user?.name}      <button onClick={toggleTheme}>Toggle Theme</button>    </header>  )}

Detailed patterns and worked examples

Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.

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

typescript

// Before (legacy Redux)const ADD_TODO = "ADD_TODO";const addTodo = (text) => ({ type: ADD_TODO, payload: text });function todosReducer(state = [], action) {  switch (action.type) {    case ADD_TODO:      return [...state, { text: action.payload, completed: false }];    default:      return state;  }}
// After (Redux Toolkit)const todosSlice = createSlice({  name: "todos",  initialState: [],  reducers: {    addTodo: (state, action: PayloadAction<string>) => {      // Immer allows "mutations"      state.push({ text: action.payload, completed: false });    },  },});

// Before (legacy Redux)const ADD_TODO = "ADD_TODO";const addTodo = (text) => ({ type: ADD_TODO, payload: text });function todosReducer(state = [], action) {  switch (action.type) {    case ADD_TODO:      return [...state, { text: action.payload, completed: false }];    default:      return state;  }}
// After (Redux Toolkit)const todosSlice = createSlice({  name: "todos",  initialState: [],  reducers: {    addTodo: (state, action: PayloadAction<string>) => {      // Immer allows "mutations"      state.push({ text: action.payload, completed: false });    },  },});

Source and attribution

Source:wshobson/agentsinplugins/frontend-mobile-development/skills/react-state-managementat commit46891e7

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

React State Management

React State Management

When to Use This Skill

Core Concepts

1. State Categories

2. Selection Criteria

Quick Start

Zustand (Simplest)

Detailed patterns and worked examples

Best Practices

Do's

Don'ts

Migration Guides

From Legacy Redux to RTK

Source and attribution

More from wshobson/agents

Uv Package Manager

Web Component Design

Python Type Safety

Visual Design Foundations

Responsive Design

Python Resource Management

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Dpop Adoption

Gemini Live Api

Gemini Api