React : setState in componentDidMount not causing infinite loop

Question

I am new to ReactJS. When i am reading ReactJS Blueprint book author had specified that

"but take care to never run setState in here, as that will trigger an endless update loop."

So, i have created a below simple component but i did not see any such infinite loop happening.

'use strict';
import React from 'react';
import { render } from 'react-dom';
const App = React.createClass({
    displayName : "SG",
    getDefaultProps() {
        return {
            age : "24"
        }
    },
    getInitialState() {
        return {
            date : ""
        }
    },
    componentDidMount() {
        debugger;
        var d = new Date();
        this.setState({date: d.getMilliseconds().toString()});
    },
    render() {
        return (
            <section>
                <h1>Demo App</h1>
                <p>Name : {this.props.name}</p>
                <p>Age : {this.props.age}</p>
                <p>date : {this.state.date}</p>
            </section>
        );
    }
});
render (<App name='Gowtham S'/>, document.getElementById('container'));

I kept debugger in componentDidMount but it is hitting only once. Whats wrong with my code can anyone help me?

Thanks

Answer 1

He is talking about componentDidUpdate , not componentDidMount .

---

When you setState in componentDidUpdate , the latter is being called again because the component should update, which results in endless recursion. On the other hand, componentDidMount is only called on the initial render.