+"Kai du komponentai turi dalintis tuo pačiu state'u, tu perkelei ("perkelti") tą state'ą į jų artimiausią bendrą protėvį ir perduodi jį žemyn per props, kad būtų vienas tiesos šaltinis.
jsx
() {
[query, setQuery] = ();
(
);
}
+"Kai du komponentai turi dalintis tuo pačiu state'u, tu perkelei ("perkelti") tą state'ą į jų artimiausią bendrą protėvį ir perduodi jį žemyn per props, kad būtų vienas tiesos šaltinis.
() {
[query, setQuery] = ();
(
);
}
Jei kiekvienas child turėtų savo query, jie išeitų iš sinchronizacijos. Jų perkėlimas reiškia, kad input ir rezultatai visada sutampa.
Perkėlus state'ą aukštyn, gali tekti perduoti props per daug tarpinių komponentų, kurie jų nenaudoja:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children, kad duomenys liktų ten, kur jie naudojami, vietoj to, kad būtų pravedami per visą hierarchiją.Vadovaujantis principas: perkėlimas state'ą tik tiek aukštai, kiek reikia — ne aukščiau. Per didelis perkėlimas sukelia plačius re-renders ir prop drilling; per mažas perkėlimas sukelia nesinchronizuotus dublikatus.