Components Lifecycle

What is components lifecycle methods and why it is important?

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
React component lifecycle have mainly four phases.
1)Initialization
2)Mounting
3)Updation
4)Unmounting
Note :- Mounting State consider in Initialization. You can say directly Initialization, Updation and Unmounting state only.

component-lifecycle

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.

Above example of react component life cycle, you can check easily on your own machine.


Leave a Reply

Be the First to Comment!

avatar
  Subscribe  
Notify of
Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.