REACT JS Lifecycle Methods Flow

React Simple Flow Tricks 

1. Initialize Phase : set Props and state
2. Mount  Phase :  mount component - componentWillMount() -->render()--componentDidMount()
3. Update Phase  :  Update property & state  -  shouldComponentWillRecieveProps --> shouldComponentWillUpdate()- render()-->componentDidUpdate()
4. Unmount Phase  :  componentWillUnmount

Around us everything goes through a cycle of taking birth, growing and at some point of time it will die. As like animal, human, tree, video browser etc. All developer can really plan what and how to do at various points of birth, growth or death of UI interfaces.

Example :- Human life cycle in you can consider four phases.

1.Born (consider with childhood)
             2.Young
                           3.Old
                                      4.Die(final truth)

React component lifecycle have mainly four phases.

• 1)Initialization

                             2)Mounting
                                                 3)Updation
                                                                     4)Unmounting

1.  constructor(or getInitialState) :  Constructor is used to set initial state for component.
2. componentWillMount:- componentWillMount method will be called before component render to browser and also it is client side and as well server side rendering.
 3. Render:- Render method you will see component on Browser and this method should be pure. You can not update state in this method

      4. componentDidMount:-    This method will be called right after the render method. updating state in this method will re-render component. It’s a client side rendering.
      5. componentWillReceiveProps:-  this method is called whenever component receives new props.
      6. shouldComponentUpdate:-  In this method you can check whether re-rendering the component is necessary or not. return false if you don't want to re-render component.

7. componentWillUpdate :-  this method will be called after shouldComponentUpdate(only if it returns true). And before rendering render method.
8. render:-  In this method updated component will be rendered to screen. with new data(or changes).

9. componentDidUpdate:-  componentDidUpdate will be called after render method.

10. componentWillUnmount:- componentWillUnmount destroyed and removed from the DOM and only one lifecycle method is active.

import React, { Component } from 'react';

class App extends Component {

    constructor(props) {

        console.log('constructor called')

        super(props);

        this.state = { count: 0 };

        this.Sum = this.Sum.bind(this);

        this.Decrease = this.Decrease.bind(this);

    }

    componentWillMount() {

        console.log('componentWillMount called')

    }

    componentDidMount() {

        console.log('componentDidMount called')

    }

    Sum() {

        this.setState({ count: this.state.count + 1 })

    }

    Decrease() {

        this.setState({ count: this.state.count - 1 })

    }

    componentWillReceiveProps() {

        console.log('componentWillReceiveProps called')

    }

    shouldComponentUpdate() {

        console.log('shouldComponentUpdate called');

        return true

    }

    componentWillUpdate() {

        console.log('componentWillUpdate called')

    }

    componentDidUpdate() {

        console.log('componentDidUpdate called');

    }

    render() {

        console.log('render called');

        return ( < div ><div > < h1 > { this.state.count } < /h1>

            < / div > < button onClick = { this.Sum } >

            < span > +(Sum) < /span> < / button > <button onClick = { this.Decrease } >

            <span > -(Decrease) < /span> < / button > </div>

        );

    }

}

export default App;