useTransition hook dùng để làm gì?

const SearchPage = () => {
  const [query, setQuery] = useState('')
  const [filterQuery, setFilterQuery] = useState('')
  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: chỉ state update được đánh dấu — callback vẫn chạy đồng bộ
    startTransition(() => {
      setFilterQuery(e.target.value)
    })
  }

  // việc nặng phải nằm ở render thì React mới hoãn được
  const results = useMemo(() => heavyFilter(filterQuery), [filterQuery])

  return (
    <>
      <input value={query} onChange={handleChange} placeholder="Search..." />
      {isPending && <span>Filtering...</span>}
      <ul>{results.map(r => <li key={r}>{r}</li>)}</ul>
    </>
  )
}