Understanding React componentDidMount and how it works

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!