Recibo este error cada vez que creo una nueva aplicación React:
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
¿Cómo puedo arreglarlo?
Creé mi aplicación React usando:
npx create-react-app my-appEn 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 se envió el 29 de marzo de 2022. ReactDOM.render obsoleto en React 18 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> );Antes
import { render } from 'react-dom'; const container = document.getElementById('app'); render(<App tab="home" />, container);Después
import { createRoot } from 'react-dom/client'; const container = document.getElementById('app'); const root = createRoot(container); root.render(<App tab="home" />);Antes en su archivo index.js :
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); reportWebVitals();Cámbielo como se muestra a continuación en su archivo index.js :
import React from 'react'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { createRoot } from 'react-dom/client'; const container = document.getElementById('root'); const root = createRoot(container); root.render(<React.StrictMode> <App /> </React.StrictMode>); reportWebVitals();