Gestión de Estado
Patrones y bibliotecas para gestionar el estado de aplicaciones frontend de forma predecible, desde estado local de componentes hasta estado global compartido.
¿Qué es?
La gestión de estado es cómo una aplicación frontend organiza, actualiza y comparte datos entre componentes. A medida que las aplicaciones crecen, el estado se vuelve complejo: datos del servidor, estado de UI, formularios, caché.
Niveles de estado
| Nivel | Ejemplo | Herramienta |
|---|---|---|
| Local | Toggle de un menú | useState |
| Compartido | Tema, usuario actual | Context, Zustand |
| Servidor | Datos de API | TanStack Query, SWR |
| URL | Filtros, paginación | URL params |
| Formulario | Inputs, validación | React Hook Form |
Evolución en React
| Era | Solución | Modelo | Tradeoff |
|---|---|---|---|
| 2015 | Redux | Store global, actions, reducers | Predecible pero verboso |
| 2018 | Context API | Estado compartido nativo | Simple pero re-renders innecesarios |
| 2020+ | Zustand/Jotai | Stores atómicos, mínimo boilerplate | Ligero, menos estructura |
| 2020+ | TanStack Query | Separar estado del servidor del cliente | Requiere pensar en cache invalidation |
Principio clave
Usar la herramienta más simple que resuelva el problema. La mayoría de aplicaciones no necesitan un store global.
¿Por qué importa?
La gestión de estado es el problema más complejo del desarrollo frontend. Elegir la estrategia correcta — local, global, servidor, URL — determina la complejidad, el rendimiento y la mantenibilidad de la aplicación. No hay solución universal.
Referencias
- Zustand — Store minimalista para React.
- TanStack Query — Gestión de estado del servidor.
- Managing State — React — React, 2024. Guía oficial de gestión de estado en React.
Contenido relacionado
- React
Biblioteca de JavaScript para construir interfaces de usuario mediante componentes declarativos y reutilizables, con un ecosistema que abarca desde SPAs hasta aplicaciones full-stack con Server Components.
- Next.js
Framework de React para aplicaciones web full-stack con Server Components, routing basado en archivos, SSR/SSG y optimizaciones de rendimiento integradas.
- Micro Frontends
Patrón arquitectónico que extiende los microservicios al frontend, permitiendo que equipos independientes desarrollen y desplieguen partes de una aplicación web de forma autónoma.