The primary difference between componentDidMount and useEffect is related to the class-based component lifecycle and functional components in React.

1. componentDidMount (Class Component Lifecycle)

componentDidMount is a lifecycle method in class components that is invoked once the component has been rendered to the screen (after the first render). It is commonly used for performing side effects such as fetching data, setting up subscriptions, or manually interacting with the DOM.

Key Features:

• It is only available in class components.
• It runs once, after the initial render.
• It is used for side effects like API calls, adding event listeners, or initializing libraries.

Example:

import React, { Component } from 'react';

class MyComponent extends Component {
componentDidMount() {
console.log('Component mounted');
// You can fetch data or perform side effects here
}

render() {
return <div>Hello World</div>;
}
}

export default MyComponent;

In the above example, componentDidMount runs once after the initial render of the component.

2. useEffect (Functional Component Hook)

useEffect is a React Hook that was introduced in React 16.8 to handle side effects in functional components. It can be used for operations like data fetching, DOM manipulation, subscriptions, etc. useEffect can mimic componentDidMount behavior but also works with updates, and cleanup actions (similar to other lifecycle methods).

Key Features:

• It is available in functional components.
• It runs after every render by default (can be configured to run only once, similar to componentDidMount).
• Can handle side effects, including cleanup tasks, and can be controlled by dependency arrays.
• You can control its execution using the dependency array to mimic the behavior of componentDidMount, componentDidUpdate, and componentWillUnmount.

Basic Example (Like componentDidMount):

import React, { useEffect } from 'react';

const MyComponent = () => {
useEffect(() => {
console.log('Component mounted');
// You can fetch data or perform side effects here
}, []); // Empty array means it runs only once (like componentDidMount)

return <div>Hello World</div>;
};

export default MyComponent;

In this example, useEffect runs once after the component is mounted, just like componentDidMount. The empty array [] is the dependency array, and it tells React to run the effect only once after the initial render, similar to how componentDidMount works.

Comparison:

Handling Cleanup in useEffect vs componentDidMount:

componentDidMount does not have built-in support for cleanup, but you can use componentWillUnmount for cleanup tasks. In functional components with useEffect, you can specify a cleanup function within the useEffect itself, making it easier to manage.

Example of Cleanup with useEffect:

import React, { useEffect } from 'react';

const MyComponent = () => {
useEffect(() => {
const timer = setTimeout(() => {
console.log('Timer ended');
}, 1000);

// Cleanup function
return () => {
clearTimeout(timer);
console.log('Cleanup: Timer cleared');
};
}, []); // Runs once and cleans up when component is unmounted

return <div>Hello World</div>;
};

export default MyComponent;

In the above example:

• The useEffect runs once (like componentDidMount).
• The cleanup function clears the timer when the component is unmounted (or when dependencies change).

Conclusion:

• componentDidMount is used in class components to run logic after the component mounts.
• useEffect is used in functional components and provides more flexibility to manage side effects, handle cleanup, and control execution with a dependency array.
• useEffect can replace componentDidMount, componentDidUpdate, and componentWillUnmount using different configurations of the dependency array, making it a more powerful and reusable tool for managing side effects in React functional components.