How to Unmount a ReactJS Node
Apr 29, 2020 • 5 Minute Read
Introduction
The various elements of React pages are rendered into the DOM using the method render(), which is from the package react-dom and allows us to find a specific element from the DOM and render the respective component.
In the same way, the DOM element can also be identified and unmounted from the container. In this guide, we'll learn how to find a specific node and unmount it using React top-level API.
Find a Node in React DOM
Sometimes, you may need to find a specific DOM node from the actual browser DOM. React provides an API to do this called findDOMNode().
The findDOMNode() function is used to find the specific DOM element where the component is rendered. It will return the DOM node where the component is rendered, or if not, it will return “null” as a result.
The function findDOMNode takes one parameter and the argument should be the name of the component.
Below is the syntax for the function findDOMNode().
ReactDOM.findDOMNode(component)
To better understand, let's create one component that contains one text input and button. When the user clicks on the button, the input should be focused.
import React, { Component } from "react";
import { findDOMNode, render } from 'react-dom';
class FindNode extends Component {
constructor() {
super();
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
findDOMNode(this.refs.myinput).focus();
}
render() {
return (
<div>
<input type="text" ref="myinput" />
<input
type="button"
value="Click to focus input"
onClick={this.handleClick}
/>
</div>
);
}
}
export default FindNode;
In the above example, observe that there is one input with the ref as myinput, as well as a button with an event handler attached called this.handleClick.
For the input element to be focused after clicking the button, use the lines of code below.
handleClick() {
findDOMNode(this.refs.myinput).focus();
}
The function findDOMNode will find the matching element or component from the DOM for input to be focused.
This is how you can use the top-level API findDOMNode to find the DOM from the existing DOM structure using React.
Unmount a React Node
It's possible for a specific component to be removed from the DOM after completion of an operation. In that case, it is necessary to remove the node from the DOM;otherwise, it may turn into a performance drain.
React has a top-level API called unmountComponentAtNode() that removes a component from a specific container.
The function unmountComponentAtNode() takes an argument as a container from which the specific component should be removed.
Below is the basic syntax of the function unmountComponentAtNode().
ReactDOM.unmountComponentAtNode(component);
The argument component can be any component that is not rendered by React itself.
index.html
Define the <div> with id as root in the index.html file.
<div id="root"></div>
The above element can be unmounted by using the function unmountComponentAtNode().
import React, { Component } from "react";
import { unmountComponentAtNode, render } from "react-dom";
class UnmountNode extends Component {
constructor() {
super();
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
unmountComponentAtNode(document.getElementById('root'));
}
render() {
return (
<div>
<button onClick={this.handleClick}>Click to unmount</button>
</div>
);
}
}
export default UnmountNode;
The element to unmount is a <div> with the root as id property. Once the user clicks on the button, the applied code should look like this.
handleClick() {
unmountComponentAtNode(document.getElementById('root'));
}
When the handleClick() function triggers, it will search for the root as ID attached to any element in the existing DOM elements. If it’s found, the element will be removed from the DOM.
The preferred approach is to unmount any node from the DOM, but another approach is to hide a specific element from the DOM with the use of vanilla JavaScript, like this.
handleClick() {
var x = document.getElementById("root");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
The example uses vanilla JavaScript that gets the element from the DOM and changes its style property to either block or node based on the toggle action.
It’s always best to use the official API from React to unmount a component using unmountComponentAtNode(). This will give you a more effective result than the alternative option using vanilla JavaScript.
Conclusion
In this guide, we learned how to find a specific node and unmount the node from the container using the React high-level APIs.
There are a wide variety of APIs from the package react-dom to choose from to work with DOM elements to maintain effectiveness and app performance. I hope this guide will help you to dive into the React DOM.
