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

Where have you seen Machine Learning in your everyday life?

1 –  Google’s AI-Powered Predictions Using anonymized location data from smartphones, Google Maps (Maps) can analyze the speed of movement of traffic at any given time. And, with its acquisition of crowdsourced traffic app Waze in 2013, Maps can more easily incorporate user-reported traffic incidents like construction and accidents. Access to vast amounts of data being fed to its proprietary algorithms means Maps can reduce  commutes by suggesting the fastest routes to and from work. 2 –  Ridesharing Apps Like Uber and Lyft How do they determine the price of your ride? How do they minimize the wait time once you hail a car? How do these services optimally match you with other passengers to minimize detours? The answer to all these questions is ML. Engineering Lead for Uber ATC Jeff Schneider  discussed in an NPR interview how the company uses ML to predict rider demand to ensure that “surge pricing”(short periods of sharp price increases to decrease rider demand and increase driver supply…

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 learn a v…

2.0

I sometimes see people refer to neural networks as just “another tool in your machine learning toolbox”. They have some pros and cons, they work here or there, and sometimes you can use them to win Kaggle competitions. Unfortunately, this interpretation completely misses the forest for the trees. Neural networks are not just another classifier, they represent the beginning of a fundamental shift in how we write software. They are Software 2.0. The “classical stack” of Software 1.0 is what we’re all familiar with — it is written in languages such as Python, C++, etc. It consists of explicit instructions to the computer written by a programmer. By writing each line of code, the programmer is identifying a specific point in program space with some desirable behavior. In contrast, Software 2.0 is written in neural network weights. No human is involved in writing this code because there are a lot of weights (typical networks might have millions), and coding directly in weights is kind of …