State Management: Context API vs Zustand vs React Query

Sai lầm lớn nhất của React Dev mới vào nghề: "Dùng Context API để quản lý state toàn cục thay cho Redux". Context API sinh ra để Dependency Injection, không phải để quản lý state thay đổi tần suất cao.

1. "Context Trap" (Bẫy Re-render)

Hãy tưởng tượng bạn có một AppContext chứa cả theme (ít đổi) và mousePosition (đổi liên tục).

// Mỗi khi chuột di chuyển -> mousePosition đổi -> AppContext update
// -> Mọi component dùng useContext(AppContext) đều render lại!
// Kể cả cái nút "Dark Mode Switcher" vô tội.
const { theme } = useContext(AppContext);

Đây là thủ phạm số 1 gây lag trên các ứng dụng React phức tạp.

2. Giải pháp Atomic State (Zustand)

Zustand (tiếng Đức nghĩa là "Trạng thái") sử dụng mô hình Selector. Component chỉ "đăng ký" nhận update từ 1 mảnh nhỏ dữ liệu.

// Component này CHỈ render lại khi 'bears' thay đổi.
// 'fish' hay 'honey' thay đổi? Nó không quan tâm.
const bears = useStore((state) => state.bears);

Tại sao Senior Dev chọn Zustand?

1. Transient Updates: Có thể update state mà không gây re-render component (qua subscribe).
2. Outside React: Truy cập store từ function thường (vanilla JS), không cần hook.
3. Size: Siêu nhẹ (1KB) so với Redux Toolkit.

3. Kiến trúc "The Perfect Flow"

Đừng dùng 1 công cụ cho mọi thứ. Hãy phối hợp như một dàn nhạc giao hưởng:

1. Server State (API Data): Dùng TanStack Query (React Query). Đừng lưu user data vào Redux nữa! React Query lo việc caching, deduping request và background update.
2. URL State (Filter/Search): Dùng URL. Share link là có ngay trạng thái filter.
3. Client UI State (Modal, Theme): Dùng Zustand.
4. Local Form State: Dùng React Hook Form.

4. Case Study: Dashboard SaaS

Một ứng dụng Dashboard quản lý dự án (như Jira/Trello):

• Danh sách Task: Dùng React Query (để sync realtime với server).
• Trạng thái mở/đóng Sidebar: Dùng Zustand Global Store.
• Bộ lọc "Assigned to Me": Dùng URL Param ?assignee=me (F5 vẫn giữ nguyên).
• Kéo thả Task (Drag & Drop): Dùng Ref (để tránh render khi drag), chỉ update state khi drop xong.

Kết luận

Công cụ tốt nhất là công cụ dùng đúng mục đích.

• Muốn nhanh? Dùng Zustand.
• Muốn tiện (API)? Dùng React Query.
• Muốn share? Dùng URL.
• Muốn dependency injection? Dùng Context.