React 18 is openning new capabilities. And new capabilities come with new language.

The most important new term in React 18 is “transition”. And I want to make sure we understand what transitions are before diving into code.

A transition is a classification of update.

Today, all updates are urgent updates. Expensive updates can block UI that users expect to be responsive — clicks, presses, keyboard input, etc.

In React 18, transition updates allow us to make updates interruptible. These interruptible updates are deprioritized to make way for urgent updates.

Consider this isolated example from the React Working group:

// Urgent update
setInputValue(input);

// Transition update
startTransition(() => {
  setSearchQuery(input);
});

setInputValue must be set immediately to keep UI responsive. But setSearchQuery can be interrupted and executed after urgent updates.

For the first time, React developers have a framework solution to de-prioritize low-priority updates.

🐦 chantastic