React: What is React Concurrent Mode and its benefits?

1import { useTransition, useDeferredValue } from "react";
2
3function Search() {
4  const [query, setQuery] = useState("");
5  const [isPending, startTransition] = useTransition();
6
7  const handleChange = (e) => {
8    // Urgent: update input immediately
9    setQuery(e.target.value);
10
11    // Non-urgent: filter results can be interrupted
12    startTransition(() => {
13      setFilteredResults(filterItems(e.target.value));
14    });
15  };
16
17  return (
18    <div>
19      <input value={query} onChange={handleChange} />
20      <div style={{ opacity: isPending ? 0.5 : 1 }}>
21        {filteredResults.map(r => <Result key={r.id} {...r} />)}
22      </div>
23    </div>
24  );
25}

1function App() {
2  const [query, setQuery] = useState("");
3  const deferredQuery = useDeferredValue(query);
4
5  return (
6    <>
7      <input value={query} onChange={e => setQuery(e.target.value)} />
8      <Results query={deferredQuery} /> {/* Uses stale-while-revalidate */}
9    </>
10  );
11}