Compartir estado: elevar y Context

⏱ 50 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

💡 🎯 Al terminar esta lección podrás…

Elevar el estado cuando dos componentes lo comparten.
Reconocer el prop drilling.
Crear y consumir un contexto.
Elegir entre estado local, elevado o Context.

1.Elevar el estado: el ancestro común

Cuando dos componentes necesitan el mismo dato, ninguno de los dos puede guardarlo (el estado de uno no es visible para el otro). La solución es elevar el estado al ancestro común más cercano y bajarlo a cada hijo mediante props. Si un hijo debe modificarlo, el padre le pasa también una función.

Padreguarda el estado

→datos + funciones por props

Hijo Amuestra el dato

→comparte con

Hijo Blo modifica

⚛️ Dos componentes, un mismo dato

Código (edítalo y pulsa Ejecutar)

import { useState } from "react";

function Entrada({ texto, onCambio }) {
  return <input value={texto} onChange={(e) => onCambio(e.target.value)} placeholder="Escribe aquí" />;
}

function Vista({ texto }) {
  return <p>Vista previa: <strong>{texto || "…"}</strong> ({texto.length} letras)</p>;
}

function App() {
  const [texto, setTexto] = useState("");   // estado elevado al padre

  return (
    <main>
      <Entrada texto={texto} onCambio={setTexto} />
      <Vista texto={texto} />
    </main>
  );
}

Resultado

Consola

Identifica quién necesita el dato (Entrada y Vista).
Sube el estado a su ancestro común (App).
Baja el valor como prop (texto) y el modo de cambiarlo como función (onCambio).

📌 Nota · El nombre onAlgo

Por convención, las props que reciben funciones para avisar de eventos se llaman onCambio, onGuardar, onBorrar… y las funciones que las manejan en el padre, manejarCambio, guardar, etc.

2.El problema: pasar props por muchos niveles

Elevar el estado funciona muy bien, pero si el dato debe viajar a través de muchos componentes intermedios que no lo usan, terminas escribiendo la misma prop en cada nivel. A eso se le llama prop drilling (perforar con props):

Un dato que atraviesa componentes que no lo necesitan

<App>                         // tiene el tema
  <Pagina tema={tema}>        // no lo usa, solo lo pasa
    <Barra tema={tema}>       // no lo usa, solo lo pasa
      <Boton tema={tema} />   // ¡el único que lo usa!
    </Barra>
  </Pagina>
</App>

Para datos globales a una zona de la aplicación (el tema, el usuario conectado, el idioma, el carrito) React ofrece Context.

3.Context: datos disponibles para todo un árbol

Un contexto es un «canal» por el que un componente proveedor publica un valor, y cualquier descendiente, sin importar la profundidad, puede leerlo directamente. Se hace en tres pasos:

Crear el contexto: const TemaContext = createContext("claro");
Proveer el valor: <TemaContext.Provider value={...}> … </TemaContext.Provider>
Consumir el valor donde haga falta: const tema = useContext(TemaContext);

⚛️ Un tema compartido con Context

Código (edítalo y pulsa Ejecutar)

import { createContext, useContext, useState } from "react";

const TemaContext = createContext("claro");

function Boton() {
  const tema = useContext(TemaContext);          // lee el valor, sin props
  const estilo = tema === "oscuro"
    ? { background: "#1e2235", color: "#fff" }
    : { background: "#e0e7ff", color: "#1e2235" };
  return <button style={{ ...estilo, border: 0, padding: "8px 14px", borderRadius: 8 }}>Botón {tema}</button>;
}

function Barra() {          // no recibe ni pasa ninguna prop
  return <nav style={{ padding: 8 }}><Boton /></nav>;
}

function Pagina() {
  return <section><Barra /></section>;
}

function App() {
  const [tema, setTema] = useState("claro");
  return (
    <TemaContext.Provider value={tema}>
      <Pagina />
      <button onClick={() => setTema(tema === "claro" ? "oscuro" : "claro")}>Cambiar tema</button>
    </TemaContext.Provider>
  );
}

Resultado

Consola

📌 Nota · Cuando el valor cambia

Cuando el valor del Provider cambia, todos los componentes que lo leen con useContext se vuelven a dibujar. Por eso conviene que el contexto contenga datos que cambian poco, o dividirlo en varios contextos pequeños.

4.Un proveedor propio con estado y funciones

Lo más habitual es empaquetar el estado, el contexto y el proveedor en un componente propio, y un hook personalizado para consumirlo. Así el resto de la aplicación solo escribe useTema():

