Try React 18 Alpha

Try React 18 Alpha

The React team recently released the new Alpha version of React 18. The main new feature in this new release is the concurrency feature to improve the performance of your React application.

Here are some notable features you can already try in React 18.

• New Reactdom.createroot () API replaces Reactdom.render ()
• Batch improvements to reduce the number of renders
• SSR support for components
• StartTransition API for non-emergency updates

To try React 18 Alpha in your project, you can install the @alpha version from NPM or Yarn.

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

If you use the Create React App to boot your React App, you may encounter an error caused by React-scripts that cannot resolve dependencies, as shown below.

Could not resolve dependency:
Copy the code

You can use the –force flag so that you can update the React and react-DOM libraries at the same time.

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

This tutorial will help you learn new features that already exist in React 18 Alpha, which I’ve been able to try out for myself.

ReactDOM. CreateRoot () API

The reactdom.createroot () method replaces the reactdom.render () method, which you usually use as an entry point for React applications.

This method was created to prevent React 18 updates from crashing your application. This new approach also allows you to create a production build using React 18 Alpha and compare performance with React 17.

Here is an example of how to use the createRoot() method.

import React from 'react';
Copy the code

const container = document.getElementById('root');
Copy the code

// Create a root.
Copy the code

// Render the top component to the root.
Copy the code

When you update to React 18, an error log will appear in the console telling you to switch to the new Root API when you use.render() as the entry point.

Only after you use the createRoot() method can you try React 18 functionality.

For more information, you can visit the createRoot discussion page here.

Automatic batch rendering improvements

React, as you probably already know, is a library that rerenders the UI for state changes.

For example, when you change the value of an arbitrary state from True to false, React should “React” by rerendering the UI, adjusting what you see on the screen based on the code you’ve written.

The following component will render a black or red title based on the color state value.

function App() {
Copy the code

  function handleClick() {
Copy the code

  return (
Copy the code

React immediately rerenders the user interface every time the setColor() method is executed.

Batch processing is the mechanism used by React, which lumps multiple state updates into a single re-render. With batch processing, you will avoid unnecessary rendering and optimize the rendering process.

Returning to the component example, let’s add another state that is updated when the handleClick() method is called.

function App() {
Copy the code

  return (
Copy the code

Without the batching mechanism, the above code will re-render the user interface twice each time the handleClick() method is called. First, update the color, and then update the number of clicks again.

However, the batch mechanism implemented in React 17 is inconsistent. Batch processing does not occur when you call the status update method from a callback.

For example, suppose you get data from the API before calling setColor() and setClickCount(). The batch mechanism will not start and React will re-render the UI twice.

function handleClick() { fetchUserData().then(() => { setCount(c => c + 1); // Causes a re-render! setFlag(f => ! f); // Causes a re-render! }); }Copy the code

function fetchUserDate(){
Copy the code

The same thing happens when you place the status update method inside the setTimeout() callback.

function handleClick() {
Copy the code

React 18 addresses this problem by improving the batch processing mechanism.

Batching is now triggered when more than one status update method is called from a promise, setTimeout, local event handler, or any other event that was not previously batched by React.

A discussion page for this feature can be found here.

SSR support for

Components are a feature of the React library that allows you to wait for some code to load by adding a rollback component in order to render it before it loads.

Here is a practical example.

<Suspense fallback={<LoadingSpinner />}>
Copy the code

You can read more about this in the React documentation.

React 18 supports functionality even if you use SSR to render your components on the server. This update allows you to wrap server-rendered components within components.

Any server-side component wrapped in it will first use the fallback component as an HTML stream. Once the component is ready, React sends new HTML bits to replace the fallback component.

For example, suppose you have one

<Layout>
Copy the code

When rendering from the server,

For in-depth explanations of SSR and Suspense, you can visit the GitHub discussion page below.

StartTransition API for non-emergency updates

The startTransition API is a new feature in React 18 designed to help your application stay responsive during status updates that require a lot of computing power to render the UI.

An example of such an update is when you create an input box that filters a list of data. Status updates require your React application to evaluate and display only data that matches the filter.

You might have two status update methods: one to handle changes in input values, and another to handle queries to filters.

// Set the input value state
Copy the code

As the number of elements to be filtered increases, so does the calculation of the filtered elements. This can cause your application to become slow or even freeze during calculations.

To mitigate this problem, React allows you to mark certain updates as transitions.

Interim updates are treated as non-emergency updates, allowing React to process emergency updates first.

Returning to this example, the update of the search query can be delayed by wrapping it in the startTransition API, as shown below.

import { startTransition } from 'react';
Copy the code

// Urgent: Show what was typed
Copy the code

// Mark any state updates inside as transitions
Copy the code

Updates wrapped in startTransition are interrupted when more important updates are triggered.

In the example above, the transition update of the search query is stopped when the user enters multiple characters in a row. This optimizes React re-rendering performance and eliminates unnecessary calculations from stale updates.

You can find more information about the startTransition API here.

conclusion

Although several features mentioned in the React 18 introduction page haven’t even been released yet (useDeferredValue and, for example)

React 18 Alpha has brought several interesting features to React that improve the concurrency of the library. You can try this by installing the @alpha build of the React and React-DOM libraries.

The React server component has also not been updated, but new concurrency features such as SSR support for Suspense and streaming HTML from the server may help implement the server component in the future.

The React 18 release schedule is as follows.

• Alpha version, which gathers feedback and supports the React working group (available today)
• Open the beta for others to try (at least for a few months after the Alpha release).
• The release candidate (RC) was built a few weeks after the public beta
• The stable version will come a few weeks after the RC version

Thank you for reading this article. You’re welcome to try React 18 for yourself, but be aware that there may be groundbreaking changes depending on how complex your React application is.

Develop React components with Bit and collaborate across projects

Whether it’s the React UI component, the React hook, the (upcoming) React server component, or simple JavaScript/ Node.js modules, bits can be used for standalone development, versioning, and collaboration.

Use it to build modular applications and design systems, write and deliver miniature front ends, or simply share components between applications.

Left: A separate React component is rendered in the Bit workspace UI. The picture on the right. View the dependency diagram for the shared React component in its remote scope.

Bit: Platform for modular networks

To learn more

• Build the React component library — the right way
• Independent components. New building blocks for the network

---

Try React 18 Alpha Originally published on Medium on Bits and Pieces, where people continue the conversation by highlighting and responding to the story.