Is it necessary to call `unmountComponentAtNode` if the component's container is removed?
Yes, it is important to call unmountComponentAtNode()
because if you don't do this, none of the components below in the tree will know they have been unmounted.
User-defined components often do something in componentDidMount
that creates a reference to the tree from the global environment. For example, you may add a window
event handler (which isn't managed by React), a Redux store subscription, a setInterval
call, etc. All of this is fine and normal as long as these bindings are removed in componentWillUnmount
.
However, if you just remove the root from the DOM but never call unmountComponentAtNode
, React will have no idea the components in that tree need to be unmounted. Since their componentWillUnmount
never fires, those subscriptions stay, and prevent the whole tree from getting garbage collected.
So for all practical purposes you should always unmount the root if you're going to remove that container node. Otherwise you'll most likely get a memory leak—if not now, then later when some of your components (potentially deep in the tree, maybe even from third-party libraries) add subscriptions in their componentDidMount
.
Even though you called this.el.remove()
, you should still call the unmountComponentAtNode(this.el)
because unmountComponentAtNode
will clean up its event handlers and state, but the remove
method will not.
For example, Eventhough you have clicked to remove the div, you can still call it's click event handlers:
var tap = document.querySelector('.tap');
var other = document.querySelector('.other');
tap.addEventListener('click', function(e) {
console.log(tap.getAttribute('data-name') + ' has been clicked');
tap.remove();
});
other.addEventListener('click', function(e) {
tap.click();
});
<div class="tap" data-name="tap">First Click me to remove me</div>
<div class="other">Then Click me </div>