React Component Lifecycle
Published in
2 min readSep 14, 2020
Class Component ‘s Lifecycle
From the moment component is born to the moment component is dead.
You can go here to explore more
In class component you have three phrases
- Mounting (An instance of a component is being created and inserted into the DOM)
- Updating (A component is being re-rendered. Update can be caused by changes to props or state)
- Unmounting (A component is being removed from the DOM)
In Mounting phrase these methods are called in following order
constructor()
(You can set initial state here)static getDerivedStateFromProps()
(You can set your state base on props)render()
componentDidMount()
(Call after component is placed in DOM)
In Updating phrase these methods are called in following order
static getDerivedStateFromProps()
shouldComponentUpdate()
(Return true to tell React to update this component otherwise false, default is true)render()
getSnapshotBeforeUpdate()
(Take previous props and state as arguments, the following method must override if you override this method)componentDidUpdate()
(Call after component is updated in DOM)
In Unmounting phrase these methods are called in following order
componentWillUnmount()
(Called when the component is about to be removed from the DOM)
Note:
- You can not set state in
render()
andcomponentWillUnmount()
shouldComponentUpdate()
can be use for optimization