Recently I tried to use react to create an app. I got an unexpected 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. Below is a snippet of the error I got.
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-createrootI would like to share the steps that helped me to fix the 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.
Why 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 is seen?
The 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. ‘ is seen because the new version of React that is React 18 was shipped on March 29th, 2022; whereas ReactDOM.render was now deprecated in the new version of React 18. That is the reason why it is currently throwing a warning and runs in a compatible mode.
There are a lot more deprecations in the latest version of React that find about more about here.
A simple solution to fix this error is that, you can either go back to using an older version of React or update your index.js file in accordance with the React 18 syntax.
A detailed solution to fix the 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 is provided below:
How to fix 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?
To fix 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
You have two options, you can either go back to using an older version of React or update your index.js file in accordance with the React 18 syntax.
If you wish to index.js please copy and paste the following code in your index.js file.
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();
Conclusion
To fix the 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;
You have two options, you can either go back to using an older version of React or update your index.js file in accordance with the React 18 syntax.