title: Maximum call stack exceeded error in ReactJS. Can someone help explain what's going on? (Snippet on JSFiddle)
body: <p>I'm new to ReactJS and was trying my hands on a simple project. Basically, the snippet create a list of friends from an array and displays the total number of friends.</p>
  
  <p>For some reason, I realized the incrementFriendsCount function throws a "Maximum call stack exceeded error" when I add a new friend</p>
  
  <p>The code snippet below is also <a href="https://jsfiddle.net/Jwan622/kb3gN/12272/" rel="noreferrer">available on JSFiddle</a>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var HelloUser = React.createClass({
    getInitialState: function() {
      return {
        name: "Toyosi",
        friends: ["Susanna", "Jibola", "Worreva"],
        friendsCount: 0
      }
    },
    addFriends: function(friend) {
      this.setState({
        friends: this.state.friends.concat([friend])
      });
    },
    componentWillMount: function() {
      this.setState({
        friendsCount: this.state.friends.length
      });
    },
    incrementFriendsCount: function() {
      this.setState({
        friendsCount: this.state.friends.length
      });
    },
    render: function() {
      return ( &lt; div &gt;
        Villain: {
          this.state.name
        }, No of friends: {
          this.state.friendsCount
        } &lt; br / &gt;
        &lt; AddingTheFriend addNew = {
          this.addFriends
        }
        incCount = {
          this.incrementFriendsCount
        }
        /&gt;
          &lt;ListFriends enemies={this.state.friends} / &gt;
        &lt; /div&gt;
      );
    }
  });
  
  var ListFriends = React.createClass({
      propTypes: {
       enemies: React.PropTypes.array.isRequired
      },
      render: function() {
       var allFriends = this.props.enemies.map(function(friend){
           return &lt;li&gt;{friend}&lt;/li &gt; ;
      });
  
    return ( &lt; div &gt; Her evil friends:
      &lt; ul &gt; {
        allFriends
      } &lt; /ul&gt;
              &lt;/div &gt;
    )
  }
  });
  
  var AddingTheFriend = React.createClass({
        getInitialState: function() {
          return {
            newFriend: ''
          }
        },
        propTypes: {
          addNew: React.PropTypes.func.isRequired
        },
        updateNewFriend: function(change) {
          this.setState({
            newFriend: change.target.value
          });
        },
        addTheFriend: function() {
          this.props.addNew(this.state.newFriend);
          this.setState({
            newFriend: ''
          })
        },
        componentWillReceiveProps: function() {
          this.props.incCount();
        },
        render: function() {
            return ( &lt; div &gt;
              &lt; input type = "text"
              value = {
                this.state.newFriend
              }
              onChange = {
                this.updateNewFriend
              }
              /&gt;
                  &lt;button type="button" onClick={this.addTheFriend}&gt;Add Friend&lt;/button &gt;
              &lt; /div&gt;
          )
      }
  });
  React.render(&lt;HelloUser / &gt; , document.getElementById('app'));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://fb.me/react-js-fiddle-integration.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I will appreciate if anyone could throw more light on why this error is thrown.</p>