Why and when to use componentDidMount in react js?

Question

I was going through the react tutorial and I'm confused as to why componentDidMount is used?

Answer 1

I think the documentation covers it well enough:

Mounting: componentDidMount

void componentDidMount()

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, you can access any refs to your children (e.g., to access the underlying DOM representation). The componentDidMount() method of child components is invoked before that of parent components.

If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requests, perform those operations in this method.

Answer 2

One really useful way to use componentDidMount is for AJAX requests.

So, imagine a situation where you want to get a list of Comments for an Article. After the component is created you may want to go retrieve the list of comments from the server and then display them to the user.

Here's an example (from the React tutorial): https://facebook.github.io/react/docs/tutorial.html#updating-state