Cuándo usar estado global o local
Aplique el principio de colocación: mantenga el estado lo más cerca posible de quien lo consume y elévelo solo cuando varios componentes no relacionados lo necesiten.
Cuándo usar estado global o local es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
La cuestión de dónde ubicar el estado
Cada parte del estado tiene una ubicación óptima. Elegir una ubicación incorrecta provoca problemas de prop drilling o una complejidad innecesaria por tener un estado global. El principio rector es mantener el estado lo más cerca posible de los consumidores.
Estado local del componente
Si solo un componente utiliza el estado, este debe pertenecer al useState/ref de dicho componente. No es necesario compartirlo: manténgalo local. Este es el caso más sencillo y habitual.
// Good: UI state local to the component
function Accordion() {
const [isOpen, setIsOpen] = useState(false); // only this component cares
return (
<div>
<button onClick={() => setIsOpen(o => !o)}>Toggle</button>
{isOpen && <div>Content</div>}
</div>
);
}Elevar el estado
Cuando dos componentes hermanos necesitan el mismo estado, elévelo hasta su ancestro común más cercano. Páselo mediante props y callbacks. Este es el enfoque habitual en React/Vue antes de recurrir a un store global.
Context compartido: compartir entre niveles intermedios
Cuando es necesario compartir el estado en un subárbol sin recurrir al prop drilling, Context (React) o provide/inject (Vue) son las herramientas adecuadas. Se utilizan para compartir datos con un alcance moderado, como una página o un módulo de funcionalidad.
Store global: estado de toda la aplicación
Utilice un store global (Redux, Zustand, Pinia) para el estado que: 1) utilizan muchos componentes no relacionados, 2) debe sobrevivir a la navegación, 3) tiene una lógica de actualización compleja o 4) se beneficia de la inspección mediante DevTools.
Ejemplos: estado local
El estado local es adecuado para: valores de campos de formularios, estado abierto/cerrado de tooltips, visibilidad de modales, estado de hover, estado de animaciones e indicadores de carga locales a un único componente.
Ejemplos: estado elevado
El estado elevado es adecuado para: un filtro compartido que utilizan dos listas hermanas, la pestaña seleccionada en un grupo de pestañas y datos de formulario compartidos entre dos pasos.
Ejemplos: Context / Provide
Context es adecuado para: el tema actual, el usuario autenticado, la configuración regional o el idioma, las feature flags y la pila de notificaciones; es decir, elementos que se consumen en muchos niveles, pero se actualizan con poca frecuencia.
Ejemplos: store global
Un store global es adecuado para: el carrito de compra, los tokens de autenticación y el objeto de usuario, la cola de notificaciones (los mensajes aparecen en un toast desde cualquier lugar) y los datos en tiempo real que muestran varias vistas simultáneamente.
Estado del servidor frente a estado del cliente
Los datos de red (obtenidos de una API) son una categoría especial: el estado del servidor. Requieren gestión de carga y errores, almacenamiento en caché e invalidación. React Query, SWR y TanStack Query gestionan el estado del servidor para que su store pueda centrarse en el verdadero estado del cliente.
Error común: poner todo en el store global
No ponga todo el estado en el store global «por si acaso». El estado local es más económico, sencillo y fácil de probar. El uso excesivo del estado global crea un acoplamiento entre componentes que deberían ser independientes.
Marco de decisión
Pregúntese: 1) ¿Otros componentes necesitan este estado? No → local. 2) ¿Lo necesitan componentes hermanos cercanos? Sí → elévelo. 3) ¿Lo necesita un subárbol de componentes? Sí → context/provide. 4) ¿Lo necesitan muchos componentes no relacionados o requiere DevTools? Sí → store global.
Comprobación rápida
¿Dónde debe almacenar el estado abierto/cerrado de un único componente de acordeón?
Resumen: ubicación del estado
Principio: mantenga el estado lo más cerca posible de los consumidores. Utilice useState/ref local para el estado de un único componente. Elévelo para compartirlo entre hermanos. Utilice Context/provide para compartirlo en un subárbol. Utilice un store global para el estado de toda la aplicación con actualizaciones complejas. El estado del servidor (datos de API) debe gestionarse con React Query/SWR, no en el store global.
Preguntas frecuentes
¿La lección «Cuándo usar estado global o local» es gratis?
Sí — el texto completo de «Cuándo usar estado global o local» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Cuándo usar estado global o local»?
Aplique el principio de colocación: mantenga el estado lo más cerca posible de quien lo consume y elévelo solo cuando varios componentes no relacionados lo necesiten. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Cuándo usar estado global o local»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Redux Toolkit: createSlice y configureStore
- Zustand para el estado ligero de React
- Pinia para Vue: defineStore y storeToRefs
- Cuándo usar estado global o local