virtualized.jsx

import React, { memo, forwardRef, PureComponent } from 'react';
import { node } from 'prop-types';
import { FixedSizeList, areEqual } from 'react-window';
import memoize from 'memoize-one';

const Row = memo(({ data = [], index, style }) => {
  const item = data[index];

  return <div style={{ ...style }}>{item}</div>;
}, areEqual);

const innerElementType = forwardRef((props, ref) => (
  <div ref={ref} className={`rt-tbody`} {...props} />
));

const createItemData = memoize(data => [...data]);

function List({ items, listRef, initialScrollOffset }) {
  const itemData = createItemData(items);
  console.log('List');
  return (
    <FixedSizeList
      ref={listRef}
      initialScrollOffset={initialScrollOffset}
      height={545}
      itemSize={56}
      itemData={itemData}
      itemCount={items.length}
      innerElementType={innerElementType}
      style={{ overflow: 'visible' }}
    >
      {Row}
    </FixedSizeList>
  );
}

class VirtualizedTbodyComponent extends PureComponent {
  render() {
    const { children } = this.props;
    console.log('pureComponent');
    return <List items={children[0] || []} />;
  }
}

VirtualizedTbodyComponent.propTypes = {
  children: node,
};

export default VirtualizedTbodyComponent;