Fix: ReactDOM.render Is No Longer Supported In React 18 2023

When you are creating new React App and getting below mentioned 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.

Then you are not alone. Most of the people getting this error.

React 18 comes on March 29, 2022 and ReactDOM.render has been deprecated in React 18 and currently issues a warning and runs in a compatible mode.

As above error indicates ReactDOM.render no longer works instead use createRoot.

When you install React 18, you will see below warning in the console:

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.

How to Fix “ReactDOM.render is no longer supported in React 18“?

To fix “ReactDOM.render is no longer supported in React 18” , either you have to replace ReactDOM.render with createRoot and you have to use React 18 supported code or Downgrade React 18 to React 17.

// Use this if React 17
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// Use this if React 18
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

ReactDom Depreciation

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.

Reference:

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
https://github.com/facebook/react/blob/main/CHANGELOG.md