title: Using react-virtualized InfiniteLoader
body: <p>Does react-virtualized's <code>InfiniteLoader</code> require seed data to function? The following is my component:</p>
  
  <pre><code>class Bookmarks extends PureComponent {
      constructor(props) {
          super(props);
  
          this.loaded = {
              cursor: null,
              data: []
          };
  
          this._isRowLoaded = this._isRowLoaded.bind(this);
          this._loadMoreRows = this._loadMoreRows.bind(this);
          this._rowRenderer = this._rowRenderer.bind(this);
      }
  
      render() {
          const size = this.loaded.data.length;
  
          return (
              &lt;InfiniteLoader
                  isRowLoaded={this._isRowLoaded}
                  loadMoreRows={this._loadMoreRows}
                  rowCount={size}&gt;
                  {({onRowsRendered, registerChild}) =&gt;
                      &lt;AutoSizer&gt;
                          {({width, height}) =&gt;
                              &lt;List
                                  ref={registerChild}
                                  height={height}
                                  onRowsRendered={onRowsRendered}
                                  rowCount={size}
                                  rowHeight={30}
                                  rowRenderer={this._rowRenderer}
                                  width={width}
                              /&gt;}
                      &lt;/AutoSizer&gt;}
              &lt;/InfiniteLoader&gt;
          );
      }
  
      _isRowLoaded({index}) {
          return !!this.loaded.data[index];
      }
  
      _loadMoreRows({startIndex, stopIndex}) {
          fetch('/api/bookmarks').then((response) =&gt; {
              return response.json();
          }).then((json) =&gt; {
              this.loaded = {
                  cursor: json.cursor,
                  data: this.loaded.data.push(...json.data),
              };
          });
      }
  
      _rowRenderer({index, key, style}) {
          return (
              &lt;div key={key} style={style}&gt;{this.loaded.data[index]}&lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>In <code>render()</code>, <code>size</code> is initially zero as there's no data yet, and I assume the component would call <code>_loadMoreRows</code>—apparently not.</p>
  
  <p>This is what I thought to be the flow of logic (which is incorrect):</p>
  
  <ol>
  <li>Component is created</li>
  <li><code>_loadMoreRows</code> is called (1st time)</li>
  <li>When the promise returned by <code>_loadMoreRows</code> is resolved, check each loaded rows with <code>_isRowLoaded</code></li>
  <li>Render each row</li>
  </ol>