React components are the reusable and independent bits of code that help build the user interface of a webpage. Each of these components has various lifecycle methods which are invoked at different stages of their lifecycle. There are 4 stages in the lifecycle of a react component.
React Component Lifecycle Techniques:
Initialization:
It is the first stage of a React Component’s lifecycle. The component is defined with the default props and its initial state in the constructor of the component. This phase occurs only once in the lifecycle before the creation of the component or any props from the parent is passed into it and consists of the following methods which are called in the same order.
- constructor(): This method is called before the component is mounted. This is only used for two purposes: Initializing local state by assigning an object to “this.state“ and binding the event handler methods to an instance. The following code snippet is a good example of its usage.
Note: The following methods only work with the “create-react-class” module and would throw errors with ES6 classes.
- getDefaultProps(): This method can be used to define the default value of “this.props”. Also, we need to initialize the createReactClass before writing anything else for using these methods. We can see an example of its usage below.
var createReactClass = require('create-react-class');
var Meeting = createReactClass({
getDefaultProps: function () {
return {
dialogue: 'Good Afternoon!'
};
},
}); |
- getInitialState(): This method can be used to define the default value of “this.state”. The code snippet below would display a greeting message “Hello!” when we click the button on the output webpage.
var createReactClass = require('create-react-class');
var Greeting = createReactClass({
getInitialState: function () {
return { message: 'Hello!' };
},
handleClick: function () {
alert(this.state.message);
},
render: function () {
return (
<button onClick={this.handleClick}>
Say hello
</button>
);
}
}); |
2. Mounting: It is the second stage of a React components’ lifecycle. In this stage, the component is mounted on the DOM and rendered for the first time on the webpage after the component has been initialized. It consists of the following methods which are called in the same order.
- getDerivedStateFromProps(): This method is invoked on the initial mount and any subsequent updates right before calling the render() method. To update the state, it returns an object and to update nothing, it returns null.
- render(): This method is responsible for returning a single root HTML node element defined in each component. When called, this method examines “this.props” and “this.state” and returns one of the following types:
- React elements
- Arrays and fragments
- Portals
- String and numbers
- Booleans or null
- componentDidMount(): This method is invoked immediately after the render() method. Now, we can perform any querying operations with the DOM.
Note: The method below is considered legacy and should be avoided in new code.
- componentWillMount(): This method is invoked right before the render() method. The component will not re-render if setState() is called inside this method.
componentWillMount() {
this.setState({ name: "Component will mount." });
}
3. Updating: It is the third stage of a React components’ lifecycle. In this stage, the state and props are updated following various user events like clicking on a button, pressing a certain key, etc. We can communicate with the hierarchy of the components and handle user interaction on the webpage. It allows us to ensure that the component is presenting its latest version as required, therefore, it is called multiple times. It consists of the following methods.
- shouldComponentUpdate(): This method is invoked before the render() method when new props or states are being received and the DOM is decided to be updated by the component. It can be used as performance optimization and helps control the behavior of the component’s updates. The component will update if this method returns true or skip the updating if it returns false.
- render(): This method is invoked again to examine “this.props” and “this.state”. The code inside the render() method will be invoked again if shouldComponentUpdate() returns false so that the component is displayed properly.
- getSnapshotBeforeUpdate(): This method is invoked just before the DOM is updated with the latest rendered output. It helps to capture information before it is potentially changed (like scroll position) from the DOM. It returns a snapshot value or null.
- componentDidUpdate(): This method is invoked immediately after the component is updated. We can use this method to execute a block of code once after the rendering. It is not called for the initial rendering.
Note: The methods below are considered legacy and should be avoided in new code.
- componentWillUpdate() – This method is invoked when new props or states are being received just before rendering of the component. It can be used to prepare before an update occurs. If shouldComponentUpdate() returns false, it will not be called. This method is not called for the initial render.
componentWillUpdate() {
this.setState({ name: "Component will update." });
}
- componentWillRecieveProps() – This method is invoked before new props are received by a mounted component. To perform state transition by using the “this.setState()” method, we should compare “this.props” and nextProps if we want to update the state in response to prop changes. React only calls this method if some of the components’ props are updated. It doesn’t call this method with initial props during the mounting stage.
componentWillReceiveProps(nextProps) {
console.log('componentWillReceiveProps', nextProps);
this.setState(nextProps);
}
4. Unmounting: It is the fourth and final stage of the React components’ lifecycle. It is invoked when the components’ instance is unmounted and destroyed from the DOM. This stage only contains a single method.
- componentWillUnmount(): This method is invoked immediately before a component is permanently unmounted and destroyed. It does the necessary cleanup tasks like event listeners, cleaning up DOM elements, invalidating timers, or canceling network requests. We cannot mount a component again after its instance is unmounted.
Steps to create the Project:
Step 1: Create the react application:
npx create-react-app myapp
Step 2: Change the directory:
cd myapp
Project Structure:
Project Structure
The updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: Let’s take a look at the code snippet below which displays a demonstration of most of the lifecycle methods we have read about so far.
import React from 'react';
import ReactDOM from 'react-dom';
class LifecycleStages extends React.Component { // Initialization stage
constructor(props) {
super(props);
this.state = { name: "GeeksForGeeks" };
}
// Mounting stage
static getDerivedStateFromProps(props, state) {
console.log("getDerivedStateFromProps()");
}
changeState() {
this.setState({ name: "Geek!" });
}
render() {
return (
<div>
<h2>React components' lifecycle methods</h2>
<p>Hello {this.state.name}</p>
<button onClick={this.changeState.bind(this)}>Don't Click.</button>
</div>
);
}
componentDidMount() {
console.log("componentDidMount()");
}
componentWillMount() {
console.log("componentDidMount()");
}
// Updating stage
shouldComponentUpdate(newProps, newState) {
console.log("shouldComponentUpdate()");
return true;
}
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log("getSnapshotBeforeUpdate()");
}
componentDidUpdate(prevProps, prevState) {
console.log("componentDidUpdate()");
}
// Unmounting stage
componentWillUnmount() {
console.log("Component will unmount.");
}
}export default LifecycleStages;
|
Step to run the application: Open the terminal and type the following command.
npm start
Output: