React 18 — concurrent Rendering

Intro: pause/resume render of different ui components to apply other urgent changes

Before React 18, once a concurrent rendering task was started, there was no way to stop it until it finished execution. It was a single synchronous task in nature, and as we already know, synchronous task go on one by one.

With React 18, the Concurrency mechanism has improved, and now allows React to interrupt rendering. Concurrent rendering brings some new features such as suspense, streaming server rendering, and transitions powered by concurrent rendering.

differentiate between urgent and non-urgent

• urgent ⇒ input value ( typing, clicking or pressing need immediate response on the DOM. )
• non-urgent ⇒ display list of search results ( DOM updates like rendering a list or a presentational component which user can wait for to view. It is an UI transition from one view to another )

For some actions, like selecting in a dropdown or updating a input, you want the action to respond immediately, so now we had the possibility to distinguish between an urgent update and a non-urgent one.

import { startTransition } from 'react';
// updating state with urgent priority
setInputValue(input);
// Inside startTransition the updates won't be urgent
// and can be interrupted
startTransition(() => {
    setSearchQuery(input);
})