DEV Community

Abhinav
Abhinav

Posted on

React Life Cycle

Every React web app comprises of components and these components go through some life cycle methods.

react life cycle methods

These are:

  • Initialization: First stage in React's components Life cycle. In this stage the default states and properties are intilaized.
  • Mounting: Mounting is when an instance of a component is being created and inserted into the DOM.
  • Updating: Updating is the stage when the state of a component is updated and component is re-rendered.
  • Unmounting: As the name suggests Unmounting is the final step of the component lifecycle where the component is removed from the page.

Initialization

constructor() {
        super()
        this.state = {
            show: false
        }
        console.log("Constructor ran, State has been intialized");
    }
Enter fullscreen mode Exit fullscreen mode

constructor

Mounting

React has four built-in methods that gets called, in this order, when mounting a component:

  • constructor()
  • getDerivedStateFromProps()
  • render()
  • componentDidMount()

Render
The render() method is the only required method in a class component.

    render() {
        console.log("render ran");
        return (
            <div>
                <h1>Show and Hide Counter</h1>
                <p>{this.state.text}</p>
                <button onClick={this.click}>{this.state.show ? "Hide counter" : "Show Counter"}</button>
                {this.state.show && <Counter/>}
            </div>
        )
    }
Enter fullscreen mode Exit fullscreen mode

The render() function should be pure, meaning that it does not modify component state, it returns the same result each time it’s invoked, and it does not directly interact with the browser.

componentDidMount() Function
It runs immediately after the component is inserted into the tree(mounting).This is where we run statements that requires that the component is already placed in the DOM.

    componentDidMount() {
        setTimeout(() => {
          this.setState({text: "Text was mounted first and then it was changed after 5 sec"})
        }, 5000)
        console.log("component was mounted");
      }
Enter fullscreen mode Exit fullscreen mode

Image description

After 5 seconds

Image description

Mounting the Counter component:
When the show counter button is clicked render runs again because we have changed the state.

    click = () => {
        if (this.state.show === false) {
            this.setState({
                show: true
            })
        }
        else{
            this.setState({
                show:false
            })
        }
    }
Enter fullscreen mode Exit fullscreen mode

After that our counter component is rendered and mounted.

Image description

Updating

A component is updated whenever there is a change in the component's state or props.

  • componentDidUpdate The componentDidUpdate method is called after the component is updated in the DOM.

Image description

Here when we incremented the the component is render and updated .

  • 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.

Image description

Even though we are clicking the increment and decrement button the component is not updating because our shouldComponentUpdate() method returns flase.
shouldComponentUpdate() {
return false;
}


App.js

import React, { Component } from 'react'
import Counter from './counter'


export class App extends Component {
    constructor() {
        super()
        this.state = {
            show: false,
            text:"See how the text will change"
        }
        console.log("Constructor ran, State has been intialized");
    }

    // componentDidMount() {
    //     setTimeout(() => {
    //       this.setState({text: "Text was mounted first and then it was changed after 5 sec"})
    //     }, 5000)
    //     console.log("component was mounted");
    //   }
    click = () => {
        if (this.state.show === false) {
            this.setState({
                show: true
            })
        }
        else{
            this.setState({
                show:false
            })
        }
    }




    render() {
        console.log("render ran");
        return (
            <div>
                <h1>Show and Hide Counter</h1>
                <p>{this.state.text}</p>
                <button onClick={this.click}>{this.state.show ? "Hide counter" : "Show Counter"}</button>
                {this.state.show && <Counter/>}
            </div>
        )
    }
}

export default App 
Enter fullscreen mode Exit fullscreen mode

counter.js

import React, { Component } from 'react';

class Counter extends Component {
    constructor(){
        super()
        this.state={
            counter:0
        }

    }
    componentDidMount(){

        console.log("mounted the counter");
    }
    increment=()=>{
        this.setState(prevVal=>({
            counter:prevVal.counter-1
        }))
        console.log("button was clicked");
    }

    decrement=()=>{
        this.setState(prevVal=>({
            counter:prevVal.counter+1
        }))
        console.log("button was clicked");
    }

    componentWillUnmount(){
        console.log("unmounted");
    }
    shouldComponentUpdate() {
        return false;
      }

    componentDidUpdate(){
        console.log("component was updated");
    }

    render() {
        console.log("render ran for counter");
        return (
            <div>
                <button onClick={this.decrement}>+</button>
                <h6>{this.state.counter}</h6>
                <button onClick={this.increment}>-</button>
            </div>
        );
    }
}

export default Counter;

Enter fullscreen mode Exit fullscreen mode

References

Top comments (0)