Error “ReactDOM.render is no longer supported in React 18. Use createRoot instead” – How to fix?

If you don’t know how to fix the error “ReactDOM.render is no longer supported in React 18. Use createRoot instead”, don’t worry. Learn more about it with the explanation and examples below.

React 18

The Facebook-designed open-source JavaScript UI library known as React has gained popularity among front-end developers.

March 2022 marked the release of React 18. This release focuses on rendering engine updates and performance enhancements. The concurrent rendering APIs that will serve as the foundation for subsequent React features are laid out in React 18.

The React.js development community will benefit from exciting new features and updates as React 18 moves from alpha to beta. The main goal of every update is to improve and add features to third party libraries so that developers can maintain them.

The new “Concurrent rendering” mechanism in React 18, allows React to create multiple UI instances concurrently, helping to develop completely new features and enhancements for the platform. Even though this change mostly happens in the background, it opens up new ways to make applications run faster.

CreatRoot in Concurrent Mode

Concurrent Mode is a relatively impactful change to how React works and requires the root level node to pass through the concurrency engine. This mode is done by calling createRoot on the root of the application instead of just ReactDOM.render().

Code:

ReactDOM.createRoot(
  	document.getElementById('root')
).render(<App />);

What causes the error

Because in the latest update of React, which is React 18, the ReactDOM.render() method is no longer supported. Instead, you can use createRoot following the instructions below.

Syntax:

createRoot(container[, options]);

Parameter:

• container: Provided, create a React native and return the root.
• options: onRecoverableError, identifierPrefix.

How to fix this error?

Use ReactDOM.createRoot() in your index.js file

When run in React 18, the code below will cause the error “ReactDOM.render is no longer supported in React 18. Use createRoot instead”.

Code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
    <React.StrictMode>
      	<App />
    </React.StrictMode>,
    document.getElementById('root')
);

reportWebVitals();

We should correct the code in the index.js file to avoid the error.

Code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
      	<App />
    </React.StrictMode>
);

reportWebVitals();

The error will not occur again when you use createRoot according to the instructions above.

Upgrade your app to React 18

You can use the npm command or yarn command to upgrade.

npm

npm install react react-dom

yarn

yarn add react react-dom

Once you have upgraded to react 18, when initializing the program, React will automatically create the createRoot method in a new way and will avoid the error like in the article.

Summary

To summarize, this article shows you how to fix the error “ReactDOM.render is no longer supported in React 18. Use createRoot instead”. You can use ReactDOM.createRoot() in your index.js file or upgrade your app to React 18 to fix this problem.

Maybe you are interested:

• Module not found: Can’t resolve ‘popper.js’
• React refers to UMD global, but the current file is a module
• You cannot render a Router inside another Router

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs