Updating Phase In React Life Cycle

Phases / Lifecycle of Components

Updating Phase

• The next phase in the lifecycle is when a component is updated.
• A component is updated whenever there is a change in the component’s state or props.
• 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()

1. getDerivedStateFromProps()

• It is used when the state of the component depends on changes in props over time.
• Lets say, you have a component but the initial state of the component depends on the props being passed to the component, in this scenario you can used this method to set the state.
• This is very rarely used method.
• It is invoked right before calling the render function, both on the initial mount and on subsequent updates.
• We cannot use this keyword inside this function, it means we cannot update the state by using this.setState method.
• It should return an object to update the state, or null to update nothing.
• This method is called every time a component is re-rendered.

Syntax getDerivedStateFromProps()

static getDerivedStateFromProps(props, state){
    
}

Source Code Of getDerivedStateFromProps() Method

UPDATING1.JS FILE CODE

import React, { Component } from 'react'
import Updating2 from './Updating2'

export default class Updating1 extends Component {

    constructor(props) {
      super(props)
    
      this.state = {
         name1: "Adil"
      }
    }
    
    changeState = () => {
        console.log("Button Clicked..");
        this.setState({
            name1:"Prem"
        });
    }

  render() {
    return (
      <div>
        <Updating2 name={this.state.name1}/>
        <button onClick={this.changeState}>Change State</button>
      </div>
    )
  }
}

UPDATING2.JS FILE CODE

import React, { Component } from 'react'

export default class Updating2 extends Component {

    constructor(props) {
      super(props)
    
      this.state = {
         name2: this.props.name
      }
    }
    
    static getDerivedStateFromProps(props, state){
        console.log("getDerivedStateFromProps called..");
        if(props.name !== state.name2)
        {
            return {name2: props.name}
        }
        return null
    }

  render() {
    return (
      <div>
        <h1>{this.state.name2}</h1>
      </div>
    )
  }
}

INDEX.JS FILE CODE

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import BindingEvent from './BindingEvent';
import ClickFunction from './ClickFunction';
import Mounting1 from './Mounting1';
import Updating1 from './Updating1';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <div className='App'>
        <Updating1/>
    </div>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

2. shouldComponentUpdate()

• Use shouldComponentUpdate() to let React Know if a component’s output is not affected by the current change in state or props.
• It means should React re-render or not ?
• shouldComponentUpdate() is called before render method.
• This method return true by default.
• Render() method will not be called if shouldComponentUpdate() returns false.
• We cannot use HTTP requests (API calls) in this method and also we cannot call the setState() Method.
• This is Rarely used method according to React documentation.

Syntax shouldComponentUpdate()

shouldComponentUpdate ( nextProps, nextState ) {

 } 

3. Render()

• It is the only required (necessary) method in the class component, so all other methods are optional.
• In this method, we can read props & state and return JSX.
• In this method, we cannot change the state or interact with the DOM or make ajax calls.
• Children components life cycle methods are also executed.

Render() Syntax

render() {
        return (
            <div>
                <h1>Learning Never Ends</h1>
            </div>
        )
    }

4. getSnapshotBeforeUpdate()

• This method is called right before the Virtual DOM is about to make changes to the Actual DOM (before DOM is updated).
• It allows our components to capture the current values or some information from the DOM (eg: Scroll Position) before it is potentially changed.
• This method will return NULL or return a value.
• Any returned value by this function will be passed as third parameter to last function componentDidUpdate().
• This is also rarely used method according to React documentation.

Syntax getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate ( prevProps, prevState ) {

}

5. componentDidUpdate()

• This method invoked right after updating occurs.
• This method is not called for the initial render.
• This method is called after the render is completed in the re-render cycles.
• This method is guaranteed to call only once in a life cycle.
• You can make Ajax Calls in this method.
• This method will not be called if shouldComponentUpdate() returns false.

Syntax componentDidUpdate()

componentDidUpdate ( prevProps, prevState, snapshot ) {

}

All Methods Source Code Down Below

Person.js File – Source Code

import React, { Component } from 'react'

export default class Person extends Component {
    constructor(props) {
        super(props)

        this.state = {
            name: "Adil"
        }
        console.log("Constructor Called..");
    }

    changeState = () => {
        this.setState({
            name: "Kumar"
        });
        console.log("Button Clicked..");
    }

    static getDerivedStateFromProps(props, state) {
        console.log("getDerivedStateFromProps Called..");
        console.log(props);
        console.log(state);
        return null
    }

    shouldComponentUpdate(nextProps, nextState){
        console.log("shouldComponentUpdate Called..")
        console.log(nextProps)
        console.log(nextState)
        return false
    }

    getSnapshotBeforeUpdate(prevProps, prevState){
        console.log("getSnapshotBeforeUpdate Called..");
        console.log(prevProps);
        console.log(prevState);
        return "Hello"
    }
    componentDidUpdate(prevProps, prevState, snapshot){
        console.log("componentDidUpdate Called..");
        console.log(prevProps);
        console.log(prevState);
        console.log(snapshot);
    }

    render() {
        console.log("Render Called..");
        return (
            <div>
                <h1>{this.state.name}</h1>
                <h1>{this.props.city}</h1>
                <button onClick={this.changeState}>Change State</button>
            </div>
        )
    }
}

Index.js File – Source Code

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import BindingEvent from './BindingEvent';
import ClickFunction from './ClickFunction';
import Mounting1 from './Mounting1';
import Updating1 from './Updating1';
import Person from './Person';
import reportWebVitals from './reportWebVitals';
import ParentClass from './ParentClass';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <div className='App'>
      <Person city="Hyderabad"/>
    </div>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Click Below Link to Download Notes & Source Code Of This Blog

https://www.mediafire.com/file/f7wqvkhn511zn1y/UPDATING+LIFE+CYCLE+React+JS.rar/file