title: react setState interval
body: <p>I'm using <code>setState()</code> to update a badge displaying the number of unread messages a user has:</p>
  
  <pre><code>updateUnread(){
    this.setState({
      unreadCount: Math.floor(Math.random() * 100)
    });
  }
  
  render(){
    setInterval(() =&gt; this.updateUnread(), 2000);
  
    return (
      &lt;div className="wrapper"&gt;
        &lt;Messages unreadCount={this.state.unreadCount} /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>However, it keeps flickering between the numbers, as you can see in <a href="https://youtu.be/BlW831h1IFo" rel="nofollow noreferrer">this video</a>. I'm not sure why this is, as I'm pretty new to React, but I think it might be that a new interval is being created every time it updates. If this is the case, how am I supposed to do this?</p>
  
  <p>And yes, I know it's just random numbers being put in there, this is only development :)</p>