0Pricing
React Academy · Lección

Elevar el estado: principios y ejemplos

Mueva el estado compartido al ancestro común más cercano y páselo mediante props.

Elevar el estado: principios y ejemplos es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 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á el patrón de elevar el estado: mover el estado compartido al ancestro común más cercano para que los componentes hermanos permanezcan sincronizados.

El problema: hermanos desincronizados

Cuando dos componentes hermanos necesitan los mismos datos, mantener un estado separado en cada uno provoca errores de sincronización. La solución consiste en mover el estado a su padre común.

Identificar el ancestro común

Busque el componente más cercano que sea el padre de **ambos** componentes que necesitan los datos compartidos. Mueva allí el estado y páselo mediante props.
function Parent() {
  const [value, setValue] = useState('');
  return (
    <>
      <InputA value={value} onChange={setValue} />
      <PreviewB value={value} />
    </>
  );
}

Ejemplo de elevar el estado de un contador

Suponga que dos componentes muestran el mismo contador. En lugar de gestionar count en cada uno, elévelo a su padre. Ambos reciben count como prop y llaman a un callback onChange para actualizarlo.
function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <CounterDisplay count={count} />
      <CounterControl count={count} onIncrement={() => setCount(c => c + 1)} />
    </>
  );
}

Props de callback para las actualizaciones

Los children no pueden modificar directamente el estado del padre. El padre pasa un callback, como `onChange`, mediante una prop. Los children llaman al callback cuando quieren solicitar un cambio de estado.

Controlado frente a no controlado después de elevar el estado

Después de elevar el estado, el child que antes era propietario del estado se convierte en un **componente controlado**: recibe el valor actual y onChange de su padre. El padre es la única fuente de verdad.

Elevar el estado a varios niveles

A veces es necesario elevar el estado varios niveles en el árbol. Si hay que elevarlo más allá de muchos componentes intermedios, considere utilizar Context para evitar el encadenamiento de props.

Ventajas de elevar el estado

Elevar el estado proporciona una única fuente de verdad, hace predecible el flujo de datos, siempre de arriba abajo, simplifica la depuración y facilita añadir más consumidores del mismo estado posteriormente.

Estado derivado del estado elevado

Calcule los valores derivados del estado elevado dentro del padre y páselos como props adicionales. Nunca duplique el estado: derívelo.
const [items, setItems] = useState([]);
const filteredItems = items.filter(i => i.done); // derived, not separate state

Cuándo elevar demasiado el estado

Si se encuentra elevando el estado a través de 4 o más niveles, es posible que la estructura del árbol de componentes sea incorrecta o que haya llegado el momento de utilizar Context o una biblioteca de gestión de estado.

Comprobación rápida

¿Cuál es el enfoque correcto cuando dos componentes hermanos necesitan compartir el mismo estado?

Repaso

Eleve el estado al ancestro común más cercano cuando los hermanos necesiten compartirlo. Pase el valor actual hacia abajo y los callbacks de cambio hacia arriba. Derive los valores en lugar de duplicar el estado.

A continuación

Siguiente lección: **Prop Drilling: cuándo causa problemas y cuándo está bien** — identificará cadenas problemáticas de prop drilling y decidirá cuándo necesitan una solución.

Preguntas frecuentes

¿La lección «Elevar el estado: principios y ejemplos» es gratis?

Sí — el texto completo de «Elevar el estado: principios y ejemplos» 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 «Elevar el estado: principios y ejemplos»?

Mueva el estado compartido al ancestro común más cercano y páselo mediante props. 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 1 de 4.

¿Cuánto tiempo toma la lección «Elevar el estado: principios y ejemplos»?

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