React Lifecycle Methods
The order of lifecycle methods being invoked.
React is a library that I’ve learned in my bootcamp times and I would like to learn more of its capabilities. One aspect I want to understand with complete confidence is lifecycle methods. The aim of this blog is to understand the order the lifecycle methods are being invoked. Feel free to fork my code to play with the lifecycle methods yourself either along with this blog or after reading.
List of common lifecycle methods
There are many lifecycle methods, but the most common ones are listed below. We will see which methods are invoked when depending on the application.
List of Common Lifecycle Methodsconstructor()
render()
componentDidMount()
componentDidUpdate()
componentWillUnmount()
Order of common lifecycle methods
I see the order as cycles within cycles. When something is being mounted the order will be constructor, render, componentDidMount. When something is being updated the order will be render, componentDidUpdate. When something is being unmounted, only componentWillUnmount will be invoked. The example following will show that, as well as this image, which is from the React documentation.
The example shown will have the ability to mount and unmount a square, along with buttons to change the colors of the square. This example will show when the constructor, render, componentDidMount, componentDidUpdate, componentWillUnmount are invoked.
Currently, the app looks like the following:
Then when the Mount Square button is clicked, the app will show the SquareComponent as seen below where the buttons will change the color of the square to the respective labels.
Image A is from the code:
The App component has a constructor that establishes the initial state as well as a render method that will show the Mount Square button, Unmount Square button, and the SquareComponent with the proper mount state. There is a lot more code, but the main concern is seeing the order of the lifecycle methods that are invoked.
In Image D, the console shows the lifecycle that are invoked. Notice in Image C at lines 7 and 18, there are console.logs to indicate when the lifecycle is being invoked. So we can see that the constructor was invoked first, then the render method. This will still be the case even if the methods are placed in a different order as in Image E below. The render method was placed before the constructor .
The console logs will show the same result as in Image D.
Let’s see more lifecycle methods that are invoked once we click on the Mount Square button. (Make sure to clear the console before clicking on the button for a cleaner console space.)
Code for SquareComponent.
The App component’s render method is invoked, then a few lifecycle methods in SquareComponent because of the Mount Square button being clicked and making the mount value true to then render the component.
SquareComponent's lifecycle methods are invoked in the order of constructor, render, then componentDidMount. The component needs to know the state, then it will render the state as needed. At this point, everything has been mounted on the DOM. Once that is successful, componentDidMount will then be invoked. A basic way to think about the usefulness about componentDidMount is you wait for all of the information to load on to the screen. When everything has loaded, now you can move forward with the next step, such as an API request. componentDidMount is helpful when fetch calls or particular methods are needed to work after everything has been loaded onto the DOM. Those methods will live within componentDidMount.
Let’s look at an additional method componentDidUpdate().
In Image H, you can see the render method for SquareComponent has be invoked again because there was a change, thus something new needed to be shown on the DOM. After the render, the componentDidUpdate lifecycle is invoked. This is because the state of the square’s color has been updated from black to blue because of the handleBlueClick method. The componentDidMount is not invoked because all of the information needed from the initial state had been rendered, basically all of the information has been mounted so there is no need to remount. Now, states are being updated instead of being mounted to the DOM. The last common lifecycle method is componentWillUnmount. Let’s see what that looks like.
When the Unmount Square button is clicked the colored square and buttons are cleared from the DOM. The lifecycle method componentWillUnmount is what allows the DOM to be cleared of the associated component to be free of information that is no longer needed.
Lifecycle methods take some time and code play to understand how the work. I highly encourage to take the time practice learning lifecycle methods. As mentioned before, feel free to fork my code and play with the order of placement for the lifecycle methods and console logs.
I found this list of videos helpful during my research and I hope they’re valuable for you too.
https://www.youtube.com/watch?v=m_mtV4YaI8c
https://www.youtube.com/watch?v=wWHG8uSdB10
https://www.youtube.com/watch?v=PEPgugfzDLk
https://www.youtube.com/watch?v=-Mug9j4sWFA&t=196s
https://www.youtube.com/watch?v=ISGaZrIJPEk&t=120s