⚛️ El patrón completo: contexto + proveedor + hook

Código (edítalo y pulsa Ejecutar)

import { createContext, useContext, useState } from "react";

const TemaContext = createContext(null);

function TemaProvider({ children }) {
  const [tema, setTema] = useState("claro");
  const alternar = () => setTema((t) => (t === "claro" ? "oscuro" : "claro"));
  return (
    <TemaContext.Provider value={{ tema, alternar }}>
      {children}
    </TemaContext.Provider>
  );
}

// Hook propio: un solo lugar para leer el contexto
function useTema() {
  const valor = useContext(TemaContext);
  if (valor === null) throw new Error("useTema debe usarse dentro de <TemaProvider>");
  return valor;
}

function Etiqueta() {
  const { tema } = useTema();
  return <p>Tema actual: <strong>{tema}</strong></p>;
}

function Interruptor() {
  const { alternar } = useTema();
  return <button onClick={alternar}>Cambiar tema</button>;
}

function App() {
  return (
    <TemaProvider>
      <Etiqueta />
      <Interruptor />
    </TemaProvider>
  );
}

Resultado

Consola

💡 Consejo · Comprobación útil

El throw del hook te avisa con un mensaje claro si olvidas envolver tus componentes en el proveedor, en vez de dejarte un undefined difícil de entender.

5.¿Estado local, elevado o Context?

Situación	Mejor opción
Solo lo usa un componente	Estado local (`useState` en ese componente)
Lo usan un padre y sus hijos cercanos	Elevar el estado y pasar props
Lo necesitan muchos componentes lejanos (tema, usuario, idioma, carrito)	Context
Estado muy grande y complejo con muchas acciones	Context + `useReducer` (lección 9) o una biblioteca (Zustand, Redux Toolkit)
Datos del servidor (listas, perfiles)	Una biblioteca de datos (TanStack Query) o un hook propio (lección 10)

⚠️ Importante · No te precipites con Context

Empieza siempre por lo más simple: estado local. Eleva el estado cuando haga falta. Usa Context cuando el prop drilling sea realmente molesto. Un contexto para todo vuelve la aplicación difícil de seguir.

6.Errores frecuentes

Guardar el mismo dato en dos lugares: acaban desincronizados. Una sola fuente de verdad.
Elevar el estado demasiado alto: súbelo solo hasta el ancestro común, no hasta App por costumbre.
Usar useContext fuera del Provider: recibes el valor por defecto (createContext(valor)), a veces undefined.
Pasar un objeto nuevo como value en cada dibujo cuando no hace falta: todos los consumidores se redibujan.
Mutar el valor del contexto: cámbialo siempre mediante el estado del proveedor.
Crear el contexto dentro de un componente: debe vivir fuera, a nivel de módulo.
Olvidar children en el proveedor propio: nada se dibuja dentro.

📒 Apuntes para llevar

Si dos componentes necesitan el mismo dato, eleva el estado a su ancestro común.
El padre pasa el valor y una función para modificarlo (onCambio) por props.
Prop drilling: pasar props por niveles que no las usan; se soluciona con Context.
Context: createContext → <Context.Provider value> → useContext.
El patrón habitual: Provider propio con estado + hook useAlgo() para consumirlo.
Empieza por estado local; sube o usa Context solo cuando hace falta.
Una sola fuente de verdad para cada dato.

7.Glosario

Término	Significado
Elevar el estado	Mover el estado al ancestro común para que varios hijos lo compartan.
Prop drilling	Pasar una prop por muchos componentes intermedios que no la necesitan.
Context	Mecanismo para publicar un valor que cualquier descendiente puede leer.
Provider	Componente que ofrece el valor de un contexto a su árbol.
`useContext`	Hook que lee el valor del contexto más cercano.
Fuente de verdad	El único lugar donde vive un dato; los demás lo reciben.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.

Dos componentes hermanos necesitan el mismo dato. ¿Dónde guardas el estado?

¿Qué es el prop drilling?

¿Qué hace useContext(TemaContext)?

Devuelve el value del Provider más cercano por encima.

¿Dónde se define createContext?

Un dato solo lo usa un componente. ¿Qué eliges?

Empieza por lo más simple: useState en ese componente.

Tu progreso se guarda en este navegador y se refleja en el índice del curso.

💡 🚀 ¡Ahora te toca!

La práctica fija lo aprendido. Pasa al ejercicio de esta lección.

Ir al ejercicio