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