🧠 What are React Lifecycle Methods?

React Lifecycle Methods are built-in methods available in class components that let you run code at specific stages of a component’s life — from creation (mounting), to updates, and finally cleanup (unmounting).

They are commonly used for:

Data fetching
Subscriptions
DOM manipulation
Cleanup tasks

In modern React, similar behavior is handled in functional components using the useEffect hook.

⏳ Lifecycle Phases in React

Phase	Purpose
Mounting	When the component is created and added to the DOM
Updating	When props or state change and the component re-renders
Unmounting	When the component is removed from the DOM

🔄 1. Mounting Phase Methods

These methods are called in order when a component is inserted into the DOM.

constructor()

Initializes state and binds methods.

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

getDerivedStateFromProps()

Updates state based on props before rendering.

static getDerivedStateFromProps(props, state) {
  if (props.reset) {
    return { count: 0 };
  }
  return null;
}

render()

The only required lifecycle method. Returns JSX.

render() {
  return <h1>Hello, World!</h1>;
}

componentDidMount()

Runs once after the component mounts. Ideal for API calls.

componentDidMount() {
  console.log("Component Mounted");
}

🔁 2. Updating Phase Methods

These methods run when state or props change.

shouldComponentUpdate()

Controls whether a re-render should happen.

shouldComponentUpdate(nextProps, nextState) {
  return nextState.count !== this.state.count;
}

getSnapshotBeforeUpdate()

Captures information before the DOM updates.

getSnapshotBeforeUpdate(prevProps, prevState) {
  return document.body.scrollHeight;
}

componentDidUpdate()

Runs after the component updates.

componentDidUpdate(prevProps, prevState, snapshot) {
  console.log("Component Updated");
}

🗑️ 3. Unmounting Phase Method

componentWillUnmount()

Used for cleanup before the component is removed.

componentWillUnmount() {
  clearInterval(this.timer);
}

Typical cleanup tasks:

Clearing intervals or timeouts
Removing event listeners
Cancelling subscriptions

🧪 Full Lifecycle Example (Class Component)

import React, { Component } from "react";

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log("Mounted");
  }

  shouldComponentUpdate(nextProps, nextState) {
    return nextState.count !== this.state.count;
  }

  componentDidUpdate() {
    console.log("Updated");
  }

  componentWillUnmount() {
    console.log("Will Unmount");
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

export default Counter;

⚙️ Functional Component Equivalent Using Hooks

Lifecycle behavior in functional components is handled using useEffect.

import React, { useEffect, useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Component Mounted or Updated");

    return () => {
      console.log("Component Will Unmount");
    };
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

📖 Lifecycle Methods Summary

Phase	Class Component Methods	Functional Equivalent
Mounting	constructor, componentDidMount	useState, useEffect([])
Updating	shouldComponentUpdate, componentDidUpdate	React.memo, useEffect([deps])
Unmounting	componentWillUnmount	cleanup function in useEffect

🧾 Conclusion

Understanding React Lifecycle Methods is essential for managing side effects and performance in class-based components. While Hooks are now the preferred approach, lifecycle methods still form the backbone of React’s behavior and are crucial when working with legacy codebases.

Mastering these concepts will help you build more predictable, efficient, and robust React applications.

What are React lifecycle methods?