Are you facing difficulty in understanding the React Component Lifecycle methods? And how to implement them conveniently in your real-life react-driven application.
If this is the case then you don’t need to worry because every newbie React developer finds it difficult to grasp and implement component lifecycle methods. They just find it difficult to trace out the hiding under the hood process behinds these lifecycle methods.
If you are learning React then before proceeding further, it is strongly recommended to step back and make your hands dirty with the implementations of these component lifecycle methods inside your React app.
Before delving deeper into our main discussion, it is important to know the react compiler has discarded some of the old lifecycle methods in the latest version of React. As these methods were considered unsafe and infeasible to implement in the react app by the React compiler.
In this tutorial, we are not going to discuss these unsafe and discarded lifecycle methods because we are not here to discuss obsolete concepts as we don’t want to waste our readers’ precious time.
Overview of React Component Lifecycle Methods?
Technically speaking, the react component lifecycle method is a series of events that takes place from birth to the death of a react component.
Every component in React undergoes a lifecycle of events. Simply speaking, lifecycle methods go through a cycle of birth, growth, and death.
Now we’ll go through React component lifecycle methods individually, implement them, and discuss each of them.
React Component Lifecycle Methods
The render() method
The render() method is the most commonly-used react component lifecycle method. Without this method, no react component will work properly.
As the name ‘render’ suggests, this method renders your React component to an application UI. It always happens amidst the rendering and updating of your react component.
In this code example, you’ll see how the render method looks like in the React component:
class Tutorials extends React.Component{
render(){
return<div>Welcome to our website {this.props.websiteName}</div>
}
}
As it is quite evident from the above code example, render method returns JSX that will be displayed in the UI. In case if there is nothing to render for that particular react component then render method will return null.
Render() Method has to Pure
React necessitates the purity of the render method. Those functions that do have any noticeable side-effect are regarded as the pure function. Besides, the pure function keeps on giving the same output as long as the same input is given to it.
Aside from that, it is imperative to know you must have to keep your render method simple and clean because without state updates your react application becomes unable to manage.
Now we’ll head over to other most commonly-used lifecycle methods:
componentWillMount()
The execution of this react component lifecycle method takes place before rendering. Besides, it is executed on both the server and client-side.
componentDidMount()
Once the first rendering of UI on the client-side takes place, this lifecycle method executes automatically. Amidst the execution of this method, AJAX requests and DOM updates should happen. This method is highly effective for the intersection of ReactJS with other well-known JavaScript libraries and frameworks like AngularJS, VueJS, and NodeJS.
Besides, this method can be efficiently used for the execution of delayed functions such as setTimeout() or setInterval(). In common practice, we always use this method to update the state thereby we can trigger the execution of other lifecycle methods.
componentWillRecieveProps()
As soon as the React props receive any update and before the invocation of another render() method, this lifecycle method is automatically executed.
In our code example, we trigger the execution of this method from the IncrementNumber function when we update the state.
shouldComponentUpdate()
This lifecycle method will always return a true or false value. The value returned by this method relies on whether the React component will be updated or not. By default, it is always kept true.
You can simply return a false value if you are assured that your React component no longer needs to render after the up-gradation of state or props.
componentWillUpdate()
This lifecycle method is always invoked before the rendering.
componentDidUpdate()
Following the rendering of the application UI of the react component, this lifecycle method is automatically invoked.
componentWillUnmount()
As soon as the React component vanishes from the react application, this lifecycle method is invoked. In the following code example, we are unmounting our component from the main.js.
In the below code example, we’ve initialized the state in the constructor function. All the react component lifecycle methods we’ve discussed so far have been implemented in this code snippet:
App.js
import React, { Component } from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = { websiteName: "JQuery AZ" };
this.changeState = this.changeState.bind(this);
}
render() {
return (
<div>
<h1>Component Lifecycle Method of React</h1>
<h3>Hello {this.state.websiteName}</h3>
<button onClick={this.changeState}>Click Here!</button>
</div>
);
}
componentWillMount() {
console.log("Component Will MOUNT!");
}
componentDidMount() {
console.log("Component Did MOUNT!");
}
changeState() {
this.setState({ websiteName: "All!!- Its a great reactjs tutorial." });
}
componentWillReceiveProps(newProps) {
console.log("Component Will Recieve Props!");
}
shouldComponentUpdate(newProps, newState) {
return true;
}
componentWillUpdate(nextProps, nextState) {
console.log("Component Will UPDATE!");
}
componentDidUpdate(prevProps, prevState) {
console.log("Component Did UPDATE!");
}
componentWillUnmount() {
console.log("Component Will UNMOUNT!");
}
}
export default App;
Index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
Output:
Also:
