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
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();
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>
);
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();