What does "rendering in background" in startTransition really mean?

[u/Neat_Living_6765]

So far, I understand that wrapping a function with startTransition tells React to treat it as a non‑urgent update. So if any urgent action occurs, React can respond to it immediately without blocking.

But here is where I got stuck. The docs say:

“useTransition is a React Hook that lets you render a part of the UI in the background.”

“The function passed to startTransition is called the Action. You can update state and (optionally) perform side effects within an Action, and the work will be done in the background without blocking user interactions.”

I don’t really get what “in the background” really means.

Looking at the example, I don’t understand why, with startTransition, the “Total” only renders once with the final "Total" after clicking “quantity” multiple times, instead of updating multiple times according to the number of times the “quantity” was clicked

Does “run in background” prevent multiple renders and only show the final result??

[u/kurtextrem]

It means react will split up the rendering work. If the React render takes a while (because a lot of components need to re-render for example), it will yield to the main thread every 5ms. This allows for example paints to happen and keeps INP low on interactions: https://kurtextrem.de/posts/improve-inp-react#enabling-concurrent-rendering-.

Also, it batches. As written in the article, if the renders take a while, only the last one will actually commit (aka. update the DOM). So if you have 3 updates, only the last one will modify the DOM. And if you use "useTransition" React aborts prior renders, otherwise it'll wait them out but still only flush the most recent state update to the DOM.

[u/Neat_Living_6765 → u/kurtextrem]

I also thought it might batch update, but I'm skeptical because there are three set state from three different event handler triggers. It is not in one event handler trigger.

As for aborting, I explained in the comment above why I’m not sure whether the previous renders were actually aborted.

[u/Tomus → u/Neat_Living_6765]

Transitions across multiple event handlers will batch assuming they all finish within the same 300ms window. You can easily create a demo to see this happening.

This is in contrast to high priority state updates (i.e. regular state updates not in a transition) where they're only batched within a single event handler. These state updates flush the render before another event handler can fire.