# Frontend State Management

> Guides choosing and implementing global state management in React with Zustand, Redux Toolkit, or Context, based on state complexity and needs.

- Skill: `leandrobenjaminl/frontend-state-management` (Agent Skill)
- Install (CLI): `npx skillmds add leandrobenjaminl/frontend-state-management`
- Raw SKILL.md: https://api.skillmd.com/api/skills/leandrobenjaminl/frontend-state-management/raw
- Safety review: PASS (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend, Frontend Frameworks
- Tags: Context Api, Devtools, Localstorage, React, Redux Toolkit, State Management, Zustand
- License: MIT
- Author: LeandroBenjaminL (https://skillmd.com/u/leandrobenjaminl)
- Updated: 2026-08-22
- Page: https://skillmd.com/skills/leandrobenjaminl/frontend-state-management

---


# Skill: frontend-state-management

Estado global. Elegí la herramienta correcta y no overengineeres.

## Trigger

- Dos componentes lejanos necesitan compartir datos
- El prop drilling ya es insoportable (5+ niveles)
- Querés persistir estado (localStorage, URL)
- Necesitás devtools para debuggear estado

## Workflow LEND

1. ANALIZAR
   ├── Tipo: ¿estado del servidor (API) o estado del cliente (UI)?
   ├── Server state → TanStack Query (no va acá)
   ├── Client state: ¿global o local? ¿persistente?
   ├── Frecuencia: ¿cambia en cada click o solo al cargar?
   └── ¿Cuánto estado? 2 variables o 50?

2. OFRECER (Menú del Senior)
   ├── A) Zustand — liviano, simple, middleware, suficiente para el 80% de los casos
   ├── B) Context — built-in, para estado simple (theme, auth)
   └── C) Redux Toolkit — estructurado, slices, devtools, para apps grandes

3. ELEGIR → confirmación

4. HACER
   ├── Zustand: store simple con set() y get(), selectors para rerenders controlados
   ├── Context: Provider en el nivel correcto (no en el root si no hace falta)
   ├── Redux: createSlice + configureStore + useAppSelector/useAppDispatch tipados
   ├── Devtools: habilitados en desarrollo, desactivados en producción
   ├── Persist: zustand/middleware persist o redux-persist para localStorage
   └── Selectors: memoizados con createSelector (Redux) o selectores por referencia (Zustand)

5. VERIFICAR
   ├── No hay rerenders innecesarios (React DevTools)
   ├── El estado persiste si es necesario
   └── Los devtools muestran el estado correctamente