UseEffect vs. ComponentDidMount: How They Work in React

Why do developers prefer React hooks over class-based components?

One big reason is useEffect. It simplifies side effects in functional components, making code cleaner and easier to manage.

But how does it compare to componentDidMount, the old way of handling side effects in class components?

This blog breaks down useEffect vs componentDidMount, explaining their differences, how they work, and when to use each. Understanding these will help developers write better React components with fewer headaches.

Understanding componentDidMount in Class Components

componentDidMount is a lifecycle method used in class-based components. It runs once when a component mounts, making it ideal for fetching data operations, subscriptions, or interactions with external APIs.

How componentDidMount Works

1. The component is created and inserted into the DOM.

2. componentDidMount is called after the first render.

3. Any function inside this method executes only once.

Here’s an example of using componentDidMount to fetch data from an API:

Copy
1import React, { Component } from "react";
2
3class UserList extends Component {
4  state = { users: [] };
5
6  componentDidMount() {
7    fetch("https://jsonplaceholder.typicode.com/users")
8      .then((response) => response.json())
9      .then((data) => this.setState({ users: data }));
10  }
11
12  render() {
13    return (
14      <ul>
15        {this.state.users.map((user) => (
16          <li key={user.id}>{user.name}</li>
17        ))}
18      </ul>
19    );
20  }
21}
22
23export default UserList;

Key Aspects of componentDidMount

• It runs after the component has been mounted.

• Used for API calls, event listeners, or subscriptions.

• Executes once unless the component is re-mounted.

Understanding useEffect in Functional Components

The useEffect hook in functional components replaces componentDidMount, componentDidUpdate, and componentWillUnmount. It enables developers to carry out side operations like event listener setup, DOM updates, and data fetching.

How useEffect Works

1. The effect function is executed after the component renders.

2. It runs based on dependencies provided in the dependency array.

3. Cleanup function is executed before the component unmounts.

Here’s an example of using the useEffect hook to fetch data from an API:

Copy
1import React, { useState, useEffect } from "react";
2
3const UserList = () => {
4  const [users, setUsers] = useState([]);
5
6  useEffect(() => {
7    fetch("https://jsonplaceholder.typicode.com/users")
8      .then((response) => response.json())
9      .then((data) => setUsers(data));
10  }, []); // Empty dependency array ensures it runs only once
11
12  return (
13    <ul>
14      {users.map((user) => (
15        <li key={user.id}>{user.name}</li>
16      ))}
17    </ul>
18  );
19};
20
21export default UserList;

Comparing useEffect vs componentDidMount

The key difference between componentDidMount and the useEffect hook is how and when they are executed. Let’s compare them in various aspects.

1. Execution Timing

2. Handling Dependencies

The dependency array in the useEffect hook determines when it re-runs.

3. Cleanup Function

useEffect supports a cleanup function, which helps avoid memory leaks.

Copy
1useEffect(() => {
2  const interval = setInterval(() => {
3    console.log("Interval running...");
4  }, 1000);
5
6  return () => clearInterval(interval); // Cleanup function
7}, []);

In class-based components, this requires a separate componentWillUnmount method.

Copy
1componentWillUnmount() {
2  clearInterval(this.interval);
3}

How useEffect Handles Different Scenarios

1. Simulating componentDidMount

By using an empty dependency array, the useEffect hook runs only once after the first render, mimicking componentDidMount.

Copy
1useEffect(() => {
2  console.log("Component mounted");
3}, []); // Empty dependency array

2. Simulating componentDidUpdate

Adding dependencies makes the effect run when those values change.

Copy
1useEffect(() => {
2  console.log("State changed!");
3}, [count]); // Runs when `count` updates

3. Simulating componentWillUnmount

Returning a function inside useEffect acts as a cleanup function, executed when the component unmounts.

Copy
1useEffect(() => {
2  const handleResize = () => console.log("Resized!");
3
4  window.addEventListener("resize", handleResize);
5
6  return () => {
7    window.removeEventListener("resize", handleResize); // Cleanup function
8  };
9}, []);

Visualizing useEffect Execution with a Mermaid Diagram

Choosing Between useEffect and componentDidMount

Final Thoughts on useEffect vs componentDidMount

Both componentDidMount and the useEffect hook allow developers to run side effects when a component mounts. The useEffect hook provides more flexibility, enabling multiple effects, dependency tracking, and an integrated cleanup function.

Using useEffect in functional components is the recommended approach for modern React applications over class components. It simplifies lifecycle method handling and ensures better performance by avoiding unnecessary re-renders.