React-Virftual v2 | Virtualizer `virtualItems` only contains 11 elements although `totalSize` is 20k+

62 Views Asked by At

Basically, I'm implementing a virtualized Material UI v4 Autocomplete, to do so I have this component:

const ListboxComponent = React.forwardRef<HTMLUListElement>(({ children, ...rest }, ref) => {
  const childArray = React.Children.toArray(children);
  const parentRef = React.createRef<HTMLDivElement>();
  const virtualizer = useVirtual({
    size: childArray.length,
    parentRef,
    estimateSize: React.useCallback(() => 50, []),
  });

  console.log({child: childArray.length, virts: virtualizer.virtualItems.length});

  return (
    <div ref={parentRef} style={{height: '500px'}}>
      <ul ref={ref} {...rest} style={{height: '100%', position: 'relative'}}>
      {virtualizer.virtualItems.map(({ index, measureRef }) => React.cloneElement(
        items[index] as ReactElement,
        {
          ref: measureRef,
          style: {
            position: 'absolute',
            transform: `translateY(${52 * index}px)`,
            width: '100%',
            top: 0,
            left: 0,
          },
          "data-start": start,
        }))}
    </ul>
    </div>
  );
});

The log outputs: {child: 267871, virts: 11}.

I want to understand why only 11 virtual elements are rendered and how can I make that it renders the rest of them.

I'm using react-virtual v2, I can't upgrade to v3 nor to use react-window, nor any other library.

EDIT 1: I tried using overscan but I have the same problem, it renders only the first overscan elements but not all of them.

0

There are 0 best solutions below