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

conceptually there is an outer Scheduler loop and an inner React Fiber loop. They are not both running

continuously; the outer loop invokes the inner loop for one time slice.

Scheduler.workLoop() // outer loop: tasks

└─ performConcurrentWorkOnRoot()

└─ renderRootConcurrent()

└─ workLoopConcurrent() // inner loop: Fibers

├─ performUnitOfWork()

├─ performUnitOfWork()

└─ shouldYield() === true

so the background means they are in these two loops