Component Lifecycle in Class-based components in React

Component Lifecycles are the different states through which a react component goes through during its lifetime.

So, Whenever we write some logic in the frontend frameworks like Angular, React we generally break the application into a lot of smaller dumb components (Display centric components), so that the code will be easy to understand and so that they can be reused and not copying a part of the code and pasting it in another component again.

Any component that is being used will go through some lifecycle hooks in the process through which we can control the behavior of the component. For example, if we get a prop called isProfile true, then you might want to call backend for profile data, and if it's not then do something else. So, how do we control actions like this?

When a component gets created these are the list of the component lifecycles that gets executed in the same order that is specified below: 
1)Constructor()
2)static getDerivedStateFromProps()
3)render()
4)componentDidMount()

When a component gets updated(not created, but updated like a value change) these are the list of the component lifecycles that gets executed in the same order that is specified below:
1)static getDerivedStateFromProps()
2)shouldComponentUpdate()
3)render()
4)getSnapshotBeforeUpdate()
5)componentDidUpdate()

And when a component is gonna get destroyed, componentWillUnmount() is the lifecycle that gets executed.
I will explain each of these lifecycles one by one as best as I can and with an example so that you will not get confused while using it in real-time.

Constructor(): Constructor is called before it is mounted, If we want to use props in the constructor, then we must use super(props), if not this.props will not work. If you are not using props and not binding any functions then don't use a constructor. Do not bind props to state, Call backend API, or update state here.

static getDerivedStateFromProps(): This lifecycle method gets run every time before render gets executed, at initialization, and also at every update. This is to make your state sync with the props that you receive from the parent. If you want to calculate the receiving props and then update or stuff like that.

render(): This is the only required method in the component class. This is where we write the code that is related to displaying the component that takes place. This method will not modify the browser looks, it just displays what should be rendered. It should return only of the following types to the browser: React elements, arrays, and fragments, portals, strings, and numbers.

Note: If shouldComponentUpdate() returns false, render() will not be called.

componentDidMount(): This lifecycle method is called at the end of the component creation lifecycles. This is the place where you can cause mutations. Ex: Calling backend API to get some info etc... You may also update the state here. But make sure that is in some condition. Or else it will go into an infinite loop.

shouldComponentUpdate(): This lifecycle method is used purely for optimisation. For example: If you want to check the incoming props and then decide to update the component or not. Although it is a performance optimization-centric lifecycle method, react does not recommend doing heavy operations here. Like deep equality checking values or JSON.stringify() etc..
This would return either true or false. If this returns false, the updating process will stop, and the render() will never run. React recommend using PureComponent rather than using the shouldComponentUpdate() on checking every prop.

componentDidUpdate(): componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render. We can do DOM updations, making network calls, and updating the state, but make sure we have a conditional check to avoid getting into an infinite loop.

getSnapshotBeforeUpdate(): This gets just before the update is being rendered to the DOM. This allows us to capture some information before the update, like scroll position, etc... Whatever we pass here will be given to componentDidUpdate() as the third parameter. So when we are using this lifecycle method, we should either return a value or null.

componentWillUnmount(): This gets invoked just before the component gets destroyed. This is the right place to remove the setTimeout or setIntervals that we have set up in the componentDidMount() lifecycle method. Also canceling the subscriptions(unsubscribe) should be done here. Basically, this is to do cleanup work for that component.

I will attach my GitHub repo below so that you can take a look at the samples of using each lifecycle method.

https://github.com/jaisaichand/react-lifecycle

I am still in the learning process in the react, so there might be few mistakes in this blog. If you find any... kindly let me know and correct me 😇.