React: What is useDeferredValue hook?

1import { useState, useDeferredValue, useMemo } from "react";
2
3function SearchResults({ query }: { query: string }) {
4  const deferredQuery = useDeferredValue(query);
5  const isStale = query !== deferredQuery;
6
7  const results = useMemo(() => {
8    return expensiveFilter(deferredQuery);
9  }, [deferredQuery]);
10
11  return (
12    <div style={{ opacity: isStale ? 0.7 : 1 }}>
13      <p>Results for: {deferredQuery}</p>
14      <ul>
15        {results.map(item => (
16          <li key={item.id}>{item.name}</li>
17        ))}
18      </ul>
19    </div>
20  );
21}
22
23function App() {
24  const [query, setQuery] = useState("");
25
26  return (
27    <div>
28      <input
29        value={query}
30        onChange={e => setQuery(e.target.value)}
31        placeholder="Search..."
32      />
33      <SearchResults query={query} />
34    </div>
35  );
36}