Life Cycle Hook in React
We will dive into what are life cycle hook in react !
Mount
- constructor
- render
- componentDidMount
Update
- render
- componentDidUpdate
UnMount
- componentWillUnmount
Mount-Explained with Exampled with Code {See Comment for Better Understanding}
Output
Constructor — App
{} App.js:17
App-render App.js:26
child-render test.js:5
App-Mounted App.js:23Update
When there is Update ; It will scheduled a render call.
Our App is render ; It means its children are render.
Entire Tree is Rendered !== Entire DOM is Updated.
Now we have two DOM :- Virtual DOM And Real DOM .React will see what are the changes we have made and then it will UPDATE the REAL DOM
Output @ Console-------------------------------------------------------------------
Constructor — App
App-render
child-render
App-Mounted
------------------------------------------------------------------ 0 //on increment
App-render
child-render
prevState {value: 0}value: 0__proto__: Object
PrevProps {}__proto__: Object-------------------------------------------------------------------
1//on increment
App-render
child-render
prevState {value: 1}value: 1__proto__: Object
PrevProps {}
UnMount
Before Removing the Component Again the tree will be rendered and unmount is called.
componentWillUnmount(){//it is called just before the component is removed from the DOMconsole.log('unmount');}
This give us an opportunity to do any-kind of cleanup :)
Conclusion
It is an important Concept try to understand it will and comment down if you have query.I am not an expert but a learner and our all goal is to learn and asking question and answer them is good way to brush the skill and knowledge.
Signing off — Happy Coding !
