When does a component unmount?

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 components. Does this mean that a component will be unmounted when you visit a route that doesn't have that component or whenever you visit any page that doesn't show the element that component produces? Thus, a component will need to be remounted every time it shows up on the DOM (outside of prop and state changes), correct?

Solution 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.

Solution 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