What are useTransition and useDeferredValue?

Both allow non-urgent updates to be deferred so urgent updates (typing, clicking) stay responsive.

useTransition — marks a state update as a transition:

function SearchPage() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  function handleChange(e) {
    setQuery(e.target.value); // urgent — update input immediately

    startTransition(() => {
      // non-urgent — can be interrupted if user keeps typing
      setResults(expensiveFilter(e.target.value));
    });
  }

  return (
    <>
      
      {isPending ?  : }
    
  );
}

useDeferredValue — defer a value you receive (useful when you don't own the state setter):

function SearchResults({ query }) {
  const deferredQuery = useDeferredValue(query); // lags behind query
  const results = expensiveFilter(deferredQuery); // uses stale value during typing
  const isStale = query !== deferredQuery;

  return (
    

      {results.map(r => )}
    
  );
}