Cada aplicación React necesita estado global. El desafío no es si usarlo, es elegir la herramienta correcta según complejidad.
Context API: cuando lo simple funciona
Context es patrón nativo de React. Funciona bien para estado que no cambia frecuentemente: tema, idioma, usuario autenticado. Para estado que cambia muchas veces, puede causar renders innecesarios.
La ventaja es que no añades dependencias. La desventaja es que escala mal a complejidad alta.
- Buen para: tema, idioma, usuario.
- Malo para: estado frecuentemente mutado.
- Cuidado con renders innecesarios si no separas contextos.
Zustand: ligero, funciona sin drama
Zustand es un store minimalista. Sin boilerplate, sin tipos complejos, sin acciones. Solo estado y un hook para leerlo.
Escala mejor que Context, es más simple que Redux. Muchos proyectos nuevos eligen Zustand.
- Define store con create().
- Usa hook useStore() en componentes.
- Actualizaciones simples, sin actions ni reducers.
Redux: cuando necesitas control estricto e historial
Redux es complejo pero potente. Excelente cuando necesitas time-travel debugging, reglas estrictas sobre cómo cambia estado o muchos equipos trabajando en el mismo estado.
La desventaja es boilerplate: actions, reducers, dispatch. Para la mayoría de aplicaciones, es exceso.
- Redux DevTools: debugging poderoso.
- Acciones inmutables: historial de cambios.
- Escalabilidad: múltiples slices, middleware.
La realidad: combina varias herramientas
Muchas aplicaciones grandes usan Context para datos poco mutados (autenticación, tema) + Zustand para estado de UI (modal abierto, forma en edición).
No hay "la herramienta correcta". Hay la herramienta correcta para cada parte de tu aplicación.
Elige el estado global cuando el estado es realmente global. Para todo lo demás, state local del componente suele ser suficiente.
Antipatrones a evitar
No metas todo en estado global. No uses Context para estado que cambia 100 veces por segundo. No confundas estado global con servidor state (usa React Query para eso).
Estado global es para datos que múltiples componentes lejanos necesitan. Para todo lo demás, props o state local funciona mejor.