---
title: unmountComponentAtNode
---
In React 18, `unmountComponentAtNode` was replaced by [`root.unmount()`](/apis/react-dom/client/createRoot#root-unmount).
This API will be removed in a future major version of React.
`unmountComponentAtNode` removes a mounted React component from the DOM.
```js
unmountComponentAtNode(domNode)
```
---
## Reference {/*reference*/}
### `unmountComponentAtNode(domNode)` {/*unmountcomponentatnode*/}
In React 18, `unmountComponentAtNode` was replaced by [`root.unmount()`](/apis/react-dom/client/createRoot#root-unmount).
This API will be removed in a future major version of React.
Call `unmountComponentAtNode` to remove a mounted React component from the DOM and clean up its event handlers and state.
```js
const domNode = document.getElementById('root');
render(, domNode);
unmountComponentAtNode(domNode);
```
[See more examples below.](#usage)
#### Parameters {/*parameters*/}
* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will remove a mounted React component from this element.
#### Returns {/*returns*/}
`unmountComponentAtNode` returns `true` if a component was unmounted and `false` otherwise.
---
## Usage {/*usage*/}
Call `unmountComponentAtNode` to remove a mounted React component from a browser DOM node and clean up its event handlers and state.
```js [[1, 5, ""], [2, 5, "rootNode"], [2, 8, "rootNode"]]
import {render, unmountComponentAtNode} from 'react-dom';
import App from './App.js';
const rootNode = document.getElementById('root');
render(, rootNode);
// ...
unmountComponentAtNode(rootNode);
````
### Removing a React app from a DOM element {/*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:
```html index.html
My app
```
```js index.js active
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(, domNode);
});
document.getElementById('unmount').addEventListener('click', () => {
unmountComponentAtNode(domNode);
});
```
```js App.js
export default function App() {
return