Bug: Why does startTransition cause two renders instead of one?

[zszs123]

React version: 18

Steps To Reproduce

1. you can open the url：https://codesandbox.io/s/clever-albattani-zmpxh1?file=/src/App.js
2. then you can see， in the useEffect，I set a five-second delay，then setState.
3. I used useTransition to use concurrent updates，only once.
4. but the app component update twice ，you can see the view change twice.

5. this is the image of performance record, you can see the first upadate is sync ,and the second update is conCurrent, why update twice but I setState once.

Link to code example:

The current behavior

The expected behavior

[gaearon]

When you run a transition, it schedules two renders:

1. One urgent render to show a pending state (isPending = true) with old state value
2. One concurrent render with isPending = false and new state value
   a. When this render is completed, it gets committed

To make the urgent render fast, you can memoize that component that changes:

https://codesandbox.io/s/lively-cookies-rghnzn?file=/src/App.js

There's still a noticeable frame drop during the commit. I think that's just due to the number of DOM elements being inserted.

[gaearon]

Here's an adjusted version where each item actually has a forced rendering delay (your empty loop wasn't very representative because the engine probably optimized it away).

https://codesandbox.io/s/brave-haze-i7wm7v?file=/src/App.js

Try removing startTransition and you'll notice how the difference is a lot more noticeable.