What are the benefits and challenges of Transitions for splitting work in React 18?

Short answer

Transitions keep the interface responsive during heavy work; the challenge is handling temporary Pending States and understanding concurrent UI update ordering.

Explanation

Before React 18, all updates were urgent and could not be interrupted. A 200ms update to a large array could dim the screen and freeze the cursor. startTransition marks an update as low priority; it still uses the same main thread but works in short batches (Time Slicing), pausing every few milliseconds so the browser can process input. An urgent update (such as typing or clicking) interrupts the Transition, discards its result, and recomputes with the new values. There is no parallel thread, so a heavy synchronous function by itself (such as heavyFilterAlgorithm) is not split automatically; the benefit applies to rendering spread across many components.

Code example

startTransition(() => {
  setSearchResults(heavyFilterAlgorithm(rawSearchTerm));
});

Common mistakes

• Wrapping controlled text-input updates such as onChange in startTransition, making the keyboard feel unresponsive.

Follow-up questions

• What does React.memo cost, and why should you not use it by default on every component?

Sources

• React docs — useTransition