[Solved] Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead

Problem: I was trying to create a react app using -

npx create-react-app my_blog

But get this 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.

Solution:

From March 29th ReactDOM.render has been deprecated in React18. For this reason that warning message showing. They have also deprecated some others properly also. Like -

ReactDOM.hydrate, 

ReactDOM.unmountComponentAtNode, 

ReactDOM.renderSubtreeIntoContainer,

ReactDOMServer.renderToNodeStream.

To resolve you can move to a previous version of React or update your index.js file. Or change file according to React 18.

// 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" />);

Thank you for reading the article. If you face any problem please comment below.