React 18 no longer relies on Concurrent Mode to turn on concurrency

Hi everyone, I'm Kasong.

I believe a lot of attention React progress friends are aware of Concurrent Mode , he is gradual upgrade strategy of product.

Due to policy adjustments, according to What happened to concurrent mode? , v18 will be no more Concurrent Mode .

Without Concurrent Mode , how to use concurrent update?

One sentence summary: In v18, there are no longer three modes, but uses the concurrency feature as the whether 1619c674b84e7c opens concurrent updates .

A more detailed explanation, let us find the answer from the evolution of the React

Welcome to join the human high-quality front-end frame group , take flight

How many architectures does React have?

From the oldest version to the current v18, how many versions of React are there on the market?

It can be summarized from the perspective of architecture. There are currently two architectures:

• Stack Reconciler (old architecture) updated using the non-interruptible recursive
• Use the interruptible traverse to update the Fiber Reconciler (new architecture)

The new architecture can choose whether to enable concurrent updates React versions currently on the market must fall into one of the following situations:

1. Old architecture (v15 and earlier versions)
2. The new architecture does not enable concurrent updates, which is consistent with the behavior of case 1 (v16, v17 defaults to this case)
3. New architecture, concurrent updates are not enabled, but some new features are enabled (such as Automatic Batching )
4. New architecture, open concurrent updates

The gap between ideal and reality

The vision of the React

Developers using the old version can gradually upgrade to the new version, that is, upgrade from Case 1, 2, 3 to Case 4.

But there is a great resistance in the middle, because React case 4 are different from cases 1, 2, and 3.

For example, the following three life cycle functions are "unsafe" under React in case 4:

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

Rush upgrade may cause incompatibility of old code.

In order to allow the majority of developers to smoothly transition, the React team adopted the gradual upgrade program

The first step of gradual upgrade

Progressive upgrade The first step of the program is to standardize the code.

v16.3 added StrictMode , for developers to write does not meet the specifications of concurrent updates to the code make tips, step by step guide developers to write code that specification.

For example, when using the life cycle function that is insecure for , the following error message will be generated:

The second step of gradual upgrade

In the next step, the React React in different situations to coexist on the same page, so that React situation 4 can gradually infiltrate the original project.

The specific approach is to provide three development modes:

1. Legacy mode, ReactDOM.render(<App />, rootNode) follow this mode. StrictMode closed by default, and the performance is the same as situation 2
2. Blocking mode, ReactDOM.createBlockingRoot(rootNode).render(<App />) follow the pattern created by the application, as from Legacy to Concurrent intermediate transition mode, the default open StrictMode , manifestations of the same situation 3
3. Concurrent mode. ReactDOM.createRoot(rootNode).render(<App />) created through 0619c674b852fe follow this mode. By default, StrictMode turned on, and the performance is the same as in case 4.

In order to allow applications of different modes to work in the same page, some low-level implementations need to be adjusted.

For example, before adjustment, most events will bubble to the HTML element, and after adjustment, the events will bubble to the root element where the application is located.

These adjustments work place in v17, v17 therefore also referred to as open concurrent updates laying the groundwork stepping stone version.

The latest gradual upgrade strategy

Time advances to June 8, 2021, and the v18 working group is established.

After a lot of communication with the community, the React team realized that the current gradual upgrade has two problems.

Reason one

First of all, because the mode affects the entire application, it is impossible to complete a gradual upgrade in the same application.

For example, the developer changes the application from ReactDOM.render to ReactDOM.createBlockingRoot and Legacy mode to Blocking mode, which will automatically turn on StrictMode .

At this time, the concurrent incompatibility warning entire application will be reported, and the developer still needs to modify the entire application.

From this point of view, it did not serve the gradual upgrade of .

Reason two

Secondly, the React team found that developers benefited from the new architecture, more due to the use of the concurrency feature ( Concurrent Feature ).

concurrency feature refers to the feature that can be used only after the concurrent update is enabled, such as:

• useDeferredValue
• useTransition

Therefore, you can still use synchronous update and then turn on concurrent update after using the 1619c674b854b4 concurrency feature.

Run the following code in v18:

const App = () => {
  const [count, updateCount] = useState(0);
  const [isPending, startTransition] = useTransition();

  const onClick = () => {
    // 使用了并发特性useTransition
    startTransition(() => {
      // 本次更新是并发更新
      updateCount((count) => count + 1);
    });
  };
  return <h3 onClick={onClick}>{count}</h3>;
};

Since updateCount in startTransition execution (using a callback function concurrency features), so updateCount trigger concurrent updates.

If updateCount not as startTransition callback function, then updateCount will trigger default synchronized.

time slicing is enabled in these two cases to distinguish whether it is a concurrent update. For the complete code, see Demo address

in conclusion

In v18, there are no longer three modes, but uses the concurrency feature as the whether 1619c674b85585 enables concurrent update .

Specifically, use ReactDOM.createRoot create applications in v18.

When the concurrency feature is not used, the behavior is as in case 3. After using the concurrency feature, the behavior is as in case 4.

React18 stable version will arrive at the end of January next year at the earliest. Are you still learning to move?