Fix - ReactDOM.render is no longer supported in React 18

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

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.

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.