VirtualizedListbox

import React, { useEffect, useRef } from 'react';
import { VariableSizeList } from 'react-window';

const renderRow = ({ index, style, data }: any) => {
  const option = data[index];
  const { props: optionProps, key } = option;

  return (
    <li key={key} style={style} {...optionProps}>
      {optionProps.children}
    </li>
  );
};

const VirtualizedListbox = React.forwardRef((props: any, ref) => {
  const { children, ...other } = props;
  const items = React.Children.toArray(children);
  const listRef = useRef<VariableSizeList>(null);

  const itemSize = 35;
  const listHeight = Math.min(items.length, 8) * itemSize;

  useEffect(() => {
    if (listRef.current) {
      listRef.current.resetAfterIndex(0, true);
    }
  }, [items]);

  return (
    <VariableSizeList
      height={listHeight}
      width="100%"
      itemCount={items.length}
      itemSize={() => itemSize}
      itemData={items}
      outerRef={ref}
      {...other}
    >
      {renderRow}
    </VariableSizeList>
  );
});

export default VirtualizedListbox;