[Solved] ReactDOM.render is no longer supported in React 18

The issue ReactDOM.render is no longer supported in React 18 happens mainly in the React 18 version as the ReactDOM.render has been deprecated and runs in compatibility mode by providing a warning.

This article will look at what exactly ReactDOM.render is no longer supported in React 18 means and how to resolve this issue.

What is ReactDOM.render is no longer supported in React 18?

The React 18 was released on March 29th, 2022, and we need to be aware of several breaking changes and Deprecations.

• react-dom: ReactDOM.render has been deprecated. Using it will warn and run your app in React 17 mode.
• react-dom: ReactDOM.hydrate has been deprecated. Using it will warn and run your app in React 17 mode.
• react-dom: ReactDOM.unmountComponentAtNode has been deprecated.
• react-dom: ReactDOM.renderSubtreeIntoContainer has been deprecated.
• react-dom/server: ReactDOMServer.renderToNodeStream has been deprecated.

As you can see, one of them is the ReactDOM.render which has been deprecated in the React 18 release, and hence you get this warning message.

How to fix ReactDOM.render is no longer supported in React 18?

There are various ways to fix this issue, and the solutions are pretty straightforward. Let us take a look at each of these solutions in detail.

Solution 1: Replace render with createRoot in index.js

React 18 ships two root APIs, the Legacy Root API, and the New Root API.

• Legacy root API: This is the existing API called that has ReactDOM.render. It creates a root running in “legacy” mode, which works the same as React 17. Before release, we will add a warning to this API indicating that it’s deprecated and to switch to the New Root API.
• New root API: The new Root API is called with ReactDOM.createRoot. It creates a root running in React 18, which adds all of the improvements of React 18 and allows you to use concurrent features. It will be the root API moving forward.

Navigate to your index.js file and replace the import statement of render with createRoot and call the createRoot method to invoke root.render() as shown below.

// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />);

Solution 2: Use the new Root API

In React, a “root” is a pointer to the top-level data structure that React uses to track a tree to render. 

In the legacy API, the root was opaque to the user because we attached it to the DOM element and accessed it through the DOM node, never exposing it to the user:

import * as ReactDOM from 'react-dom';
import App from 'App';

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

// Initial render.
ReactDOM.render(<App tab="home" />, container);

// During an update, React would access
// the root of the DOM element.
ReactDOM.render(<App tab="profile" />, container);

In the New Root API, the caller creates a root and then calls render on it:

import * as ReactDOMClient from 'react-dom/client';
import App from 'App';

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

// Create a root.
const root = ReactDOMClient.createRoot(container);

// Initial render: Render an element to the root.
root.render(<App tab="home" />);

// During an update, there's no need to pass the container again.
root.render(<App tab="profile" />);

Solution 3: Downgrade to React 17

Downgrading React is not the recommended solution, but if you do not have time for the upgrade, you still have an option to downgrade to the older version of React 17 and resolve the issue.

Below command will downgrade to React 17 version.

npm install --save react@17.0.2 react-dom@17.0.2

Conclusion

The ReactDOM.render is no longer supported in React 18 occurs due to the deprecation of ReactDOM.render in the React 18 version. It will still run with a compatibility mode(Legacy Root API) by providing the warning message.

We can resolve the issue by switching to the new Root API. Here the call will create the root and then calls the render on it. We can just replacing the render with createRoot in index.js file as shown in the above code snippet.