Làm sao quyết định mỗi mẩu state nên sống ở đâu?

Question

Accepted Answer

Quyết định **state sống ở đâu** là một trong những kỹ năng kiến trúc quan trọng nhất. Nguyên tắc dẫn dắt: đặt mỗi mẩu state ở **phạm vi hẹp nhất** vẫn thỏa mãn tất cả những ai cần nó — và khớp mỗi *loại* state với công cụ đúng.

## Một framework ra quyết định

```text
1. Ai cần state này?
   - Một component                   → local state (useState)
   - Một vài component liên quan       → nâng lên cha chung / context nhỏ
   - Nhiều component cách xa            → global store hoặc context

2. Đây là LOẠI state gì?
   - Dữ liệu server/remote             → thư viện server-state (React Query/SWR)
   - UI/client state                   → useState / Zustand / Redux
   - Có thể suy ra từ URL (filter, page)→ URL (searchParams)
   - Input form                        → thư viện form hoặc local state

3. Nó thay đổi THƯỜNG XUYÊN ra sao?
   - Hiếm khi, chia sẻ rộng (theme)     → Context là ổn
   - Thường xuyên, chia sẻ rộng          → store với subscription chọn lọc
```

## Các loại và nơi ở của chúng

```text
Loại state     Sống ở                          Ví dụ
─────────────────────────────────────────────────────────────────
Local UI       component (useState)           input text, isOpen, hover
Shared UI      cha đã nâng / Context / store   state modal, item đã chọn
Server data    React Query / SWR / RTK Query   user, sản phẩm (cache remote)
URL state      router / searchParams          filter, page, search query, tab
Form state     React Hook Form / local         giá trị field, validation
Global app     Zustand / Redux / Context      auth user, theme, cart
```

## Các sai lầm phổ biến mà framework này ngăn chặn

```text
❌ Dữ liệu server trong Redux  → dùng React Query (nó là cache, không phải UI state)
❌ Mọi thứ global "để phòng hờ" → gắn kết quá mức, thêm re-render; giữ local
❌ Filter/page trong state       → đưa vào URL (chia sẻ được, bookmark được, nút back)
❌ Nhân bản các giá trị suy ra được → suy ra thay vào (single source of truth)
❌ State form trong global store → thường quá mức; giữ local hoặc dùng thư viện form
```

## URL là state bị dùng chưa đủ

```text
Filter, phân trang, search, tab active → thuộc về URL.
Lợi ích: link chia sẻ được, back/forward trình duyệt hoạt động, sống sót reload, SEO.
```

## Tại sao điều này quan trọng

Nơi state sống quyết định sự đơn giản, hiệu năng, và khả năng bảo trì của một app.

Kỹ năng là kháng cự lại sự cám dỗ đưa mọi thứ thành global và thay vào đó **mặc định localize, khớp mỗi loại state với công cụ phù hợp** (dữ liệu server → React Query, suy ra được từ URL → URL, UI → local/store).

Làm đúng điều này giúp tránh các vấn đề kiến trúc phổ biến nhất — dữ liệu server nhồi vào Redux, state global hóa quá mức gây re-render, và filter trong component state thay vì URL.

Sự cân nhắc này là điều phân biệt một kiến trúc state sạch sẽ, có thể mở rộng với một kiến trúc rối rắm.