search

petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.16k stars 299 forks source link

[BUG] Virtuoso does not render large list > 10000 with item specified dynamic heights #1004

Closed vpsq closed 10 months ago

vpsq commented 10 months ago

Virtuoso does not render large list > 10000 with item specified dynamic heights When a large data array list with > 10000 items is loaded and itemContent is used to render each item with random height obtained from the item object (height >1000px and < 2000px, but could be any height), scroll bottom/end does not show the last item in the array, but some intermediate array item. Using 10000 or less items in the list works.

Reproduction

To Reproduce Steps to reproduce the behavior:

  1. Go to 'https://codesandbox.io/p/sandbox/cocky-bessie-gvpvcw'
  2. Let the preview browser render
  3. Scroll down the Virtuoso viewport to the bottom/end, verify that Item 9999 is showing (dark color - randomly generated - may make it slightly difficult to see)
  4. Click on page.tsx, Edit line 21, replace 10000 with 20000 in generateData() and save the file (control-s on Windows)
  5. Restart the Dev server in the bottom window to the left of the preview browser. This step is to remove any issues with server caching. The restart should automatically reload the preview in the browser. Wait for the preview to re-render
  6. Scroll down the Virtuoso viewport to the bottom/end, verify that Item 19999 may not be showing in the div
  7. (optional) Verify issue by popping out into a new window image

Expected behavior Virtuoso viewport scrolled to the bottom/end should show the rendering of the last item in the array regardless of the size of the array

Screenshots

SCREENSHOT 1: <=10000 items rendered correctly at bottom image

SCREENSHOT 2,3: 20000 items not rendered correctly at bottom image

image

Desktop (please complete the following information):

Additional context --no other context at this time--.

vpsq commented 10 months ago

Another screenshot just to show the bottom of the list scrolled

image

petyosi commented 10 months ago

The example hits the browser limitation of maximum element size, around 16M px in Chrome, last time I checked. I'm aware of several ways to work around this, but all lead to degraded UX, so for the moment I have given up on pursuing this further.

vpsq commented 10 months ago

That makes sense, thank you for looking into it.