How to Use React componentDidMount in Class & Functional Components?

In React, handling actions that need to occur after the initial rendering, such as fetching data or setting up event listeners, can be tricky. This is where componentDidMount comes in, offering a reliable way to perform these tasks once the component has been mounted.

componentDidMount ensures that side effects don’t interfere with the initial rendering process. That enhances both user experience and performance. In this blog, we’ll help you learn how ReactJS development experts use componentDidMount to create optimized functionality.

We’ll also dive into the best practices you can follow and example code you can use to implement componentDidMount. But before that, first, let’s understand what exactly React componentDidMount is.

What is React componentDidMount?

componentDidMount is a lifecycle method in React that is called after a component has been rendered to the DOM (Document Object Model) for the first time. It’s part of the class-based components lifecycle and allows you to execute code after the component has been mounted (i.e., the initial render is completed).

Here is an example showcasing the use of React componentDidMount:

class MyComponent extends React.Component {
  componentDidMount() {
    // Code to run after the component mounts
    console.log('Component has mounted!');
  }
  render() {
    return <div>Hello, World!</div>;
  }
}

In this example, the componentDidMount method logs a message right after the component is mounted to the DOM. If said simply, anything that needs to happen after the component is rendered on the screen can be placed within componentDidMount.

When to use componentDidMount?

componentDidMount is typically used for tasks that require the component to be rendered in the DOM before execution. Here are some common scenarios:

• Fetching data: When you need to fetch data from an API and display it in the component, componentDidMount is a good place to make the API call. Once the data is received, you can update the component’s state and trigger a re-render.
• Setting up event listeners: If you want to attach event listeners to DOM elements or window objects, you should do so using componentDidMount. This ensures that the listeners are in place when the elements become available in the DOM.
• Initializing third-party libraries: Many third-party libraries require DOM elements or a specific context to function properly. componentDidMount is a suitable place to initialize these libraries and configure them to work with your component.
• Performing DOM manipulations: While you should generally avoid direct DOM manipulations in React if you absolutely need to do something like this, componentDidMount is a good time to do it. However, be cautious about performance implications and potential side effects.

Note: componentDidMount is only called once in a component’s lifecycle. So, if you want to set up tasks that need to be repeated, you should handle them using other lifecycle methods like componentDidUpdate. If you want to make your website experience smooth with such tools, hire expert ReactJS developers.

How to Use setState in React componentDidMount?

To use setState within componentDidMount in a React class component, follow these steps:

Step 1: If you’re using a class-based component, import React and the Component class. If you’re using a functional component, import React and the useEffect hook.

Step 2: Create a class-based or functional component as needed.

Step 3: Set the initial state of the component using the state property in class-based components or the useState hook in functional components.

Step 4: Inside componentDidMount or the useEffect hook, fetch data from an API or perform any necessary setup tasks.

Step 5: Once you have the data or have completed the setup, use setState to update the component’s state with the new data or values. This will trigger a rerender of the component with the updated state.

Example Code Using a Class-Based Component

import React, { Component } from 'react';
class DemoLifecycle extends Component {
  constructor() {
    super();
    this.state = {
      data: 'WPWeb'
    };
  }
  fetchData() {
    setTimeout(() => {
      console.log('Data fetched!');
      this.setState({
        data: 'Hello World!'
      });
    }, 1000);
  }
  componentDidMount() {
    this.fetchData();
  }
  render() {
    return (
      <div>
        {this.state.data}
      </div>
    );
  }
}
export default DemoLifecycle;

The above code snippet demonstrates how to use setState within componentDidMount. Here’s a breakdown of the code:

• Import Statements: React and Component are imported from the React library. These imports are required to create React components.
• Class Component: A class component named DemoLifecycle is created. This component extends the Component class from React.
• Constructor: The constructor initializes the component’s state using the super keyword to call the parent component’s constructor (in this case, Component). The state is set as an object with a data property initialized to the string “WPWeb”.
• fetchData Method: This method simulates fetching data from an API using setTimeout. It logs a message to the console after a 1-second delay and then updates the state’s data property to “Hello World!” using setState.
• componentDidMount Method: This lifecycle method is called after the component mounts (i.e., after the initial render). Inside componentDidMount, the fetchData method is called to simulate data fetching and update the state.
• render Method: The render method returns JSX content. In this case, it simply returns a div element that displays the value of the state’s data property.

When this component is rendered, you’ll initially see “WPWeb” on the screen. After 1 second (due to the setTimeout call), the fetchData method is executed, updating the state’s data to “Hello World!”. This triggers a rerender of the component, and you’ll see the updated value “Hello World!” displayed on the screen.

Example Code Using a Functional Component

import React, { useState, useEffect } from 'react';
function MyFunctionalComponent() {
  const [data, setData] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const json = await response.json();
      setData(json);
    };
    fetchData();
  }, []);
  return (
    <div>
      {data && <p>{data.message}</p>}
    </div>
  );
}

In both examples, the setState method is used within the componentDidMount or useEffect hook to update the data state with the fetched data. This triggers a rerender of the component, displaying the fetched data. If you want to optimize or create a site that uses the best coding practices, consider hiring ReactJS developers.

How to Use React componentDidMount in Functional Components?

