title: Components with large datasets runs slow on IE11/Edge only
body: <p>Consider the code below. <code>&lt;GridBody Rows={rows} /&gt;</code> and imagine that <code>rows.length</code> would amount to any value 2000 or more with each array has about 8 columns in this example. I use a more expanded version of this code to render a part of a table that has been bottle necking my web application.</p>
  
  <pre><code>var GridBody = React.createClass({
      render: function () { 
          return &lt;tbody&gt;
              {this.props.Rows.map((row, rowKey) =&gt; {
                      return this.renderRow(row, rowKey);
              })}
          &lt;/tbody&gt;;
      },
      renderRow: function (row, rowKey) {
          return &lt;tr key={rowKey}&gt;
              {row.map((col, colKey) =&gt; {
                  return this.renderColumn(col, colKey);
              })}
          &lt;/tr&gt;;
      },
      renderColumn: function (col, colKey) {
          return &lt;td key={colKey} dangerouslySetInnerHTML={{ __html: col } }&gt;&lt;/td&gt;;
      }
  });
  </code></pre>
  
  <p>Now onto the actual problem. It would seem that computation (even with my own code) seems to be suprisingly fast and even ReactJS's work with the virtualDOM has no issues.</p>
  
  <p>But then there are these two events in reactJS.</p>
  
  <p><code>componentWillUpdate</code> up until where everything is still okay. 
  And then there is <code>componentDidUpdate</code> which seems to be fine and all on chrome.</p>
  
  <h2>The problem</h2>
  
  <p>But then there is IE11/Edge with about <strong>4-6 SECONDS</strong> slower than any other browser and with the F12-Inspector this seems to be p to <strong>8 SECONDS</strong> slower than Chrome.</p>
  
  <p>The steps I have done to try and fix this issue:</p>
  
  <ul>
  <li><p>Strip unnecessary code.</p></li>
  <li><p>Shave off a handful of milliseconds in computation time.</p></li>
  <li><p>Split the grid in loose components so that the virtualDOM doesn't try
  to update the entire component at once.</p></li>
  <li><p>Attempt to concaternate everything as a string and allow react to
  only set innerhtml once. This actually seems to be a bug in IE here a
  large string takes about 25-30 seconds on IE11. And only 30 ms on
  chrome.</p></li>
  </ul>
  
  <p>I have not found a proper solution yet. The actions I have done above seemed to make things less bad in IE but the problem still persists that a "modern" or "recent" browser is still 3-4 seconds slower. </p>
  
  <p>Even worse, this seems to nearly freeze the entire browser and it's rendering.</p>
  
  <p><strong>tl;dr</strong> How to improve overal performance in IE and if possible other browsers? </p>
  
  <p>I apologize if my question is unclear, I am burned out on this matter.</p>
  
  <p>edit: Specifically DOM access is slow on IE as set innerHTML gets called more than 10.000 times. Can this be prevented in ReactJS?</p>