React Context so với Zustand: Khi nào nên dùng cái nào
Các nhà phát triển thường mắc một sai lầm với state trong React. Họ sử dụng Context không đúng cách và sau đó đổ lỗi cho Context về các vấn đề hiệu năng.
Vấn đề thường nằm ở một đối tượng context lớn duy nhất. Khi một giá trị trong đối tượng đó thay đổi, mọi component sử dụng context đó đều bị re-render. Ngay cả khi một component chỉ cần một mẩu dữ liệu nhỏ, nó vẫn phản ứng với mọi thay đổi trong đối tượng.
Nếu thông báo của bạn cập nhật mỗi 30 giây, Navbar của bạn sẽ re-render ngay cả khi Navbar chỉ quan tâm đến tên người dùng. Điều này làm giảm hiệu năng nghiêm trọng.
Bạn có thể khắc phục điều này mà không cần thư viện. Hãy chia nhỏ các context của bạn dựa trên tần suất thay đổi của chúng.
Thay vì dùng một context lớn, hãy sử dụng nhiều context:
• UserContext cho dữ liệu người dùng
• UIContext cho trạng thái sidebar
• NotificationContext cho các thông báo (alerts)
Giờ đây, Navbar của bạn chỉ re-render khi dữ liệu người dùng thay đổi. Việc chia nhỏ đơn giản này giải quyết được hầu hết các phàn nàn về hiệu năng.
Sử dụng React Context cho các giá trị ổn định: • Themes (Chủ đề) • Auth status (Trạng thái xác thực) • Language settings (Cài đặt ngôn ngữ)
Context cũng hoạt động tốt với Server Components. Zustand chỉ hoạt động ở phía client.
Sử dụng Zustand khi bạn cần đăng ký (subscribe) có chọn lọc. Zustand cho phép các component đăng ký vào các phần (slices) cụ thể của state. Nếu một phần trong store của bạn thay đổi, chỉ những component đang theo dõi phần cụ thể đó mới bị re-render.
Hãy áp dụng logic này cho state mới:
Sử dụng React Context nếu: • Dữ liệu ổn định (theme, auth, locale). • Bạn cần nó hoạt động với SSR hoặc Server Components. • Bạn muốn tránh prop drilling bằng cách chia nhỏ các context.
Sử dụng Zustand nếu: • Dữ liệu thay đổi thường xuyên. • Các component cần theo dõi các phần (slices) cụ thể của state. • Logic của bạn phức tạp.
Chờ đã. Đừng dùng cả hai cho dữ liệu API. Nếu bạn đang lấy dữ liệu từ máy chủ, hãy sử dụng TanStack Query. Context và Zustand không xử lý việc lưu bộ nhớ đệm (caching) hay tự động tải lại dữ liệu ngầm (background refetching).
Tóm tắt: • Một đối tượng context lớn gây ra việc re-render. Hãy chia nhỏ nó. • Sử dụng Zustand cho các giá trị ổn định là quá mức cần thiết (overkill). • Sử dụng Context cho các thay đổi thường xuyên gây ra tình trạng giật lag. • Sử dụng Zustand cho server state là sai công cụ.