ReactCả hai đều hạ ưu tiên phần render nặng để ô input phản hồi ngay. Khác nhau ở chỗ bạn nắm được gì.
useTransition — dùng khi bạn sở hữu lời gọi setState:
jsx
const [text, setText] = useState('')
const [query, setQuery] = useState('')
const [isPending, startTransition] = useTransition()
function onChange(e) {
setText(e.target.value) // urgent: input updates now
startTransition(() => setQuery(e.target.value)) // low priority: heavy list
}useDeferredValue — dùng khi giá trị đến từ props hoặc nơi khác, bạn không chạm được vào setState:
jsx
function ResultList({ query }) {
const deferredQuery = useDeferredValue(query)
const rows = useMemo(() => filter(data, deferredQuery), [deferredQuery])
return <Table rows={rows} stale={query !== deferredQuery} />
}Với ô search tự quản lý state, useTransition là lựa chọn trực tiếp hơn vì có sẵn cờ isPending để làm mờ bảng.
Lưu ý bắt buộc: danh sách nặng phải được memo hoá, nếu không React vẫn phải render lại toàn bộ ở mỗi lần cắt việc và cảm giác chậm vẫn còn.