React Lifecycle methods
Tags: react, reactlifecycle, webdev, javascript
Published: 2022-07-23 14:03:00

**Are you unable to understand these lifecycle of component?**
So here I am. I will explain the concept of react lifecycle.

In this post, you'll learn more about the React component lifecycle and the different methods within each phase (for class-based components), focusing particularly on methods and hooks.

- - - 

## Lifecycle of Components
Each component in React has a lifecycle which you can monitor and manipulate during its three main phases.

The three phases are: `Mounting`, `Updating`, and `Unmounting`.

You can see the visual representation of these methods in below image.

![react-lifecycle-methods](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjq8awjc2gjx6ziiq6tb.jpg)

- - -

###Mounting Phase 
The **mounting phase** is when a new component is created and inserted into the DOM or, in other words, when the life of a component begins. This can only happen once, and is often called “*initial render*.”

React has four built-in methods that gets called, in this order, when mounting a component:
1. `constructor()`
2. `getDerivedStateFromProps()`
3. `render()`
4. `componentDidMount()`

The `render()` method is required and will always be called, the others are optional and will be called if we define them.

- - -

####1. constructor
The `constructor()` method is called before anything else, when the component is initiated, and it is the natural place to set up the initial state and other initial values.
#####Example
The `constructor` method is called, by React, every time you make a component:
```
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));
```

- - -

####2. getDerivedStateFromProps
The `getDerivedStateFromProps()` method is called right before rendering the element(s) in the DOM.

This is the natural place to set the state object based on the initial props.

In many cases, your component’s state will be *derivative* of its props. This is where the `getDerivedStateFromProps` method comes in. This method allows you to modify the `state` value with any `props` value. It's most useful for changes in props over time, and we’ll learn later that it’s also useful in the update phase.

It takes state as an argument, and returns an object with changes to the state.

The method `getDerivedStateFromProps` accepts two arguments: `props` and `state`, and returns an object, or `null` if no change is needed. These values are passed directly to the method, so there’s no need for it to have access to the instance of the class (or any other part of the class) and thus is considered a static method.

The example below starts with the favorite color being "red", but the `getDerivedStateFromProps()` method updates the favorite color based on the `favcol` attribute:
#####Example
The `getDerivedStateFromProps` method is called right before the render method:
```
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));
```

- - -

####3. render
The `render()` method is required, and is the method that actually outputs the HTML to the DOM.

#####Example
A simple component with a simple `render()` method:
```
class Header extends React.Component {
  render() {
    return (
      <h1>This is the content of the Header component</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));
```

- - -

####4. componentDidMount
The `componentDidMount()` method is called after the component is rendered.
`componentDidMount` is the last lifecycle method called in the mounting phase. It’s called right after the component is rendered or mounted to the DOM.

With this method, you're allowed to add side effects like sending network requests or updating the component's state. Additionally, the `componentDidMount` method allows you to make subscriptions like subscribing to the Redux store. You can also call the `this.setState` method right away; however this will cause a re-render as it kicks in the update phase, since the state has changed.
##### Note :
You need to be careful with `componentDidMount` because it may cause unnecessary re-renders.
#####Example
At first my favorite color is red, but give me a second, and it is yellow instead:
```
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  render() {
    return (
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));
```

- - -

###Updating Phase 
The **Updating phase** is triggered when component's props or state changes.
React has five built-in methods that gets called, in this order, when a component is updated:
1. `getDerivedStateFromProps()`
2. `shouldComponentUpdate()`
3. `render()`
4. `getSnapshotBeforeUpdate()`
5. `componentDidUpdate()`

The `render()` method is required and will always be called, the others are optional and will be called if you define them.

- - -

####1. getDerivedStateFromProps
In the update phase, the first lifecycle method called is `getDerivedStateFromProps`. This method is useful if you have updated `props` and you want to reflect that in the component's state.

For instance, a component’s `state` may depend on the value of its `props`. With `getDerivedStateFromProps`, before the component was even re-rendered, its state can reflect those changes and can be shown (if applicable) to the newly updated component.

This is still the natural place to set the `state` object based on the initial props.

The example below has a button that changes the favorite color to blue, but since the `getDerivedStateFromProps()` method is called, which updates the state with the color from the favcol attribute, the favorite color is still rendered as yellow:

#####Example
If the component gets updated, the `getDerivedStateFromProps()` method is called:
```
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  static getDerivedStateFromProps(props, state) {
    return {favoritecolor: props.favcol };
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header favcol="yellow"/>, document.getElementById('root'));
```

