test.tsx

import * as React from 'react'
import * as ReactDOM from 'react-dom'

const Column: React.SFC<{data: any}> = (_data) => {
    return (
        <td><pre> {'Hi '+ _data.data} </pre></td>
    );
}

const Row: React.SFC<{colums:number[]}> = (colums) => {
    return (
        <tr>
            {colums.colums.map((c: any) => <Column data={c}/>)}
        </tr>
    )
}

let rows: number[][] = [];

for(let i = 0; i < 500; i++) {
    let row : number[] = [];
    for(let j = 0; j < 50; j++) {
        row.push(j);
    }
    rows.push(row);

}

const Test: React.SFC<{rows: any}> = (test) => {
    return (
        <div className='outer'>
            {test.rows.map((x:number[]) => <Row colums={x}/>)}
        </div>
    )
}

const Do: React.SFC = () => {
    return (
        <button onClick={render_test}>Hello</button>
    )
}

ReactDOM.render(
    <Do/>,
    document.getElementById('root')
)

function render_test() {
    ReactDOM.render(
        <Test rows={rows}/>,
        document.getElementById('root')
    )
}