Deprecated

Esta API se eliminará en una futura versión mayor de React.

En React 18, render fue reemplazado por createRoot. Al usar render en React 18 se te advertirá que tu aplicación se comportará como si estuviera ejecutándose en React 17. Aprende más aquí.

render renderiza una pieza de JSX (‚Äúnodo de React‚ÄĚ) en un nodo del DOM del navegador.

render(reactNode, domNode, callback?)

Referencia

render(reactNode, domNode, callback?)

Utiliza render para mostrar un componente de React dentro de un elemento del DOM del navegador.

import { render } from 'react-dom';

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

React mostrará <App /> en el domNode, y se encargará de gestionar el DOM dentro de él.

Una aplicación totalmente construida con React tendrá usualmente una sola llamada a render con su componente raíz. Una página que utiliza React para partes de la página puede tener tantas llamadas a render como sean necesarias.

Mira m√°s ejemplos debajo.

Par√°metros

  • reactNode: Un nodo de React que quieras mostrar. Por lo general se trata de una pieza de JSX como <App />, pero tambi√©n puedes pasar un elemento de React construido con createElement(), un string, un n√ļmero, null, o undefined.

  • domNode: Un elemento del DOM. React mostrar√° el reactNode que pases dentro de este elemento del DOM. Desde este momento, React administrar√° el DOM dentro de domNode y lo actualizar√° cuando tu √°rbol de React cambie.

  • callback opcional: Una funci√≥n. Si se pasa, React la llamar√° luego de que tu componente sea colocado dentro del DOM.

Retorno

render Por lo general retorna null. Sin embargo, si el reactNode que pasas es un component de clase, entonces retornar√° una instancia de ese componente.

Advertencias

  • En React 18, render fue reemplazado por createRoot. Por favor usa createRoot para React 18 y versiones posteriores.

  • La primera vez que llamas a render, React limpiar√° todo el contenido HTML existente dentro del domNode antes de renderizar el componente de React dentro de este. Si tu domNode contiene HTML generado por React en el servidor o durante la compilaci√≥n, usa en su lugar hydrate(), ya que este adjunta los manejadores de eventos al HTML existente.

  • Si llamas a render en el mismo domNode m√°s de una vez, React actualizar√° el DOM seg√ļn sea necesario para reflejar el JSX m√°s reciente que hayas pasado. React decidir√° qu√© partes del DOM se pueden reutilizar y cu√°les necesitan ser recreadas ‚Äúhaciendo una comparaci√≥n‚ÄĚ con el √°rbol previamente renderizado. Llamar de nuevo a render en el mismo domNode es similar a llamar a la funci√≥n set en el componente ra√≠z: React evita actualizaciones innecesarias del DOM.

  • Si tu aplicaci√≥n est√° totalmente construida con React, es probable que tengas una sola llamada a render en tu aplicaci√≥n. (Si usas un framework, puede que haga esta llamada por ti.) Cuando quieras renderizar un fragmento de JSX en un lugar diferente del √°rbol del DOM que no sea hijo de tu componente (por ejemplo, un modal o un tooltip), usa createPortal en lugar de render.


Uso

Usa render para mostrar un componente de React dentro de un nodo DOM del navegador.

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

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

Renderiza el componente raíz

En aplicaciones totalmente construidas con React, por lo general s√≥lo realizar√°s esto una vez al inicio ‚ÄĒpara renderizar el componente ‚Äúra√≠z‚ÄĚ.

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

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

Generalmente no necesitas llamar a render de nuevo o llamarlo en otros lugares. En este punto, React manejará el DOM de tu aplicación. Si quieres actualizar la UI, tu componente puede hacerlo con el uso de estado.


Renderizar m√ļltiples ra√≠ces

Si tu página no está totalmente construida con React, llama a render por cada pieza de UI de nivel superior que esté administrada por 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')
);

Puedes destruir los √°rboles renderizados con unmountComponentAtNode().


Actualizar el √°rbol renderizado

Puedes llamar a render m√°s de una vez en el mismo nodo del DOM. Siempre y cuando la estructura del √°rbol del componente coincida con lo renderizado previamente, React preservar√° el estado. Nota como puedes escribir en el input, lo que significa que las repetidas llamadas a render cada segundo en este ejemplo no son destructivas:

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

No es muy com√ļn llamar a render varias veces. Por lo general lo que debes hacer es actualizar el estado dentro de uno de los componentes.