- Instant help with your JavaScript coding problems

Fix the ReactDOM.render is no longer supported in React 18

React 18 was released on March 29, 2022. This update causes some old methods deprecated. One of these is the rendering of a React component. With React 18 your existing code will report the following error message on 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. Learn more: https://reactjs.org/link/switch-to-createroot

This is because:

React 18 introduces a new root API which provides better ergonomics for managing roots. The new root API also enables the new concurrent renderer, which allows you to opt-into concurrent features.

Solution: React 18 rendering

Instead of using render from react-dom you need to use createRoot from react-dom/client . The createRoot function replaces ReactDOM.render when the .render method is called and enables Concurrent Mode.

import {createRoot} from 'react-dom/client';

const container = document.getElementById('root');
const root = createRoot(container);

root.render(<App />);

Reference

React 18 upgrade guide

React concurrent mode

Replacing render with createRoot

Share "Fix the ReactDOM.render is no longer supported in React 18" with your friends