React Component Lifecycle

Photo by Matheo JBT on Unsplash

Class Component ‘s Lifecycle

From the moment component is born to the moment component is dead.

lifecycle

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() and componentWillUnmount()
• shouldComponentUpdate() can be use for optimization