In this article, we will learn about the lifecycle or life cycle of a component in React v16.3 +. Why v16.3 +? Because in this version React changed the Lifecycle, and some methods are no longer used.
You can see more at Component LifeCycle Changes .
Also, if you want to learn more about old Lifecycle, you can refer to the article ReactJs component lifecycle methods – A deep dive.
1. What are Lifecyle methods? Why is it important?
Everything that exists in this universe has its own life cycle. Like the law of life, everyone has to go through “Birth, aging, death” no one can avoid. Or as simple as the life cycle of a leaf.
Likewise React components are born, change when input is received, and at some point it will die. If we understand this life cycle, then we can control this component and will definitely help us produce better results, higher component performance.
Let’s say you have a video player app similar to Youtube. To make sure your application is great then you should consider using hardware like network, battery in your application in the most efficient way. If the user plays the video then switches to another application, your app needs to stop the video at the right time the user switches the app, then need to play the video again when the user returns to your app.
Thus, Lifecycle methods can be understood as methods that affect the life cycle of a component.
2. Stages in the Lifecycle
Lifecycle of a component is divided into 3 main phases:
- Mounting
- Updating
- Unmounting
2.1. Mounting
In React, mounting involves loading components onto the DOM. This stage contains the methods to handle when the component is initialized and when loaded on the DOM.
constructor
This is the method that calls first each time the component is initialized. This method only calls once. It is allowed to set up the initial values of the variables and the state. Normally, we would initialize the state and bind the functions here.
getDerivedStateFromProps
The purpose of this method is to synchronize the state vs props on which it depends. This method will be called after the constructor and will return an object to update the component’s state. If it returns null then no state will change. This is an alternative method for componentWillReceiveProps .
Note: Since the getDerivedStateFromProps method is a static method, it will not be able to use this . The input parameter of this method is the current props and state of the component.
render
This is a must-have method of React Component, because this method is used to prepare the element and to mount it on the browser DOM.
Note: The method is a pure function so it doesn’t cause any side effects like changing state.
componentDidMount
This method will be called immediately after the component has been mounted in the browser DOM. Direct interactions with the browser DOM or API calls should be done here.
2.2. Updating
This phase begins when the component begins to “appear” in the browser and develops by receiving new updates. There are two ways to update a component. It’s updating props from the parent component and updating the current state .
In this phase, the following methods will be executed sequentially.
getDerivedStateFromProps
Similar in stage Mounting .
shouldComponentUpdate
Does this method tell if the component should update or not? If the return value is true then the component will be re-rendered and vice versa. By default this method returns true.
Note: This is one of the identifying characteristics between a Normal Component and a Pure Component.
render
Similar in stage Mounting .
getSnapshotBeforeUpdate
This method is called after the Component is created and before it is updated from the virtual DOM into the real DOM. This method can use both the current and previous props and state. The value of this method returns is the 3rd parameter of the componentDidUpdate method.
Often times we use this method to synchronize between the current DOM and the updated DOM. For example, scroll position, audio / video, text-selection, …
Please refer to Dan: New commit phase lifecycles .
componentDidUpdate
The method is executed when the newly updated component has been updated in the DOM. The triggers that call the third library called at componentDidUpdate will be re-triggered here.
The case is most similar to using componentDidUpdate to keep the library or interface in sync every time it updates.
2.3. Unmounting
During this phase, the component will be unmounted from the DOM.
componentWillUnmount
This is the last method in the lifecycle. It is executed just before the component is removed from the DOM. We need to clean up everything related to the component.
3. Summary
Understanding the lifecycle in React helps us ensure we create “best” components. Besides, it helps us to understand how a component is and how to improve performance.
Hopefully in this article everyone can find interesting things.
Thank you. See you in the next articles.