Transitions & Deferred Values

import React, { useState, useTransition } from 'react';

export default function SearchPage() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  
  // isPending tells us if the background work is still happening
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    // 1. URGENT UPDATE: We update the input box immediately
    setQuery(e.target.value);

    // 2. TRANSITION (Low Priority): We tell React this heavy work can be done in the background
    startTransition(() => {
      const newResults = heavyFilteringFunction(e.target.value);
      setResults(newResults);
    });
  };

  return (
    <div>
      {/* This input will NEVER freeze, no matter how heavy the filtering is! */}
      <input value={query} onChange={handleChange} placeholder="Search 100,000 items..." />
      
      {/* We can show a small spinner while the background work happens */}
      {isPending && <span> Filtering...</span>}
      
      <ul>
        {results.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  );
}