# React State Management

> Domina la gestión moderna de estado en React con Redux Toolkit, Zustand, Jotai y React Query, para estado global, estado de servidor o elegir la solución adecuada.

Fuente: https://skillsagentes.com/skills/wshobson/agents/react-state-management
Markdown: https://skillsagentes.com/skills/wshobson/agents/react-state-management.md

Repositorio: https://github.com/wshobson/agents
Autor: wshobson
Licencia: MIT
Actualizado: hace 4 meses
Coste de contexto: 49 tok instalada, 1k tok al activarse, 2.9k tok con todos los archivos del bundle
Bundle: 2 archivos, 11 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add wshobson/agents --skill react-state-management --agent claude-code
# Cursor
npx -y skills add wshobson/agents --skill react-state-management --agent cursor
# Codex
npx -y skills add wshobson/agents --skill react-state-management --agent codex
# Gemini CLI
npx -y skills add wshobson/agents --skill react-state-management --agent gemini
# Windsurf
npx -y skills add wshobson/agents --skill react-state-management --agent windsurf
# Cline
npx -y skills add wshobson/agents --skill react-state-management --agent cline
```

## Qué hace

- Guía patrones de estado en React: local, global, de servidor, de URL y de formularios
- Ayuda a elegir entre Redux Toolkit, Zustand, Jotai, React Query o SWR según el caso
- Provee ejemplos de configuración con Zustand (create, devtools, persist)
- Ofrece buenas prácticas (colocar estado cerca, usar selectores, normalizar datos)
- Incluye guía de migración de Redux clásico a Redux Toolkit

## Cuándo usarla

- Configurar estado global en una app React
- Elegir entre Redux Toolkit, Zustand o Jotai
- Gestionar estado de servidor con React Query o SWR
- Migrar de Redux clásico a patrones modernos

## Qué la activa

- "¿Debería usar Zustand o Redux Toolkit para esta app?"
- "Ayúdame a migrar mi reducer de Redux clásico a Redux Toolkit"
- "Configura un store global con Zustand y persistencia"
- "¿Cómo separo el estado del servidor del estado del cliente?"

## Archivos

- SKILL.md — 4 KB
- references/details.md — 8 KB

## SKILL.md

Reproducido tal cual desde wshobson/agents bajo MIT. Esta sección es el documento original y está en inglés.

# 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 Jotai
Large app, complex state → Redux Toolkit
Heavy server interaction → React Query + light client state
Atomic/granular updates → Jotai
```

## Quick Start

### Zustand (Simplest)

```typescript
// 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

```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 });
    },
  },
});
```

## Dónde encaja

- Categoría: [Herramientas para desarrolladores](https://skillsagentes.com/categorias/herramientas-desarrollo.md) — Skills que cambian cómo tu agente escribe, revisa y despliega código.
- Creador: [wshobson](https://skillsagentes.com/creators/wshobson.md) — 183 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Hermes Tweet](https://skillsagentes.com/skills/wshobson/agents/hermes-tweet.md): Instala y opera Hermes Tweet, un plugin de Hermes Agent para investigar X/Twitter, leer timelines, analizar tweets y ejecutar operaciones privadas o de cambio de estado con aprobación previa.
- [Grounded Vault](https://skillsagentes.com/skills/wshobson/agents/grounded-vault.md): Úsalo para mantener un almacén Markdown de conocimiento donde cada afirmación compilada se rastrea hasta una fuente inmutable y el drift se detecta con git diff sin gastar tokens.
- [Postgresql Table Design](https://skillsagentes.com/skills/wshobson/agents/postgresql-table-design.md): Úsalo al diseñar o revisar un esquema específico de PostgreSQL: buenas prácticas, tipos de datos, indexación, restricciones, patrones de rendimiento y funciones avanzadas.
- [Superself](https://skillsagentes.com/skills/wshobson/agents/superself.md): Úsalo cuando un proyecto guarda su estado en Superself: lee `self context` al iniciar sesión, vincula el trabajo a una work unit, reporta con evidencia y registra decisiones confirmadas.
- [Prompt Engineering Patterns](https://skillsagentes.com/skills/wshobson/agents/prompt-engineering-patterns.md): Úsalo cuando pidan optimizar un prompt, mejorar su rendimiento, diseñar una plantilla, aplicar chain-of-thought, few-shot prompting o técnicas avanzadas de prompt engineering para producción.

## Skills relacionadas

- [Angular Migration](https://skillsagentes.com/skills/wshobson/agents/angular-migration.md): Migra de AngularJS a Angular usando modo híbrido, reescritura incremental de componentes y actualización de la inyección de dependencias.
- [Architecture Patterns](https://skillsagentes.com/skills/wshobson/agents/architecture-patterns.md): Implementa patrones de arquitectura backend probados: Clean Architecture, Hexagonal Architecture y Domain-Driven Design, para construir sistemas mantenibles, testeables y escalables.
- [Async Python Patterns](https://skillsagentes.com/skills/wshobson/agents/async-python-patterns.md): Domina asyncio, programación concurrente y patrones async/await para apps de alto rendimiento con operaciones no bloqueantes.
- [Changelog Automation](https://skillsagentes.com/skills/wshobson/agents/changelog-automation.md): Automatiza la generación de changelogs a partir de commits, PRs y releases siguiendo el formato Keep a Changelog. Útil al configurar flujos de release o estandarizar convenciones de commits.
- [Cqrs Implementation](https://skillsagentes.com/skills/wshobson/agents/cqrs-implementation.md): Implementa Command Query Responsibility Segregation para arquitecturas escalables; separa modelos de lectura/escritura, optimiza consultas o construye sistemas event-sourced.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)