React Infinite Scrolling

React infinite scrolling of table.

by Douglas Duhaime

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<link rel="stylesheet" href="http://w2ui.com/web/js/w2ui-1.3a.min.css">
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<input type="button" value="25K Records" onclick="generate(25)">
<input type="button" value="250K Records" onclick="generate(250)">
<input type="button" value="1MIL Records" onclick="generate(1000)">

<div id="grid"></div>

JavaScript 1.7

var GridBody = React.createClass({
  getInitialState: function() {
    return {
      shouldUpdate: true,
      total: 0,
      displayStart: 0,
      displayEnd: 0
    };
  },

  componentWillReceiveProps: function(nextProps) {
    var shouldUpdate = !(
      nextProps.visibleStart >= this.state.displayStart &&
      nextProps.visibleEnd <= this.state.displayEnd
    ) || (nextProps.total !== this.state.total);

    if (shouldUpdate) {
      this.setState({
        shouldUpdate: shouldUpdate,
        total: nextProps.total,
        displayStart: nextProps.displayStart,
        displayEnd: nextProps.displayEnd
      });
    } else {
      this.setState({
        shouldUpdate: false
      });
    }
  },

  shouldComponentUpdate: function(nextProps, nextState) {
    return this.state.shouldUpdate;
  },

  render: function() {
    var rows = [];
    rows[0] = (<tr id="gridgridrectop" line="top" key={0} style={
        {
          height: this.props.displayStart * this.props.recordHeight
        }
      }>
        <td colSpan="200">
        </td>
      </tr>
    );

    for (var i = this.props.displayStart; i < this.props.displayEnd; ++i) {
      var record = this.props.records[i];
      rows[i + 1] = (<tr className={i % 2 === 0 ? 'w2ui-even' : 'w2ui-odd'} key={i+1} style={
          {
            height: this.props.recordHeight
          }
        }>
          <td className="w2ui-grid-data" col="0">
            <div title={i + 1}>{i + 1}</div>
          </td>
          <td className="w2ui-grid-data" col="1">
          <div title={record.fname}>{record.fname}</div>
        </td>
        <td className="w2ui-grid-data" col="2">
          <div title={record.lname}>{record.lname}</div>
        </td>
        <td className="w2ui-grid-data" col="3">
          <div title={record.email}>{record.email}</div>
        </td>
        <td className="w2ui-grid-data-last"></td>
      </tr>);
    }
    rows.push((<tr id = "gridgridrecbottom" key={rows.length} line="bottom" style={
    ...