The lifecycle of a React Component is mainly categorized into three parts: mounting, updating, and unmounting.
1. Mounting: This is the phase in which the component is being started to render on the DOM. This phase has four built-in methods which are called in the following order:
constructor(): This is the first method called in the mounting phase. It is responsible for defining and initializing states. static getDerivedStateFromProps(): This is invoked right before calling the render() and is used to overwrite the state based on the initial props. render(): This is a required method where the component’s JSX is returned to be inserted in the DOM. componentDidMount(): This is called after the component is rendered on the DOM. It communicates with the network to fetch data from it.1. Updating: This is the phase when the component is re-rendered as a result of changes to either its props or state. The methods called in this phase are:
static getDerivedStateFromProps(): This is the first method called. It receives two parameters: props and state. shouldComponentUpdate(): This method determines if the component should re-render or not. render(): This method is called and updates the DOM. getSnapshotBeforeUpdate(): This method is called right before updating the finalized changes in the DOM. componentDidUpdate(): This method is called after the component is updated in the DOM.1. Unmounting: This is the final phase of the component lifecycle where the component is removed from the DOM. It has only one built-in method:
componentWillUnmount(): This method is called before the unmounting of the component from the DOM.In addition, there is one more phase called Error Handling which includes two lifecycle methods:
static getDerivedStateFromError(): This is called after an error is thrown through a component. componentDidCatch(): This is used for logging errors during rendering, lifecycle methods, and constructors of child components.It’s important to note that some of these lifecycle methods are being phased out in new versions of React in favor of a new feature called Hooks.
