Các tính năng concurrent như useTransition và useDeferredValue là gì?

Question

Accepted Answer

Concurrent React có thể **ngắt, tạm dừng và ưu tiên** công việc render. Bạn đánh dấu một số cập nhật là **transition không khẩn cấp** để các cập nhật khẩn cấp (như gõ phím) vẫn phản hồi nhanh ngay cả khi một lần render lại nặng đang chờ.

## useTransition

```jsx
const [isPending, startTransition] = useTransition();

function onChange(e) {
  setQuery(e.target.value);          // KHẨN CẤP: giữ input nhanh nhạy
  startTransition(() => {
    setResults(filterBigList(e.target.value)); // KHÔNG KHẨN CẤP: có thể bị ngắt
  });
}
// isPending cho bạn hiện một chỉ báo "đang cập nhật…" tinh tế
```

**Vì sao điều này giúp ích:** lọc một danh sách lớn rất tốn kém. Không có transition, React sẽ chặn input trong khi render lại hàng nghìn hàng, nên gõ phím cảm thấy chậm. Bằng cách bọc cập nhật tốn kém trong `startTransition`, React giữ cập nhật input ở ưu tiên cao và có thể **vứt bỏ** một lần render lọc đang dở nếu bạn gõ phím khác — không có frame cũ, giật.

## useDeferredValue

Một giải pháp thay thế đơn giản hơn khi bạn không kiểm soát setter — nó cho bạn một bản "trễ" của một giá trị:

```jsx
const deferredQuery = useDeferredValue(query); // cập nhật sau khi công việc khẩn cấp ổn định
const results = useMemo(() => filterBigList(deferredQuery), [deferredQuery]);
```

## Khi nào dùng

Dùng chúng cho **cập nhật UI tốn kém, không khẩn cấp** được điều khiển bởi input người dùng nhanh: tìm-kiếm-khi-gõ trên tập dữ liệu lớn, chuyển tab render nội dung nặng, bảng lớn được lọc/sắp xếp. Với app đơn giản chúng không cần thiết — chúng tỏa sáng khi một lần render đủ nặng để gây trễ input nhìn thấy được.