How to fix ReactDOM.render is no longer supported in React 18

You may have noticed the following warning in the browser console if you just upgraded your react version to 18 or created an app using `create-react-app`:

Warning

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.

error-how-to-fix-reactdom-render-is-no-longer-supported-in-react-18-clue-mediator.jpg" alt="Error - ReactDOM.render is no longer supported in React 18 - Clue Mediator">

Error Warning - ReactDOM.render is no longer supported in React 18 - Clue Mediator

Checkout more articles on ReactJS

dom" title="Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’">Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’
scroll-in-react" title="Sticky element on a scroll in React">Sticky element on a scroll in React
AG Grid">How to add a loading in React AG Grid
Implement multi-languages in React

We'll look at why this warning emerges and how to remedy it in this post.

Version 18 of React is recently published. It has added the `createRoot` API in the current version, which is used to support new React capabilities.

The `createRoot` API will take the place of the previous version's `ReactDOM.render`. As a result, we've received a warning.

From:

import ReactDOM from 'react-dom';

ReactDOM.render(
  <react class="strictmode">
    <app>
  </app></react>,
  document.getElementById("root")
);

To:

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

const container = document.getElementById("root");
const root = createRoot(container);

root.render(
  <react class="strictmode">
    <app>
  </app></react>
);

The new code will be as follows:

index.js

import React from "react"
import { createRoot } from "react-dom/client"
import "./index.css"
import App from "./App"
import reportWebVitals from "./reportWebVitals"

const container = document.getElementById("root")
const root = createRoot(container)

root.render(
  <react class="strictmode">
    <app>
  </app></react>
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

Your problem should now be fixed, as your error should be gone.

That’s it for today.
Thank you for reading. Happy Coding..!! 🙂

How to fix ReactDOM.render is no longer supported in React 18

Categories

Tags