unmountComponentAtNode

Deprecated

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

No React 18, unmountComponentAtNode foi substituído por root.unmount().

unmountComponentAtNode remove um componente React montado do DOM.

unmountComponentAtNode(domNode)

Reference

unmountComponentAtNode(domNode)

Chame unmountComponentAtNode para remover um componente React montado do DOM e limpar seus manipuladores de eventos e estado.

import { unmountComponentAtNode } from 'react-dom';

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

unmountComponentAtNode(domNode);

Veja mais exemplos abaixo.

Parameters

  • domNode: Um elemento DOM. O React removerá um componente React montado deste elemento.

Returns

unmountComponentAtNode retorna true se um componente foi desmontado e false caso contrário.


Usage

Chame unmountComponentAtNode para remover um componente React montado de um nó DOM do navegador e limpar seus manipuladores de eventos e estado.

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

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

// ...
unmountComponentAtNode(rootNode);

Removing a React app from a DOM element

Ocasionalmente, você pode querer “polvilhar” o React em uma página existente, ou uma página que não está totalmente escrita em React. Nesses casos, você pode precisar “parar” o aplicativo React, removendo toda a UI, estado e ouvintes do nó DOM em que foi renderizado.

Neste exemplo, clicar em “Render React App” irá renderizar um aplicativo React. Clique em “Unmount React App” para destruí-lo:

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