Lifecycle of Components in ReactJs

React Js is a javascript library and components which we define in it are building blocks or reusable pieces of code that divides our us into many chunks. Well, every component has its lifecycle and methods which is run according to a time process, in reacts, methods which are having prefix as "will" are called right before something happens, and methods which are having prefix as "did" are called right after something happens.
 
To have a knowledge when a component is created and destroyed will enable us to perform various actions and code in the proper manner.There are mainly two phases in react, to start with, one is the initial phase where components are created and second where we initialize out state and props and render the DOM.
So, In Initial phase, we have been provided with two methods, i.e.:

a) getInitialState:-  This method allows us to set the initial values that are accessible inside the component via, "this.state".

getInitialState: function(){
    return { /* something here */};
}

b) getDefaultProps:- This method is used to define any default props (properties) that is accessible inside the component via, "this.props". 

 getDefaultProps: function(){
    return { /* something here */};
}

Two methods which are called in ReactJs, when initializing a component are ComponentWillMount and ComponentDidMount.

ComponentWillMount will be called before the render method is executed. Now the question arises what is render, well, render() is a pure method that means it doesn't modify component state, it returns the same result every time when it is invoked and doesn't directly interact with the browser.

render() {
  return [
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}

ComponentDidMount is called as soon as render method has been executed. We can perform dom manipulations and data fetching in this component. Any Dom interactions will always happens in this phase nor in render method.

The constructor for React Component is called before it is mounted.To call any component via constructor we should call super(props) before any statement, otherwise  "this.props" will come undefined in the constructor. When we have to initialize the state we can do it in a constructor, but don't call setState() from the constructor. The constructor is used to bind the event handlers to a class instance.

constructor(props) {
  super(props);
  this.state = {
    color: props.initialColor
  };
}

To transfer data in ReactJS we use states and props. Props are immutable and dumb that means they can only be passed from parent component to down and cannot be changed, whereas states can be modified via event handlers.When we change a state in reacts it will hook up to various methods like:-

shouldComponentUpdate  will always be called before the render method and enables to define whether the re-redinring is needed or can be skipped. A boolean value is returned from this method. Accessing the upcoming props or state changes can be detectable in this method that can easily lead to that if re-rendering is required or not.

 shouldComponentUpdate: function(nextProps, nextState){
    // return a boolean value
    return true;
}

componentWillUpdate is called once shouldComponentUpdate returns true. Any state change in this method are not allowed as this method is specifically to handle any upcoming update rather than trigger anything.

componentWillUpdate: function(nextProps, nextState){
    // perform any preparations for an upcoming update

}

componentDidUpdate is called after the render method, and DOM operations can be performed in this method.
Any change to prop will also hook up various methods:-

It is almost similar to state change lifecycle but only having one more method, i.e componentWillRecieveProps , it is called when props have been changed. State changes method will never trigger props changes method.

componentWillReceiveProps: function(nextProps) {
  this.setState({
    // set something 
  });
}

componentWillUnmount it is called when a component is removed from the DOM. It is used to perform clean up operations where we can remove timers and remove the values.
 
To conclude with, ReactJs has to perform two operations while component interaction i.e  parent to child and child to parent. We can perform parent to child transfer through props while to transfer data from child to parent we have been used different handlers so that they can modify the state value and data can flow in both the directions.