React: What is the useTransition hook and how does it improve UX?

1import { useState, useTransition } from "react";
2
3function SearchResults() {
4  const [query, setQuery] = useState("");
5  const [results, setResults] = useState<string[]>([]);
6  const [isPending, startTransition] = useTransition();
7
8  const handleSearch = (e) => {
9    const value = e.target.value;
10    setQuery(value); // Urgent: update input immediately
11
12    startTransition(() => {
13      // Non-urgent: expensive filtering can be interrupted
14      setResults(filterLargeList(value));
15    });
16  };
17
18  return (
19    <div>
20      <input value={query} onChange={handleSearch} />
21      <div style={{ opacity: isPending ? 0.6 : 1 }}>
22        {results.map(r => <div key={r}>{r}</div>)}
23      </div>
24    </div>
25  );
26}