ReactDOM.render is no longer supported in React 18.

#javascript #webdev #react #devops

ReactDom.render is no longer supported in React latest update 18.0.0. UsecreateRoot instead untill you switch to the new API, your app will behave as it it's running React 17.
If you will try to run the ReactDom.render in index.js

then you will get warning like this.

A better alternative of this warning is change your dependency version of react and react-dom to some older version like 17.0.2 or some other which is better for you and for your project in package.json file inside the your project

or else you can use different method as well.
To solve the error, create a root element and use the ReactDOMClient.render method instead.

Make sure you are changing the index.js file


import {StrictMode} from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// ⛔️ 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.
ReactDOM.render( // 👈️ deprecated starting React 18
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById('root'),
);

To solve the error, create a root element and use the ReactDOMClient.render method instead.

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

import App from './App';

// 👇️ IMPORTANT: use correct ID of your root element
// this is the ID of the div in your index.html file
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// 👇️ if you use TypeScript, add non-null (!) assertion operator
// const root = createRoot(rootElement!);

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Let's see what's new in this React!!

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

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

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