The React development team provides a series of hooks we can tap into at each phase of the life cycle. These method hooks inform us of where the Component is in the life cycle and what we can and cannot do.

Each React.js component have three main parts of their life, called lifecycle. And each part have the magic function (callbacks) which will be called when their time will come.

Mounting – component is being inserted into the DOM

These methods are called when an instance of a component is being created and inserted into the DOM

• getInitialState – invoked before component is mounted
• componentWillMount – invoked immediately before mounting
• componentDidMount – invoked immediately after mounting

Updating – component is being re-rendered to determine if the DOM should be updated.

An update can be caused by changes to props or state. These methods are called when a component is being re-rendered:

• componentWillReceiveProps – invoked when already mounted component receives new props
• shouldComponentUpdate – invoked when component decides update the DOM
• componentWillUpdate – invoked before updating occurs
• componentDidUpdate – invoked after updating occurs

Unmounting – a component is being removed from the DOM

• componentWillUnmount – invoked before component destroyed. Clean up should go here.

Understanding the React Component Lifecycle

Of course we can go deeper and introduce more details about React Component Life Cycle and we will do that. In an ideal world, we wouldn’t use lifecycle methods. All our rendering issues would be controlled via state and props.

But it’s not an ideal world, and sometimes you need to exact a little more control over how and when your component is updating. To understand it clearly, bellow you can find some additional information about each stage of React Component Life Cycle.

Initialization

State Changes

Props Changes

Unmounting