How to fix ReactDOM.render is no longer supported in React 18
You may have noticed the following warning in the browser console if you just upgraded your react version to 18 or created an app using create-react-app:
Warning
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.
Checkout more articles on ReactJS
We’ll look at why this warning emerges and how to remedy it in this post.
Version 18 of React is recently published. It has added the createRoot API in the current version, which is used to support new React capabilities.
The createRoot API will take the place of the previous version’s ReactDOM.render. As a result, we’ve received a warning.
From:
1 2 3 4 5 6 7 8 | import ReactDOM from 'react-dom'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById("root") ); |
To:
1 2 3 4 5 6 7 8 9 10 | import { createRoot } from "react-dom/client"; const container = document.getElementById("root"); const root = createRoot(container); root.render( <React.StrictMode> <App /> </React.StrictMode> ); |
The new code will be as follows:
index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | import React from "react" import { createRoot } from "react-dom/client" import "./index.css" import App from "./App" import reportWebVitals from "./reportWebVitals" const container = document.getElementById("root") const root = createRoot(container) root.render( <React.StrictMode> <App /> </React.StrictMode> ) // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals() |
Your problem should now be fixed, as your error should be gone.
That’s it for today.
Thank you for reading. Happy Coding..!! 🙂
