[React] New features of React 18

1. Automatic batching

In the past, in the event of setState, react will combine multiple set operations into one, for example: sandbox

function handleClick() {
  console.log("=== click ===");
  setCount((c) => c + 1);
  setFlag((f) => !f);
}
// // 两次set会被合并处理

But in asynchronous operations such as setTimeout or fetch, set operations will not be merged. sandbox

function handleClick() {
    console.log("=== click ===");
    fetchSomething().then(() => {
      // React 17 and earlier does NOT batch these:
      setCount((c) => c + 1); // Causes a re-render
      setFlag((f) => !f); // Causes a re-render
    });
  }

So some third-party libraries will be merged manually:

import { unstable_batchedUpdates } from 'react-dom';

unstable_batchedUpdates(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
});
// 两次set会被合并处理

React18 will provide automatic batch processing, just use ReactDOM.createRoot instead of ReactDOM.render.
If you do not want to use batch processing for some requirements, you can use flushSync:

import { flushSync } from 'react-dom'; // Note: react-dom, not react

function handleClick() {
  flushSync(() => {
    setCounter(c => c + 1);
  });
  // React has updated the DOM by now
  flushSync(() => {
    setFlag(f => !f);
  });
  // React has updated the DOM by now
}

2. Behavioral changes to Suspense in React 18

React officially refers to the 18 version of Suspense as "Concurrent Suspense", and the 16 and 17 versions of Suspense as "Legacy Suspense".

Take the following code as an example:

<Suspense fallback={<Loading />}>
  <ComponentThatSuspends />
  <Sibling />
</Suspense>

The difference lies in the sibling of the suspended component.
In Legacy Suspense, Sibling will be immediately mounted to the DOM and trigger the life cycle. sandbox

In Concurrent Suspense, its sibling node Sibling component not immediately mounted to the DOM. Its effect/life cycle will not be triggered before ComponentThatSuspends is resolved. sandbox
Its purpose is to delay the rendering of the subtree until all the data in the tree has been parsed.

3.New feature: startTransition

belong to a performance optimization API, refer to the following conclusions: Real world Example: Adding startTransition for SLOW Renders

What problem to solve

At present, I understand it as: smarter anti-shake interception, easy to understand
officially provides a very specific example (the specific advantage of the example is that it is convenient to understand, but it also has the disadvantage of startingTransition. Outside I can’t think of his usefulness):

When doing visualization, you may encounter that there is a slider that can adjust the threshold. Below the slider is a relationship graph.
Slide the slider, the threshold change causes the data to change, and the data change causes the relationship graph to change

good implementation: 2021-06-22.at.9.42.18.AM.mov
general realization: 2021-06-21.at.3.43.50.PM.mov
no achieve optimal: 2021-06- 21.at.1.16.51.PM.mov

​

How to solve it

Updates wrapped in startTransition are handled as non-urgent and will be interrupted if more urgent updates like clicks or key presses come in. If a transition gets interrupted by the user (for example, by typing multiple characters in a row), React will throw out the stale rendering work that wasn’t finished and render only the latest update.

The update contained in startTransition is considered a non-urgent update. If a more urgent update (such as a click or keypress) occurs, it will be interrupted. If the transition is interrupted by the user (for example, by entering multiple characters in a line), React will discard the unfinished stale rendering work and only render the latest update.

Yielding: every 5 ms, React will stop working to allow the browser to do other work, like run promises or fire events.

• Transfer: Every 5 milliseconds, React will stop working to allow the browser to perform other tasks, such as running promises or triggering events.

  Interrupting&Skipping old results：: If a transition gets interrupted by the user (for example, by typing multiple characters in a row), React will throw out the stale rendering work that wasn’t finished and render only the latest update.

• Interrupt & discard old results: If the transition is interrupted by the user (for example, by entering multiple characters in a row), React will discard the unfinished stale rendering work and only render the latest update.

Different from setTimeout

• setTimeout is Asynchronous but startTransition is synchronous.

We startTransition that does See CAN Not Change The Order of Events, IT IS IT Will Still there But "the wait" Urgent Events to the then Finish IT Will Execute.
GIF from: know almost

---

• Introducing React 18
• What happened to concurrent "mode"?
• [react] New features of React 18