Understanding React componentDidMount and how it works
Tags: react, abotwrotethis
Published: 2023-03-27 15:47:07

If you are new to React, you may have stumbled upon the term `componentDidMount`. It is one of the lifecycle methods in React's class components that you might come across in tutorials, documentation, and production code. But what does it do, and when should you use it?

## What is `componentDidMount`?

In React's class component, `componentDidMount` is one of the methods that gets called during the component's lifecycle. It gets invoked after the component is rendered on the page for the first time. In other words, after React has created a representation of the component into the DOM, `componentDidMount` gets triggered.

The purpose of `componentDidMount` is to handle side effects that need to occur after the component has mounted. For example, you might want to fetch data from an API, start an animation, or register event listeners after the component has rendered for the first time. 

Here's how `componentDidMount` looks like in code:

```
class MyComponent extends React.Component {
  componentDidMount() {
    // Your code here
  }
  // Other lifecycle methods and component code
}
```

All you need to do is define a method called `componentDidMount` and put your code inside the method. React will call this method once after the component has mounted.

## How does `componentDidMount` work?

Let's dig deeper into how `componentDidMount` works and what happens when it gets called.

1. React creates a virtual representation of the component.
2. React passes the component's props and state to the `render()` method and creates a virtual DOM tree.
3. React updates the actual DOM according to the virtual DOM tree.
4. After the DOM has updated, React calls `componentDidMount` method.

At this point, the component is mounted, and you can execute any code that needs to happen after mounting, such as fetching data from an API or doing some DOM manipulation. 

It's crucial to note that `componentDidMount` only gets called once during the whole lifecycle of the component. If you want to do something every time the component updates, you need to use `componentDidUpdate`.

## Why use `componentDidMount`?

When would you want to use `componentDidMount`? Here are three scenarios where `componentDidMount` comes in handy:

### Fetching Data From an API

In a typical React application, you may need to fetch data from an API and render it on the page. You can't fetch data in the `render()` method, as it will block the rendering process, and your app will freeze. Instead, you can use `componentDidMount` to make an API call after the component mounts.

Here's an example of fetching data using `componentDidMount`:

```
class MyComponent extends React.Component {
  state = {
    data: null,
  }

  async componentDidMount() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    this.setState({ data });
  }

  render() {
    return (
      <div>
        {this.state.data ? (
          <ul>
            {this.state.data.map((item) => (
              <li>{item.name}</li>
            ))}
          </ul>
        ) : (
          <p>Loading...</p>
        )}
      </div>
    );
  }
}
```

Here, we define a state called `data`, which will hold the data fetched from the API. In the `componentDidMount` method, we use the `fetch()` method to retrieve the data and convert it to JSON format. Then, we set the state with the data, which triggers a re-render of the component.

### Initializing Third-Party Libraries

Sometimes, you may want to use third-party libraries like maps, graphs, or animations in your React app. These libraries often require initialization or configuration after the DOM has rendered. You can use `componentDidMount` to set up and initialize the libraries after the component mounts.

Here's an example of initializing a graph library using `componentDidMount`:

```
class MyComponent extends React.Component {
  chart = null;

  async componentDidMount() {
    const chart = new MyGraphLibrary('#chart', {
      type: 'bar',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
          label: 'Sales',
          data: [5, 10, 15, 20, 25, 30, 35],
        }]
      }
    });
    chart.render();
    this.chart = chart;
  }

  componentWillUnmount() {
    this.chart.destroy();
  }

  render() {
    return (
      <div id="chart"></div>
    );
  }
}
```

Here, we define an instance variable called `chart` to hold the reference to the graph library. In the `componentDidMount` method, we create a new instance of the graph library and pass the configuration object. We call the `render()` method to display the graph on the page, and store the instance reference in the `chart` variable. We also define a `componentWillUnmount` method to clean up the graph when the component removes from the page.

### Adding Event Listeners

In a React app, you may want to listen to event triggers such as clicks, scrolls, or key presses. You can't add event listeners directly in the `render()` method, as it will recreate the listeners every time the component re-renders, leading to performance issues. Instead, you can use `componentDidMount` to add event listeners after the component mounts.

Here's an example of adding a click listener using `componentDidMount`:

```
class MyComponent extends React.Component {
  componentDidMount() {
    document.addEventListener('click', this.handleClick);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.handleClick);
  }

  handleClick = (event) => {
    console.log(`Clicked at (${event.clientX}, ${event.clientY})`);
  }

  render() {
    return (
      <div>
        Click anywhere on the page to log coordinates to the console.
      </div>
    );
  }
}
```

In this example, we add a click listener to the `document` object in `componentDidMount`. When the component unmounts, we remove the listener in `componentWillUnmount`. We define a `handleClick` method that logs the coordinates of the clicked position to the console.

## Conclusion

To sum up, `componentDidMount` is a powerful lifecycle method in React that you can use to handle side effects after the component has mounted. You can use it to fetch data from an API, initialize third-party libraries, or add event listeners. Remember, `componentDidMount` only gets called once during the component's lifecycle, so use it wisely. Happy coding!