Context memungkinkan Anda berbagi nilai dengan seluruh subtree tanpa melewatkan props melalui setiap level (prop drilling). Anda membuat context, membungkus subtree dalam Provider-nya, dan setiap descendant membacanya dengan useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Data frekuensi rendah, "global-ish" yang banyak komponen butuhkan: theme, pengguna saat ini, locale, bendera fitur.
Ketika value Provider berubah, setiap komponen yang mengkonsumsi context akan di-render ulang — tidak ada cara untuk berlangganan hanya sebagian darinya. Dua konsekuensi praktis:
// ❌ 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 state yang sering berubah atau besar, bagi context menjadi potongan yang lebih kecil, atau gunakan store (Zustand/Redux) yang mendukung langganan selektif. Context adalah alat dependency-injection, bukan manajer state lengkap.