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.:
state. When a transition is turning it into slow_update(state), another event occurs that turns the state into fast_update(state). We will have both slow_update(state) and fast_update(state) calculated in this process. This never happens in the old React when state updates are done in order.useEffect hooks 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.:
startTransition apply to render phase, or it only optimizes reconciliation? Does it apply to just the callback itself, or also the follow-up renders, useMemos and useEffects 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 a startTransition callback, it is optimized at all?requestAnimationFrame to 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?