React 18 setTransition

Pascal Fong Kye — Thu, 27 Jan 2022 09:06:47 +0000

startTransition

React 18 introduces a new concurrent feature called startTransition which aims to solve problems we tried to solve using debounce and throttle, and much more.

This thread gives a deep dive example of how it solves the problem of UI responsiveness when there is expensive computation taking place.

Before React 18, we tend to use debounce (or throttle depending on the situation) to schedule this compute intensive task at a given time T so that the UI feels more responsive to other events. But every time the task will start after T has elapsed, even if it takes less time than T. And the task will still occur as a whole chunk, blocking the thread during this time.

This is where startTransition API brings a new approach to deal with these problems.
It can:

split tasks into small chunks and be smart enough to let the browser process incoming events (mouse events for example) -> yielding
manage an urgent update in priority skipping pending ones -> interrupting
update using new state by disposing of unfinished task with stale state -> skipping old results

Check my personal blog for more articles.

Forem: Pascal Fong Kye

React 18 setTransition

startTransition