Transition Interruptions in Concurrent Rendering

In React concurrent rendering, work started as a transition can be interrupted when a more urgent update needs to render. React can pause or discard the in-progress transition work and continue with fresher state, keeping urgent interactions responsive.

A transition marks an update as non-urgent work. React can spend time rendering that work without requiring the browser to commit it immediately, which gives urgent updates such as typing or clicking higher priority when they arrive.

An interruption happens when higher-priority work becomes available while transition rendering is still in progress. React may stop the current render, process the urgent update, and later resume or restart the transition using the newest available state rather than committing obsolete work.

This behavior is possible because rendering is interruptible, while the committed UI remains consistent. React does not partially commit an interrupted render; the unfinished render is work-in-progress until React decides it is ready to commit.

For application code, the important consequence is that rendering should be treated as restartable. Avoid side effects during render, and do not assume that a transition render executes exactly once from start to finish. Effects and other commit-related operations belong outside the render phase.

`startTransition` is useful when an update can lag behind direct user interaction. It does not make the update disappear or guarantee a particular interruption pattern; it tells React that the update can yield to more urgent work.

Key points

• Transition updates are lower priority than urgent interaction updates.
• A transition render may be interrupted before it commits.
• React can restart transition work against newer state.
• Interrupted rendering should be free of side effects.
• Only committed work should be treated as visible application state.

Interview questions

What does it mean for a transition to be interrupted?

It means React is rendering a non-urgent update and higher-priority work arrives before that render commits. React can yield the transition work, process the urgent update, and then resume or restart the transition. The unfinished render is not exposed as a partial UI. This lets interaction remain responsive even when the transition is expensive.

Why can React restart a transition render?

Concurrent rendering separates rendering from committing, so React can perform render work without immediately making it visible. If newer state arrives while transition work is in progress, previously calculated work may no longer represent the state React needs to commit. React can therefore abandon or restart that work using the newer state. Components must consequently tolerate render work being performed more than once.

How would you keep a search input responsive when filtering is expensive?

I would keep the controlled input's immediate state update urgent so each keystroke can update the input promptly. I would place the expensive derived update in `startTransition`. If another keystroke arrives while the filtering render is underway, React can prioritize the newer input update and interrupt the lower-priority work. I would also consider virtualization or memoization if the filtering or rendering itself remains expensive.

What should you never do because transition rendering may be interrupted?

I would avoid observable side effects during render, such as mutating external state, performing network requests directly, or modifying the DOM manually. A render can be started, abandoned, or repeated, so such operations could happen without a corresponding commit. Side effects should generally be coordinated through effects or event handlers, depending on their semantics. The key invariant is that rendering should be safe to repeat without producing externally visible side effects.

Does an interrupted transition mean React loses all previous work?

Not necessarily. React's concurrent renderer can reuse work where appropriate, but application code should not depend on a particular amount of work being preserved across interruptions. The important semantic guarantee is that React controls which completed render is committed. Developers should therefore reason in terms of state and commits rather than assuming that every intermediate render calculation will survive.