Als twee componenten dezelfde state moeten delen, verplaats je ("lift") die state naar hun gemeenschappelijke voorouder en geef je deze door via props, zodat er één enkele waarheidsbron is.
jsx
() {
[query, setQuery] = ();
(
);
}
Als twee componenten dezelfde state moeten delen, verplaats je ("lift") die state naar hun gemeenschappelijke voorouder en geef je deze door via props, zodat er één enkele waarheidsbron is.
() {
[query, setQuery] = ();
(
);
}
Als elk kind zijn eigen query zou hebben, zouden ze uit synchronisatie raken. Door dit op te tillen, stemmen de input en de resultaten altijd overeen.
State hoog tillen kan ervoor zorgen dat je props door veel tussenliggende componenten moet doorgeven die ze niet gebruiken:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children door zodat de gegevens waar ze gebruikt worden blijven in plaats van erdoorheen te worden geleid.Het richtinggevende principe: til state alleen zo hoog op als nodig is — niet hoger. Te veel tillen veroorzaakt veel re-renders en prop drilling; te weinig tillen veroorzaakt niet-gesynchroniseerde duplicaten.