title: setState method causes infinite loop of Results in Reactjs Functions
body: <p>The code displays users records from an array.
  I also creates an <code>updateCount()</code> function which counts users on content display.</p>
  <p>I can see the count results <strong>alerted</strong> and in the console.</p>
  <p>Now I want to display the count results and to this effect, I initialize <code>setState()</code> method within the <code>updateCount</code> function.</p>
  <pre class="lang-js prettyprint-override"><code>updateCount = userId =&gt; {
      ...some code missing
      this.setState({dataCount: count});
  }
  </code></pre>
  <p>This causes infinite loop of the results due to re-rendering.
  Is there anyway to get the <code>setState</code> out of the <code>UpdateCount()</code> function to enable me display the count results well or any better possible approach.</p>
  <p><strong>Here is the Code</strong></p>
  <pre><code>import React, { Component, Fragment } from &quot;react&quot;;
  import { render } from &quot;react-dom&quot;;
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: [],
        userCount: []
      };
    }
  
    componentDidMount() {
      var userId = &quot;100&quot;;
  
      this.setState({
        data: [
          {
            id: &quot;100&quot;,
            name: &quot;Luke&quot;
          },
          {
            id: &quot;200&quot;,
            name: &quot;Henry&quot;
          },
          {
            id: &quot;300&quot;,
            name: &quot;Mark&quot;
          }
        ]
      });
  
      this.updateCount = this.updateCount.bind(this);
    }
  
    updateCount = userId =&gt; {
      var count = 1;
      alert(&quot;counting: &quot; + count);
      console.log(&quot;counting: &quot; + count);
  
      this.setState({ dataCount: count });
    };
  
    render() {
      return (
        &lt;span&gt;
          &lt;label&gt;
            (---{this.state.dataCount}--)
            &lt;ul&gt;
              {this.state.data.map((person, i) =&gt; {
                if (person.id == 100) {
                  //this.updateCount(person.id);
  
                  return (
                    &lt;div key={i}&gt;
                      &lt;div&gt;
                        {person.id}: {person.name}
                      &lt;/div&gt;
                    &lt;/div&gt;
                  );
                } else {
                  this.updateCount(person.id);
                }
              })}
            &lt;/ul&gt;{&quot; &quot;}
          &lt;/label&gt;{&quot; &quot;}
        &lt;/span&gt;
      );
    }
  }
  </code></pre>