Upgrading to React 18 on the client

[rickhanlonii]

Overview

For client apps, upgrading to React 18 is straightforward:

• Upgrade to the latest React 18 release
• Switch to the new root API

We anticipate this to take around a day, or up to a couple weeks if you optionally run production experiments.

Details

For most apps, that will mean updating your package.json to change React to the latest alpha, and then searching your codebase to replace this:

import { render } from 'react-dom';
render(<App />, container);

with this:

import { createRoot } from 'react-dom/client';

const root = createRoot(container);
root.render(<App />);

If you previously used hydrate, you'll switch to hydrateRoot.

See the this post for more details.

Testing

React 18 is a major version of React. As any major version will have, there are semantic changes that may impact your app, so we recommend thoroughly testing the upgrade as you did for React 16 and React 17.

If you have an ability to run production experiments, you may optionally choose to run an experiment that compares the new root API (which contains the semantic improvements) with the legacy behavior. To do that, we ship the legacy root API ReactDOM.render in React 18 (this will be removed in a future version).

Troubleshooting

If the app is significantly broken after switching to createRoot, see if you have <StrictMode> on. If you do, try removing it and see if that fixes it. If it does, a library you're using (or, less likely, you app code) is not compatible with Strict Effects (#19). We will be investigating issues like this and working with the ecosystem libraries to get them fixed, but it's a good idea to report it to the issue tracker if you can track it down to a specific broken library or component.

Feedback

Once you’ve tried it out, we’d love to hear success stories about your upgrade, or feedback on what went wrong.

Let us know in the comments below!