import React, { useState, useLayoutEffect, useRef } from "react";
import randInt from "random-int";
import { List, useScroller, useSize } from "mini-virtual-list";

let items = [];
for (let i = 10000 * cur; i < cur * 10000 + 10000; i++)
  items.push({ id: i, initialHeight: randInt(40, 140) });

const ListComponent = () => {
  const ref = useRef(null);
  const scroll = useScroller(ref);
  const size = useSize(ref);

  return (
    <div
      style={{
        height: 540,
        width: 320,
        overflow: "auto",
      }}
      ref={ref}
    >
      <List
        items={items}
        itemHeight={36}
        {...size}
        {...scroll}
        render={FakeCard}
      />
    </div>
  );
};