REACT COMPONENT LIFECYCLE

While working on ReactJS the render() method will be enough in case of ideal and simple conditions of components, But in case of complex situations and conditions, We need some more control over the when, how and where components to execute or update. Lifecycle methods of React help in that case to control and execute things as per requirement only.

Purpose of this document to describes the role of every component in lifecycle and order of execution of those components. Using these lifecycle methods we can control render, update of each section. Knowledge of this lifecycle will help to perform various actions while components are created and destroyed, also in updating components and to react on props or state change.

Component Flow:

React allows to create component invoking the ‘create-Class ()’ which expects   ‘render ()’ and triggers a lifecycle.

There are 4 different scenarios, where react undergo different lifecycles:

A] Initial Rendering:   

·        Get default props & Get initial state

·        Component will mount

·        Render

·        Component did mount

B] Props Changes:

·        Component will receive props

·        Should component update

·        Component will update

·        Render

·        Component did mount 

C] State Changes:

·        Should component update

·        Component will update

·        Render

·        Component did update

D] Component Unmounting:

·        Component will unmount

General Components:
1)  Get Default Props & Get Initial State:

Both methods are called once while initial rendering of the component. The Get Initial State () enables to set the initial state value. Get default props used to access default props using this Props.

2)  Component Will Mount:

Invoked before render method, On the Client as well Server side. Setting state in this component phase will not trigger.

3)  Component Did Mount:

This phase will be executed on client side after the render method only. We can update the state here to trigger other methods. The set State () can be used here.

4)    Component Will Receive Props:

This phase will be called as soon as the props are updated, before the render is called. Sometimes component will receive props is just called when nothing has changed, for check in purpose by the react. The set state () can be used here.

5)  Should Component Update:

This returns Boolean output, It’s set to true by default. If sure that component do not needs to render after state or props are updated, can return false value also. The set state () can’t be used here.

6)  Component Will Update:

This phase is called just before the Rendering. It can also be used instead component will receive props but without access to previous props. The set state () can’t be used here.

7)  Component Did Update:

This phase is called just after the Rendering. The set state () can be used here.

8)    Component Will Unmount:

This phase is invoked after the component is unmounted from the DOM. It’s the unmounting of component in main.js. It helps to clean the leftover debris from the component. The set state () can’t be called here.

Example:

Class ({

/** Object from this method sets the initial value of this.state
        getInitialState: fun1 =()=> {
            return {};
        },

        /** The object from this method sets the initial value of this.props 
        getDefaultProps: fun2 =()=> {
            return {};
        },

        /** Inspects this.state and this.props
        /** Should never update this.state or this.props
        render: return () {
            return (<div> </div>);
        },


        /** +++++++Lifecycle Methods++++++++ */

        /** Invoked once before first render
        componentWillMount: fun3 = () => {
            /** Calling setState here does not cause a re-render
        },

        /** Invoked once after the first render
        componentDidMount: function = () => {
        },

        /** Invoked when there is any prop change
        /** Called BEFORE render
        componentWillReceiveProps: function = (nextProps) => {
            /** Not called for the initial render
            /** Previous props can be accessed by this.props
            /** Calling setState here does not trigger an additional re-render
        },

        /** Determines if the render method should run in the subsequent step
        /** Called BEFORE a render
        /** Not called for the initial render
        shouldComponentUpdate: function = (nextProps, nextState) => {
            /** If you want the render method to execute in the next step
            /** return true, else return false
            return true/false;
        },

        /** Called IMMEDIATELY BEFORE a render
        componentWillUpdate: function = (nextProps, nextState) => {
            /** You cannot use this.setState() in this method
        },

        /** Called IMMEDIATELY AFTER a render
        componentDidUpdate: function = (prevProps, prevState) => {
        },

        /** Called IMMEDIATELY BEFORE a component is unmounted
        componentWillUnmount: function = () => {
        }

    });

Please Feel Free to share your Comments.....