infinteList.jsx

import React from 'react';
import {
  List,
  CellMeasurer,
  CellMeasurerCache,
  InfiniteLoader,
  AutoSizer
} from 'react-virtualized';
import Item from './Item';

class InfinteList extends React.Component {
  constructor() {
    this.cache = new CellMeasurerCache({
      fixedWidth: true,
      defaultHeight: 100
    });
    this.listData = [];
  }
    
  fetchFeed = ({ startIndex, stopIndex }) => {
    return fetch(`path/to/api?startIndex=${startIndex}&stopIndex=${stopIndex}`)
    .then(response => {
      // Store response data in this.listData
    });
  }
  
  rowRenderer = ({ index, parent, key, style }) => {
    return (
      <CellMeasurer
        key={key}
        cache={this.cellMeasurerCache}
        parent={parent}
        columnIndex={0}
        rowIndex={index}
      >
        <Item
          data={this.listData[index]}
          style={style}
        />
      </CellMeasurer>
    );
  };

  isRowLoaded = ({ index }) => {
    return !!this.listData[index];
  };

  render() {
    return (
      <div className="InfinteList">
        <InfiniteLoader
          isRowLoaded={this.isRowLoaded}
          loadMoreRows={this.fetchFeed}
          rowCount={10000000}
          ref={ref => (this.infiniteLoaderRef = ref)}
        >
          {({ onRowsRendered, registerChild }) => (
              <AutoSizer>
                {({ width, height }) => (
                  <List
                    rowCount={this.listData.length}
                    width={width}
                    height={height}
                    rowHeight={this.cellMeasurerCache.rowHeight}
                    rowRenderer={this.rowRenderer}
                    deferredMeasurementCache={this.cellMeasurerCache}
                    overscanRowCount={2}
                    onRowsRendered={onRowsRendered}
                    ref={el => {
                      this.listRef = el;
                      registerChild(el);
                    }}
                  />
                )}
            </AutoSizer>
          )}
        </InfiniteLoader>
      </div>
    );
  }
}