Ketika dua komponen perlu berbagi state yang sama, Anda memindahkan ("mengangkat") state tersebut ke ancestor terdekat mereka yang sama dan meneruskannya melalui props, sehingga ada satu sumber kebenaran.
() {
[query, setQuery] = ();
(
);
}
Jika setiap child menyimpan query-nya sendiri, mereka akan keluar dari sinkronisasi. Mengangkat state berarti input dan hasilnya selalu sepakat.
Mengangkat state tinggi dapat memaksa Anda untuk melewatkan props melalui banyak komponen perantara yang tidak menggunakannya:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children sehingga data tetap berada di mana digunakan alih-alih disematkan melalui.Prinsip panduan: angkat state hanya setinggi yang diperlukan — jangan lebih tinggi. Mengangkat terlalu banyak menyebabkan re-renders luas dan prop drilling; mengangkat terlalu sedikit menyebabkan duplikat yang tidak tersinkronisasi.