When does a component unmount?

Question

My current understanding is that a component mounts onto the DOM when it is needed to be seen or when the route requires that component. It will also render its child compon

Answer 1

During the VirtualDOM Reconciliation if a component existed but no longer will, the component is considered unmounted and given a chance to clean up (via componentWillUnmount).

The reverse is true, during the reconciliation, if a component didn't exist, but now does, the component is considered ready to mount, and given a chance to prep itself (constructor / componentWillMount)

When tearing down a tree, old DOM nodes are destroyed. Component instances receive componentWillUnmount(). When building up a new tree, new DOM nodes are inserted into the DOM. Component instances receive componentWillMount() and then componentDidMount(). Any state associated with the old tree is lost.

https://facebook.github.io/react/docs/reconciliation.html

That particular page is well worth a read if you haven't already. It also explains why key is pretty important for repeated elements.

Answer 2

Component will be mounted on DOM only when it needs to be rendered. If you change the route or refresh the page or you want to render your component on specific events (eg onClick show/hide the component) then componentWillUnmount() will be called and component will be removed from DOM

Answer 3

Simply put, when a component has mounted, componentDidMount() is called, when the component is about to unmount, componentWillUnmount() is called. During re-rendering, if the component is neither to be mounted nor unmounted, neither of the aforementioned methods will be called. Instead, simply the changes made to the code of the component will be updated.

Please remember that most React apps are Single Page Apps which means they only update the existing page, they don't create any new page like page1.html, page2.html. What happens is that React unmounts unnecessary components from page1 and mounts necessary components described in page2 such that it looks like page2. But it doesn't really "leave page1.html" and take you to a whole new page called page2.html. All it does is simply pop and push components in one canvas or page. In other words, React "brings" page2 into page1. But the canvas remains the same(page1).

So, the answer to your question is, yes, a component will unmount and remount when its removed or added to the page.

Answer 4

I would say a component mount onto the DOM only if it's used via another component, including a Router component. Don't think of routers as special elements/things in React. They're like other components and they do a matching between current URL and the patterns they have to decide which component should be rendered via the render() function of Router. Whenever there is a change of URL, the router picks the new component to render and does rendering via render() function.