1. React Life Cycle

ReactLifeCycle.js

/**
 * Initialization
 */


class ContraMusicPlayer extends ReactComponent {

	// Setting Initial State in constructor, Which can be change later by using this.setState method
	constructor(props){
		super(props);
		this.state = {
			volume: 70,
			status: 'pause'
		}
	}
}

ContraMusicPlayer.defaultProps = {
	theme: 'dark'
}

/**
 * Mounting
 */

// Step -1
// componentWillMount
// Usages: Setting intial state or props value, However we can also do this in constructor 
// componentWillMount execute only once in lifecyle which is before rendering 

// Step -2 
// render
// Mounts the component in browser, this is pure method, which gives always same output everytime we 
// provide the same input
// example: 

render(){
	<div>
		<PlayHeader>
			<Status />
			<VolumeBar />
			<SeekBar />
		</PlayHeader>
	</div>
}

// Step 3
// componentDidMount (This we can also think as Dom is ready like in jQuery)
// This is basically Hook Method, which execute after component redered into DOM 
// componentDidMount execute only once in life cycle, and It won't invoked again when props and 
// state changes
// Usages: componentDidMount basically used to when we want to access our DOM element, This method
// is usefull when we want to use some thirdparty library for dom manipulation like D3/Jquery ...

componentDidMount(){
	if(this.props.modules){
		this.props.modules.forEach(function(module){
			module(HighCharts);
		});

		this.chart = new HighCharts[this.props.type || "Chart"](
			this.props.container,
			this.props.options
		) 
	}
}

// Questions: Where we will Make API calls 
// Ans: API call should be made in componentDidMount methods always

/**
 *  Updation
 */

/**
 *  List of method that will be called when state of component will updated
 */

// updation phase journey start when component DOM redered in browser and 
// component can updated when props or state value changes

// shouldComponentUpdate
// Lets see when state of component changes using setState method
// When state updated the first hook which is invoked is shouldComponentUpdate which tells the 
// react whether component should re-rendered or not, If shouldComponentUpdate return false then 
// component won't re-rendered, otherwise it will re-rendered 
// Default return value from shouldComponentUpdate is true 
// Usages: shouldComponentUpdate is usefull when we don't want to re-renderes the coponent which is 
// doing heavy computaion/processing like computing 10000 prime number 
// 

shouldComponentUpdate(nextProps, nextState){
	let shouldUpdate = this.props.status !== nextProps.status;
	return shouldUpdate;
}

// componentWillUpdate
// This hook execute only when shouldComponentUpdate return true 
// This method is used to do the prepration for upcoming rendered something very similar we 
// do in componentWillMount


// render
// And then component gets rendered 

// componentDidUpdate
//  componentDidUpdate execute when component has been updated in DOM. 
//  Usaes: This method is used to trigger third-party library, At this stage have access of DOM element 


/**
 *  List of method that will be called when parents component sends new props
 */

// componentWillReceiveProps gets executed when the props have changed and is not first rendrered.
// Sometime state depends upon props so this is method where state can be synced

componentWillReceiveProps(nextProps){
	if(this.props.status !== nextProps.status){
		this.setState({
			state: nextProps.status
		})
	}
}

// Rest of the method will be

/**
 *  Unmounting 
 */

// In this phase, the component wis not needed and the component will get unmounted from the DOM. 
// the method which is called in this phase 
// 
// componentWillUnmount
// This method is last method in the lifecycle. This is executed just before the component gets
// removed from the DOM 
// Usages: In this method we do all the cleanup related to the components
// like on logout reseting user auth token and other information of user

componentWillUnmount(){
	this.charts.destroy();
	this.resetLocalStorage();
	this.clearSession();
}