Những cạm bẫy thường gặp với mảng dependency và dọn dẹp của useEffect là gì?

Question

Accepted Answer

Một effect chạy lại dựa trên **dependency** của nó, và làm sai mảng đó là nguồn lỗi React số 1.

## Cạm bẫy 1: thiếu dependency → giá trị cũ

Một effect bao quanh (closure) các giá trị từ lần render mà nó được tạo. Nếu bạn bỏ một dependency, nó tiếp tục dùng giá trị cũ:

```jsx
useEffect(() => {
  const id = setInterval(() => {
    console.log(count); // ❌ luôn log count từ lần render ĐẦU TIÊN (0)
  }, 1000);
  return () => clearInterval(id);
}, []); // deps rỗng → effect không bao giờ được tạo lại → `count` đóng băng ở 0
```

Sửa: thêm `count` vào deps, hoặc dùng functional updater không cần nó (`setCount(c => c + 1)`).

## Cạm bẫy 2: dependency không ổn định → effect chạy mỗi lần render

Object/array/function được tạo lại mỗi lần render, nên chúng "mới" mỗi lần và effect không bao giờ ổn định:

```jsx
const options = { id }; // ❌ object mới mỗi render
useEffect(() => { load(options); }, [options]); // chạy mỗi render
```

Sửa: phụ thuộc vào giá trị nguyên thủy (`[id]`), hoặc memoize với `useMemo`/`useCallback`.

## Cạm bẫy 3: quên dọn dẹp → rò rỉ & race

```jsx
useEffect(() => {
  const ctrl = new AbortController();
  fetch(url, { signal: ctrl.signal }).then(setData);
  return () => ctrl.abort(); // hủy request cũ khi `url` thay đổi
}, [url]);
```

Không có dọn dẹp, một request cũ chậm có thể resolve *sau* một request mới hơn và ghi đè dữ liệu mới (một race condition), và subscription/timer sẽ chất đống. Lint rule `react-hooks/exhaustive-deps` của ESLint bắt được hầu hết các trường hợp thiếu dependency.