React has just released the startTransition API in v18. While it seems like a "magic spell" to bring more responsiveness, the doc is quite vague about its behavior under the hood. The only sentence related to its behavior in the doc is "Updates in a transition yield to more urgent updates such as clicks."
As a React programmer, I am concerned about whether it will cause glitches to my components. E.g.:
- Will the state split into two branches during transition? Let's assume we have a current
state. When a transition is turning it intoslow_update(state), another event occurs that turns the state intofast_update(state). We will have bothslow_update(state)andfast_update(state)calculated in this process. This never happens in the old React when state updates are done in order. - If some
useEffecthooks are triggered by the state update, will the callback execute twice if the transition is interrupted? Will the callback receive some inconsistent data since the state is branched during transition?
I am also curious about will it will make my app any more responsive at all. E.g.:
- Does
startTransitionapply to render phase, or it only optimizes reconciliation? Does it apply to just the callback itself, or also the follow-up renders,useMemos anduseEffects on the updated state? It seems that CPU-heavy logic blocks the main thread anyway so React has no way to interrupt it. Therefore, if my component filters through a long list in astartTransitioncallback, it is optimized at all? - If urgent updates occur repeatedly, will the slow update be blocked forever? For example, if the component uses
requestAnimationFrameto update its state every 16ms, and the slow transition takes longer time, will the slow transition be interrupted again and again?
I have read the doc, the release note, the reactwg discussion and the official example, but they do not answer the questions above. Since that concurrent-related bugs are hard to fix or reproduce, it would be great if there are some thumb rules (like the rules of hooks) that keep the transition code always correct.
In general, what code will benefit from startTransition, and what is needed to avoid glitches?