Når to komponenter skal dele samme state, flytter du ("løfter") den state op til deres nærmeste fælles forfader og sender den ned via props, så der er en enkelt kilde til sandhed.
jsx
() {
[query, setQuery] = ();
(
);
}
Når to komponenter skal dele samme state, flytter du ("løfter") den state op til deres nærmeste fælles forfader og sender den ned via props, så der er en enkelt kilde til sandhed.
() {
[query, setQuery] = ();
(
);
}
Hvis hver barn holdt sin egen query, ville de blive usynkroniserede. At løfte den betyder, at input og resultater altid stemmer overens.
At løfte state højt kan tvinge dig til at sende props gennem mange mellemliggende komponenter, der ikke bruger dem:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children, så data forbliver, hvor den bruges, i stedet for at blive sendt gennem mange komponenter.Vejledende princip: løft state kun så højt som nødvendigt — ikke højere. Over-løfting forårsager omfattende re-renders og prop drilling; under-løfting forårsager usynkroniserede duplikater.