ReactDOM.render is no longer supported in React 18

avatar

Borislav Hadzhiev

Last updated: Oct 28, 2022

banner

Photo from Unsplash

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.

reactdom render no longer supported in react 18

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

index.js
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.

index.js
import {StrictMode} from 'react'; import {createRoot} from 'react-dom/client'; import App from './App'; // 👇️ IMPORTANT: use 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 createRoot() method takes the root element as a parameter and creates a React root.

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.

If removing Strict mode fixes your app, remove it during the upgrade and add it back (either at the top or for specific parts of your application) after you have fixed the issues it is pointing out.

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

shell
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.

App.test.js
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.

index.js
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.

index.js
// 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.

Conclusion #

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.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.