In React, lifecycle methods are special methods in class components that get called at different stages of a component’s life.

They allow developers to:

• Run code when a component is created

• Update data when props/state change

• Clean up resources before removal

A React component mainly goes through 3 phases:

1. Mounting → Component is created and inserted into the DOM

2. Updating → Component re-renders because of state/props changes

3. Unmounting → Component is removed from the DOM

1. Mounting Lifecycle Methods

These methods are called when the component is first created.

constructor()

• Initializes state

• Binds methods

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

static getDerivedStateFromProps()

• Updates state based on props

• Rarely used in real projects

static getDerivedStateFromProps(props, state) {
  return null;
}

render()

• Required method

• Returns JSX/UI

• Should be pure (no API calls)

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

componentDidMount()

• Called after component appears in the DOM

• Best place for:

  • API calls

  • Timers

  • Subscriptions

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

Interview Point

This is commonly used for:

• Fetching data from APIs

• Initializing third-party libraries

2. Updating Lifecycle Methods

These methods run when state or props change.

static getDerivedStateFromProps()

Runs before every render during updates too.

shouldComponentUpdate()

• Controls re-rendering

• Used for performance optimization

shouldComponentUpdate(nextProps, nextState) {
  return true;
}

Interview Point

Returning false prevents re-rendering.

render()

Re-renders updated UI.

getSnapshotBeforeUpdate()

• Captures information before DOM updates

getSnapshotBeforeUpdate(prevProps, prevState) {
  return null;
}

componentDidUpdate()

• Runs after update completes

• Commonly used for:

  • API calls after changes

  • DOM updates

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

3. Unmounting Lifecycle Method

componentWillUnmount()

• Called before component is destroyed

• Used for cleanup

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

Interview Point

Important for preventing:

• Memory leaks

• Unnecessary subscriptions

• Running timers

Lifecycle Flow Diagram

Mounting:
constructor()
   ↓
getDerivedStateFromProps()
   ↓
render()
   ↓
componentDidMount()

Updating:
getDerivedStateFromProps()
   ↓
shouldComponentUpdate()
   ↓
render()
   ↓
getSnapshotBeforeUpdate()
   ↓
componentDidUpdate()

Unmounting:
componentWillUnmount()

Frequently Asked Interview Questions

Q1. Which lifecycle method is used for API calls?

Usually:

componentDidMount()

because the component is fully loaded.

Q2. Which method is used for cleanup?

componentWillUnmount()

Q3. Which lifecycle method controls re-rendering?

shouldComponentUpdate()

Q4. Which lifecycle method is mandatory?

render()

Deprecated Lifecycle Methods

Older React versions had:

• componentWillMount()

• componentWillReceiveProps()

• componentWillUpdate()

These are now deprecated.

Functional Components and Hooks

Modern React mainly uses functional components with Hooks instead of class lifecycle methods.

Equivalent using hooks:

useEffect(() => {
  // componentDidMount

  return () => {
    // componentWillUnmount
  };
}, []);

Short Interview Definition

React lifecycle methods are special methods in class components that execute during different phases of a component’s life such as mounting, updating, and unmounting. They are used for tasks like API calls, performance optimization, and cleanup.