End to End Technology Solutions
Today we are going to discuss React life cycle methods. What are the lifecycle methods and how these lifecycle methods work?
Let’s start by creating a basic component (say Hello world) which we all have created as a beginner.
class HelloWorld extends React.Component {
render() {
return <h1> Hello World </h1>
}
}
When this component is rendered and viewed on the browser. it will show “Hello World” in the browser. But did we notice something that this component goes through some phase before it is rendered or shown in the browser? This phase is known as “mounting” phase.
Mounting Phase: In this phase, a component is created and inserted into the DOM. This is the first phase-out of all the phase (will discuss as we proceed) our newly component goes through. Point to remember in this phase a component is created and is shown up in the browser. Now, this doesn’t stop here, as our app grows ours react component grows/change due to this comes to the next phase i.e Updating phase. The result of the component which is shown in the browser and is part of DOM will only change when there is a change in either “state” or “props”. This phase is the most interacting phase of any applicating during its lifecycle will discuss in detail below.
As any life cycle in react also the component is created(mounting) updated so definitely it has to die (when no longer needed) this is unmounting phase.
In this phase, the component dies or is removed from DOM. That’s all we need to know in basic in the component lifecycle.
Now its time to understand each phase and their methods in details.
-
Mounting Phase:
As we know in this phase component is created and inserted into the DOM. Following methods are called in order.
- constructor()
This is the very first method which is called in the mounting phase or before the component is mounted into the DOM. We usually initialise state or bind our handler methods within this method.
class HelloWorld extends React.Component {
constructor(props) {
super(props)
this.state = {
show: 0
}
}
}
Just remember we need not introduce any side effect in this method.
- static getDerivedStateFromProps()
getDerivedStateFromProps exists for only one purpose. It enables a component to update its internal state as the result of changes in props. This method takes state and props as an argument. This method is invoked just before the render method means just before the component is rendered to the DOM.
class HelloWorld extends React.Component {
static getDerivedStateFromProps(props, state) {
// write code here
}
}
Let’s understand this with an example. Consider a simple example of “Hello World” that we discussed above let’s re-write it with little modification.
class HelloWorld extends React.Component {
state ={
msg: 'Hello World'
}
render() {
return <h1> {msg} </h1>
}
}
What we expect the result of the above code.
“Hello World” in the browser.
Now if we add static getDerivedStateFromProps lifecycle method as below.
class HelloWorld extends React.Component {
state = {
msg: "Hello World"
}
static getDerivedStateFromProps(props, state) {
return {
msg: 'Hello World!!!!'
}
}
render(){
return <h1> {msg} </h1>
}
}
We know from the above discussion this method is called before the component is mounted to the DOM. And it returns an object, we update the state of the component just before the component is rendered.
Result of above code is “Hello World!!!!” not “Hello World”.
With this method Updating the state before rendering doesn’t mean we should go ahead and do this. This is one of the rarely used lifecycle methods.
- render()
This is the third method in the component lifecycle (in mounting phase). All the elements that we want to be a part of DOM are written inside the render method. Basically, we write JSX(syntical sugar of HTML) inside the render method.
class HelloWorld extends React.Component {
render() {
return (
<div>
<h1> Hurray! </h1>
</div>
)
}
}
But this is not restricted we can also return the string, number or arrays.
class HelloWorld extends React.Component {
render() {
return "HELLO !"
}
}
This render method is called every time when there is a change in state/props.
- componentDidMount()
When the render method is called. This method is invoked only once after the component is mounted into the DOM. This is the right place to perform side effects. Also if we need to make a network request this is the right place because this is the first method after the component is mounted in the DOM.
class HelloWorld extends React.Component {
componentDidMount() {
this.fetchListOfRequest() // where fetchListOfRequest initiates a network request.
}
}
This is all about the mounting phase lifecycle methods.
Now comes the next phase i.e updating phase.
-
Updating Phase :
When there is a change in either state or props of a react component that particular component re-render (as discussed above render method is executed) and the component is updated result in updating phase of the lifecycle.
Let’s discuss each method involved in this phase.
- static getDerivedStateFromProps()
This is the first method which is invoked in the updating phase. We have already discussed it in the mounting phase. All explanation remains the same so we will skip it. Just point to note this method is invoked both in mounting and updating phase.
- shouldComponentUpdate().
This method is invoked as soon as getDerivedStateFromProps is executed. We know, we want our component to re-render when there is a change in state/props. But, what if we want to have control over this behaviour that which component is to be re-render. Then this is the method to be used.
This lifecycle method returns true or false which control the component render process returning true means component gets re-render and returning false means component is not re-rendered. this lifecycle method is mostly used for performance optimisation as we all know component rendering is the heaviest operations out of all operation react performs.
This method needs to be handled very wisely else it may cause some uneven behaviour of our application.
- render()
After the shouldComponentUpdate method is called, render is called immediately depending upon what shouldComponentUpdate method return by default it returns true, and if it returns false the component is not re-rendered. There is not much to discuss as we already covered this in mounting phase.
- getSnapshotBeforeUpdate()
getSnapshotBeforeUpdate lifecycle method is called just after the render method is called. Like getDerivedStateStateFromProps, this method also used rarely. This lifecycle method fetches some information from DOM and can change it just after the update is made. But we need to remember, that the value fetched from DOM by getSnapshotBeforeUpdate will refer value just before the DOM is updated even the render method was called previously.
- componentDidUpdate()
This lifecycle method is invoked after getSnapshotbeforeUpdate is called. This method receives prev props and state as an argument unMounting Phase. This is the last phase where the component is removed from DOM or die this phase is used as a cleanup activity to remove the component which is no longer in use. Below are the following methods:
- componentWillUnmount()
The componentWillUnmount lifecycle method is invoked immediately before a component is unmounted and destroyed. This is the ideal place to perform any necessary cleanup such as clearing up timers, cancelling network requests, or cleaning up any subscriptions that were created in componentDidMount()
This is all-out different phases of component and its lifecycle method.