UseEffect vs componentDidMount: Key Differences and When to Use Each

componentDidMount is a class component lifecycle method that runs once after the component mounts, while useEffect is a React hook used in functional components to run side effects, including on mount when given an empty dependency array. useEffect replaces componentDidMount in modern React functional components.

Quick Comparison

This table summarizes the main differences between componentDidMount and useEffect when used to run code after a component loads.

Aspect	componentDidMount	useEffect (with empty deps)
Component Type	Class components only	Functional components only
When It Runs	Once after initial render	Once after initial render if deps array is empty
Syntax Style	Method inside class	Hook function inside component
Cleanup Support	Separate componentWillUnmount method	Return a cleanup function inside useEffect
Multiple Effects	Single method per component	Multiple useEffect calls allowed
React Version	All versions with classes	React 16.8+ with hooks

Key Differences

componentDidMount is a lifecycle method exclusive to React class components. It runs once right after the component is added to the page, making it ideal for tasks like fetching data or setting up subscriptions. However, it requires writing a class and managing state and lifecycle methods inside that class.

On the other hand, useEffect is a hook designed for functional components introduced in React 16.8. When you pass an empty dependency array ([]) to useEffect, it mimics componentDidMount by running the effect only once after the component mounts. This hook allows you to write side effects in a simpler, more modular way without classes.

Additionally, useEffect supports returning a cleanup function to replace componentWillUnmount, and you can have multiple useEffect calls in one component to separate concerns. This makes useEffect more flexible and aligned with modern React functional programming patterns.

Code Comparison

Here is how you fetch data once after a component loads using componentDidMount in a class component.

javascript

import React, { Component } from 'react';

class DataFetcher extends Component {
  state = { data: null };

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

  render() {
    const { data } = this.state;
    return (
      <div>
        <h1>DataFetcher with componentDidMount</h1>
        {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
      </div>
    );
  }
}

export default DataFetcher;

Output

<div><h1>DataFetcher with componentDidMount</h1><pre>{"userId":1,"id":1,"title":"delectus aut autem","completed":false}</pre></div>

UseEffect Equivalent

Here is the same data fetching done with useEffect in a functional component.

javascript

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => setData(json));
  }, []); // Empty array means run once on mount

  return (
    <div>
      <h1>DataFetcher with useEffect</h1>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
    </div>
  );
}

export default DataFetcher;

Output

<div><h1>DataFetcher with useEffect</h1><pre>{"userId":1,"id":1,"title":"delectus aut autem","completed":false}</pre></div>

When to Use Which

Choose componentDidMount if you are working with existing class components or legacy codebases that have not migrated to hooks. It is the standard way to run code after mounting in classes.

Choose useEffect in all new React projects using functional components. It offers cleaner syntax, better separation of concerns, and aligns with modern React best practices. It also supports multiple effects and easier cleanup.

Key Takeaways

useEffect with an empty dependency array replaces componentDidMount in functional components.

componentDidMount works only in class components and runs once after mounting.

useEffect allows multiple effects and cleanup in one component, improving modularity.

Use componentDidMount for legacy class code and useEffect for modern functional components.

Hooks like useEffect simplify side effect management and align with React's future direction.