React JS Tutorial - Lifecycle Methods

In this tutorial, we will learn about lifecycle methods in React. A React web application is a collection of independent components that run according to the interactions made with them.

Every React component has its own lifecycle, which can be defined as the series of methods that are invoked at different stages. A React component can go through three main 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.

Now, let's see how we can use React lifecycle methods. Switch to your project and recall the Employee component and AddEmployee component we created in previous videos.

Open the AddEmployee component and add a lifecycle method. Write the following code:

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

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

Another method is componentDidUpdate. Write the following code:

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

The componentDidUpdate method is called just after rendering.

Next, we have the componentWillUnmount method. Write the following code:

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

The componentWillUnmount method is called after the component is unmounted from the DOM.

Save all the files and let's check the result. Switch to your browser and make the console visible by right-clicking and selecting Inspect Element. Then, click on the Console tab.

Refresh the page, and you should see that the componentDidMount method has been called. If you add any text, you should see that the componentDidUpdate method has been called.

Now, let's check the componentWillUnmount method. Add a close button inside the component by going to the App.js file and adding the following code:

<button>Close</button> 

Create a method for handling the close event. Write the following code:

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

Add the following code to the state:

state = {
    formVisibel:true
}

Call this function from the close button's onClick event. Write the following code:

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

Add a condition to the AddEmployee component. Write the following code:

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

Save all the files and let's check the result. Switch to your browser and refresh the page. You should see that the componentDidMount method has been called. If you add text, the componentDidUpdate method should be called, and if you click on the close button, the componentWillUnmount method should be called.

This demonstrates how to use React lifecycle methods. By following these steps, you can create efficient and effective components for your React application.