title: react-virtualized - how do I use this as a true infinite scroller
body: <p>I can't find any code example or docs that answers this:</p>
  
  <ul>
  <li>Achieve almost complete infinite scroll -> unknown # of items, but there is a finite amount that may be infeasible to compute beforehand - e.g. at some point the list needs to stop scrolling</li>
  <li>Can I trigger first load of data from within InfiniteScroller/List - it seems you need to pass in a data source that is populated with initial page</li>
  </ul>
  
  <p>I am using this example:
  <a href="https://github.com/bvaughn/react-virtualized/blob/master/docs/creatingAnInfiniteLoadingList.md" rel="nofollow noreferrer">https://github.com/bvaughn/react-virtualized/blob/master/docs/creatingAnInfiniteLoadingList.md</a></p>
  
  <p>and:
  <a href="https://github.com/bvaughn/react-virtualized/blob/master/source/InfiniteLoader/InfiniteLoader.example.js" rel="nofollow noreferrer">https://github.com/bvaughn/react-virtualized/blob/master/source/InfiniteLoader/InfiniteLoader.example.js</a></p>
  
  <p>along with CellMeasurer for dynamic height:
  <a href="https://github.com/bvaughn/react-virtualized/blob/master/source/CellMeasurer/CellMeasurer.DynamicHeightList.example.js" rel="nofollow noreferrer">https://github.com/bvaughn/react-virtualized/blob/master/source/CellMeasurer/CellMeasurer.DynamicHeightList.example.js</a></p>
  
  <p>The docs for InfiniteLoader.rowCount say:
  "Number of rows in list; can be arbitrary high number if actual number is unknown."</p>
  
  <p>So how do you indicate there are no more rows.</p>
  
  <p>If anyone can post an example using setTimeout() to simulate dynamic loaded data, thanks.  I can likely get CellMeasurer working from there.</p>
  
  <p><strong>Edit</strong></p>
  
  <p>This doesn't work the way react-virtualized creator says it should or the infinite loading example implies.</p>
  
  <p>Calls:</p>
  
  <ul>
  <li>render(): rowCount = 1 </li>
  <li>_rowRenderer(index = 0)</li>
  <li>_isRowLoaded(index = 0)</li>
  <li>_loadMoreRows(startIndex = 0, stopIndex = 0)</li>
  <li>_rowRenderer(index = 0)</li>
  <li>end</li>
  </ul>
  
  <p>Do I need to specify a batch size or some other props?</p>
  
  <pre><code>class HistoryBrowser extends React.Component
  {
      constructor(props,context,updater)
      {
          super(props,context,updater);
          this.eventEmitter = new EventEmitter();
          this.eventEmitter.extend(this);
          this.state = {
              history: []
          };
          this._cache = new Infinite.CellMeasurerCache({
              fixedWidth: true,
              minHeight: 50
          });
          this._timeoutIdMap = {};
          _.bindAll(this,'_isRowLoaded','_loadMoreRows','_rowRenderer');
  
      }
  
  
      render()
      {
          let rowCount = this.state.history.length ? (this.state.history.length + 1) : 1;
          return &lt;Infinite.InfiniteLoader
              isRowLoaded={this._isRowLoaded}
              loadMoreRows={this._loadMoreRows}
              rowCount={rowCount}
          &gt;
              {({ onRowsRendered, registerChild }) =&gt;
                  &lt;Infinite.AutoSizer disableHeight&gt;
                      {({ width }) =&gt;
                          &lt;Infinite.List
                              ref={registerChild}
                              deferredMeasurementCache={this._cache}
                              height={200}
                              onRowsRendered={onRowsRendered}
                              rowCount={rowCount}
                              rowHeight={this._cache.rowHeight}
                              rowRenderer={this._rowRenderer}
                              width={width}
                          /&gt;}
                  &lt;/Infinite.AutoSizer&gt;}
          &lt;/Infinite.InfiniteLoader&gt;
      }
  
      _isRowLoaded({ index }) {
          if (index == 0 &amp;&amp; !this.state.history.length)
              // No data yet, force load
              return false;
      }
  
      _loadMoreRows({ startIndex, stopIndex }) {
          let self = this;
          for (let i = startIndex; i &lt;= stopIndex; i++) {
              this.state.history[startIndex] = {loading: true};
          }
  
          const timeoutId = setTimeout(() =&gt; {
              delete this._timeoutIdMap[timeoutId];
  
              for (let i = startIndex; i &lt;= stopIndex; i++) {
                  self.state.history[i] = {loading: false, text: 'Hi ' + i };
              }
  
              promiseResolver();
          }, 10000);
  
          this._timeoutIdMap[timeoutId] = true;
  
          let promiseResolver;
  
          return new Promise(resolve =&gt; {
              promiseResolver = resolve;
          });
      }
  
      _rowRenderer({ index, key, style }) {
          let content;
          if (index &gt;= this.state.history.length)
              return &lt;div&gt;Placeholder&lt;/div&gt;
          else if (this.state.history[index].loading) {
              content = &lt;div&gt;Loading&lt;/div&gt;;
          } else {
              content = (
                  &lt;div&gt;Loaded&lt;/div&gt;
              );
          }
  
          return (
              &lt;Infinite.CellMeasurer
                  cache={this._cache}
                  columnIndex={0}
                  key={key}
                  rowIndex={index}
              &gt;
                  &lt;div key={key} style={style}&gt;{content}&lt;/div&gt;
              &lt;/Infinite.CellMeasurer&gt;
          );
      }
  }
  </code></pre>