Updated July 7, 2023
Introduction to React Lifecycle
As we know that components are basic building blocks of react, it is important to know about different stages involved in the lifecycle of a react component. Here we will see the different events and methods involved in the lifecycle of a component.
Phases of React Lifecycle
The lifecycle of components is defined as the sequence of methods invoked in different stages of a component.
The following are different phases involved in the lifecycle of a react component:
1. Initialization
This stage requires the developer to define properties and the initial state of the component. This is done in the constructor of the component.
The following code shows the initialization phase of a react component:
Code:
class Test extends React.Component {
constructor(props)
{
//Calling parent class constructor
super(props);
// Set initial state
this.state = { hello : "Test component!" };
}
}2. Mounting
Mounting is the phase of the react lifecycle that comes after the initialization is completed. Mounting occurs when the component is placed on the DOM container and the component is rendered on a webpage.
The mounting phase has two methods which are:
- compnentWillMount(): This method is called just before the component is placed on DOM that is this function gets called just before the render function is executed for the very first time.
- componentDidMount(): This method is called just after the component is placed on DOM that is this function gets called just after the render function is executed. For the very first time.
From the name of the above two methods we have understood the significance of keywords “Will” and “Did”. It is now clear that “Will” is used for before a particular event and “did” is used in case of after a particular event.
3. Updation
Updation is a phase where the state and properties populated at the time of initialization are changed if required after some user events.
The following are different functions invoked during updation phase :
- componentWillReceiveProps(): This function is independent of component state. This method is called before a component that is mounted on DOM gets its props reassigned. The function accepts new props which can be identical or different from original props. Mainly some pre-rendering checks can be applied in this step.
- shouldComponentUpdate(): Sometimes it is desirable not to show the new props on the output page. To achieve this, this method returns false, which means the newly rendered props should not be displayed on the output page.
- componentWillUpdate(): This function is called before a component is re-rendered that is this method is called once before the render function is executed post updation.
- componentDidUpdate(): This function is called after a component is re-rendered that is this method is called once after the render function is executed post updation.
4. Unmounting
This is the last phase in the component lifecycle and in this phase, a component is detached from the DOM container.
The following method falls under this phase:
- componentWillUnmount(): This function is invoked before a component is finally detached from the DOM container that is this method is called when a component is fully removed from the page and this shows the end of its lifecycle.
Example of React Lifecycle
Here we will see some code example showing the lifecycle of a react component.
Code:
class TestLifecycle extends React.Component {
constructor(props)
{
super(props);
this.state = { hello : "React World!" };
}
componentWillMount()
{
console.log("componentWillMount() called");
}
componentDidMount()
{
console.log("componentDidMount() called");
}
changeState()
{
this.setState({ hello : "Changed React World!" });
}
render()
{
return (
<div>
<h1>Edubca , Hello{ this.state.hello }</h1>
<h2>
<a onClick={this.changeState.bind(this)}>Click Here!</a>
</h2>
</div>);
}
shouldComponentUpdate(nextProps, nextState)
{
console.log("shouldComponentUpdate() called");
return true;
}
componentWillUpdate()
{
console.log("componentWillUpdate() called");
}
componentDidUpdate()
{
console.log("componentDidUpdate() called");
}
}
ReactDOM.render(
<TestLifecycle />,
document.getElementById('root'));When the above program is executed initially, it will show the below output on the webpage.
Output:
On clicking Click Here area, the text will change to the following:
Now on the console, you can see the sequence of methods called, console will show the below-attached output:
After clicking on the screen re-rendering will take place and will show the following in the console:
The above console output gives a clear understanding of react lifecycle methods invoked during the lifecycle of the react component.
Conclusion
After covering details of different phases involved in the react lifecycle, it is clear that there are lifecycle methods that get called automatically. These lifecycle methods at different phases of a component give us the freedom to perform customized events when a component is created, updated or destroyed. Moreover, these methods allow us to handle props and state changes as well as integrate third-party libraries easily.
Recommended Articles
This is a guide to the React Lifecycle. Here we discuss phases of react lifecycle such as initialization, mounting, updating, unmounting and example. You may also look at the following articles to learn more –
