Trung BìnhReact iconReact

Làm sao xử lý race condition trong async useEffect? **Ví dụ:** user type vào search box rồi xóa hết, request cũ về trước request mới.

Race condition xảy ra khi nhiều request bất đồng bộ được gửi đi và response trả về không đúng thứ tự, khiến UI hiển thị dữ liệu sai.

Cách xử lý phổ biến nhất là dùng AbortController trong cleanup function của useEffect: tạo controller, truyền signal vào fetch, và return hàm abort trong cleanup.

js
const controller = new AbortController();
fetch(url, { signal: controller.signal });
return () => controller.abort();

Ngoài ra có thể dùng thư viện như TanStack Query vì nó tự động xử lý caching, deduplication và cancellation.

Xem toàn bộ React cùng filter theo level & chủ đề con.

Mở danh sách React