Deprecated
This API will be removed in a future major version of React.
In React 18,unmountComponentAtNode was replaced byroot.unmount().
unmountComponentAtNode removes a mounted React component from the DOM.
unmountComponentAtNode(domNode)Reference
unmountComponentAtNode(domNode)
CallunmountComponentAtNode to remove a mounted React component from the DOM and clean up its event handlers and state.
import{unmountComponentAtNode}from'react-dom';
constdomNode =document.getElementById('root');
render(<App/>,domNode);
unmountComponentAtNode(domNode);Parameters
domNode: ADOM element. React will remove a mounted React component from this element.
Returns
unmountComponentAtNode returnstrue if a component was unmounted andfalse otherwise.
Usage
CallunmountComponentAtNode to remove amounted React component from abrowser DOM node and clean up its event handlers and state.
import{render,unmountComponentAtNode}from'react-dom';
importAppfrom'./App.js';
constrootNode =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';importAppfrom'./App.js';constdomNode =document.getElementById('root');document.getElementById('render').addEventListener('click',()=>{render(<App/>,domNode);});document.getElementById('unmount').addEventListener('click',()=>{unmountComponentAtNode(domNode);});