useDeferredValue

function TinyList({ query }) {
  const deferredQuery = useDeferredValue(query);
  const items = ["Apple", "Banana", "Cherry", "Date"];

  // Filtering 4 items takes microseconds — deferring adds overhead
  const filtered = items.filter(i =>
    i.toLowerCase().includes(deferredQuery.toLowerCase())
  );

  return <ul>{filtered.map(i => <li key={i}>{i}</li>)}</ul>;
}

function SearchResults({ query }) {
  const deferredQuery = useDeferredValue(query);

  // Runs on EVERY render — deferred or not
  const results = hugeDataset.filter(item =>
    item.name.includes(deferredQuery)
  );

  return <ResultsList results={results} />;
}

function Search({ query, filter }) {
  // New object every render — always "different" to React
  const deferredParams = useDeferredValue({ query, filter });

  return <Results params={deferredParams} />;
  // Can cause infinite background re-renders!
}