Sự khác biệt giữa local state và global state là gì?

Question

Accepted Answer

**Local state** thuộc về một component đơn lẻ (hoặc một nhánh nhỏ của cây) và không cần ở nơi khác. **Global state** được chia sẻ giữa nhiều component, thường cách xa nhau, trên toàn ứng dụng.

## Local state — giới hạn trong một component

```jsx
function SearchBox() {
  const [query, setQuery] = useState(""); // chỉ component NÀY cần `query`
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}
```

Local state nằm bên trong component (`useState`, `ref`, `data()`). Ví dụ: giá trị input, dropdown có đang mở hay không, trạng thái hover, bản nháp của một form. Không component nào khác quan tâm đến nó.

## Global state — chia sẻ toàn app

```jsx
// người dùng đã đăng nhập cần cho navbar, trang profile, settings, checkout...
const user = useUserStore(s => s.user); // từ một global store/context
```

Global state là dữ liệu mà nhiều component không liên quan phải đọc hoặc cập nhật một cách nhất quán: người dùng đã xác thực, theme, giỏ hàng, các thông báo toàn app. Nó nằm trong một Context, một store (Redux/Zustand/Pinia), hoặc tương tự.

## Cách quyết định

```text
Tự hỏi: "Bao nhiêu component cần dữ liệu này, và chúng cách nhau bao xa?"

Một component (hoặc cha+con)            → LOCAL state
Nhiều component không liên quan / cả app → GLOBAL state
```

## Một sai lầm phổ biến: lạm dụng global

```jsx
// ❌ đưa input của một form duy nhất vào global state — phức tạp không cần thiết
globalStore.setFormInput(value);

// ✅ giữ nó local — chỉ form này dùng đến
const [value, setValue] = useState("");
```

Đưa mọi thứ thành global làm tăng boilerplate, gắn kết (couple) các component với nhau, và có thể ảnh hưởng đến hiệu năng (nhiều re-render hơn). Best practice là **giữ state local nhất có thể**, và chỉ nâng lên global khi việc chia sẻ thực sự cần thiết.

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

Chọn local hay global là một trong những quyết định quan trọng nhất về state.

Giữ state local giúp component đơn giản, độc lập và hiệu năng tốt; chỉ dùng đến global state khi dữ liệu thực sự được chia sẻ giúp tránh sự phức tạp không cần thiết.

Anti-pattern thường gặp — đưa mọi thứ vào global store "để phòng hờ" — dẫn đến những app cồng kềnh, gắn kết chặt.

Nguyên tắc dẫn dắt: **mặc định là local, chỉ global khi việc chia sẻ đòi hỏi.**