Changes in the React 18 Update – Part #1

At the beginning of June, the React team announced the plan for React 18.

Unlike the last version that didn’t bring many improvements, this version is full of new things and considerable changes.

Well! At this moment only the ALPHA version is available, but that’s enough to activate our curiosity and start exploring the upcoming news.

I’ve prepared a template for this series of articles where I will present the new React features.

Now, if you want to explore, you can access this repository and clone the React 18 ALPHA template.

In this series of articles we will see what changed in API Root, Strict Mode, Automatic Batching, Concurrent Mode (Concurrent Rendering), SSR streaming and Suspense, and what’s new with startTransition, useDeferredValue and SuspenseList.

API Root

The new API Root is the gateway to the new features.

It will be available alongside the legacy Root API, so applications can be migrated at their own pace.

If you want to follow this discussion from the React team, just access here.

The big news here is the availability of createRoot, which will change the syntax of how we start our applications.

Old way:

import { render } from "react-dom";
import { App } from "./App";

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

New way:

import { createRoot } from "react-dom";
import { App } from "./App";

const container = document.getElementById('root');

const root = createRoot(container);

root.render(<App />);

Notice? The root and the application are separated, which makes it easier to implement future updates.

Due to synchronization difficulties in server-side render applications, another change the Root API brought was eliminating the hydrate function from render, which now becomes a configuration option of createRoot.

Old way:

import { hydrate } from "react-dom";
import { App } from "./App";

hydrate(<App />, document.getElementById('root'))

New way:

import { createRoot } from "react-dom";
import { App } from "./App";

const container = document.getElementById('root');

const root = createRoot(container, {hydrate: true});

root.render(<App />);

Or there’s the hydrateRoot function option, which unlike createRoot, doesn’t require calling the render function.

import { hydrateRoot } from "react-dom";
import { App } from "./App";

const container = document.getElementById('root');

const root = hydrateRoot(container, <App user="Zappts" />);

You may have noticed that hydrateRoot, unlike createRoot, accepts a JSX component as the second parameter.

This happens because the initial rendering of the element tree on the client side must match the one on the server side.

Now, if you want to re-render the application, you can do it without creating a new container, just using the variable that was instantiated during creation.

//…
const root = hydrateRoot(container, <App culture="Sawabona" />);
/*
Action needed for update
*/
root.render(<App culture="Shikoba"/>);

After the React 18 release, applying this small change, we have access to many improvements and new features.

I will present them in the next articles.

I hope you’re as excited as I am for this update.

If you have any questions or want to know more about something I mentioned in this article, or just to say what you thought, don’t hesitate to write in the comments, it will be very important for me to bring relevant content.

Thank you very much for reading this far and see you in the next chapter.

This article was developed by Tadeu Agostini, front-end Web developer at Zappts.

Check out part #2 of this publication clicking here!