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.