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

I am trying to run my reactjs project But Unfortunately, I am facing the following error “Warning: 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. Learn more” in ReactJS. We are going to Learn about All Possible Solutions So Lets Get Start with This Article.

How Warning: ReactDOM.render is no longer supported in React 18 Error Occurs?

Today, I am trying to run my reactjs project But Unfortunately, I am facing the following error:

Warning: 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. Learn more: https://reactjs.org/link/switch-to-createroot

So here I am writing all the possible solutions that I have tried to resolve this error.

How To Solve Warning: ReactDOM.render is no longer supported in React 18 Error?

Solution 1: update index.js with React 18 syntax

As Per React 18 changelog.md they said react-dom: ReactDOM.render has been deprecated. Using it will warn and run your app in React 17 mode.

As Per reactjs.org

React 18 introduces a new root API that provides better ergonomics for managing roots. The new root API also enables the new concurrent renderer, which allows you to opt into concurrent features.

// 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" />);

Now, Your error must be solved.

Solution 2: Change Your Index File

Just make one change in your index.js file

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);

root.render(
        <App />
        );

Solution 3: Downgrade to React 17

If You Don’t want to use React 18 Then Just downgrade to react 17 Just run this command in your terminal.

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

Now, your error must be gone and your problem is solved.

Summary

It’s all About this error. Hope We solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

• ImportError: cannot import name ‘get_current_traceback’ from ‘werkzeug.debug.tbtools’