Introduction to React lifecycle methods

React Lifecycle

React components has several methods or hooks you can override to execute actions. These are the life cycle methods. Each of the life cycle methods gets called in a specific order and at a specific time.

Here are the life cycle methods broken down in order and by their corresponding phase:

Mounting

When a React component instance is created and inserted in the DOM, the following methods are called:

  1. constructor
  2. componentWillMount()
  3. render()
  4. componentDidMount()

Updating

If props or state of a component changes for whatever reason, there’s an update of the component. This means that the component has to be re-rendered and calls the following methods:

  1. componentWillReceiveProps()
  2. shouldComponentUpdate()
  3. componentWillUpdate()
  4. render()
  5. componentDidUpdate()

Unmount

At some point our components will be removed from the DOM again. That process is called unmounting and it calls following method:

  1. componentWillUnmount()

The order of these methods is strict and called as defined above. Most of the time spends in the Updating phase and those methods gets called many times. The Mount and Unmount methods will only execute once.