unmountComponentAtNode

Obsoleta

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

En React 18, unmountComponentAtNode fue reemplazado por root.unmount().

unmountComponentAtNode elimina un componente de React montado del DOM.

unmountComponentAtNode(domNode)

Referencia

unmountComponentAtNode(domNode)

Llama a unmountComponentAtNode para eliminar un componente de React montado del DOM y limpiar sus controladores de eventos y estado.

import { unmountComponentAtNode } from 'react-dom';

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

unmountComponentAtNode(domNode);

Ver más ejemplos abajo.

Parámetros

  • domNode: Un elemento DOM. React eliminará un componente de React montado de este elemento.

Devuelve

unmountComponentAtNode devuelve true si se desmontó un componente y false en caso contrario.


Uso

Llama a unmountComponentAtNode para eliminar un componente de React montado de un nodo DOM del navegador y limpiar sus controladores de eventos y estado.

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

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

// ...
unmountComponentAtNode(rootNode);

Eliminando una aplicación de React de un elemento DOM

En ocasiones, es posible que desees «añadir» React a una página existente o a una página que no está completamente escrita en React. En esos casos, es posible que necesites «detener» la aplicación de React eliminando toda la interfaz de usuario, el estado y los controladores de eventos del nodo DOM en el que se renderizó.

En este ejemplo, al hacer clic en «Renderizar aplicación de React» se renderizará una aplicación de React. Haz clic en «Desmontar aplicación de React» para destruirla:

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

const domNode = document.getElementById('root');

document.getElementById('render').addEventListener('click', () => {
  render(<App />, domNode);
});

document.getElementById('unmount').addEventListener('click', () => {
  unmountComponentAtNode(domNode);
});