ReactDOM.render no longer supported. Use createRoot – Code Example

In this article I will provide you code to resolve Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. From React 18 ReactDOM.render() function is deprecated and createRoot() is used at its place.

Solution Code Example –

Replace this code –

import ReactDOM from 'react-dom'

ReactDom.render(<h1>Your App</h1>, document.getElementById('root'))

With this (if not using typescript) –

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

const container = document.getElementById('root');
const root = createRoot(container); 
root.render(<h1>Your App</h1>)

If you are using typescript –

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

const container = document.getElementById('root');
const root = createRoot(container!); 
root.render(<h1>Your App</h1>)