Keeping user typing input smooth while computing expensive filtering operations in the background.

function FastFilterList({ items }) {
  const [query, setQuery] = React.useState('');
  const [filterTerm, setFilterTerm] = React.useState('');
  const [isPending, startTransition] = React.useTransition();

  const handleInput = (e) => {
    // 1. Urgent: Updates the input field immediately
    setQuery(e.target.value);

    // 2. Non-Urgent: Can be interrupted if user keeps typing
    startTransition(() => {
      setFilterTerm(e.target.value);
    });
  };

  const filtered = items.filter(i => i.name.includes(filterTerm));

  return (
    <div>
      <input value={query} onChange={handleInput} placeholder="Type fast..." />
      {isPending && <span className="spinner">Updating list...</span>}
      <List data={filtered} />
    </div>
  );
}