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?
How To Solve Warning: ReactDOM.render is no longer supported in React 18 Error?
To Solve Warning: ReactDOM.render is no longer supported in React 18 Error 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.
Warning: ReactDOM.render is no longer supported in React 18
To Solve Warning: ReactDOM.render is no longer supported in React 18 Error 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. Now, Your error must be solved.
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