Every component in React has a lifecycle, let’s learn about that in this post.
The components in React have a lifecycle, what it means is that from the component appearing on the DOM to getting removed from it, there is a defined flow. This is the lifecycle of a React component.
The lifecycle is divided into three phases,
- Mounting
- Updating
- Unmounting
Let’s start with the mounting phase,
Mounting
This phase of the lifecycle deals with getting the Component on the DOM for the first time.
The methods associated with this phase of the lifecycle are,
- constructor()
- getDerivedStateFromProps()
- render()
- componentDidMount()
These methods are invoked in the same order they are listed here.
Firstly, the constructor() of the component is called, it’s used to declare the state of the component or some other data related to the component.
Then, getDerivedStateFromProps() is called, it’s used to set the state of the component based on the props received from the parent component. The method takes two arguments, the state, and the props, and returns an object with changes to the state.
Then, the render() method is called, this method returns the actual JSX element which describes the view of the component.
Finally, the componentDidMount() method is called after the component is rendered on the DOM, it’s used to perform functions that require the component to be present on the DOM.
Let’s move to the next phase, that is updating.
Updating
This phase of the lifecycle deals with the updating of the component after being mounted on the DOM, so, the component updates when it’s state or props are changed.
The methods associated with this phase are,
- getDerivedStateFromProps()
- componentShouldUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
getDerivedStateFromProps() has the same function as mounting phase here too, to set the state of the component from the props.
Then, shouldComponentUpdate() is called, this just returns true or false. By default, it returns true, if you want to stop a component from updating, you should return false.
Then, render() is called, this serves the same purpose as in the mounting phase.
Then, getSnapshotBeforeUpdate() is called, this method gets state and props as parameters for you to check what the values of state and props were currently of the component,
Then finally, componentDidUpdate() is called after rendering the updated component to the DOM.
Let’s move to the final phase, that is unmounting.
Unmounting
This phase deals with the operations associated with the removal of the component from the DOM.
This phase has only one method, that is componentWillUnmount()
This method is called when the component is about to be removed from the DOM.
Now that you know the theory of the concept. One way you can try for yourself how this works is to define these methods in your app and console log from the methods to know about which are called when. This is the best way to understand the lifecycle of react components.
