Senior #state-management#redux#zustand#react-query
Chọn state management: useState, Context, Redux, Zustand, React Query?
⚡ Trả lời nhanh
Phân loại state trước: UI cục bộ dùng useState; server state (cache, refetch, đồng bộ) dùng React Query/SWR; client state toàn cục dùng Zustand (gọn) hoặc Redux Toolkit (app lớn, cần devtools, quy ước chặt). Context hợp cho giá trị ít đổi như theme.
| Loại state | Công cụ | Lý do |
|---|---|---|
| Cục bộ (input, modal) | useState/useReducer | Đơn giản nhất |
| Server state | React Query, SWR, RTK Query | Cache, dedupe, refetch, retry, stale-while-revalidate |
| Global client state | Zustand, Jotai | Ít boilerplate, có selector |
| Global phức tạp, team lớn | Redux Toolkit | Luồng một chiều, devtools time-travel, middleware |
| Giá trị ít đổi (theme, locale, user) | Context | Không thêm thư viện |
| State trong URL | Router search params | Chia sẻ link, back/forward |
const useCart = create(set => ({
items: [],
add: item => set(s => ({ items: [...s.items, item] })),
}));
const count = useCart(s => s.items.length); // chỉ re-render khi count đổi