What are the lifecycle methods of ReactJS class components?

ReactJS class components have several lifecycle methods that are invoked at different stages of a component's life. These methods can be categorized into four main phases: Mounting, Updating, Unmounting, and Error Handling. Here's a detailed overview of each phase and the associated lifecycle methods:

Mounting

Mounting is the phase when the component is being created and inserted into the DOM. The lifecycle methods called in this phase are:

1. constructor(props): This method is called before anything else when a component is instantiated. It is used for initializing state and binding event handler methods to an instance[2][4].
2. static getDerivedStateFromProps(props, state): This method is called right before rendering the element(s) in both the mounting and updating phases. It is used to update the state based on changes in props over time[2][4].
3. render(): The only required method in a class component. This method examines this.props and this.state and returns JSX or null. It must be pure, meaning it does not modify component state or interact directly with the browser[2][4].
4. componentDidMount(): This method is called after the component is rendered into the DOM. It is used for DOM manipulation and network requests[2][4].

Updating

Updating occurs when the props or state of the component change, triggering a re-render of the component. The methods in this phase are:

1. static getDerivedStateFromProps(props, state): Called before the render method, just like in the mounting phase[2][4].
2. shouldComponentUpdate(nextProps, nextState): Allows the component to exit the update process before rendering. If it returns false, the subsequent methods are not called[2].
3. render(): Called again to re-render the UI with the new state or props[2][4]...