What are lifecycle methods in class components?

React class components offer a set of special methods that get invoked at various points during a component's existence. These are known as lifecycle methods, and they provide developers with 'hooks' to execute code at specific times, such as when a component is created, updated, or removed from the DOM.

What are Lifecycle Methods?

Lifecycle methods in React class components are special callback methods that are automatically invoked by React at different stages of a component's lifecycle. They allow developers to perform actions like initializing state, fetching data, manipulating the DOM, and cleaning up resources. Understanding them is crucial for building robust and performant class-based React applications.

Phases of a Component's Lifecycle

1. Mounting Phase

This phase occurs when an instance of a component is being created and inserted into the DOM. Methods in this phase are called in a specific sequence during the initial rendering of the component.

• constructor(props): Called first, before mounting. Used for initializing local state and binding event handler methods to the instance. Do not cause side effects or subscriptions here.
• static getDerivedStateFromProps(props, state): Called right before render, both on initial mount and subsequent updates. It's used to derive state from props. It should return an object to update state, or null to update nothing. It's rarely used.
• render(): The only required method in a class component. It reads props and state and returns React elements (JSX) to be rendered. It must be a pure function, meaning it should not modify component state or interact directly with the browser DOM.
• componentDidMount(): Invoked immediately after a component is mounted (inserted into the DOM). This is a good place for side effects like data fetching (AJAX requests), setting up subscriptions, or performing direct DOM manipulations.

2. Updating Phase

This phase occurs when a component's props or state change, leading to a re-render. These methods are called in sequence when updates happen, allowing the component to react to changes.

• static getDerivedStateFromProps(props, state): Also called here, before every re-render (except for forceUpdate), to potentially update state based on new props.
• shouldComponentUpdate(nextProps, nextState): Called before re-rendering when new props or state are received. By default, it returns true. Return false to prevent a component from re-rendering (for performance optimization), but use React.PureComponent or React.memo for functional components instead.
• render(): Re-renders the UI with updated props and state, just like in the mounting phase.
• getSnapshotBeforeUpdate(prevProps, prevState): Called right before the changes from render are committed to the DOM. It enables your component to capture some information from the DOM (e.g., scroll position) before it is potentially changed. It should return a value that will be passed as a third parameter to componentDidUpdate.
• componentDidUpdate(prevProps, prevState, snapshot): Invoked immediately after updating occurs. This is a good place for side effects like network requests (e.g., fetching data if a prop has changed) or DOM manipulation. The snapshot parameter contains the value returned by getSnapshotBeforeUpdate.

3. Unmounting Phase

This phase occurs when a component is being removed from the DOM and destroyed. It provides an opportunity to perform necessary cleanup.

• componentWillUnmount(): Invoked immediately before a component is unmounted and destroyed. Used for cleanup tasks such as invalidating timers, cancelling network requests, or unsubscribing from any subscriptions that were set up in componentDidMount to prevent memory leaks.

4. Error Handling Phase

These methods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component within its render tree. They define an 'error boundary'.

• static getDerivedStateFromError(error): Invoked when a descendant component throws an error. It should return an object to update state, allowing the component to render a fallback UI. This method is used to render a fallback UI after an error has been thrown.
• componentDidCatch(error, info): Invoked after a descendant component throws an error. Used for side effects like logging error information to an error reporting service. This method is used to log the error information.

Summary of Key Lifecycle Methods