batch load a long list

long-list.tsx

import * as React from "react";
import * as faker from "faker";

function batch(count: number = 10): Faker.Card[] {
  // return [faker.helpers.createCard()];

  return [
    faker.helpers.createCard(),
    faker.helpers.createCard(),
    faker.helpers.createCard(),
    faker.helpers.createCard(),
    faker.helpers.createCard(),
    faker.helpers.createCard(),
    faker.helpers.createCard(),
    faker.helpers.createCard(),
    faker.helpers.createCard(),
    faker.helpers.createCard(),
    faker.helpers.createCard(),
  ];
}

const useBatchLoad = (getData: () => Faker.Card[]): [Faker.Card[], React.Dispatch<React.SetStateAction<Faker.Card[]>>] => {
  const isRendering = React.useRef(false);
  const [items, setItems] = React.useState<Faker.Card[]>([]);

  React.useLayoutEffect(() => {
    let t: ReturnType<typeof setTimeout>;
    if (items.length <= 1000 && !isRendering.current) {
      isRendering.current = true;
      t = setTimeout(() => {
        isRendering.current = false
        setItems(items.concat(getData()));
      }, 0);
    }
    return () => {
      isRendering.current = false;
      clearTimeout(t);
    }
  }, [items, getData, isRendering]);

  return [items, setItems];
};

export const LongList: React.FC = () => {
  const [ items, setItems ] = useBatchLoad(batch);

  return (
    <div>
      <div>
        <button onClick={() => setItems([])}>Reset</button>
        <div>{`Count ${items.length}`}</div>
      </div>
      <ul style={{ height: "400px", overflowY: "auto"}}>
        {items.map((i,idx) => <li key={`${i.email + "-" + idx}`}>{i.name}</li>)}
      </ul>
    </div>
  );
};