Quando dois componentes precisam compartilhar o mesmo state, você move ("lift") esse state para seu ancestral comum mais próximo e o passa para baixo via props, para que haja uma única fonte da verdade.
() {
[query, setQuery] = ();
(
);
}
Se cada child mantivesse sua própria query, eles sairiam de sincronismo. Elevar isso significa que o input e os resultados sempre concordam.
Elevar state muito alto pode forçá-lo a passar props através de muitos componentes intermediários que não os usam:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children para que os dados fiquem onde são usados em vez de serem passados por intermediários.Princípio orientador: eleve o state apenas tão alto quanto precisa – não mais alto. Elevação excessiva causa re-renders amplos e prop drilling; elevação insuficiente causa duplicatas desincronizadas.