AutoGineer
Generated banner for React State Management
Generated logo for React State Management

React State Management

Seth HobsonCommunityCreated by Seth Hobson

  • Skill
  • Guidelines
  • Software development
  • MIT
  • No issues found
Download ZIP

From the author

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 description by Seth Hobson

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured approach to managing state in React applications. It categorizes state into local, global, server, URL, and form types, offering guidance on selecting the right tool—such as Redux Toolkit, Zustand, Jotai, or React Query—based on application complexity and specific requirements. It includes best practices for state colocation, performance optimization via selectors, and migration strategies from legacy patterns.

What it does

  • Categorizes state types to help developers choose the appropriate management solution.
  • Provides implementation patterns for Redux Toolkit, Zustand, and Jotai.
  • Offers best practices for state colocation and immutable updates.
  • Includes migration guidance for moving from legacy Redux to Redux Toolkit.
  • Demonstrates how to handle server state synchronization effectively.
  • Explains how to use selective subscriptions to prevent unnecessary component re-renders.

When to use it

  • When deciding between different state management libraries for a new project.
  • When refactoring or migrating legacy Redux codebases.
  • When needing to implement efficient server state caching and synchronization.
  • When optimizing React component performance related to state updates.
  • When setting up global state for complex application requirements.

Advantages

  • Promotes clean architecture by separating server state from client state.
  • Reduces boilerplate through modern patterns like Redux Toolkit slices.
  • Improves application performance by encouraging granular state updates.
  • Provides clear criteria for selecting the right tool for the job.
  • Ensures type safety through comprehensive TypeScript examples.

Usage examples

“How do I choose between Zustand and Redux Toolkit for my React app?”
The skill advises using Zustand for smaller apps with simple state requirements, while recommending Redux Toolkit for larger applications with complex state management needs.
“Show me how to implement a slice-based store in Zustand.”
The skill provides a pattern for splitting stores into slices (e.g., UserSlice and CartSlice) and combining them into a single root store using Zustand's StateCreator.
“What are the best practices for handling server state in React?”
The skill recommends using dedicated tools like React Query or SWR to manage remote data and caching, rather than storing server data in global client state.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/wshobson/react-state-management/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip react-state-management.zip -d .agents/skills

Documentation by Seth Hobson

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
TypeDescriptionSolutions
Local StateComponent-specific, UI stateuseState, useReducer
Global StateShared across componentsRedux Toolkit, Zustand, Jotai
Server StateRemote data, cachingReact Query, SWR, RTK Query
URL StateRoute parameters, searchReact Router, nuqs
Form StateInput values, validationReact Hook Form, Formik
2. Selection Criteria
Small app, simple state → Zustand or Jotai
Large app, complex state → Redux Toolkit
Heavy server interaction → React Query + light client state
Atomic/granular updates → Jotai

Quick Start

Zustand (Simplest)
// store/useStore.ts
import { 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 component
function 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
// 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 });
    },
  },
});

Files

ATTRIBUTION.md

Attribution

This folder is an unmodified copy of the Agent Skill "react-state-management", distributed by AutoGineer (https://autogineer.com/agent-skills).

The skill's own files are unmodified copies. AutoGineer is not affiliated with or endorsed by the author or the publisher.

Files added by AutoGineer

  • ATTRIBUTION.md: this file, written by AutoGineer

  • LICENSE: copied from LICENSE

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Seth Hobson
Publisher
Seth Hobson (Community)
Source
wshobson/agents · plugins/frontend-mobile-development/skills/react-state-management · commit 4bde316
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Seth Hobson.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download react-state-management.zip