Reversed Infinite Loader using react-virtualized

ReversedInfiniteLoader

import React, {Component} from 'react'

import { AutoSizer, InfiniteLoader, List } from 'react-virtualized'

import './index.css'

// Cell data
const list = [];

export default class ReversedInfiniteLoader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rowCount: 0,
      scrollToIndex: -1,
      isLoading: false
    };
    
    this._isRowLoaded = this._isRowLoaded.bind(this);
    this._loadMoreRows = this._loadMoreRows.bind(this);
    this._getRowHeight = this._getRowHeight.bind(this);
    this._rowRenderer = this._rowRenderer.bind(this);
  }
  
  componentDidMount() {
    this.setState({ rowCount: 1 });
  }

  _isRowLoaded({ index }) {
        const { rowCount } = this.state;

        if(index == 0){
          console.log("isloaded", index, index > 0)
        }
        
        return index > 0;
    }
    
    _loadMoreRows({ startIndex, stopIndex }) {

        console.log("load more rows called", startIndex, stopIndex, list.length)

        const { isLoading } = this.state;
        const delay = 2000; // random delay to simulate server response time
        
        if (!isLoading) {
            this.setState({
                isLoading: true
            });
            
            setTimeout(() => {
                for (let i = 0; i < 20; i++) {
                  list.unshift(list.length + 1);
              }
                
                const rowCount = list.length;
                this.setState({
                  isLoading: false,
                  rowCount: rowCount,
                  scrollToIndex: rowCount - this.state.rowCount + 1
              }, done);
            }, delay);
            
            let done;
            return new Promise(resolve => done = resolve);
        }
    }
    
    _rowRenderer({ key, index, parent, style }) {
        const { rowCount } = this.state;
        let content;
        
        if (index === 0) {
          content = <div>Loading... {index}</div>;
        } else {
            content = (
              <div className="" >{list[index]}
              </div>
          );
        }
      
      return (
        <div key={key} style={style}>
          {content}
        </div>
      );
    }
  
  _getRowHeight({ index }) {
    return 50;
  };
    

  render() {
    const { rowCount, scrollToIndex } = this.state;

    console.log("count and index", rowCount, scrollToIndex)

    return (
      <div className="infinite-scroll">

      <InfiniteLoader
          isRowLoaded={this._isRowLoaded}
          loadMoreRows={this._loadMoreRows}
          rowCount={rowCount}
          threshold={0}
          >
          {({onRowsRendered, registerChild}) => (
            <AutoSizer >
              {({width, height}) => (
                <List
                  
                  ref={registerChild}
                  height={600}
                  onRowsRendered={onRowsRendered}
                  rowCount={rowCount}
                  rowHeight={50}
                  rowRenderer={this._rowRenderer}
                  scrollToIndex={scrollToIndex}
                  width={width}
                  scrollToAlignment="start"
                />
              )}
            </AutoSizer>
          )}
        </InfiniteLoader>
      </div>
    );
  }
}