What Are Lifecycle Methods and Why Do We Use Them in React?

React lifecycle methods play a significant role in building projects in React. If you have ever had trouble understanding and implementing them, don’t worry, you are not alone. Almost everyone who first started coding in React has run into situations where they were confused because of lifecycle methods. 

So, know that it is very normal now and then to take a step back and refresh your knowledge of lifecycle methods.

To begin, imagine React lifecycle methods as a series of occurrences that happen from the start of a React component, to its end. Every React component has a cycle of events similar to all living creatures on Earth. They are born, grow, and then die in the end. 

React lifecycles have three phases

1. Mounting – Component is born

2. Update – Component grows

3. Unmount – Component dies

For each phase, React.js renders a built-in method, named a lifecycle method, which maintains or controls the behavior of components within an application.

Common React Lifecycle Methods

You will use the common React lifecycle methods most of the time. In your first steps as a React developer, you should focus on learning those before moving to the uncommon lifecycle methods. Uncommon methods will only be useful in some specific cases that you will likely only encounter when you work on large applications.

render()

The render method is a required method within a class component in React. That’s why you will use it whenever working with classes. 

As you might guess, this method controls the rendering of your component to the UI. It is important to learn that this happens during the updating and mounting of your component.

See the picture below as an example of a simple render() method in React:

It is required by React that your render() be pure, with no side effects. This means that you should never change your component state within the render(). To modify the state you should always use other lifecycle methods, thus keeping the render() method clean. Also keeping your render pure and simple helps you maintain your app in the long run.

componentDidMount()‍

This method gets called right after the component is added into the DOM, through the render method. This method is called only one time in a lifecycle. This method is best used to make a network request to produce another rendering. 

However, remember that this rendering will happen before the browser can update the UI. This happens to ensure that the user doesn’t see any UI updates with this double rendering, which can cause performance issues.

The best practice recommended by the React community is to first assign states in the constructor(). React allows changing states within its lifecycle methods only for special cases like modals, or other similar concepts where a measure of the DOM node is needed before rendering something else that depends on its position.

componentDidUpdate()‍

This lifecycle method is called at the exact moment that the updating happens. Usually, this lifecycle method is used for updating the DOM in response to some state or prop changes. 

Similar to the previous method you can use setState(), but you should remember to put it in a condition that checks for prop or state changes from the previous state. If you use the setState incorrectly here it can lead to problems such as an infinite loop. So, you should use setState inside this method with caution.‍

componentWIllUnmount()‍

As you might guess by the name, this lifecycle method is used just before that particular component is destroyed and unmounted. This is the right spot to do any cleanup actions in your component. 

Also, keep in mind that with this method, you cannot modify the state because this particular component will not be re-rendered. In this lifecycle method, we can perform activities such as canceling API calls, as well as clearing caches or timers.

Other React Lifecycle Methods

Above, I've mentioned all the common React lifecycle methods. However, there are other lifecycle methods that React offers that are less commonly used. I’ve also included those and their uses below.

shouldComponentUpdate()

This lifecycle can be useful when, for some reason, you do not want React to render your current state. Every time we call setState() here the component re-renders. 

Moreover, this component usually is used to know if a particular component is not affected directly by the prop changes or the state. You should know that this method shouldn’t be overused. Additionally, it’s created only to optimize performance, so you are not allowed to update the state in this lifecycle method. Finally, relying on this method to prevent rendering your component can lead to unexpected bugs. 

Remember: This lifecycle method should always return a Boolean value(Should I re-render?).‍

getSnapShotBeforeUpdate()‍

This lifecycle method has only recently been introduced in the React world. This has taken the place of the previous lifecycle method componentWIllUpdate() and is called the moment before the DOM updates. The value returned from this lifecycle method is passed on to componentDidUpdate(). This particular method is barely used or not at all. A good case to use this method is during async rendering when you can use it to resize the window.

Conclusion

Lifecycle methods are an essential part of working in React. You should know that working with classes and understanding them gives you a significant advantage for building awesome applications.

Remember that 95% of the time you will use the most common lifecycle methods mentioned in the first part of this article. This doesn’t mean that you won’t use the other less common methods though. When your apps start to grow, you may find these less common methods very helpful in certain scenarios. 

Good luck and happy coding!