A transition that made a filter feel instant

A filter input rendering 4,000 rows on every keystroke, where the typing lag was the rendering rather than the filtering.

const [query, setQuery] = useState('')
const [results, setResults] = useState(all)
const [isPending, startTransition] = useTransition()

function onChange(e) {
  setQuery(e.target.value)          // urgent: the input

  startTransition(() => {           // interruptible: the list
    setResults(filter(all, e.target.value))
  })
}

The input updates immediately and the list update can be abandoned when another keystroke arrives, which is what makes typing feel responsive without a debounce. It is not a substitute for virtualising a 4,000-row list — the render is still expensive, it is just no longer blocking. Using isPending to show a subtle indicator is what stops the staleness reading as a bug.