Kun kaksi komponenttia tarvitsevat jakaa saman tilan, siirrät ("nostat") tilan ylöspäin niiden lähimpään yhteiseen esi-isään ja välität sen alas propseilla, joten on olemassa yksittäinen totuuden lähde.
() {
[query, setQuery] = ();
(
);
}
Jos jokainen lapsikomponentti säilyttäisi oman query-muuttujan, ne menisivät epäsynkkiin. Tilan nostaminen tarkoittaa, että syöte ja tulokset ovat aina samalla linjalla.
Tilan nostaminen ylös voi pakottaa sinut välittämään propseja monien välikomponenttien läpi, jotka eivät käytä niitä:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children-muodossa, jotta tieto pysyy siellä missä sitä käytetään sen sijaan että se kulkisi useiden komponenttien läpi.Ohjaileva periaate: nosta tila vain niin korkealle kuin tarpeen — ei korkeammalle. Liian paljon nostaminen aiheuttaa laajoja uudelleenrenderöintejä ja prop drillausta; liian vähän nostaminen aiheuttaa epäsynkkronoituja kopioita.