Write in front:

This article comes from my own interest in React and I am very happy to hear about React18. However, after going through the Chinese community, in fact, they are all summative articles, and I am still in a state of confusion after reading them. Therefore, I went to read Discuss by myself and found that the original English text was very good and easy to understand. So I decided to translate them in the process of reading, but PERSONALLY I still want people to read the original, close to the community.

Series:

  1. What will be released in Act18? Automatic batch processing

Body:

Out of the box upgrades (capabilities gained by leveling up to 18) :

  1. Automactic batching for fewer renders.
  2. Suspense component SSR support.
  3. Fix Suspense components for strange behavior.

The above capabilities can be obtained by upgrading the React version to 18 and using the New Root API to mount the Root node.


Concurrent Features

Act18 is the first release to optionally provide the Concurrent feature and consists of the following apis:

  • StartTransition: Keep your interface interactive while your application is in the middle of a heavy state rendering process.
  • UseDeferredValue: Allows you to defer rendering less important parts of the interface.
  • <SuspenseList />: lets you determine the order in which components are rendered and displayed.
  • Streaming SSR with Selective Chocolate: Simple hydration scenarios help get your page into an interactive state faster.

You can experiment with these features on a small scale in your application without having to set StrictMode for the entire application.

Note: If you are familiar with Concurrent Mode, you may want to check out this article:What happened to concurrent “mode”


What about doing data fetching in Suspense?

There is some grounding work in Suspense for Release 18, but it doesn’t include best practices for fetching data yet. We think the complete solution should include Server Component and built-in Cache, but this is still a work in progress. So, we’ll probably see it in some version of 18.x, this time 18.0 won’t have this part of the feature.


How to upgrade?

Upgrading to React18 is the same regardless of whether you are using React16 or React17 (just change the render by node from reactdom.render to reactdom.createroot). After the upgrade, we recommend that you retest your application thoroughly so that you can begin to solve the problems caused by some “out-of-the-box improvements.”

For further upgrade details, move:

  • How to upgrade to React 18 on the client
  • How to upgrade to React 18 on the server

Update the plan

Install React18

To install the latest version of React18 Alpha, add the @alpha tag:

npm install react@alpha react-dom@alpha
Copy the code

We don’t have a specific release date, but here’s the expected release line:

  • Act18 Alpha (available now)
  • React18 Public Beta (months later)
  • Act18 RC (months later)
  • Act 18 (2-4 weeks after RC release)

Alpha

This is the first preview of Act18. We believe that by the time you see it, most of the features in Act18 will be stable. However, we still have some apis that need to be finalized. For example, useMutableSource and useOpaqueIdentifier. We’ll iterate on them over the next few days and gather feedback from the community to finalize them.

We will also continue to communicate with the popular tripartite pack writers in the community to make sure they get the latest support from Act18.

During the Alpha phase, we only want tripartite package maintainers in the community and members of the React team to try out React18 and give feedback.

Beta

When all of our features are complete, we will release the Act18 Beta. This release will contain all the new features and major changes that have been finalized, but there may still be some bugs that haven’t been discovered yet.

At this stage, we invite the larger community team to try out Act18 and provide feedback to collect and resolve the remaining bugs.

RC

Once we had all the features done and thought they were stable enough to ship, we switched to RC. In this release, all developers are welcome to try out the latest version and consider it ready to run in production.

Stable

Finally, we are ready for the final release

Release labels

When we reach a certain stage, the corresponding tag will follow the following format:

  • react@alpha: 18.0.0 - alpha - < sha > - < date >
  • react@beta: 18.0.0 - alpha - < sha > - < date >

Similar to our process in the experimental labeling phase, we will automatically release a SHA-based version with the latest changes in the evening. If you’re familiar with our Next process, our workflow is exactly the same, with more meaningful tags added.


Refs

  • Introducing React 18
  • Installing React 18 Alpha