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/Western_Insurance764]

It's not that it prevents multiple renders exactly, it’s about priority. When you put the state update inside startTransition, React marks it as low priority so it can be interrupted. If you click the button 3 times fast, React starts working on the first update, then sees the second click come in as more urgent and just drops the first render to start the next one. So you only see the last result because the intermediate states got abandoned before they could finish

The "background" wording is confusing. It basically means React does the work when it has free time, like in idle moment, not blocking the main thread for important stuff like typing in a input

[u/Neat_Living_6765 → u/Western_Insurance764]

Hi, thanks for your comment!

I also thought that the early update schedules (early actions) got abandoned until I read this term:

https://react.dev/reference/react/useTransition#my-state-updates-in-transitions-are-out-of-order

"When clicking multiple times, it’s possible for previous requests to finish after later requests. When this happens, React currently has no way to know the intended order. This is because the updates are scheduled asynchronously, and React loses context of the order across the async boundary."

The first sentence implies that the “early actions” have not been abandoned.

(I’m not an English native speaker, but I hope you get what I mean...)

[u/Tomus → u/Neat_Living_6765]

If you look at the example, this is about some async IO causing race conditions. The point of that doc is that you need to wrap the state setter in startTransition again after the await even if you're already inside a startTransition. It's not really about what React is doing under the hood, just a technical limitation on what React can track right now. If you want to look deeper, AsyncContext will allow React to track this without the nested startTransition call, it's a web API proposal right now.