Quando due componenti devono condividere lo stesso state, sposti ("alzi") quello state fino al loro antenato comune più prossimo e lo passi attraverso props, così c'è un'unica fonte di verità.
jsx
() {
[query, setQuery] = ();
(
);
}
Quando due componenti devono condividere lo stesso state, sposti ("alzi") quello state fino al loro antenato comune più prossimo e lo passi attraverso props, così c'è un'unica fonte di verità.
() {
[query, setQuery] = ();
(
);
}
Se ogni child mantenesse il suo query, sarebbero fuori sincronia. Alzare lo state significa che l'input e i risultati sono sempre d'accordo.
Alzare lo state in alto può costringerti a passare props attraverso molti componenti intermedi che non li usano:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children in modo che i dati rimangono dove vengono utilizzati invece di essere trasmessi.Il principio guida: alza lo state solo quanto necessario — non più in alto. Alzare troppo causa re-render ampi e prop drilling; alzare troppo poco causa duplicati non sincronizzati.