memo chỉ can thiệp vào đường truyền props từ cha. Component gọi useContext đăng ký trực tiếp với Provider; khi value đổi, React đánh dấu chính component đó cần render, bỏ qua mọi lớp memo ở giữa. Cũng vì vậy memo ở tầng trên không "chặn" được cập nhật cho con cháu đọc context.
Hệ quả: một Provider ôm cả { user, theme, cart, setCart } sẽ khiến mọi consumer render lại khi chỉ giỏ hàng thay đổi. Thêm nữa, value={{ user, theme }} viết inline tạo object mới mỗi lần Provider render, nên consumer render lại ngay cả khi dữ liệu bên trong y hệt.
Cách xử lý:
1. Tách theo tần suất thay đổi — context ít đổi (theme, locale, user) riêng, context đổi liên tục (form draft, cart) riêng.
2. Tách state và dispatch — StateContext và DispatchContext là hai Provider. Component chỉ gọi hành động sẽ đọc DispatchContext, mà dispatch từ useReducer có tham chiếu ổn định nên không bao giờ render lại vì lý do này.
3. useMemo cho value khi value là object ghép từ nhiều biến.
4. Nếu vẫn không đủ (state đổi ở tần suất cao, nhiều consumer), context không còn là công cụ phù hợp — chuyển sang external store đọc qua useSyncExternalStore để consumer chỉ render khi phần dữ liệu nó chọn thay đổi.