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.
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.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.
- 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”.
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.
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 install react react-dom
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.
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
Name of the university: PTIT