Chọn cách quản lý state trong React như thế nào?

Question

Accepted Answer

Hãy khớp công cụ với **loại** state, thay vì mặc định với một store toàn cục. Hầu hết vấn đề "state toàn cục" thực ra là dùng sai công cụ cho công việc.

## Hướng dẫn quyết định

```text
State UI cục bộ (toggle, input)     → useState / useReducer
Chia sẻ, ít thay đổi (theme, user)  → Context
Dữ liệu Server/API                  → React Query / SWR  (KHÔNG phải store toàn cục)
State client toàn cục phức tạp      → Zustand / Jotai / Redux Toolkit
State chia sẻ qua URL (filter, page)→ URL (search params)
```

## Insight quan trọng nhất: server state ≠ client state

Dữ liệu từ một API là một **cache** của dữ liệu từ xa, không phải state bạn sở hữu. Đặt nó vào Redux nghĩa là bạn tự xử lý loading, caching, refetch và vô hiệu hóa — đau đớn và dễ lỗi. Một thư viện server-state làm tất cả việc đó:

```jsx
// xử lý caching, dedup, refetch nền, stale-while-revalidate miễn phí
const { data, isLoading } = useQuery({ queryKey: ["todos"], queryFn: getTodos });
```

## Hướng dẫn

- Giữ state càng **cục bộ** càng tốt; đặt nó gần nơi nó được dùng.
- Đừng đặt các giá trị thay đổi nhanh vào **Context** (nó render lại mọi consumer).
- Với state client chia sẻ có cập nhật thường xuyên, ưu tiên một store có **subscribe chọn lọc** (Zustand/Jotai) để component chỉ render lại cho mảnh chúng đọc.
- Dùng Redux Toolkit khi bạn cần devtools/middleware/cấu trúc của nó cho state chia sẻ thực sự phức tạp.

Kỹ năng thực sự là **tối thiểu hóa và đặt đúng** state — không phải chọn một thư viện.