Mastering React Class Component Life Cycle Methods: A Quick Guide

You have been waiting so eagerly to start learning React, now you are here and you are wondering what life cycle methods are. You are probably even wondering why the name Life Cycle Methods. Well, you are not alone, I too wondered and am still wondering by the time I am writing this article. Well, that's not totally true though, it took me two days of redundant learning with multiple breaks to finally get my head around it. Don't get me wrong, life cycle methods are not that difficult to understand. I plead guilty to being in a hurry to get ahead of myself and trust me, that's a terrible idea, I had to slow down to understand what they are really about. In this article, I will share with you some of the most commonly used life cycle methods in React.

First of all, you should not forget that Life Cycle methods are only applicable to React class components. Function components use something else that I am not going to talk about in this article. If you have friends or mentors working with React in the real world, they will tell you that React class components are not used that much for new projects. So why trouble yourself finding out about what's being phased out? Honestly speaking I asked myself the same question and even got tempted to skip some basics of class components but I did get far before beginning to wonder what's really going on. Enough with the small talk, you did not come here to read about me so let us get to why you are really reading about this.

A react component undergoes four main stages from the time it Is created to the time it is removed from the DOM. In a short list, these stages are:
a) *Initialization *
b) *Mounting *
c) *Updating *
d) *Unmounting *
In the same way, all living things are born to live, grow, and finally die, React components go through a life cycle of creation (Initialization), mounting, updating (growth), and finally unmounting (death).

Initialization:(Constructor())

In the initialization stage, the constructor of the class component is called with props as arguments. In react, the constructor is only responsible for two real purposes including declaration and initialization of states and binding of class methods to the class. A constructor is defined as follows

    constructor(props){
        super(props)
        this.state = {stateName: value}
        this.classMethod = this.doSomething.bind(this)

Looking at the code snippet above, we are always going to have to call super with props inside the parenthesis as parameters. For this reason, react has that covered for you, so it turns out you don't need a constructor at all. That makes life simpler. States can be defined outside of the constructor and methods do not have to be bound to the constructor. That's easy but don't take my word for it, make sure you find more about it here

Mounting (render())

Immediately after the constructor, has been invoked, React calls the render method of the class component. As it sounds, its purpose is to render the elements of the component to the DOM. All other React class components are options except for render. Render method mounts the component elements to the DOM but they won't be displayed on the screen until they are updated by another method that we are going to talk about next.

Updating (ComponentDidMount())

As you have just read above, the render method will mount the elements to the DOM but it will not display them until they are updated. This is where the componentDidMount method comes in. Some of the operations carried out in this stage are
-Updating states
-Fetching data from an external API using fetch
-Setting up timers and event listeners.

After relevant updates have been made, the render method is called once again (re-rendering) and the component is displayed on the screen. componentDidMount is called only once in the lifecycle of a component.
For more about componentDidMount go here

Advanced updates like network requests can be done after initial rendering in another method called componentDidUpdate. Note that this method is called only after the initial rendering (after the components have been displayed on the DOM). More about this lifecycle method in the docs

Unmounting (componentWillUnmont)

React is used to create dynamic websites where the components are always on and off the DOM on the user's demand. This is the point in the lifecycle of a component when cleaning is done. The componentWillUnmount method is called just before your component is removed from the screen. componentWillUnMounnt method reverses all the operations done in the mounting stage by componentDidMount method. The operations here may include canceling network requests, clearing timers and intervals, removing event listeners, etc.

This article is getting long and I feel that we have done a good job for an overview. Now if you want to find out more about this topic, here is a link to react component API definition by react team