And he came

React18 is here, and I can’t believe it. React17 is here, and I’m not prepared for it. React18 is here. Looking at the date, it was released on 8th. After a quick glance, I went to NPM to search for the version. 18.0.0-alpha was posted 11 hours ago. It’s only a preliminary release. According to the official introduction, there will be several months of work before the official release of the react technology stack. However, it’s important to pay attention to the react technology stack as soon as possible. With that said, let’s take a look at the official react18 introduction.

New new

1.Automatic batching

React: automatic batch update. React: Automatic batch update. React: Automatic batch update.

function App() { const [count, setCount] = useState(0); const [flag, setFlag] = useState(false); function handleClick() { setCount(c => c + 1); // Does not re-render yet setFlag(f => ! f); // Does not re-render yet // React will only re-render once at the end (that's batching!) } return ( <div> <button onClick={handleClick}>Next</button> <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1> </div> ); }Copy the code

HandleClick will only trigger a rendering once. This code is copied from Dan Abramov’s demo of Automatic batching. The waiter in the restaurant will not inform the kitchen when you order a dish. Instead, he will inform the kitchen once and for all after the order is finished. One of the biggest benefits of this is better performance.

function App() { const [count, setCount] = useState(0); const [flag, setFlag] = useState(false); function handleClick() { 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 }); } return ( <div> <button onClick={handleClick}>Next</button> <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1> </div> ); }Copy the code

This time it will render twice, but if you know how React works, it won’t make much of a difference. React: render (true), commit (false), react (false), render (true), commit (false), react (false)) So since it’s marked false, we don’t do the batch. If you’re interested, dig into the implementation details. Not just setTimeout, as Dan describes it, Updates inside of promises, setTimeout, native event handlers, Or any other event were not batched in React by default, so promise/setTimeout/ native event will not be used in batches. Let’s go to the code:

setTimeout(() => { setCount(c => c + 1); setFlag(f => ! f); // React will only re-render once at the end (that's batching!) }, 1000);Copy the code

The asynchronous task does the Automatic batch update. Of course, to enable this feature in version 18, we need to use Reactdom.createroot to mount our application. If we still use Reactdom.render, Automatic batching will not be enabled. Automatic batching looks good, but if I don’t want to use it in some situations, the official solution is also provided. Here is an example:

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 }Copy the code

React Work Group also discusses Automatic batching a lot, including the impact on class/hooks, here.

Automatic batching of multiple setStates is supported by blocking and concurrent modes prior to release 18. You can try it out. Last but not least, the unstable_batchedUpdates API. Before version 18, if we want to manually batch, we need to use it to implement, which will still be supported in version 18.

2.startTransition

This is a brand new API, and what it does is it makes our app interactions silky and improves the experience, so let’s start by understanding what kind of problem it’s trying to solve.

Official working group discussion describes a scene inside, is an input box, receives the user input, then go to filter the list item, the scene is very common, but there will be a performance implications, input the operation may trigger a lot of updates, lead to page caton, intuitive feelings to users is the input box has a point card, can not be real-time display of the input character, React’s concurrent rendering mode is designed to solve this priority problem. Unfortunately, it is still in the experimental stage, so we can’t use it in our work.

// Urgent: Show what was typed
setInputValue(input);

// Not urgent: Show the results
setSearchQuery(input);
Copy the code
import { startTransition } from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input);
});
Copy the code

Code snippet 1 is our common writing, the user input to update the input box status value real-time display input, and then to filter the list, setInputValue and setSearchQuery are executed at the same time; In code fragment 2, the startTransition API is used to wrap setSearchQuery in it and implement manual prioritization of rendering tasks. Then, the update of setInputValue is higher than setSearchQuery, so that the user’s input response can be guaranteed. In order to realize the silky experience, the official also compared it with setTimeout, which will not be introduced here, you can click here to see.

3.New Suspense SSR Architecture

Act 18 introduced new improvements to SSR performance by introducing a new API called pipeToNodeWritable that replaces renderToString and marks renderToNodeStream Deprecated. The official explanation for the changes is as follows:

renderToString: Keeps working (with limited Suspense support).
renderToNodeStream: Deprecated (with full Suspense support, but without streaming).
pipeToNodeWritable: New and recommended (with full Suspense support and streaming)
Copy the code

Two words to watch out for appear: In 16.6.0, girls are used to load Components asynchronously with React. Lazy, while streaming is used to load Components asynchronously with React Server Components. Now act18 has better support for both, so act18 SSR will allow users to see the interface faster and interact with it earlier. React18 SSR compared with the previous SSR, what advantages do you have? Let’s first look at the traditional SSR process:

On the server, fetch data for the entire app. Then, on the server, render the entire app to HTML and send it in the response. Then, on the client, load the JavaScript code for the entire app. Then, on the client, Connect the JavaScript logic to the server-generated HTML for the entire app (this is "Tells").Copy the code

The above four steps must be in strict accordance with the process step by step, like waterfall, which step is slow, if the process behind the blocks, so the user will need to endure longer white during the time, so if the above four steps to break up into small tasks to units, then finish the task can be presented to the user as soon as possible, This makes the experience naturally better, and is why Suspense and Streaming are being improved in Suspense by Act 18. Dan has more on this section here.

Incremental upgrade

React is more of a consideration than we are, and VUE is the same, offering a smooth and incremental upgrade strategy. React18, React16, react17, react18, react16, react17, react18, React16, React17, React18, React16, React17, React18, React16, React17, React18, React16, React17, React18, React16, React17

Community and React18 Working Group

React 18 Working Group was formed with the release of React18. Its functions are similar to those of the W3C Working Group. The React 18 Working Group acts as a bridge between the community and React18.

Release plan

React 18 Library Alpha (Available now)
React 18 Public Beta (Months)
React 18 RC (Months)
React 18 (2-4 weeks after RC)
Copy the code

The official launch plan, we wait and see.