React Component Life Cycle

Page Content:
1.Component Lifecycle – Introduction
1.Component Lifecycle – Initial Phase
1.Component Lifecycle – Mounting Phase
1.Component Lifecycle – Updating Phase
1.Component Lifecycle – Unmounting Phase

1.Introduction:

1.In React whenever a component is created it calls multiple methods. These all methods together called component lifecycle methods.
2.These methods are called at various points during component creation.
3.The life-cycle of the component is divided into four phases:

1.Initial Phase.
2.Mounting Phase.
3.Updating Phase.
4.Unmounting Phase.

Each phase involves executing some methods which are specific to that phase.


1.Initial Phase:

It’s a starting phase of the life-cycle of react component. Here component contains default props & initial state. This phase occurs only once & it involves the following methods.

1.getDefaultProps():
It specifies the default value of props & It called before the creation of component or
any props that passed from parent to it.

2.getInitialState():
It specifies the default value of this.state & is called during the creation of component.


2.Mounting Phase:

During the phase instance of the component is created & inserted into DOM. It involves the following methods.

1.constructor():
The constructor for a React component is called before it is mounted.

Note: When implementing the constructor for a React. Component subclass, you should call super(props) before any other statement.
Otherwise, this.props will be undefined in the constructor, which can lead to bugs.

2.static getDerivedStateFromProps():
getDerivedStateFromProps is invoked right before calling the render method, both on the initial mount and on subsequent updates.

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

4.componentDidMount():
componentDidMount() is invoked immediately after a component is mounted (inserted into the tree).

Note:

below methods are considered legacy and you should avoid them in new code:

UNSAFE_componentWillMount()


3.Updating Phase:

any update in DOM will call the below methods:

1.static getDerivedStateFromProps():getDerivedStateFromProps is invoked right before calling the render method,both on the initial mount and on subsequent updates.

2.shouldComponentUpdate():shouldComponentUpdate() is invoked before rendering when new props or state are being received.

3.render(): The render() method is the only required method in a class component.
When called, it should examine this.props and this.state and return one of the following types:

1.React elements
2.Arrays and fragments.
3.Portals
4.String and numbers
5.Booleans or null.

4.getSnapshotBeforeUpdate():getSnapshotBeforeUpdate() is invoked right before the most recently rendered output is committed to the DOM.

5.componentDidUpdate():componentDidUpdate() is invoked immediately after updating occurs.This method is not called for the initial render.

Note:

below methods are considered legacy and you should avoid them in new code:

UNSAFE_componentWillUpdate()
UNSAFE_componentWillReceiveProps()


4.Unmounting Phase:

This method is called when a component is being removed from the DOM:

1.componentWillUnmount():componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. It performs any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount().

App.jsx

import React, { Component } from 'react';  
  
class App extends React.Component {  
   constructor(props) {  
      super(props);  
      this.state = {data: "webdev99"};  
      this.changeState = this.changeState.bind(this)  
   }    
   render() {  
      return (  
         <div>  
             <h1>ReactJS component's Lifecycle</h1>  
             <h3>Hello {this.state.data}</h3>  
             <button onClick = {this.changeState}>Click Here!</button>          
         </div>  
      );  
   }  
   componentWillMount() {  
      console.log('Component Will MOUNT!')  
   }  
   componentDidMount() {  
      console.log('Component Did MOUNT!')  
   }  
   changeState(){  
      this.setState({data:"All!!- Its 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;  

Before button click,


After Button click,