Pesquisa de site

javascript - Aviso de descontinuação: ReactDOM.render não é mais suportado no React 18

Eu recebo este erro toda vez que crio um novo aplicativo React:

Aviso: ReactDOM.render não é mais suportado no React 18. Use createRoot em vez disso. Até você mudar para a nova API, seu aplicativo se comportará como se estivesse rodando o React 17. Saiba mais: https://reactjs.org/link/switch-to-createroot

Como posso consertar isso?

Eu criei meu aplicativo React usando:

npx create-react-app my-app

Resposta #1

No seu arquivo index.js, altere para:

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();

Para TypeScript

Crédito da seção de comentários abaixo da resposta: Kibonge Murphy

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") as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Resposta #2

O React 18 foi lançado em 29 de março de 2022. ReactDOM.render foi descontinuado no React 18 e atualmente emite um aviso e funciona em um modo compatível.

Deprecações

Descontinuações

  • react-dom: ReactDOM.render foi descontinuado. Usá-lo irá gerar um aviso e executar seu aplicativo no modo React 17. :
  • react-dom: ReactDOM.hydrate foi descontinuado. Usá-lo irá gerar um aviso e executar seu aplicativo no modo React 17.
  • react-dom: ReactDOM.unmountComponentAtNode foi descontinuado.
  • react-dom: ReactDOM.renderSubtreeIntoContainer foi descontinuado.
  • react-dom/server: ReactDOMServer.renderToNodeStream foi descontinuado.

Para resolver isso, você pode reverter para uma versão anterior do React ou atualizar seu arquivo index.js para se alinhar à sintaxe do React 18.

Exemplo :

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>
);

Resposta #3

Em vez de:

import ReactDOM from 'react-dom'
ReactDom.render(<h1>Your App</h1>, document.getElementById('root'))

Usar :

import { createRoot } from 'react-dom/client'
createRoot(document.getElementById('root')).render(<h1>Your App</h1>)

Mais detalhes aqui

Resposta #4

Antes

import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

Depois

import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />);

Antes, no seu arquivo 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();

Altere como abaixo no seu arquivo 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();

Resposta #5

A API raiz legada com ReactDOM.render foi descontinuada no React 18 e substituída por uma nova API raiz usando createRoot. A raiz do seu app é o elemento DOM de nível superior que contém todos os seus componentes renderizados e geralmente é um <div> com um ID de root.

O React 18 ainda tem suporte para ReactDOM.render, então tecnicamente você não é obrigado a atualizar, mas não é possível saber por quanto tempo esse suporte vai durar.

Você pode encontrar muito mais informações sobre a diferença entre ReactDOM.render e createRoot em https://thelonecoder.dev/javascript/react-js/reactdom-render-vs-createroot/.

Para atualizar para a nova API raiz, altere seu arquivo index.js para algo como o seguinte:

import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

Artigos relacionados