Lifecycle of Components in React

The lifecycle of components in react is the series of methods that pass through different stages of the component’s existence. We can monitor and manipulate these different phases of the lifecycle. There are four main phases of the lifecycle:

1. Initialization
2. Mounting
3. Updating
4. Unmounting

1) Initialization

This is the first phase in the lifecycle of components where the props and state of a component are initialized inside the constructor() of a class.

constructor()

The constructor() method is the first method to be called in the lifecycle of a component. It is called to initialize a component and the state and props of a component are defined inside constructor() method. It is called with super(props) with props as an argument. This will initiate the parent’s constructor method and allows the component to inherit methods from its parent component.

Syntax

class ClassName extends React.Component { 
    constructor(props) 
    { 
        super(props); 
          
        // initialize state
        this.state = { state : value}; 
    } 
} 

2) Mounting

Mounting is the phase of rendering the JSX elements in the DOM. the mounting phase has three methods that get called:

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

getDerivedStateFromProps()

The getDerivedStateFromProps() method is where we can set the state object based on the initial props. It takes the state as an argument and returns an object with changes to the state. It is called just before rendering the element in the DOM.

Syntax

static getDerivedStateFromProps(props, state) {
    return {newState: props };
  }

render()

The render() method is the method that renders the JSX elements in the DOM. It is the required method in the class component of React.

Syntax

class ClassName extends React.Component {
  render() {
    return (
      // JSX here...
    );
  }
}

componentDidMount()

The componentDidMount() is initiated right after the component is rendered in the DOM. It is called only once so API calls statements are written inside the componentDidMount() and other functions that require the component to be rendered in the DOM first are called here.

Syntax

componentDidMount(){
    functions here....
}

3) Updating

Updating is a phase when a component is updated. Whenever there is a change in the component’s state or props, the component is updated. The updating phase has five methods that get called during this phase.

• getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

getDerivedStateFromProps()

The getDerivedStateFromProps() method is where we can set the state object based on the initial props. It takes the state as an argument and returns an object with changes to the state. It is called just before rendering the element in the DOM.

Syntax

static getDerivedStateFromProps(props, state) {
    return {newState: props };
  }

shouldComponentUpdate()

The shouldComponentUpdate() method returns a Boolean value that specifies whether or not React should continue with the rendering or not. The default value is true.

Syntax

 shouldComponentUpdate() {
    return true/false;
  }

render()

The render() method is the method that renders the JSX elements in the DOM. It is the required method in the class component of React.

Syntax

class ClassName extends React.Component {
  render() {
    return (
      // JSX here...
    );
  }
}

getSnapshotBeforeUpdate()

The getSnapshotBeforeUpdate() method gives access to the props and state of the component before the update. That means even after the component’s update, we can get its previous value of the state and props. We must include the componentDidUpdate() method while using getSnapshotBeforeUpdate().

Syntax

getSnapshotBeforeUpdate(prevProps, prevState) {
     // function here
  }

componentDidUpdate()

The componentDidUpdate() is called after the component is updated.

Syntax

componentDidUpdate() {
     // function here
  }

4) Unmounting

 Unmounting is the final step of the component lifecycle where the component is removed or unmounted from the DOM.

The componentWillUnmount() is called while unmounting the component

componentWillUnmount()

The componentWillUnmount() is called when a component is unmounted or removed from the DOM.

The functions to be called when the components get unmounted are stated side componentWillUnmount().

Syntax

  componentWillUnmount() {
    //functions here
  }

Conclusion

In this article, we discussed the lifecycle of components in React. We discussed the four phases of lifecycle: Initialization, Mounting, Updating, and Unmounting.