What’s Coming in React 18

React 18 looks promising: automatic state batching, new APIs and a new streaming server renderer—all battled-tested in advance. Let’s take a closer look.

React keeps getting better and better every time a new version is released. It’s the most-used JavaScript framework for building modern applications with an incredible and vast list of powerful features.

Recently, the React team announced a version plan for the release of the new React 18 version.

A working group was created in order to prepare the community for gradual adoption of new features in React 18. A panel of experts, developers, library authors and educators were invited to provide feedback, ask questions and collaborate. This means that the new React 18 version will be completely battle-tested and the community will be a part of it.

A lot of important features and API changes are coming in the next version of React. We’re going to cover what these features and changes are and look at how they are going to affect the way we currently build React applications.

React 18

The latest version of React that had a big impact on the community was the 16.8 version. This version came out with React Hooks, a powerful way of managing state in functional components and reusing code between them.

React 17 version didn’t bring too many API changes on the core of the JavaScript framework. It was more focused on improving the fundamentals and laying the groundwork for future updates.

On other hand, the React 18 version will bring many powerful features to improve the developer experience and help us to create amazing web experiences.

The new version of React looks promising. A lot of new features were announced, such as automatic state batching, new APIs and a new streaming server renderer. Let’s take a closer look.

Suspense

We know that server-side-rendered React apps are very popular nowadays. React frameworks such as Next.js have become a considerable and powerful solution for building server-side-rendered React apps, and the future looks brighter now since the support for server-side-rendering in React will increase in the new version.

SSR in React always happens in several steps:

• 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 “hydration”).

React 18 will support Suspense on the server and make server-side-rendered apps more interactive and insightful. Suspense allows you to break down your React application into smaller independent units that don’t block the rest of your application while loading.

<Suspense fallback={<Spinner />}>
  <Comments />
</Suspense>

It will result in a better and faster server-side-render experience and your users will be able to interact with your application much faster. These improvements are automatic, and you don’t need to write any special coordination code for them to work.

Concurrency

You might have heard before about the term concurrent mode in React. It’s a new mechanism that’s going to be added that will let React prepare many versions of the UI at the same time.

The concurrent mode in React is a set of features that are going to help us have more fluid and responsive UIs by allowing us to prevent render-blocking updates, and to start to have interruptible rendering, letting us prioritize render updates.

Concurrency mode will be opt-in in the new React 18 version, so you can choose whether to use it or not.

Automatic Batching

Batching is when React groups multiple state updates into a single re-render for better performance. Imagine that you have a simple function, and inside this function you’re going to change two different states.

const handleUpdate = {
  setLoading(false);
  setMessage('Updated!');
}

React automatically batches these two state updates into a single re-render. Batching the state updates results in a better performance throughout the application and prevents your component from rendering “half-finished” states.

React 18 will ship with automatic batching, which means that React will automatically batch state updates inside promises, setTimeout, native event handlers or any other event not already batched in React by default.

setTimeout(() => {
  setLoading(false);
  setMessage('Updated!');
  // React will only re-render once at the end (that's batching!)
}, 1000);

Root API

A root API in React is a pointer to the top-level data structure on your application that React uses to track a tree to render.

React has always had a root API, and in the new 18 version it’s going to be changed. The new version of React will be shipped with two different root APIs:

• Legacy root API: The existing root API is called ReactDOM.render. It will create a “legacy mode” root API when being used in a React 18 application and trigger a warning showing that this API is deprecated and you should move to the new root API.
• New root API: The new Root API is called ReactDOM.createRoot. It adds all the improvements of React 18 to your application and will allow you to use the concurrent mode features.

In the current versions of React, this is how we’re using the root API:

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'App';

ReactDOM.render(<App />, document.getElementById('root'));

The new root API, on other hand, will look a little bit different:

import ReactDOM from 'react-dom';
import App from 'App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

The new root API of React will look very similar to the “legacy” one. One of the biggest changes in the new root API is that the hydrate method will be gone and can now be passed as a prop to your top-level component. The render callback was also removed to give place to partial hydration. So now, if you need to use the render callback, you can do this instead:

import React from 'react';
import * as ReactDOM from 'react-dom';

const App = ({ callback }) => {
  // Callback will be called when the div is first created.
  return (
    <div ref={callback}>
    <h1>Hello World</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");

const root = ReactDOM.createRoot(rootElement);
root.render(<App callback={() => console.log("renderered")} />);

Conclusion

The community of React is very engaged in helping the React team build and release this new major version of React. The future of React looks promising and there will be features that we thought were impossible to have in a JavaScript framework years ago.

React 18 will unlock new possibilities and improve performance for React applications. The best part of it is that upgrading to the React 18 version be a smooth experience—minimal or no changes on your application, and you will notice that your code will “just work.”