While React class components have the componentDidMount lifecycle method, functional components don’t have it directly. However, you can achieve similar functionality using the useEffect hook. Here’s a step-by-step process on how to use the equivalent of componentDidMount in functional components:

Step 1: Import the useEffect Hook

To get started, import the useEffect hook from React at the top of your functional component.

import React, { useEffect } from 'react';

Step 2: Use useEffect Hook in the Component

Inside your functional component, use the useEffect hook. The hook takes two arguments.

• First argument: A callback function that contains the code you want to run after the component has been rendered (similar to what you would place in componentDidMount).
• Second argument: An empty dependency array ([]). This ensures that the effect runs only once, mimicking the behavior of componentDidMount.

useEffect(() => {
  // This code runs after the component mounts (similar to componentDidMount)
  console.log("Component has mounted");
  // Optional: Return a cleanup function if necessary
  return () => {
    console.log("Component will unmount");
  };
}, []); // Empty array ensures it runs only once

Step 3: Perform Side Effects (e.g., Fetching Data)

If you need to perform side effects like data fetching, you can do so inside the callback passed to useEffect.

useEffect(() => {
  // Fetch data or execute any side effect
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      console.log(data);
      // Perform state updates here if necessary
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
}, []); // Runs only once after the component mounts

Step 4: Render the Component

Now ensure your component renders any necessary JSX elements based on the state or props.

function MyFunctionalComponent() {
  useEffect(() => {
    // ComponentDidMount equivalent code here
    console.log("Component mounted");
  }, []);
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

In the above code, the empty dependency array ([]) ensures that useEffect runs only once, similar to componentDidMount in class components. And Like componentDidMount, useEffect is used for side effects such as data fetching, subscriptions, or DOM manipulations after the initial render.

Complete Example of React componentDidMount

Here’s a simple example of how componentDidMount is used in a class-based React component to perform an action after the component is rendered for the first time. In this case, we’ll simulate data fetching from an API:

import React from 'react';
class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: null,
      loading: true
    };
  }
  // componentDidMount is called after the component is mounted (rendered)
  componentDidMount() {
    // Simulating an API call to fetch user data
    fetch('https://jsonplaceholder.typicode.com/users/1')
      .then(response => response.json())
      .then(data => {
        // Update state with the fetched data
        this.setState({
          user: data,
          loading: false
        });
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }
  render() {
    const { user, loading } = this.state;
    if (loading) {
      return <div>Loading...</div>;
    }
    return (
      <div>
        <h1>User Profile</h1>
        <p><strong>Name:</strong> {user.name}</p>
        <p><strong>Email:</strong> {user.email}</p>
        <p><strong>Phone:</strong> {user.phone}</p>
      </div>
    );
  }
}
export default UserProfile;

Here’s a breakdown of the code:

• Initial State: The component starts with the user set to null and the loading set to true to show a loading indicator until the data is fetched.
• componentDidMount: After the component is mounted, componentDidMount is called. This method triggers a fetch request to retrieve user data from an external API.
• Updating State: Once the data is received, the component’s state is updated using this.setState(), and the loading flag is set to false. That will cause the component to rerender with the new data.
• Rendering: Before the data is fetched, the component shows “Loading…”. Once the data is loaded, it displays the user’s profile information.

Once the loading completes, you will see an output similar to:

User Profile
Name: WPWeb Infotech
Email: sales@wpwebinfotech.com
Phone: +1(848)2282080

Best Practices of Using React componentDidMount

When using componentDidMount in React class components, there are several best practices to follow. These practices help ensure your component performs efficiently and is easier to maintain:

Set Loading State

While fetching data, it is a good practice to update the loading state in the componentDidMount method. This helps in managing the user interface while the data is being loaded.

componentDidMount() {
  this.setState({ loading: true });
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => this.setState({ data, loading: false }))
    .catch(error => this.setState({ loading: false }));
}

Avoid Direct DOM Manipulation

If you need to manipulate the DOM, avoid doing it directly within componentDidMount. Instead, use React Refs to safely interact with DOM elements.

componentDidMount() {
  this.myElementRef.current.focus(); // Using refs
}

Clean Up Side Effects

If you set up any side effects (like event listeners or timers) in componentDidMount, you should clean them up in componentWillUnmount. It will help you to avoid memory leaks.

componentDidMount() {
  this.timerID = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
  clearInterval(this.timerID);
}

Batch Updates with setState

Avoid multiple setState calls inside componentDidMount. Instead, batch the updates into one call to optimize rendering performance.

componentDidMount() {
  this.setState({
    data: fetchedData,
    loading: false,
  });
}

Use useEffect in Functional Components

In React websites, it’s a best practice to prefer functional components over class components. You can achieve the same behavior as componentDidMount in functional components by using the useEffect hook with an empty dependency array [].

These were some of the best practices that will help you make your code optimized and maintainable. If you want to build a website that is interactive and dynamic yet performs well, get in touch with our ReactJS development company.

FAQs About React componentDidMount

Wrapping Up

Understanding how and when to use componentDidMount() can enhance user experiences by handling tasks like API calls, event listeners, and DOM updates efficiently. It ensures everything loads in the right order without interrupting the rendering flow.

You can use React componentDidMount with class-based components and functional components. By following the best practices, like setting the loading state and making batch updates, you can make the site high-performing.

If you are looking to build a site that is scalable and performant, hire ReactJS developers.