componentDidMount() is a lifecycle method in React class components. It is called once immediately after the component is rendered (mounted) into the DOM.

Syntax

class MyComponent extends React.Component {
  componentDidMount() {
    console.log("Component mounted");
  }

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

Main Purpose of componentDidMount()

It is mainly used for:

• API calls

• Fetching data from server

• Setting up subscriptions

• Starting timers

• Accessing DOM elements

• Initializing third-party libraries

Because the component is already rendered to the screen at this stage.

Common Interview Explanation

You can say:

"componentDidMount() is a React lifecycle method invoked once after the component is inserted into the DOM. It is commonly used for side effects such as API calls, subscriptions, timers, and DOM manipulations."

Real-Time Example — API Call

class Users extends React.Component {
  state = {
    users: []
  };

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(data => {
        this.setState({ users: data });
      });
  }

  render() {
    return (
      <ul>
        {this.state.users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    );
  }
}

What happens here?

1. Component renders first

2. componentDidMount() executes

3. API call happens

4. State updates using setState()

5. Component re-renders with fetched data

Why not call APIs inside render()?

Because:

• render() should stay pure

• API calls inside render() can cause infinite re-renders

• componentDidMount() runs only once after initial render

Important Characteristics

Feature	Description
Called when?	After first render
Runs how many times?	Only once
Used in	Class components
Safe to use setState()?	Yes
Used for side effects?	Yes

Interview Trick Question

Q: Does componentDidMount() run before or after render?

Answer:

It runs after the initial render.

Flow:

constructor()
render()
componentDidMount()

Functional Component Equivalent

In modern React, functional components use useEffect() instead.

import { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    console.log("Component mounted");
  }, []);

  return <h1>Hello</h1>;
}

The empty dependency array [] makes it run only once, similar to componentDidMount().

Common Interview Questions

1. Can we use setState() inside componentDidMount()?

Yes.

componentDidMount() {
  this.setState({ loaded: true });
}

It triggers one extra render after mounting.

2. Is componentDidMount() called on every re-render?

No.
It runs only once after the initial mount.

3. Can we access DOM elements inside it?

Yes.

componentDidMount() {
  console.log(this.myRef.current);
}

Best Practices

• Use it for side effects only

• Clean up subscriptions/timers in componentWillUnmount()

• Avoid unnecessary setState()

• Prefer useEffect() in new React applications

Short Interview Answer

"componentDidMount() is a lifecycle method in React class components that executes once after the component is added to the DOM. It is mainly used for API calls, subscriptions, timers, and DOM-related operations."