Everything You Need to Know about React Component Life Cycle

0
876

React Component

Mounting Phase

The constructor()

import React from ‘react’;class FriendsComponent extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
   title : ‘F.R.I.E.N.D.S’
  }
 console.log(‘Saying Hi from the Constructor’);
  }
}

The getDerivedStateFromProps()

import React from ‘react’;
class FriendsComponent extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
   title : ‘F.R.I.E.N.D.S.’
   }
 console.log(‘Saying Hi from the Constructor’);
  }static getDerivedStateFromProps(props, state) {
  console.log(‘Saying Hi in the React Component
  getDerivedStateFromProps’);
  }
}

The componentWillMount()

class FriendsComponent extends React.Component {
 componentWillMount() {
   console.log(‘Hello I am Chandler Bing’);
 }render() {
   return <h1>Hello Friends</h1>;
 }
}

The render() method

class FriendsComponent extends Component{
 render(){
   return <div>Hi Chandler {this.props.name}</div>
  }
}

The componentDidMount() method

import React from ‘react’;class FriendsComponent extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
  title : ‘F.R.I.E.N.D.S’
  }
 console.log(‘Saying Hi from the Constructor’);
 }static getDerivedStateFromProps(props, state) {
 console.log(‘Saying Hi in the React Component
 getDerivedStateFromProps’);
 }componentDidMount(){ 
 console.log(“Hi Friends componentDidMount”);
 }render() {
 console.log(‘Hi Friends I am in the render method’);
 return <div> This is the FriendsComponent </div>
 } 
}

Updating Phase

The componentWillReceiveProps() method

class FriendsComponent extends React.Component {
 constructor(props) {
   super(props);
   this.state = {name: this.props.name};
  }componentWillReceiveProps(nextProps) {
   if (this.props.name !== nextProps.name) {
   this.setState({name: nextProps.name});
  }
 }render() {
 return ( <h1>{this.state.name}</h1> )
  }
 }

The shouldComponentUpdate() method

class FriendsComponent extends React.Component {
 […] shouldComponentUpdate(nextProps, nextState) {
   if (this.state.name == nextState.name) {
   console.log(“Inside shouldComponentUpdate”);
   return false;
  }
 }
   […]
}

The componentWillUpdate() method

class FriendsComponent extends React.Component {
 […]componentWillUpdate(nextProps, nextState) {
 // Do something here
 }
[…]
}

The componentDidUpdate() method

class FriendsComponent extends React.Component {
 […]
 componentDidUpdate(prevProps, prevState) {
 if (this.props.name == prevProps.name) {
 // make ajax calls
 // Perform any other function
  }
 }
[…]
}

An example of an updating phase is as follows.

import React, { Component } from ‘react’; class ChildFriendsComponent extends Component{ 
 constructor(props){ 
   super(props); 
   this.state={ 
   value:’FRIENDS’ 
  } 
 console.log(“Hi you’re in the child constructor”); 
 }  static getDerivedStateFromProps(props,state){ 
   console.log(“Hi you’re in the child getDerivedStateFromProps”); 
   return null; 
  }  componentDidMount(){ 
   console.log(“Hi you’re in the child componentDidMount”); 
  }
 
shouldComponentUpdate(){ 
   console.log(“Hi you’re in the child shouldComponentUpdate”); 
   return true; 
  }
 
getSnapshotBeforeUpdate(prevProps,prevState){ 
   console.log(“Hi you’re in the child getSnapshotBeforeUpdate”); 
   return null; 
  } componentDidUpdate(){ 
   console.log(“Hi you’re in the child componentDidUpdate”); 
  } render(){ 
   console.log(“Hi you’re in the Friends Child Component render”); 
   return <div/> 
  } 
} export default ChildFriendsComponent ;
import React,{Component} from ‘react’; 
import ChildFriendsComponent from ‘./Child’; class FriendsComponent extends Component{ 
 constructor(props){ 
    super(props); 
    this.state={ 
    value:FRIENDS’ 
   } 
    this.changeState = this.changeState.bind(this); 
    console.log(“Hi you’re in the constructor”); 
  } static getDerivedStateFromProps(props,state){ 
   console.log(“Hi you’re in the getDerivedStateFromProps”); 
   return null; 
  } componentDidMount(){ 
   console.log(“Hi you’re in the componentDidMount”); 
  } shouldComponentUpdate(){ 
   console.log(“Hi you’re in the shouldComponentUpdate”); 
   return true; 
  } getSnapshotBeforeUpdate(prevProps,prevState){ 
   console.log(“Hi you’re in the getSnapshotBeforeUpdate”); 
   return null; 
  }componentDidUpdate(){ 
   console.log(“Hi you’re in the componentDidUpdate”); 
  } changeState = () => { 
  this.setState({ 
  value : “FRIENDS started” 
   }) 
  } render(){ 
   console.log(“Hi you’re in the render”); 
   return( 
     <div> 
       <div>Friends Parent Component</div> 
       <button onClick={this.changeState}>Say Hi</button> 
       <ChildFriendsComponent/>
     </div> 
  ); 
 } 
}
 
export default FriendsComponent ;

Unmounting Phase

The componentWillUnmount() method

class FriendsComponent extends React.Component { 
 […]componentWillUnmount() {
 document.removeEventListener(“click”, SomeFunction);
 `}[…]}

Lifecycle methods or Lifecycle hooks in functional component

Conclusion

Reach out to us