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