Deprecation notice: ReactDOM.render is no longer supported in React 18
JavascriptReactjsJavascript Problem Overview
I get this error every time I create a new React app:
> 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
How can I fix it?
I created my React app using:
npx create-react-app my-app
Javascript Solutions
Solution 1 - Javascript
In your file index.js, change to:
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
reportWebVitals();
Solution 2 - Javascript
React 18 shipped March 29th, 2022. ReactDOM.render
has been deprecated in React 18 and currently issues a warning and runs in a compatible mode.
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.
To resolve it, you can either revert to a previous version of React or update your index.js file to align with the React 18 syntax.
Example:
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
Solution 3 - Javascript
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" />);
Before in your index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
Change it like below into your index.js file:
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();
Solution 4 - Javascript
As you said, you created your React app using: npx create-react-app my-app.
- Your index.js must look like this after the command executes.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
- Your code after edits mentioned in the console
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);
reportWebVitals();
Solution 5 - Javascript
As your error states, ReactDOM.render is no longer supported. So use the new createRoot.
As you can see from the code below, (which was pulled from the documentation) all you have to do is replace ReactDOM.render with createRoot.
// 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 6 - Javascript
To provide more or less an equivalent to prior versions of React, I use this slightly condensed version of the above, still surrounding the <App>
with the <React.StrictMode>
.
Another reason I condense this is I never need access to a root variable, as the result, chaining statements together, and the whole file is just five lines of code:
import React from 'react';
import ReactDOM from "react-dom/client";
import './index.css';
import App from './App';
ReactDOM.createRoot(document.querySelector("#root")).render(<React.StrictMode><App /></React.StrictMode>);
(P.S.: Don't forget if you need the webvitals functionality to also add to the above code)
Solution 7 - Javascript
If your application is using React-Router, then the following code will work fine:
import { createRoot } from "react-dom/client";
const container = document.getElementById("root");
const root = createRoot(container);
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
It will work perfectly (with react-router).
Solution 8 - Javascript
In your index.js file:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
Use this before React version 18
// ReactDOM.render(
// <React.StrictMode>
// <App />
// </React.StrictMode>,
// document.getElementById("root")
// );
Use this in React version 18
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
Solution 9 - Javascript
This should do it:
import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App';
const root = createRoot(document.getElementById("root"))
root.render
(
<App />
)
Solution 10 - Javascript
Instead of:
import ReactDOM from 'react-dom'
ReactDom.render(<h1>Your App</h1>, document.getElementById('root'))
Use:
import { createRoot } from 'react-dom/client'
createRoot(document.getElementById('root')).render(<h1>Your App</h1>)
More details here