Context memungkinkan Anda untuk berkongsi nilai dengan seluruh subtree tanpa perlu melewatkan props melalui setiap tahap (prop drilling). Anda membuat context, membungkus subtree dalam Provider-nya, dan mana-mana descendant membacanya dengan useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Data dengan frekuensi rendah, "seperti-global" yang banyak komponen perlukan: tema, pengguna semasa, locale, feature flags.
Apabila value Provider berubah, setiap komponen yang menggunakan context akan me-render ulang — tidak ada cara untuk melanggan hanya sebahagian daripadanya. Dua akibat praktikal:
// ❌ a NEW object every render → all consumers re-render every time
<Ctx.Provider value={{ user, setUser }}>
// ✅ memoize the value so it only changes when it really changes
const value = useMemo(() => ({ user, setUser }), [user]);
<Ctx.Provider value={value}>
Untuk sering berubah atau state yang besar, pisahkan context menjadi potongan yang lebih kecil, atau gunakan store (Zustand/Redux) yang menyokong langganan selektif. Context adalah alat dependency-injection, bukan pengurusan state penuh.