Why setState crashes browser
<p>I have two tabs that contains some <code>bulletins</code> and <code>newses</code>, respectively. And a <code>badge</code> on each tab to tell if all of the items has been viewed.</p>

<p>If all of <code>bulletins</code> or <code>newses</code> has been viewed, then the badge on that tab will hide, otherwise the badge will show up. </p>

<p>All needed calculations were defined in function <code>checkBulletinHasNew</code> and <code>checkNewsesHasNew</code>. But when I opened it up in browser, it crashed.</p>

<p>I'm pretty sure the causes of crash is the <code>this.setState</code> in these two function, because when I comment <code>this.setState</code> and replace it with <code>console.log</code> sentence, the browser works as usual.</p>

<p>How Can I fix it?</p>

<pre><code>import React from 'react';
import {Tab, Tabs} from '../../../../../components/Tabs';
import {TitleBar} from '../../../../../components/TitleBar';
import List from './List.jsx'
import ListItem from './ListItem.jsx'

class MsgCenter extends React.Component {
  constructor() {
    super()
    this.checkBulletinHasNew = this.checkBulletinHasNew.bind(this)
    this.checkNewsesHasNew = this.checkNewsesHasNew.bind(this)
    this.state = {
      bulletinHasNew: false,
      newsesHasNew: false,
      active: true
    }
  }

  handleTabChanged() {

  }

  checkBulletinHasNew(bulletins) {
    if (bulletins &amp;&amp; bulletins.length &gt; 0) {
      for(var i = 0;i &lt; bulletins.length;i++){
        if (!bulletins[i].viewed){
          this.setState({bulletinHasNew: true})
          //console.log('bulletings has un-viewed')
          return
        }
      }
      this.setState({bulletinHasNew: false})
      //console.log('bulletings are viewed')
      return
    }
  }

  checkNewsesHasNew(newses) {
    if (newses &amp;&amp; newses.length &gt; 0) {
      for(var i = 0;i &lt; newses.length;i++) {
        if(!newses[i].viewed){
          this.setState({newsesHasNew: true})
          //console.log('newses has un-viewed')
          return
        }
      }
      this.setState({newsesHasNew: false})
      //console.log('newses are viewed')
      return
    }
  }

  componentWillUpdate(nextProps, nextState) {
    this.checkBulletinHasNew(nextProps.bulletins.items)
    this.checkNewsesHasNew(nextProps.newses.items)
  }

  componentDidMount(){
    this.checkBulletinHasNew(this.props.bulletins.items)
    this.checkNewsesHasNew(this.props.newses.items)
  }

  render() {
    return (
      &lt;div&gt;
        &lt;TitleBar title="Message Center"&gt;&lt;/TitleBar&gt;
        &lt;Tabs showInkBar&gt;
          &lt;Tab label="Bulletins" value={0} badge={this.state.bulletinHasNew ?
            &lt;span className="circleBadge"&gt;badge&lt;/span&gt; :
            null
          }&gt;
            &lt;List&gt;
              {
                this.props.bulletins.items.map(function (item) {
                  return (
                    &lt;ListItem item={item} key={'bulletin.' + item.id}&gt;&lt;/ListItem&gt;
                  )
                })
              }
            &lt;/List&gt;
          &lt;/Tab&gt;
          &lt;Tab label="Newses" value={1} badge={this.state.newsesHasNew ?
            &lt;span className="circleBadge"&gt;badge&lt;/span&gt; :
            null
          }&gt;
            &lt;List&gt;
              {
                this.props.newses.items.map(function (item) {
                  return (
                    &lt;ListItem item={item} key={'news' + item.id}&gt;&lt;/ListItem&gt;
                  )
                })
              }
            &lt;/List&gt;
          &lt;/Tab&gt;
        &lt;/Tabs&gt;
      &lt;/div&gt;
    )
  }
}

MsgCenter.defaultProps = {
  activeSubject: 'bulletins',
  bulletins: {
    isFetching: false,
    isRefreshing: false,
    page: 1,
    totalPage: 1,
    items: [
      {
        id: 1,
        title: 'This is bulletin 1',
        publicDate: 1461513600000,
        viewed: true
      },
      {
        id: 2,
        title: 'This is bulletin 2',
        publicDate: 1461427200000,
        viewed: true
      },
      {
        id: 3,
        title: 'This is bulletin 3',
        publicDate: 1461340800000,
        viewed: true
      },
      {
        id: 4,
        title: 'This is bulletin 4',
        publicDate: 1461254400000,
        viewed: true
      }
    ]
  },
  newses: {
    isFetching: false,
    isRefreshing: false,
    page: 1,
    totalPage: 1,
    items: [
      {
        id: 5,
        title: 'This is news 1',
        publicDate: 1458748800000,
        viewed: false
      },
      {
        id: 6,
        title: 'This is news 2',
        publicDate: 1458662400000,
        viewed: false
      },
      {
        id: 7,
        title: 'This is news 3',
        publicDate: 1458576000000,
        viewed: true
      },
      {
        id: 8,
        title: 'This is news 4',
        publicDate: 1458489600000,
        viewed: true
      },
    ]
  }
}

module.exports = MsgCenter
</code></pre>