virtualized.jsx

const PublicContestCard = ({ contest }) => (
  <div className="col-xs-12 col-sm-6 col-lg-4">
    <div className="box" style={{height: "100%",}}>
        
        <Card key={ contest._id } className={css(styles.cardContainer)}>
              <MediaSection contest={contest} />
              <CardHeader 
                avatar={<Link to={'profile/'+ contest.ownerId } ><Avatar src={contest.userAvatar} size={30} /></Link>} 
                title={<Link to={'profile/'+ contest.ownerId } >{'@' + contest.ownerHandleLC}</Link>} 
                subtitle={timeAgo(contest.createdAt)} 
                titleStyle={{fontSize: '14px', topMargin: 0, }} 
                subtitleStyle={{fontSize: '10px', topMargin: 0, }} 
              /> 
              <Link className={css(styles.cardContainerLink)} to={'contest/'+ contest._id } > 
                <PublicContestCardText contest={contest} />
              </Link>
              <PublicContestCardActions contest={contest} />
        </Card>
      
    </div>
  </div>
);



// EXPORTED COMPONENT
//------------------------------------------------------------


export class AllContests extends React.Component {
  constructor(props){
    super(props)
    this.cellRenderer = this.cellRenderer.bind(this);
    this.loadMoreRows = this.loadMoreRows.bind(this);
  }
  cellRenderer({columnIndex, key, rowIndex, style}){
    const { contests } = this.props;
    return (<div style={style} key={key} ><PublicContestCard contest={contests[rowIndex][columnIndex]} /></div>)
  }
  shouldComponentUpdate(nextProps, nextState) {
      return shallowCompare(this, nextProps, nextState)
  }
  componentWillMount(){
    Session.set( "currentLimit", 6 );
    }
    loadMoreRows({ startIndex, stopIndex }){
    let newCurrentSkip = Session.get('currentLimit') + 6;
      Session.set( "currentLimit", newCurrentSkip );
  }
  isRowLoaded({ index }){
    return !this.props.hasNextPage || index < this.props.contests.length
  }
  render(){
    const { contests, hasNextPage } = this.props;
    return <InfiniteLoader
            isRowLoaded={this.isRowLoaded}
            loadMoreRows={this.loadMoreRows}
            rowCount={contests.length + (hasNextPage ? 1 : 0)}
          >
          {({ onRowsRendered, registerChild }) => (
                <AutoSizer disableHeight>
                {({ width }) => (<Grid
                width={width}
                height={1000}
                columnCount={3}
                columnWidth={300}
                scrollToIndex={undefined}
                rowCount={contests.length}
                rowHeight={340}
                ref={registerChild}
                onRowsRendered={onRowsRendered}
                showScrollingPlaceholder={false}
                useDynamicRowHeight={false}
                cellRenderer={this.cellRenderer}
                scrollToAlignment={'start'}
                overscanRowCount={5}
              />)}
                </AutoSizer>)}
       </InfiniteLoader>
  }
};