0Pricing
React Academy · Lección

Elección de la ubicación adecuada del estado

Aplique un marco de decisión: estado local, estado elevado o estado global.

Elección de la ubicación adecuada del estado es una lección gratuita de React 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 React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Bienvenida

En esta lección aprenderá un marco de decisión práctico para determinar si el estado debe pertenecer a un solo componente, a un ancestro común, a React Context o a una biblioteca de estado global.

Paso 1: ¿Quién utiliza este estado?

Primero pregúntese: ¿qué componentes renderizan usando este estado? Haga una lista. Si solo un componente lo utiliza, mantenga el estado local en ese componente.

Estado local

El estado utilizado por un solo componente vive en ese componente mediante useState. Algunos ejemplos son si un menú desplegable está abierto, el valor actual de una entrada controlada o si una descripción emergente está visible.
function Toggle() {
  const [on, setOn] = useState(false);
  return <button onClick={() => setOn(!on)}>{on ? 'On' : 'Off'}</button>;
}

Paso 2: Encuentre el ancestro común

Si varios componentes necesitan el estado, encuentre su ancestro común más cercano en el árbol de componentes. Mueva allí el estado y páselo hacia abajo como props.

Estado elevado (2–3 niveles)

El estado compartido por 2–3 componentes situados en el mismo nivel de anidamiento es un buen candidato para elevarlo. El padre común es su propietario y lo transmite mediante props.

Paso 3: ¿El prop drilling es demasiado profundo?

Si el ancestro común está 4 o más niveles por encima de los consumidores, pasar props a través de componentes intermedios genera ruido. Considere usar Context.

Estado en Context

Use Context para cuestiones transversales que muchos componentes del árbol necesiten: el usuario autenticado actual, el tema activo o la configuración regional seleccionada. Estos datos cambian rara vez y tienen muchos consumidores.

Paso 4: ¿El estado es complejo o se comparte entre páginas?

Si el estado tiene una lógica de actualización compleja, necesita deshacer y rehacer, debe persistir durante la navegación o se accede a él desde árboles de componentes completamente separados, use una biblioteca de estado específica (Zustand, Redux).

El estado del servidor es diferente

Los datos obtenidos de un servidor son *estado del servidor*, no estado de la interfaz. No los almacene en useState ni en un almacén global; use React Query, SWR o RTK Query, que gestionan automáticamente la caché, las nuevas solicitudes y los estados de error.

El diagrama de flujo de decisión

1 consumidor → useState local. 2–3 consumidores a una profundidad similar → elevar al padre. 4 o más niveles de prop drilling → Context. Lógica compleja o entre árboles → Zustand/Redux. Datos del servidor → React Query/SWR.

Comprobación rápida

¿Qué ubicación del estado es más adecuada para el usuario autenticado actual, al que muchos componentes de una aplicación grande necesitan acceder?

Resumen

Adapte la ubicación del estado a sus consumidores: local para uno, elevado para unos pocos cercanos, Context para muchos distribuidos en varios niveles, una biblioteca de estado para estados complejos o compartidos entre árboles y React Query para los datos del servidor.

Curso completado

¡Enhorabuena! Ha terminado **Elevar el estado y soluciones para el prop drilling**. Ahora cuenta con un marco claro para decidir dónde debe vivir el estado y cómo compartirlo correctamente.

Preguntas frecuentes

¿La lección «Elección de la ubicación adecuada del estado» es gratis?

Sí — el texto completo de «Elección de la ubicación adecuada del estado» 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 React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Elección de la ubicación adecuada del estado»?

Aplique un marco de decisión: estado local, estado elevado o estado global. Practicas React 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 React Academy?

No se requiere experiencia previa. React 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 «Elección de la ubicación adecuada del estado»?

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 React Academy?

Sí. Cada lección de React 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

  1. Elevar el estado: principios y ejemplos
  2. Prop drilling: cuándo es perjudicial y cuándo está bien
  3. Patrones de comunicación entre hermanos
  4. Elección de la ubicación adecuada del estado
← Volver a React Academy