Quand deux composants doivent partager le même état, vous déplacez ("remontez") cet état jusqu'à leur ancêtre commun le plus proche et le transmettez vers le bas via les props, de sorte qu'il existe une unique source de vérité.
() {
[query, setQuery] = ();
(
);
}
Si chaque composant enfant conservait sa propre query, ils se désynchroniseraient. Remonter l'état signifie que l'entrée et les résultats sont toujours d'accord.
Remonter l'état haut peut vous forcer à transmettre les props à travers de nombreux composants intermédiaires qui ne les utilisent pas :
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children afin que les données restent là où elles sont utilisées au lieu de traverser plusieurs composants.Le principe directeur : remontez l'état uniquement aussi haut que nécessaire — pas plus. Remonter trop haut provoque des re-rendus étendus et du prop drilling ; remonter trop peu provoque des doublons désynchronisés.