React.js Component Lifecycle - Unmounting


  • ComponentWillUnmount is the only method that executes in unmount phase.
  • Component enters into this phase when there is no matching in element tree for this component.
  • Just before the component gets removed from actual DOM, this method gets called.
  • Along with removal of this component from DOM tree, all children of this component also gets removed automatically.
  • Once component is removed from the DOM, it gets available for the garbage collection in React.
  • Cleanup activities can be done in this method. E.g. clear localstorage variables used in app, clear session, clean up charts, cleanup timers, cancel pending api requests etc.
componentWillUnmount(){
   this.resetSession(); //example method to clean data
}
  • Cleanup activities helps in improving performances, memory leakages and maintain security.
  • In latest release 16.4 +, three methods are marked as deprecated and renamed as well. These methods will be removed in next major release of React.js
    • componentWillReceiveProps changed to UNSAFE_componentWillReceiveProps . This method is implemented securely and statically with name getDerivedStateFromProps
    • componentWillMount changed to UNSAFE_componentWillMount. Code from this method should be moved to componentDidMount or constructor as per logic.
    • componentWillUpdate changed to UNSAFE_componentWillUpdate. Secure implementation is getSnapshotBeforeUpdate. If there is any value returned from this method then it will used as an argument in the next method i.e. componentDidUpdate.
    • If user closes browser then the componentWiIlUnmount will not complete.
    • componentWillUnmount does not have any argument. setState shold not be called from this method. This is a one-time call for the component. Purpose of this method is to destroy the side effects created by the component.
    • Once component is unmounted, we can’t use it again. Every time a new component gets created.
    • Also if there is no difference in virtual dom and actual dom, react can stop the update phase as well.

Updated on: 04-Sep-2019

279 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements