How do React 19 concurrent features create "perceived instant" search experiences?

import { useTransition, useDeferredValue, Suspense } from 'react';

function InstantSearch({ products }) {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();
  const deferredQuery = useDeferredValue(query);
  
  const results = useMemo(() => {
    if (!deferredQuery) return products;
    return products.filter(p => 
      p.name.toLowerCase().includes(deferredQuery.toLowerCase())
    );
  }, [products, deferredQuery]);
  
  return (
    <div>
      <input
        onChange={e => startTransition(() => setQuery(e.target.value))}
        placeholder="Search 50k+ products..."
      />
      {isPending && <div>Searching...</div>}
      <Suspense fallback={<div>Loading results...</div>}>
        <ProductGrid products={results} />
      </Suspense>
    </div>
  );
}