ReactuseTransition (React 18) cho phép đánh dấu state update là non-urgent, React có thể interrupt và ưu tiên urgent updates trước.
- Trả về
[isPending, startTransition]. - Dùng khi filtering danh sách lớn, heavy re-renders mà không muốn block UI.
tsx
const SearchPage = () => {
const [query, setQuery] = useState('')
const [results, setResults] = useState<string[]>([])
const [isPending, startTransition] = useTransition()
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// urgent: cập nhật input ngay lập tức
setQuery(e.target.value)
// non-urgent: React có thể defer để giữ UI responsive
startTransition(() => {
setResults(heavyFilter(e.target.value))
})
}
return (
<>
<input value={query} onChange={handleChange} placeholder="Search..." />
{isPending && <span>Filtering...</span>}
<ul>{results.map(r => <li key={r}>{r}</li>)}</ul>
</>
)
}