Recibo este error cada vez que creo una nueva aplicación React y no sé cómo solucionarlo:
Advertencia: ReactDOM.render ya no es compatible con React 18. Utilice createRoot en su lugar. Hasta que cambie a la nueva API, su aplicación se comportará como si estuviera ejecutando React 17. Obtenga más información: https://reactjs.org/link/switch-to-createroot
Creé mi aplicación de reacción usando: npx create-react-app my-app
En su archivo index.js , cambie a:
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();React 18 enviado ayer (29 de marzo). ReactDOM.render ha quedado obsoleto en React18 y actualmente emite una advertencia y se ejecuta en un modo compatible.
Deprecaciones
react-dom : ReactDOM.render ha quedado obsoleto. Usarlo advertirá y ejecutará su aplicación en modo React 17.react-dom : ReactDOM.hydrate ha quedado obsoleto. Usarlo advertirá y ejecutará su aplicación en modo React 17.react-dom : ReactDOM.unmountComponentAtNode ha quedado obsoleto.react-dom : ReactDOM.renderSubtreeIntoContainer ha quedado obsoleto.react-dom/server : ReactDOMServer.renderToNodeStream ha quedado obsoleto.Para resolverlo, puede volver a una versión anterior de React o actualizar su archivo index.js para alinearlo con la sintaxis de React 18.
Ejemplo:
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( <StrictMode> <App /> </StrictMode> );Como indica su error, ReactDOM.render ya no es compatible. Así que usa el nuevo createRoot. Como puede ver en el código a continuación (que se extrajo de losdocumentos ), todo lo que tiene que hacer es reemplazar ReactDOM.render con createRoot.
// Before import { render } from 'react-dom'; const container = document.getElementById('app'); render(<App tab="home" />, container); // After import { createRoot } from 'react-dom/client'; const container = document.getElementById('app'); const root = createRoot(container); root.render(<App tab="home" />);