While modern React development heavily favors Functional Components and Hooks, understanding the Class Component lifecycle is crucial. You will encounter it in countless existing codebases, and its concepts form the foundation upon which Hooks were built. Furthermore, certain features like **Error Boundaries** can *still* only be implemented using Class Components.

The lifecycle is a sequence of methods that are automatically called at different phases of a component's existence. We can group these into three main phases: **Mounting**, **Updating**, and **Unmounting**.

Phase 1: Mounting (Birth)

These methods are called when an instance of a component is being created and inserted into the DOM.

• constructor(props)

  The very first method called. This is the *only* place to initialize state directly (e.g., this.state = ...). You must call super(props)before anything else.

• render()

  The only **required** method. It's a "pure" function that reads this.props and this.state and returns JSX. It should *not* contain side-effects (like API calls or setState).

• componentDidMount()

  Called *after* the component is rendered to the DOM. This is the perfect place for **side-effects**:

  • Making API calls to fetch data.
  • Setting up subscriptions (e.g., timers, event listeners).
  • Interacting with the DOM directly.

Phase 2: Updating (Life)

An update can be triggered by a change in props or state. These methods are called when a component is being re-rendered.

• shouldComponentUpdate(nextProps, nextState)

  A rare but powerful optimization tool. It runs *before* render(). If you return false, React will skip the re-render. By default, it always returns true.

• render()

  Called again to generate the new JSX.

• componentDidUpdate(prevProps, prevState)

  Called *after* the component re-renders. This is the place for side-effects that need to respond to a prop or state change. **Warning:** You must wrap any setStatecalls in a condition (e.g., if (this.props.userID !== prevProps.userID)) to avoid infinite loops.

// ❌ WRONG
this.setState({ count: this.state.count + 1 });
console.log(this.state.count); // Will log the OLD count

// ✅ CORRECT (using callback)
this.setState(
  { count: this.state.count + 1 },
  () => console.log(this.state.count) // Callback runs after update
);

// ✅ BEST (using function to avoid race conditions)
this.setState((prevState) => ({
  count: prevState.count + 1
}));

Phase 3: Unmounting (Death)

• componentWillUnmount()

  Called right before a component is destroyed and removed from the DOM. This is the *only* place to perform **cleanup**:

  • Invalidate timers (e.g., `clearInterval`).
  • Remove event listeners.
  • Cancel API requests.
  Failing to clean up will cause **memory leaks**.

Key Takeaway: The Class Component lifecycle provides a robust set of "hooks" for managing side-effects, state, and performance. `constructor` for setup, `componentDidMount` for side-effects, `componentDidUpdate` for reacting to changes, and `componentWillUnmount` for cleanup are the essential methods you must know.