✅ `componentDidMount` vs `useEffect` in React

React supports class components through lifecycle methods and functional components through hooks.
Two APIs that are often compared are componentDidMount and useEffect.

They can solve similar problems—but they are not the same, and understanding the difference is important for writing correct and maintainable React code.

🔹 What Is `componentDidMount`?

componentDidMount is a lifecycle method available only in class components.

It runs once, immediately after the component is mounted (inserted into the DOM).

Common Use Cases

Fetching data from an API
Subscribing to events (WebSocket, window events)
Initializing third-party libraries
Performing DOM measurements

Example (Class Component)

import React, { Component } from "react";

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

    fetch("https://api.example.com/data")
      .then(res => res.json())
      .then(data => console.log(data));
  }

  render() {
    return <h2>Hello from Class Component</h2>;
  }
}

👉 Key point:
componentDidMount runs only once, after the initial render.

🔹 What Is `useEffect`?

useEffect is a React Hook introduced in React 16.8.
It allows you to perform side effects inside functional components.

Unlike componentDidMount, useEffect is more flexible and can run:

After mount
After updates
Before unmount (via cleanup)

Execution Behavior

useEffect runs:

After every render (by default)
Once on mount (with an empty dependency array [])
When specific dependencies change ([dep1, dep2])

Example (Functional Component)

import React, { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    console.log("Component mounted!");

    fetch("https://api.example.com/data")
      .then(res => res.json())
      .then(data => console.log(data));
  }, []); // empty dependency array

  return <h2>Hello from Functional Component</h2>;
}

👉 With [], useEffect behaves like componentDidMount.

📊 Key Differences: `componentDidMount` vs `useEffect`

Feature	`componentDidMount`	`useEffect`
Component type	Class components only	Functional components only
When it runs	Once after mount	After render (controlled by deps)
Handles updates	❌ No	✅ Yes
Cleanup support	Needs `componentWillUnmount`	Built-in cleanup function
Dependency control	❌ None	✅ Dependency array
Flexibility	Limited	Very flexible

🧹 Cleanup Example with `useEffect`

One major advantage of useEffect is cleanup logic.

Example

useEffect(() => {
  const timer = setInterval(() => {
    console.log("Timer running...");
  }, 1000);

  // Cleanup on unmount
  return () => clearInterval(timer);
}, []);

Equivalent Class Logic

In class components, you need two lifecycle methods:

componentDidMount → setup
componentWillUnmount → cleanup

Hooks combine both into one place, making code easier to reason about.

✅ Best Practices

Use [] if you want useEffect to behave like componentDidMount
Always return a cleanup function for subscriptions or timers
Split unrelated logic into multiple useEffect hooks
Be careful with dependency arrays to avoid unnecessary re-runs
Prefer hooks for new code; lifecycle methods are mostly for legacy code

🧾 Final Thoughts

componentDidMount
- Class-only
- Runs once
- Handles mounting logic only
useEffect
- Functional components
- Handles mount, update, and unmount
- More powerful and flexible

If you’re working with modern React, mastering useEffect is essential. It replaces multiple lifecycle methods and gives you a cleaner, more predictable way to manage side effects.

Think of useEffect as a unified lifecycle tool for functional components.

componentDidMount vs useEffect in React – Key Differences