Understanding ReactJS Component Lifecycle
What is Lifecycle of Components in ReactJs ?
Just like everything else in the world, React components also have a lifecycle. They follow a cycle where the components are created (a mount on DOM), they grow when updated and then they die (unmount on DOM).
This entire process is called component lifecycle in React.
React follows different lifecycle methods at different phases of a component’s life. It automatically calls the responsible method according to the phase in which the component is being used.
React component lifecycle is divided into four phases, namely:
1. Initialization
2. Mounting
3. Updating
4. Unmounting
Let’s discuss each one of them in detail.
Component Lifecycle Method in React JS | React JS Tutorial for Beginners
Component Lifecycle Method in React JS | React JS Tutorial for Beginners
Initialization of Components in React
In this phase the React component starts its journey by setting up the state and the props. The process is accomplished inside the constructor method.
class Initialize extends React.Component {
constructor(props)
{
// Calling the constructor of
// Parent Class React.Component
super(props);
// initialization process
this.state = {
date : new Date(),
clickedStatus: false
};
}
Mounting of Components in React
In this phase the React component is created and the new component is added to the DOM. It is here that React follows a default procedure in the Naming Conventions of these predefined functions.
The functions containing “Will” represent before some specific phase and “Did” represents after the completion of that phase. The mounting phase consists of two such predefined functions:
There are three methods of mounting:
-
componentWillMount()
This method is used just before a component gets rendered into the DOM. The component gets mounted immediately after this. If you call setState() inside this method, the component will not re-render.
This setState should not be used to make API calls or changes in the data because the function is called before the render method. So, no updates can be made as it has not been mounted.
-
componentDidMount()
Unlike the first method discussed above, this method is called after the component gets mounted on the DOM. It is called once in a lifecycle. Just before the execution of this method, the render method is called. You can make API calls and update the state with the API response in this method.
Let’s understand these methods through an example.
class LifeCycle extends React.Component {
componentWillMount() {
console.log('Component will mount!')
}
componentDidMount() {
console.log('Component did mount!')
this.getList();
}
getList=()=>{
/*** method to make api call***
}
render() {
return (
Hello mounting methods!
);
}
}
Class Component Mounting Lifecycle Method in React JS | React JS Tutorial for Beginners
Class Component Mounting Lifecycle Method in React JS | React JS Tutorial for Beginners
Updating Components in React
The next phase is where the updating of the component takes place. Typically, a component will update when there’s a change in its props or state. These changes can occur either inside the component or via the backend and will trigger the render function again.
This phase in the React component lifecycle ensures that the latest version of the React component is displayed. The update phase needs to repeat itself again and again. Five methods that are followed in this phase are:
-
componentWillReceiveProps() Function
Whenever a component receives new props, this method is invoked. This function is Props exclusive and independent of States. For changing the state in response to prop updates, you need to compare this.props and nextProps. It will then use the this.setState() method to operate the state transition.
componentWillReceiveProps(newProps)
{
if (this.props !== newProps) {
console.log(" New Props have been assigned ");
// Use this.setState() to rerender the page.
}
}
Test your knowledge with a quick quiz!
______ method is called after the component gets mounted on the DOM.
Select the correct answer
Unmounting Phase Components in React
In the unmounting phase, the React component is removed from the DOM. This phase is the final stage in a component’s lifecycle. This marks the end of a component's lifecycle. There’s only one method to be followed in this phase.
componentWillUnmount()
You will execute this method just before you want to unmount the React component from the DOM This stage is required to clean up everything before the component is destroyed and unmounted forever.
The function also performs all the necessary cleanup related tasks such as invalidating timers, event listeners, cancelling network requests, or cleaning up DOM elements. Once a component instance is unmounted, you cannot mount it again.
class Container extends React.Component {
constructor(props) {
super(props);
this.state = {show: true};
}
delHeader = () => {
this.setState({show: false});
}
render() {
let myheader;
if (this.state.show) {
myheader = ;
};
return (
{myheader}
<button type="submit ">Delete Header</button>
);
}
}
class Child extends React.Component {
componentWillUnmount() {
alert("The component Header is about to unmount.");
}
render() {
return (
Hello World!
);
}
}
ReactDOM.render(, document.getElementById('root'));
Class Component Unmounting Lifecycle Method in React JS | React JS Tutorial for Beginners
Class Component Unmounting Lifecycle Method in React JS | React JS Tutorial for Beginners
Test your knowledge with a quick quiz!
You will execute _____ method just before you want to unmount the React component from the DOM.
Select the correct answer