Cách xử lý race conditions trong React Query?

React Query giải quyết race conditions tự động: auto-cancel request cũ khi queryKey thay đổi (cần pass signal vào fetch), deduplication (nhiều components cùng query chỉ 1 request), luôn lấy result mới nhất.

React Query giải quyết race conditions tự động: Race condition xảy ra khi nhiều requests cùng lúc và response muộn hơn override response mới hơn — vấn đề kinh điển với useEffect + fetch.

React Query giải quyết ở nhiều tầng:

  1. Cancellation: khi queryKey thay đổi (ví dụ search input), React Query abort request cũ nếu queryFn nhận và dùng signal — queryFn: ({ signal }) => fetch(url, { signal }).
  2. Deduplication: nếu query đang fetch và component khác request cùng queryKey, React Query không gửi thêm request mà share kết quả — chỉ 1 request.
  3. Strict mode safety: React Query không commit kết quả của request đã bị replace bởi request mới hơn.
  4. enabled pattern cho dependent queries: enabled: !!userId đảm bảo không fetch với stale userId

Comparison với useEffect: với useEffect bạn phải manually track và cancel với cleanup function return () => { cancelled = true } hoặc AbortController — dễ leak và dễ có bugs.

React Query làm tất cả điều này tự động miễn là queryFn sử dụng signal.

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

Mở danh sách State Management