How does useDeferredValue help improve performance when rendering a large list based on user input?

useDeferredValue lets you keep showing an older, slightly outdated version of a value while React works on rendering the newer version in the background. This means the input field stays smooth and responsive, while the heavier part of the screen, like a large filtered list, catches up a moment later.

function SearchResults({ query }) {
  const deferredQuery = useDeferredValue(query);
  const results = useMemo(() => filterHugeList(deferredQuery), [deferredQuery]);
  return <ResultsList items={results} />;
}