✅ What is componentDidMount in React?

componentDidMount() is a lifecycle method used in React class components. It runs once, immediately after the component is mounted to the DOM. This makes it the perfect place to perform side effects such as fetching data from an API, setting up subscriptions, starting timers, or initializing third-party libraries. This method is only available in class components; in functional components, the same behavior is achieved using the useEffect hook with an empty dependency array.

🚀 Syntax

componentDidMount() {
  // your logic here
}

🔧 Example: Fetching users using componentDidMount

import React from "react";

class UserList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
      loading: true
    };
  }

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

  render() {
    const { users, loading } = this.state;

    if (loading) {
      return <p>Loading users...</p>;
    }

    return (
      <div>
        <h2>User List</h2>
        <ul>
          {users.map(user => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default UserList;

Explanation: When the component is added to the DOM, componentDidMount() is called. The API request is triggered here, and once the data is received, the state is updated, causing the component to re-render and display the user list.

🧠 Key concepts

Runs only once after the initial render
Ideal for side effects such as data fetching, subscriptions, or timers
Not available in functional components, where useEffect is used instead

📌 Common use cases

Fetching data from REST APIs
Initializing charts, sliders, or analytics libraries
Setting up WebSocket connections
Performing DOM measurements or manipulations
Starting timers or animations

🚀 Benefits of using componentDidMount

Ensures logic runs at the right time, after the DOM is ready
Prevents unnecessary re-renders or repeated side effects
Works well with componentWillUnmount() for proper cleanup
Safe access to real DOM elements

🔁 Functional component alternative

In functional components, the same behavior is implemented using useEffect with an empty dependency array:

useEffect(() => {
  // runs once after the component mounts
}, []);

🧾 Conclusion

componentDidMount() is a fundamental lifecycle method for class-based React components. It provides a clean and reliable place to handle side effects after a component is rendered. Even though modern React favors functional components and hooks, understanding componentDidMount() is still essential when maintaining or working with legacy React codebases.

React componentDidMount Lifecycle Method