useEffect là gì và khi nào nó chạy?

Question

Accepted Answer

`useEffect` chạy **side effect** — công việc vươn ra ngoài việc render của React, như fetch dữ liệu, subscription, timer, hoặc cập nhật DOM thủ công. Nó chạy **sau** khi component render, giữ side effect ra khỏi thân hàm render (render phải thuần khiết).

## Mảng dependency điều khiển thời điểm

```jsx
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // ← mảng dependency
```

- **`[count]`** → chạy sau lần render đầu và mỗi khi `count` thay đổi.
- **`[]`** (rỗng) → chạy **một lần** sau khi mount (tốt cho thiết lập một lần).
- **bỏ qua** → chạy sau **mọi** lần render (hiếm khi bạn muốn).

## Dọn dẹp: trả về một hàm

Nếu một effect thiết lập gì đó cần tháo dỡ, hãy trả về một hàm dọn dẹp. React gọi nó trước lần chạy effect kế tiếp và khi component unmount:

```jsx
useEffect(() => {
  const id = setInterval(() => setN(n => n + 1), 1000);
  return () => clearInterval(id); // dọn dẹp → ngăn rò rỉ timer
}, []);
```

## Vì sao dọn dẹp quan trọng

Không có nó, mỗi lần chạy lại sẽ thêm một timer/subscription nữa và không bao giờ gỡ cái cũ — một rò rỉ bộ nhớ kinh điển. Vòng đời cho một effect `[dep]` là: *chạy effect → (dep thay đổi) → chạy dọn dẹp → chạy effect lại*.

**Mẹo:** đừng dùng effect cho những thứ bạn có thể tính trong lúc render (hãy dẫn xuất giá trị), và đưa mọi giá trị mà effect đọc vào mảng dependency (lint rule `react-hooks/exhaustive-deps` giúp ích).