Give a quick overview of the life cycle of a React component?

Below image summarise the lifecycle methods exposed by react component and the order in which lifecycle methods are being called by React.

React 16 was a major release for ReactJS. With this version react has marked some of the lifecycle methods like componentWillRecieveProps, ComponentWillUpdate as deprecated. In a later release of React, the framework will be removing these methods. In place of deprecated methods, they added a few new lifecycle methods. The above picture shows the lifecycle method of a component. We can divide the lifecycle methods of the component into three categories.

• Mounting: This includes the beginning phase of the component. The first constructor of the component gets invoked. Constructor receives props as an argument from the parent component. Constructor is the place where we define an initial state of a component. After constructor and before render, lifecycle method getDrivedStateFromProps is invoked, it returns the state object or null to avoid the render. Then Render method is invoked which renders the JSX. Then at the end, componentDidMount is invoked.
• Updating: A component gets an update via a change in state or change in props. In both of these cases, the getDrivedStateFromProps method is invoked first where we get props and state as an argument and returns updated state. Then shouldComponentUpdate methods are invoked. If this method returns true then the only component gets the update otherwise component update is aborted. Then render method is called and after this getSnapshotBeforeUpdate is called. In the end, the componentDidUpdate method is called
• Unmounting: componentWillUnmount lifecycle method is invoked before the unmounting of the component takes place.