Deprecated

Esta API será removida em uma futura versão principal do React.

No React 18, render foi substituído por createRoot. Usar render no React 18 irá avisar que seu aplicativo se comportará como se estivesse executando o React 17. Saiba mais aqui.

render renderiza uma peça de JSX (“nó React”) em um nó do DOM do navegador.

render(reactNode, domNode, callback?)

Referência

render(reactNode, domNode, callback?)

Chame render para exibir um componente React dentro de um elemento do DOM do navegador.

import { render } from 'react-dom';

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

O React exibirá <App /> no domNode e assumirá o controle do gerenciamento do DOM dentro dele.

Um aplicativo totalmente construído com o React geralmente terá apenas uma chamada render com seu componente raiz. Uma página que usa “pintadas” de React para partes da página pode ter quantas chamadas render forem necessárias.

Veja mais exemplos abaixo.

Parâmetros

  • reactNode: Um nó React que você deseja exibir. Isso geralmente será uma peça de JSX como <App />, mas você também pode passar um elemento React construído com createElement(), uma string, um número, null ou undefined.

  • domNode: Um elemento DOM. O React exibirá o reactNode que você passar dentro deste elemento DOM. A partir desse momento, o React gerenciará o DOM dentro do domNode e o atualizará quando sua árvore React mudar.

  • opcional callback: Uma função. Se passado, o React a chamará após seu componente ser colocado no DOM.

Retornos

render geralmente retorna null. No entanto, se o reactNode que você passar for um componente de classe, então retornará uma instância desse componente.

Ressalvas

  • No React 18, render foi substituído por createRoot. Por favor, use createRoot para o React 18 e posteriores.

  • A primeira vez que você chamar render, o React limpará todo o conteúdo HTML existente dentro do domNode antes de renderizar o componente React nele. Se seu domNode contém HTML gerado pelo React no servidor ou durante a construção, use hydrate() em vez disso, que anexa os manipuladores de eventos ao HTML existente.

  • Se você chamar render no mesmo domNode mais de uma vez, o React atualizará o DOM conforme necessário para refletir o último JSX que você passou. O React decidirá quais partes do DOM podem ser reutilizadas e quais precisam ser recriadas por meio da “correspondência” com a árvore previamente renderizada. Chamar render novamente no mesmo domNode é semelhante a chamar a função set no componente raiz: o React evita atualizações desnecessárias do DOM.

  • Se seu aplicativo for totalmente construído com o React, você provavelmente terá apenas uma chamada render em seu aplicativo. (Se você usar um framework, ele pode fazer essa chamada por você.) Quando você quiser renderizar uma peça de JSX em uma parte diferente da árvore DOM que não é filha do seu componente (por exemplo, um modal ou uma dica), use createPortal em vez de render.

Uso

Chame render para exibir um componente React dentro de um nó do DOM do navegador.

import { render } from 'react-dom';
import App from './App.js';

render(<App />, document.getElementById('root'));

Renderizando o componente raiz

Em aplicativos totalmente construídos com o React, você geralmente fará isso apenas uma vez na inicialização—para renderizar o componente “raiz”.

import './styles.css';
import { render } from 'react-dom';
import App from './App.js';

render(<App />, document.getElementById('root'));

Geralmente, você não deve precisar chamar render novamente ou chamá-lo em mais lugares. A partir desse ponto, o React estará gerenciando o DOM de sua aplicação. Para atualizar a interface do usuário, seus componentes irão usar estado.

Renderizando múltiplas raízes

Se sua página não for totalmente construída com o React, chame render para cada peça de UI de nível superior gerenciada pelo React.

import './styles.css';
import { render } from 'react-dom';
import { Comments, Navigation } from './Components.js';

render(
  <Navigation />,
  document.getElementById('navigation')
);

render(
  <Comments />,
  document.getElementById('comments')
);

Você pode destruir as árvores renderizadas com unmountComponentAtNode().

Atualizando a árvore renderizada

Você pode chamar render mais de uma vez no mesmo nó DOM. Desde que a estrutura da árvore de componentes corresponda ao que foi renderizado anteriormente, o React irá preservar o estado. Observe como você pode digitar na entrada, o que significa que as atualizações das chamadas de render repetidas a cada segundo não são destrutivas:

import { render } from 'react-dom';
import './styles.css';
import App from './App.js';

let i = 0;
setInterval(() => {
  render(
    <App counter={i} />,
    document.getElementById('root')
  );
  i++;
}, 1000);

É incomum chamar render várias vezes. Geralmente, você atualizará o estado dentro de seus componentes em vez disso.

PreviouspreloadModule
NextunmountComponentAtNode