Elevar el estado (lifting state up) — useReducer y Context

Compartir estado entre hermanos

A veces dos componentes hermanos necesitan compartir el mismo dato: por ejemplo, dos campos que deben mantenerse sincronizados, o una lista y un total que dependen de ella. ¿Dónde vive ese estado?

La técnica se llama "lifting state up" (elevar el estado): se coloca el estado en el ancestro común más cercano y se baja a los hijos lo que necesiten.

function Padre() {
  const [texto, setTexto] = useState("");

  return (
    <div>
      <Entrada valor={texto} onCambio={setTexto} />
      <Eco texto={texto} />
    </div>
  );
}

function Entrada({ valor, onCambio }) {
  return <input value={valor} onChange={(e) => onCambio(e.target.value)} />;
}

function Eco({ texto }) {
  return <p>Escribiste: {texto}</p>;
}

Las dos ideas clave:

El estado vive arriba, en el ancestro común (Padre).
A los hijos se les pasan datos (valor, texto) y callbacks (onCambio) por props. El hijo no guarda el estado: lo lee y avisa al padre cuando algo debe cambiar.

Así el padre es la única fuente de verdad, y todos los hijos que dependen del dato se mantienen coherentes. Cuando el árbol crece y pasar callbacks por muchos niveles se vuelve incómodo, es la señal para combinarlo con Context (e incluso con useReducer) y centralizar tanto el estado como su lógica.