Virtuoso not rendering large lists with item-specified dynamic height

[vpsq]

This library is amazing work, but I am having an issue with rendering large lists where each item has a dynamic height.

Environment: NextJS React with MUI.

Viewport with data array sections , each section corresponding to an item in the array:

<Virtuoso style={{ height: "300px", width: "1300px", }} ref={virtuosoRef} data={sections}

Each section is typed to:

export type Type_Section = { // id: number; calculatedHeightPx?: number; color: string; }

And itemContent is as follows:

 itemContent={(index, item: Type_Section) => {
                const sectionProp: Type_Section = { ...item };
                   console.log(
                  "sectionProp = " + index + "/" + item.calculatedHeightPx

                );
                const roundedHeight = Math.round(item.calculatedHeightPx!);
                const itemHeight = roundedHeight + "px";

                return (
                  <div
                    style={{ backgroundColor: item.color, height: itemHeight }}
                  >
                    Item {index}
                  </div>

When the array is about 1500 in length or less, scrolling to the bottom shows the last item being rendered. However with a big list of about 13000 items, the last index is around the 9700 mark. That last index also keeps changing.

This is about as simple as the item rendering can get. Actual rendering is far more complex. Note that the vastly different dynamic heights cannot be controlled - that is simply the way each item is rendered in my use case. I have simulated that dynamic height here using Math.random between 100px and 3000px

One recommendation - if this is easier for the height calculations - is to provide another property similar to itemSize but supplies the index.

Please advise when you have a chance.

[petyosi]

I have no idea what your problem is. Follow the issue template, I'm not going to provide free support and consulting for you.

[vpsq]

Got it, the link from your troubleshooting page does not link to the issue template. I'll use that.

I am not looking for free support, have tried all kinds of options with the current API.

No need to be rude.