Borislav Hadzhiev
Fri Apr 01 2022·3 min read
Photo by Cristina Gottardi
The error "ReactDOM.render is no longer supported in React 18. Use createRoot
instead" occurs because the ReactDOM.render
method has been deprecated. To
solve the error, create a root element and use the ReactDOMClient.render
method instead.
Here is an example of how the error occurs in the index.js
file of a React v18
app.
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>, );
The render() method of the
react-dom
package is considered legacy starting react-dom
version 18.
The method is replaced with the
createRoot() method
that is exported from react-dom/client
.
createRoot()
method takes the root element as a parameter and creates a React root.The root has a render()
method that can be used to render a React element into
the DOM. The root in React is a pointer to the top-level data structure that
React uses to track a tree to render.
In the new API, we create a root and then call the render()
method on it.
If your app doesn't work after updating to React 18, check whether it's wrapped
in <StrictMode>
.
Strict mode was changed
in React 18 and has more checks than it did in previous versions.
An alternative solution to get rid of the warning is to revert your versions of
the react
and react-dom
packages to an older version, e.g. 17.0.2
by
running npm install react@17.0.2 react-dom@17.0.2
, but this is not
recommended.
You can read more about the breaking changes in React 18 in their Github release page, but chances are you won't be affected by the breaking changes and you'll take advantage of better performance by updating to React 18.
The ReactDOM.hydrate() method has also been deprecated in React.js 18 and has been replaced with hydrateRoot.
import {hydrateRoot} from 'react-dom/client'; import App from './App'; const rootElement = document.getElementById('root'); // Create *and* render a root with hydration. const root = hydrateRoot(rootElement, <App />); // Unlike with createRoot, you don't need a separate root.render() call here
The
unmountComponentAtNode()
method has been replaced with root.unmount()
in React 18.
// Before unmountComponentAtNode(container); // After root.unmount();
When the unmount()
method is called on the root element, it is removed from
the DOM.
The findDOMNode() method
has also been deprecated in StrictMode
starting React v 18.0.0.
You can read more about the changes in React 18.0 in this Github release page.
You can also check out the official How to Upgrade to React 18 Guide.