title: Non blocking render in ReactJS
body: <p>I'm learning ReactJS and trying to build some application on it.</p>
  
  <p>When I'm trying to modify my state and render, my page is freezing and can't do anything until the render is finished when my components become huge.</p>
  
  <p>I found that I can use <code>shouldComponentUpdate</code> to optimize my code, but the question comes to me is: Can I make this render procedure be non blocking? And so I can tell the user that the page is processing some heavy loading executions and please wait or maybe show the progress of the execution? Or if the user can cancel the render, for example, for a live editor, if user edit the content of the editor, the "preview" section will stop rendering old content and trying to render new content without blocking the editor UI?</p>
  
  <p>Here's the heavy loading example code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;React Tutorial&lt;/title&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="content"&gt;&lt;/div&gt;
      &lt;script type="text/babel"&gt;
        var Box = React.createClass({
          render: function() {
            return (
              &lt;div&gt;Box&lt;/div&gt;
            );
          }
        });
        
        var CommentBox = React.createClass({
          getInitialState: function() {
            return {box_count: 5};
          },
          
          heavyLoadRender: function() {
            this.setState({box_count: 40000});
          },
          
          render: function() {
            var render_box = [];
            for (var i=0; i&lt;this.state.box_count; i++) {
              render_box.push(&lt;Box /&gt;);
            }
            return (
              &lt;div&gt;
                {render_box}
                &lt;button onClick={this.heavyLoadRender}&gt;Start&lt;/button&gt;
              &lt;/div&gt;
            );
          }
        });
        
        ReactDOM.render(
          &lt;CommentBox /&gt;,
          document.getElementById('content')
        );
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I press <code>Start</code>, the page will freeze and no response until all <code>Box</code> is rendered. Is it possible to add a button named <code>Cancel</code> which user can cancel the render and clear all boxes?</p>