What is the Lifecycle of Components?
Components are created and mounted on the DOM, grow by updating, and then die to unmount on DOM. This is referred to as a component lifecycle. There are different lifecycle methods that React provides at different phases of a component’s life.
The three phases are Mounting, Updating, and Unmounting.
Life Cycle Diagram :-
Mounting :
The following order when an instance of a component is being created and inserted into the DOM:
- constructor()
- static getDerivedStateFromProps()
- render()
- componentDidMount()
These methods are considered legacy and you should avoid them in new code:
- UNSAFE_componentWillMount()
Updating :
An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered:
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
These methods are considered legacy and you should avoid them in new code:
- UNSAFE_componentWillUpdate()
- UNSAFE_componentWillReceiveProps()
Unmounting :
This method is called when a component is being removed from the DOM:
- componentWillUnmount()
We will discuss this Briefly:
Mounting:
In this stage, the instance of a component is created and inserted into the DOM. It contains the following methods:
componentWillMount(): It is called immediately before a component gets rendered into the DOM. Here, when you call setState() inside this method, the component will not re-render.
componentDidMount(): This method is called immediately after a component gets rendered and placed on the DOM, and you can do any DOM querying operations.
render(): Each component defines this method and is responsible for returning a single root HTML node element. If you don’t want to display anything, you can return a null or false value.
Updating :
It is the next stage of the lifecycle of a react component. In this stage, we get new Props and change State. This phase also allows us to handle user interaction and communication with the components hierarchy. This phase aims to ensure that the component is displaying the latest version of itself. This phase repeats again and again. This phase contains the following methods:
componentWillReceiveProps(): This is invoked when a component receives new props. If you want to update the state in response to the prop changes, you should compare this.props and nextProps to perform state transition by using this.setState() method.
shouldComponentUpdate(): This is invoked when a component decides any changes/updates to the DOM and allows you to control the behavior of the component’s updating itself. If the method returns true, the component will update. Otherwise, it will skip updating.
componentWillUpdate(): This is invoked just before the component updating occurs, and you can not change the component state by invoking this.setState() method. It will not be invoked if the method shouldComponentUpdate() returns false.
render(): This is invoked to examine this.props and this.state, and it returns one of these types: React component elements, Arrays and fragments, Booleans or null, String and Number. If the method shouldComponentUpdate() returns false, the code inside render() will be called again to ensure that the component displays itself properly.
componentDidUpdate(): This is invoked immediately after the component updating occurs. Here, you can put any code inside that you want to execute once the updating occurs, and it is not called for the initial render.
Example:-
Unmounting :
It is the last stage of the react component lifecycle. It is invoked when a component instance is destroyed and unmounted from the DOM. This phase contains only one method:
componentWillUnmount(): This method is called immediately before a component is destroyed and unmounted permanently. It performs any necessary cleanup related tasks such as invalidating timers, event listeners, canceling network requests, or cleaning up DOM elements. If a component instance is unmounted, you cannot mount it again.
Example :
