unmountComponentAtNode
unmountComponentAtNode
removes a mounted React component from the DOM.
unmountComponentAtNode(domNode)
Reference
unmountComponentAtNode(domNode)
Call unmountComponentAtNode
to remove a mounted React component from the DOM and clean up its event handlers and state.
import { unmountComponentAtNode } from 'react-dom';
const domNode = document.getElementById('root');
render(<App />, domNode);
unmountComponentAtNode(domNode);
Parameters
domNode
: A DOM element. React will remove a mounted React component from this element.
Returns
unmountComponentAtNode
returns true
if a component was unmounted and false
otherwise.
Usage
Call unmountComponentAtNode
to remove a mounted React component from a browser DOM node and clean up its event handlers and state.
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
Occasionally, you may want to âsprinkleâ React on an existing page, or a page that is not fully written in React. In those cases, you may need to âstopâ the React app, by removing all of the UI, state, and listeners from the DOM node it was rendered to.
In this example, clicking âRender React Appâ will render a React app. Click âUnmount React Appâ to destroy it:
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); });