React startTransition Demo

Type in the inputs below to see how startTransition keeps the UI responsive during heavy computations.

Without startTransition

Try typing quickly - notice the input feels laggy

With startTransition

Type quickly here - input stays responsive!

Search Results

Start typing to see results

How it works:

  • • Without startTransition: Both input update and heavy computation happen in the same render, blocking the UI
  • • With startTransition: Input updates immediately (urgent), heavy computation is deferred (non-urgent)
  • • isPending: Indicates when a transition is in progress, useful for loading states
  • • Interruption: New transitions can interrupt pending ones, preventing outdated results