Context cho phép bạn chia sẻ một giá trị với cả một cây con mà không truyền props qua mọi cấp (prop drilling). Bạn tạo một context, bọc một cây con trong Provider của nó, và bất kỳ con cháu nào đọc nó bằng useContext.
= ();
() {
(
);
}
() {
theme = ();
;
}
Dữ liệu "khá toàn cục", ít thay đổi mà nhiều component cần: theme, user hiện tại, locale, feature flag.
Khi value của Provider thay đổi, mọi component tiêu thụ context đều render lại — không có cách nào để chỉ subscribe một phần của nó. Hai hệ quả thực tế:
// ❌ một object MỚI mỗi render → mọi consumer render lại mỗi lần
<Ctx.Provider value={{ user, setUser }}>
// ✅ memoize value để nó chỉ thay đổi khi thực sự thay đổi
const value = useMemo(() => ({ user, setUser }), [user]);
<Ctx.Provider value={value}>
Với state thay đổi thường xuyên hoặc lớn, hãy tách context thành các mảnh nhỏ hơn, hoặc dùng một store (Zustand/Redux) hỗ trợ subscribe chọn lọc. Context là một công cụ dependency-injection, không phải một trình quản lý state đầy đủ.