- - -

####2. shouldComponentUpdate
In the `shouldComponentUpdate()` method you can return a Boolean value that specifies whether React should continue with the rendering or not.

The default value is `true`.

The example below shows what happens when the `shouldComponentUpdate()` method returns `false`:
#####Example
Stop the component from rendering at any update:
```
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate() {
    return false;
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));
```
#####Example
Same example as above, but this time the shouldComponentUpdate() method returns true instead:
```
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  shouldComponentUpdate() {
    return true;
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));
```

- - -

####3. render
The `render()` method is of course called when a component gets updated, it has to re-render the HTML to the DOM, with the new changes.

The example below has a button that changes the favorite color to blue:
#####Example
Click the button to make a change in the component's state:
```
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  changeColor = () => {
    this.setState({favoritecolor: "blue"});
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <button type="button" onClick={this.changeColor}>Change color</button>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));
```

- - -

####4. getSnapshotBeforeUpdate
In the `getSnapshotBeforeUpdate()` method you have access to the `props` and `state` before the update, meaning that even after the update, you can check what the values were before the update.

If the `getSnapshotBeforeUpdate()` method is present, you should also include the `componentDidUpdate()` method, otherwise you will get an error.

The example below might seem complicated, but all it does is this:

When the component is mounting it is rendered with the favorite color "red".

When the component has been mounted, a timer changes the state, and after one second, the favorite color becomes "yellow".

This action triggers the *update* phase, and since this component has a `getSnapshotBeforeUpdate()` method, this method is executed, and writes a message to the empty DIV1 element.

Then the `componentDidUpdate()` method is executed and writes a message in the empty DIV2 element:

#####Example
Use the `getSnapshotBeforeUpdate()` method to find out what the `state` object looked like before the update:
```
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    document.getElementById("div1").innerHTML =
    "Before the update, the favorite was " + prevState.favoritecolor;
  }
  componentDidUpdate() {
    document.getElementById("div2").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
      <div>
        <h1>My Favorite Color is {this.state.favoritecolor}</h1>
        <div id="div1"></div>
        <div id="div2"></div>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));
```

- - -

####5. componentDidUpdate
The `componentDidUpdate` method is called after the component is updated in the DOM.

The example below might seem complicated, but all it does is this:

When the component is mounting it is rendered with the favorite color "red".

When the component has been mounted, a timer changes the state, and the color becomes "yellow".

This action triggers the update phase, and since this component has a `componentDidUpdate` method, this method is executed and writes a message in the empty DIV element:

#####Example
The `componentDidUpdate` method is called after the update has been rendered in the DOM:
```
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {favoritecolor: "red"};
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({favoritecolor: "yellow"})
    }, 1000)
  }
  componentDidUpdate() {
    document.getElementById("mydiv").innerHTML =
    "The updated favorite is " + this.state.favoritecolor;
  }
  render() {
    return (
      <div>
      <h1>My Favorite Color is {this.state.favoritecolor}</h1>
      <div id="mydiv"></div>
      </div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('root'));
```

- - -
###Unmounting Phase
The **unmounting phase** is the third and final phase of a React component. At this phase, the component is removed from the DOM. Unmounting only has one lifecycle method involved: `componentWillUnmount`.

- - -

####componentWillUnmount
`componentWillUnmount` is invoked right before the component is unmounted or removed from the DOM. It’s meant for any necessary clean up of the component, like unsubscribing to any subscriptions (i.e., Redux) or canceling any network requests. Once this method is done executing, the component will be destroyed.
#####Example
The `componentWillUnmount` method is called when the component is about to be removed from the DOM.
```
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 = <Child />;
    };
    return (
      <div>
      {myheader}
      <button type="button" onClick={this.delHeader}>Delete Header</button>
      </div>
    );
  }
}

class Child extends React.Component {
  componentWillUnmount() {
    alert("The component named Header is about to be unmounted.");
  }
  render() {
    return (
      <h1>Hello World!</h1>
    );
  }
}

ReactDOM.render(<Container />, document.getElementById('root'));
```

- - -

###Conclusion
In React, a component can enter three different phases that make up its lifecycle. These phases are mounting, updating, and unmounting. Each phase has lifecycle methods invoked, where you can work on different things related to the component, like its `props` and `state`, or actually mounting the component to the DOM (with the render method). However, these methods are only for class-based components.