In React, a component goes through different lifecycle phases from the time it is created until it is removed from the UI.

The three main phases are:

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

2. Updating → Component re-renders because data changes

3. Unmounting → Component is removed from the DOM

These phases are especially important in class components, but the same concepts apply to functional components using Hooks.

1. Mounting Phase

The mounting phase happens when a component is created and shown on the screen for the first time.

Flow of Mounting

constructor()
↓
render()
↓
componentDidMount()

Important Methods

constructor()

• Initializes state

• Binds methods

• Runs first

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

render()

• Returns JSX to display UI

• Required method

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

componentDidMount()

• Called after component is added to DOM

• Used for:

  • API calls

  • Timers

  • Subscriptions

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

Functional Component Equivalent

useEffect(() => {
  console.log("Mounted");
}, []);

Empty dependency array means it runs only once after initial render.

2. Updating Phase

The updating phase occurs whenever:

• State changes

• Props change

• Force update happens

React re-renders the component to reflect new data.

Flow of Updating

render()
↓
componentDidUpdate()

Important Methods

shouldComponentUpdate()

• Controls whether component should re-render

• Used for performance optimization

shouldComponentUpdate(nextProps, nextState) {
  return true;
}

componentDidUpdate()

• Runs after update is reflected in DOM

• Commonly used for:

  • API calls after state change

  • Comparing previous props/state

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

Example

class Counter extends React.Component {
  state = { count: 0 };

  componentDidUpdate() {
    console.log("Counter updated");
  }

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

Each button click triggers the updating phase.

Functional Component Equivalent

useEffect(() => {
  console.log("Updated");
});

Runs after every render/update.

3. Unmounting Phase

The unmounting phase occurs when a component is removed from the DOM.

Examples:

• Navigating to another page

• Hiding component conditionally

• Removing items from UI

Important Method

componentWillUnmount()

Used for cleanup:

• Clear timers

• Remove event listeners

• Cancel API subscriptions

componentWillUnmount() {
  console.log("Component removed");
}

Functional Component Equivalent

useEffect(() => {
  return () => {
    console.log("Cleanup before unmount");
  };
}, []);

Real-Life Example

Imagine a chat component:

Mounting

• Chat window opens

• Fetch messages from API

Updating

• New messages arrive

• UI refreshes

Unmounting

• User closes chat

• Remove WebSocket connection

Interview-Friendly Summary

Phase	Meaning	Common Methods
Mounting	Component created and added to DOM	constructor, render, componentDidMount
Updating	Component re-renders due to changes	shouldComponentUpdate, render, componentDidUpdate
Unmounting	Component removed from DOM	componentWillUnmount

Modern React Perspective

In modern React:

• Functional components + Hooks are preferred

• useEffect() replaces most lifecycle methods

Examples:

Class Lifecycle	Hook Equivalent
componentDidMount	useEffect(() => {}, [])
componentDidUpdate	useEffect(() => {})
componentWillUnmount	Cleanup function in useEffect

Short Interview Answer

React components go through three lifecycle phases:

• Mounting → when component is created and inserted into DOM

• Updating → when props or state change causing re-render

• Unmounting → when component is removed from DOM

Common lifecycle methods are componentDidMount, componentDidUpdate, and componentWillUnmount. In functional components, these behaviors are handled using useEffect.