Cuando dos componentes necesitan compartir el mismo estado, mueves ("elevas") ese estado hacia su ancestro común más cercano y lo pasas hacia abajo mediante props, de modo que haya una única fuente de verdad.
() {
[query, setQuery] = ();
(
);
}
Si cada hijo mantuviera su propio query, se desincronizarían. Elevarlo significa que el input y los resultados siempre coinciden.
Elevar el estado muy alto puede obligarte a pasar props a través de muchos componentes intermedios que no los usan:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children para que los datos permanezcan donde se usan en lugar de irlos enhebrando por todos lados.El principio rector: eleva el estado solo tan alto como necesite llegar, no más. Elevarlo de más provoca re-renders amplios y prop drilling; elevarlo de menos provoca duplicados desincronizados.