Skip to main content

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.....

Comments

Popular posts from this blog

How does a total beginner start to learn machine learning if they have some knowledge of programming languages?

I work with people who write C/C++ programs that generate GBs of data, people who manage TBs of data distributed across giant databases, people who are top notch programmers in SQL, Python, R, and people who have setup an organization wide databases working with Hadoop, Sap, Business Intelligence etc. My inspiration to anyone and everyone would be following: Learn all the basics from Coursera, but if I really have to compare what you would get out of Coursera compared to the vastness of data science, let us say ~ Coursera is as good as eating a burrito at Chipotle Mexican Grill. You certainly can satiate yourself, and you have a few things to eat there. The pathway to value adding data science is really quite deep, and I consider it equivalent to a five star buffet offering 20 cuisines and some 500 different recipes. Coursera is certainly a good starting point, and one should certainly go over these courses, but I personally never paid any money to Coursera, and I could easily

Machine Learning The Easy Way

We are running in the most quality period of human race. when you open some article about machine learning, you see dozens of detailed descriptions. The idea behind writing this blog is to get the knowledge about Machine learning across the world. Through this blog, ML provides potential solutions in all different domains and more, and is set to be a pillar of our future civilization.. I am providing a flow level understanding about various machine learning Types along with description. These should be sufficient to get your hands dirty. So what exactly is “machine learning” Machine Learning (ML) is coming into its own, It is playing a key role in a wide range of critical applications, such as data mining, natural language processing, image recognition, and expert systems. Machine Learning is all around us. Apple, Amazon, Microsoft, Uber and many more companies are using machine learning. Generally there are four approaches in Machine Learning -: 1) Sup

Neural Networks vs. Deep Learning

What’s the difference between deep learning and a regular neural network? The simple answer is that deep learning is larger in scale. Before we get into what that means, let’s talk about how a neural network functions. To make sense of observational data (like photos or audio), neural networks pass data through interconnected layers of nodes. When information passes through a layer, each node in that layer performs simple operations on the data and selectively passes the results to other nodes.  Each subsequent layer focuses on a higher-level feature than the last, until the network creates an output. In between the input layer and the output layer are hidden layers. And here’s where users typically differentiate between neural nets and deep learning: A basic neural network might have one or two hidden layers, while a deep learning network might have dozens or even hundreds. For example, a simple  neural network with a few hidden layers can solve a  common classification problem