Hook useState hoạt động như thế nào?

Question

Accepted Answer

`useState` cho một function component một mảnh **state cục bộ, có phản ứng (reactive)**. Nó trả về một cặp: **giá trị hiện tại** và một hàm **setter**. Gọi setter lên lịch một lần render lại với giá trị mới.

```jsx
const [count, setCount] = useState(0); // 0 là giá trị khởi tạo
setCount(count + 1);   // dạng giá trị
setCount(c => c + 1);  // dạng hàm (ưu tiên khi dựa trên giá trị trước)
```

## Hai điều khiến người mới ngạc nhiên

**1. Cập nhật là bất đồng bộ / được gộp (batch).** `count` không thay đổi ở dòng sau `setCount`; nó có giá trị mới ở lần render *kế tiếp*. Nên cái này chỉ tăng một lần:

```jsx
setCount(count + 1);
setCount(count + 1); // cả hai đọc CÙNG một `count` cũ → tổng +1
```

Dùng **functional updater** khi giá trị tiếp theo phụ thuộc vào giá trị trước, vì React truyền giá trị mới nhất vào:

```jsx
setCount(c => c + 1);
setCount(c => c + 1); // tổng +2 — mỗi cái nhận giá trị mới nhất
```

**2. Giá trị khởi tạo chỉ được dùng ở lần render đầu tiên.** Với một giá trị mặc định tốn kém, hãy truyền một hàm để nó chạy một lần (lazy init):

```jsx
const [data] = useState(() => expensiveInit()); // chạy một lần, không phải mỗi render
```

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

State là thứ làm một component tương tác được — React chạy lại hàm và render lại UI mỗi khi state thay đổi.

Hãy coi state là **bất biến (immutable)**: tạo một mảng/đối tượng mới thay vì sửa đổi, vd `setItems([...items, x])`, nếu không React có thể không phát hiện ra thay đổi.