[Solved] 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

Today I am trying to make a new reactjs project by using npx create-react-app my-app command But every time 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 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. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17 Error Occurs?

Today I am trying to make a new reactjs project by using npx create-react-app my-app command But every time 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. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17 Error?

Solution 1: Modify index.js

As React 18 Released ReactDOM.render has been deprecated in React 18 and That is Cause This Error. Also Following are also Deprecated.

• ReactDOM.render has been deprecated.
• ReactDOM.unmountComponentAtNode has been deprecated.
• ReactDOM.renderSubtreeIntoContainer has been deprecated.
• react-dom/server: ReactDOMServer.renderToNodeStream has been deprecated.
• ReactDOM.hydrate has been deprecated

To Resolve This Deprecation error Just Modify Your index.js to work with React 18 syntax. As Just Given Below.

import React from 'react';

import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container);

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

reportWebVitals();

Now, Your error must be solved. Thank You.

Solution 2: 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 3: 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 4: 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

• ‘TimeAgo’ cannot be used as a JSX component