Life Cycle Hook in React

Pushpak Sharma
Sep 4, 2018 · 1 min read

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:23

Update


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 !

Pushpak Sharma

Written by

Code for good. Love to solve the coding question. Believe in Ideology — Overriding difficulty brings a new author(New version).

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade