In this video we are going to learn about Lifecycle Methods.
React web apps are actually a collection of independent components.
which run, according to the interactions made with them.
Every React Component, has a lifecycle of its own, lifecycle of a component, can be defined as the series of methods that are invoked in different stages.
A React Component can go through mainly three stages Mounting,Updating and Unmounting.
Mounting: Mounting is the stage of rendering the JSX returned by the render method itself.
Updating: Updating is the stage when the state of a component is updated and the application is repainted.
Unmounting: Unmounting is the final step of the component lifecycle where the component is removed from the page.

All right Lets see how can we use the react lifecycle methods.
For that just switch to project and.
In previous videos we have create Employee commpent an Add employee component.
Now just open AddEmployee component and here add life cycle method.
So just write here.

componentDidMount(){ 
    console.log(\"Component DID MOUNT\"); 
}

componentDidMount is executed after the first render only on the client side.

Another method is componentdidupdate.

componentDidUpdate(prevProps, prevState) { 
    console.log('Component DID UPDATE!') 
}

componentDidUpdate is called just after rendering.

Ok, next method is componentWillUnmount.

componentWillUnmount() { 
    console.log('Component WILL UNMOUNT!') 
}

componentWillUnmount is called after the component is unmounted from the dom.
Now save all and lets check.
So switch to the browser and make visible the console.
So just right click and select inspect element.
Now click on console.
Now refresh the page.
You can see here the componentDidmount method called and If I add any text here you can see here componentDidUpdate method has been called.
Now check the componentWillUnmount method.
For that just add close button inside the component.
So just go to the App.js and here add a button.

<button>Close</button> 

Now Create a method for handling the close event.
So here just write.

handleFormClose=(e)=>{ 
   this.setState({ 
     formVisible:false. 
   });
}

Now inside the state add

state = {
    formVisibel:true
}

Alright now call this funciton from close button on click event.

<button onClick={this.handleFormClose}>Close</button> 

Now add the condition with AddEmployee.

{this.state.formVisible?<AddEmployee addEmployee={this.addEmployee} />:null} 

Now save all and lets check.
Switch to the browser and just refresh the page.
You can see here the component did mount method called.
If I add text here then component did update method is called and if I click on this close button then component Will Unmount method has been called.
So in this way can use react lifecycle methods.