Fetch dữ liệu trong React và tránh race condition như thế nào?

Question

Accepted Answer

Cách cơ bản dùng `useEffect`, nhưng bạn phải xử lý **dọn dẹp** và **phản hồi đến không đúng thứ tự**, nếu không bạn sẽ có dữ liệu cũ và cảnh báo.

```jsx
function User({ id }) {
  const [user, setUser] = useState(null);
  const [error, setError] = useState(null);

useEffect(() => {
    const ctrl = new AbortController();
    fetch(`/api/users/${id}`, { signal: ctrl.signal })
      .then(r => r.json())
      .then(setUser)
      .catch(e => { if (e.name !== "AbortError") setError(e); });

return () => ctrl.abort(); // hủy request đang chạy khi id thay đổi/unmount
  }, [id]);
}
```

## Race condition mà nó ngăn

Giả sử `id` thay đổi nhanh từ `1` sang `2`. Không có hủy, cả hai request đang chạy. Nếu request `1` chậm và resolve **sau** request `2`, bạn sẽ hiển thị dữ liệu của user `1` cho user `2`:

```text
fetch(1) ───────────(chậm)──────▶ setUser(user1)  ❌ hiện cuối, nhưng sai
fetch(2) ──(nhanh)──▶ setUser(user2)
```

Hủy request trước (việc dọn dẹp) sửa điều này. Một mẫu cờ boolean cũ hơn (`let active = true; ... if (active) setUser(...)`) đạt cùng kết quả bằng cách bỏ qua phản hồi cũ.

## Trong app thực, dùng một thư viện

Fetch thủ công lặp đi lặp lại và bỏ sót caching/retry. **React Query (TanStack Query)** hoặc **SWR** xử lý trạng thái loading/error, caching, dedup, refetch nền và stale-while-revalidate cho bạn:

```jsx
const { data, isLoading, error } = useQuery({ queryKey: ["user", id], queryFn: () => getUser(id) });
```

Với các framework như Next.js, các trình nạp dữ liệu phía server thường được ưu tiên hơn.