React Lifecycle Methods – A Deep Dive

Complete Explanation of React Lifecycle Methods

Most people face a lot of problems while understanding the lifecycle methods in React. If you are also facing the same problem now then don’t worry as you are not alone. I also faced many problems when I started coding my first React App and I ran into a situation where I had to step back and learn about all the React Lifecycle methods before I proceed further.

In this article, our main focus will be to help you to understand the lifecycle methods in React in a simple and easy way.

What are React lifecycle methods?

In React, every component goes through a lifecycle of events. You can think of them to be going through a cycle of birth, growth, and death. We can mainly classify the lifecycle methods into four phases :

• Mounting: The mounting lifecycle methods are called when an instance of a component is created and inserted into the DOM(Document Object Model). During the mounting phase, we have four lifecycle methods constructor, static getDerivedStateFromProps, render, and componentDidMount.
• Updating: The updating lifecycle method is called when a component is being re-rendered as a result of some changes to either the props or the state. During the updating phase, we have five lifecycle methods static getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate and componentDidUpdate.
• Unmounting: The unmounting lifecycle method is called when a component is removed from the DOM. During the unmounting phase, we have only one lifecycle method known as componentWillUnmount.
• Error Handling: When there is an error during the rendering of a component in a lifecycle method or in the constructor of a child component. During the error handling phase, we have only two lifecycle method static getDerivedStateFromError and componentDidCatch.

Common React Lifecycle Methods

1. render(): It is the most used lifecycle method in react. You will see it in all the class-based components. The reason for this is that the render() method is only required within a class-based component in React.

You can easily guess from its name that it handles the rendering of the component to the User Interface. It generally happens during the mounting and the updating of the component.

A simple example of the render() method is given below:

It is clearly visible from the example that the render() method returns the JSX which is displayed in the User Interface. When you have nothing to render for a component then the render method can also return a null.

In React, the render method should be pure with no side effects. Generally, the pure functions are those that cannot setState() inside the render() method.

2.componentDidMount(): Once your component has been mounted and is ready that is the time when the next lifecycle method componentDidMount() comes to play.

It is a good place for initiating the API calls if you need to load the data from a remote endpoint. componentDidMount() allows the use of setState and calling the setState inside the componentDidMount will update the state and cause another rendering but it will generally happen before the browser updates the UI. This is to make sure that the user is not able to see any UI updates with the double rendering.

Note: It is always advisable to use this pattern with proper caution as it leads to performance issues. Generally, the best practice is to pass all your states inside the constructor(). The reason behind allowing the setState() within this lifecycle method is for special cases like the tooltips, modal, etc.

3. componentDidUpdate(): In general the componentDidUpdate method is used for updating the DOM in response to the prop or state changes. You can also call setState() in this lifecycle method but always keep in mind that you need to wrap in a condition to check for state or prop changes from the previous state.

Let us understand it with the help of an example.

In the above example, we are comparing the current props with the previous props. This is generally for checking whether there has been a change in props from what it currently was before.

3. componentWillUnmount() : This lifecycle method is invoked immidiately when the component is unmounted or destroyed. It is the right spot if you need to do any cleanup activities.

We cannot call the setState() inside the componentWillUnmount()  as this component will never get re-rendered. The common cleanup activities which we can do inside this method are canceling the API calls, clearing cache in storage, and clearing timers.

4. constructor(): In a case where you don’t want to initialize a state or bind methods then you don’t need to implement a constructor. While implementing a constructor you should always call a super(props) before any other statement. In a situation when you fail to call the super(props) this.props will be undefined in the constructor which can lead to bugs.

There are typically two use cases of React Constructors:

• It is used for assigning a local state by assigning an object to this.state.
• It is also used for binding the event handler methods to an instance.

Example