DEV Community

Cover image for ReactDOM.render is no longer supported in React 18.
Abhishek jaiswal
Abhishek jaiswal

Posted on

ReactDOM.render is no longer supported in React 18.

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
Image description

then you will get warning like this.
Image description
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
Image description

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'),
);
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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" />);
Enter fullscreen mode Exit fullscreen mode

for more information plase visit it's official website:
Reactjs

Discussion (0)