Khi nào Context là một giải pháp state tốt và khi nào không?

Question

Accepted Answer

**Context API** của React cho phép bạn chia sẻ một giá trị với cả một nhánh component mà không cần prop drilling. Nó tuyệt vời cho dữ liệu **ít thay đổi, được chia sẻ rộng** — nhưng nó *không* phải một giải pháp state management đầy đủ và có một cạm bẫy re-render với state thay đổi thường xuyên. ## Khi Context tỏa sáng ```jsx const ThemeContext = createContext("light"); function App() { const [theme, setTheme] = useState("light"); return ( {/* bất kỳ component con cháu nào cũng đọc được theme — không prop drilling */} ); } ``` ```text Phù hợp tốt (dữ liệu được đọc rộng nhưng ít thay đổi): ✓ Theme (dark/light) ✓ Người dùng hiện tại / auth ✓ Locale / i18n ✓ Config toàn app hoặc feature flag ``` ## Cạm bẫy: mọi consumer re-render khi có BẤT KỲ thay đổi nào ```jsx // ❌ một giá trị context thay đổi thường xuyên re-render TẤT CẢ consumer const AppContext = createContext(); // value = { user, cart, notifications, ...mọi thứ } // → cập nhật MỘT field re-render MỌI component dùng context ``` Khi giá trị context thay đổi, **tất cả** component đang dùng context đó re-render — bất kể chúng có dùng phần đã thay đổi hay không. Với state cập nhật thường xuyên, điều này gây ra vấn đề hiệu năng. Context không có subscription chọn lọc tích hợp sẵn. ## Cách giảm thiểu và lựa chọn thay thế ```text ✓ Tách thành nhiều context tập trung (ThemeContext, UserContext riêng biệt) ✓ Memoize object giá trị (useMemo) để identity của nó không đổi một cách vô ích ✗ Nhưng với state lớn hoặc cập nhật tần suất cao → dùng một store thật sự ``` Các thư viện state (Zustand, Redux, Jotai) giải quyết vấn đề re-render bằng **subscription chọn lọc** — component chỉ subscribe các slice chúng dùng và chỉ re-render khi những slice đó thay đổi: ```js const count = useStore(s => s.count); // re-render CHỈ khi count thay đổi ``` ## Context không phải một state manager ```text Context = một cơ chế VẬN CHUYỂN (truyền một giá trị xuống), KHÔNG phải state management. Bạn vẫn cần useState/useReducer để giữ state; Context chỉ phân phối nó. ``` ## Tại sao điều này quan trọng Biết điểm mạnh của Context — và giới hạn của nó — giúp tránh hai sai lầm phổ biến: prop-drilling những thứ đáng lẽ nên ở Context, và đưa state tần suất cao vào Context (gây re-render toàn app). Quy tắc: Context cho các giá trị **ít thay đổi, được chia sẻ rộng** (theme, user, locale); một store chuyên dụng với subscription chọn lọc cho state chia sẻ **thay đổi thường xuyên hoặc lớn**. Hiểu rằng Context phân phối state nhưng không quản lý nó làm rõ khi nào nó là đủ và khi nào bạn cần thêm.