Uncategorized

Deprecation notice: ReactDOM.render is no longer supported in React 18

I get this error every time I create a new React App and I don’t know how to fix it:

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. Learn more: https://reactjs.org/link/switch-to-createroot

I created my react app using: npx create-react-app my-app

Answer:

React 18 shipped yesterday (March 29th). ReactDOM.render has been deprecated in React18 and currently issues a warning and runs in a compatible mode.

Deprecations

Deprecations

  • react-dom: ReactDOM.render has been deprecated. Using it will warn and run your app in React 17 mode.
  • react-dom: ReactDOM.hydrate has been deprecated. Using it will warn and run your app in React 17 mode.
  • react-dom: ReactDOM.unmountComponentAtNode has been deprecated.
  • react-dom: ReactDOM.renderSubtreeIntoContainer has been deprecated.
  • react-dom/server: ReactDOMServer.renderToNodeStream has been deprecated

To resolve you can either revert to a previous version of React or update your index.js file to align with the React 18 syntax.
Example:

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

import App from "./App";

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

root.render(

);