Components with large datasets runs slow on IE11/Edge only
<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>