React 18 setTransition

#react #javascript

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.

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.