ReactDOM.render is no longer supported in React 18

# Table of Contents

1. ReactDOM.render is no longer supported in React 18
2. React Testing library - ReactDOM.render no longer supported in React 18

# ReactDOM.render is no longer supported in React 18

The error "ReactDOM.render is no longer supported in React 18. Use createRoot instead" occurs because the ReactDOM.render method has been deprecated.

To solve the error, create a root element and use the ReactDOMClient.render method instead.

Here is an example of how the error occurs in the index.js file of a React v18 app.

Copied!
import {StrictMode} from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// ⛔️ ReactDOM.render is no longer supported in React 18.
// Use createRoot instead. Until you switch to the new API,
// Your app will behave as if it's running React 17.
ReactDOM.render( // 👈️ deprecated starting React 18
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById('root'),
);

To solve the error, create a root element and use the ReactDOMClient.render method instead.

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

import App from './App';

// 👇️ IMPORTANT: use the correct ID of your root element
// This is the ID of the div in your index.html file
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// 👇️ if you use TypeScript, add non-null (!) assertion operator
// const root = createRoot(rootElement!);

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

The render() method of the react-dom package is considered legacy starting react-dom version 18.

The method is replaced with the createRoot() method that is exported from react-dom/client.

The root has a render() method that can be used to render a React element into the DOM. The root in React is a pointer to the top-level data structure that React uses to track a tree to render.

In the new API, we create a root and then call the render() method on it.

# Remove the strict mode wrapper

If your app doesn't work after updating to React 18, check whether it's wrapped in <StrictMode>. Strict mode was changed in React 18 and has more checks than it did in previous versions.

If the warning is still shown after making the changes, make sure to update your @testing-library/* versions as well.

Copied!
npm install --save-dev @testing-library/react@latest

npm install --save-dev @testing-library/jest-dom@latest

npm install --save-dev @testing-library/user-event@latest

Now you should be able to start your tests without getting the error.

Copied!
import {render, screen} from '@testing-library/react';
import App from './App';

test('renders react component', () => {
  render(<App />);
  const divElement = screen.getByText(/hello world/i);
  expect(divElement).toBeInTheDocument();
});

We had to update the version of the @testing-library/react package because version 13 adds support for React 18.

In version 13, React testing library drops support for React 17 and earlier and uses the new createRoot API by default.

An alternative solution to get rid of the warning is to revert your versions of the react and react-dom packages to an older version, e.g. 17.0.2 by running npm install react@17.0.2 react-dom@17.0.2, but this is not recommended.

You can read more about the breaking changes in React 18 in their Github release page, but chances are you won't be affected by the breaking changes and you'll take advantage of better performance by updating to React 18.

The ReactDOM.hydrate() method has also been deprecated in React.js 18 and has been replaced with hydrateRoot.

Copied!
import {hydrateRoot} from 'react-dom/client';

import App from './App';

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

// Create *and* render a root with hydration.
const root = hydrateRoot(rootElement, <App />);
// Unlike with createRoot, you don't need a separate root.render() call here

The unmountComponentAtNode() method has been replaced with root.unmount() in React 18.

Copied!
// Before
unmountComponentAtNode(container);

// After
root.unmount();

When the unmount() method is called on the root element, it is removed from the DOM.

The findDOMNode() method has also been deprecated in StrictMode starting React v 18.0.0.

You can read more about the changes in React 18.0 in this GitHub release page.

You can also check out the official How to Upgrade to React 18 Guide.

Note that there are some surprises around using strict mode. For example, you might notice that console.log() gets printed twice.

# React Testing library - ReactDOM.render no longer supported in React 18

To solve the react testing library error "ReactDOM.render is no longer supported in React 18", update the version of the react testing library by running npm i -D @testing-library/react@latest.

Version 13.0.0 of the package adds support for the new createRoot API.

Open your terminal in the root directory of your project and run the following commands:

Copied!
npm install --save-dev @testing-library/react@latest

npm install --save-dev @testing-library/jest-dom@latest

npm install --save-dev @testing-library/user-event@latest

Make sure to update the versions of all react testing library packages you are using.

Your index.js file should use the new createRoot API to render your application.

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

import App from './App';

// 👇️ IMPORTANT: div ID has to match with index.html
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// 👇️ If you use TypeScript, add non-null (!) assertion operator
// const root = createRoot(rootElement!);

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Now you should be able to start your tests without getting the error.

Copied!
import {render, screen} from '@testing-library/react';
import App from './App';

test('renders react component', () => {
  render(<App />);
  const divElement = screen.getByText(/hello world/i);
  expect(divElement).toBeInTheDocument();
});

We had to update the version of the @testing-library/react package because version 13 adds support for React 18.

In version 13, React testing library drops support for React 17 and earlier and uses the new createRoot API by default.

If you want to opt out of the change, you can set the legacyRoot property to true when rending, e.g. render(ui, {legacyRoot: true}). However, this is not recommended because the ReactDOM.render() method is deprecated starting React 18 and its usage triggers warnings in the console.

The render() method of the react-dom package is considered legacy starting react-dom version 18.

The method is replaced with the createRoot() method that is exported from react-dom/client.

The root has a render() method that can be used to render a React element into the DOM. The root in React is a pointer to the top-level data structure that React uses to track a tree to render.

In the new API, we create a root and then call the render() method on it.

If your app doesn't work after updating to React 18, check whether it's wrapped in <StrictMode>. Strict mode was changed in React 18 and has more checks than it did in previous versions.

An alternative solution to get rid of the warning is to revert your versions of the react and react-dom packages to an older version, e.g. 17.0.2 by running npm install react@17.0.2 react-dom@17.0.2, but this is not recommended.

You can read more about the breaking changes in React 18 in their Github release page, but chances are you won't be affected by the breaking changes and you'll take advantage of better performance by updating to React 18.

You can also check out the official How to Upgrade to React 18 Guide.