How would you implement a search with useTransition?

Here is an example of how to implement a search where each handleSearch is a heavy function

But you want users to see a smooth UI

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

  const handleSearch = (e) => {
    // Urgent update - update input immediately
    setQuery(e.target.value);
    
    // Wrap expensive search in transition
    startTransition(() => {
      const searchResults = expensiveSearch(e.target.value);
      setResults(searchResults);
    });
  };

  return (
    <div>
      <input value={query} onChange={handleSearch} />
      {isPending ? (
        <div>Loading...</div>
      ) : (
        <SearchResults results={results} />
      )}
    </div>
  );
}