Virtualizer not working for me

[rolanday]

I cannot get the virutalizer working for me -- all items rendered to DOM. The following is a simple example that closely mirrors the virtulizer docs -- but i (and LLM) have tried six ways to Sunday to get it working:

https://codesandbox.io/p/sandbox/hjvm23

if run he sample, you'll see all 1000 items render. Any ideas?

Thanks!

[rothsandro]

As mentioned on the docs page:

Virtualized components must have a defined size
This may be an explicit CSS width and height, or an implicit size (e.g. percentage or flex) bounded by an ancestor element. Without a bounded size, all items will be rendered to the DOM, negating the performance benefits of virtualized scrolling.

For example, you can add style={{ height: 400, overflow: "auto" }} on the ListBox.

[rolanday]

Hi @rothsandro , understood, and implemented as such ...

In sample provided, ancestor class definition is:

.resizable {
  width: 400px;
  height: 400px;
  max-width: 100%;
  overflow-y: auto;
}

Regardless, i styled ListBox as you suggested and no difference.

If somebody can provide working sample instead of suggestion, that would be best because, as mentioned, I've tried sIx ways to Sunday to get this working, so chances are whatever suggested has already been tried (such as prev suggestion).

Or, perhaps my understanding of how RAC virtualizer is supposed to work is wrong? I'm expecting similar to other virtualizers (tanstack, virtuoso, etc), where elements out of view will not be rendered.

[rolanday]

Hi @snowystinger , it's right here https://codesandbox.io/p/sandbox/hjvm23 (top of thread). ty!!

[snowystinger]

Sorry, not sure how I missed that. It looks like it works if you remove the overflow-y you have on the resizable class?

[rolanday]

Thx @snowystinger , i see no difference in terms of what gets rendered by removing overflow-y. All 1000 items rendered on page load, even though only 45 are visible (see screenshot).

[snowystinger]

What React renders vs what is rendered into the dom are two different things due to our Collections implementation. We can see here that only elements up to 60 are rendered to the dom.
We do a shallow render (cheap) of entire collections so that we know the total number of items, how to link various aria attributes, how much space to account for on the scrollbar, etc, but just because we look at the whole thing does not mean we send it all to the dom (expensive)

[rolanday]

Thanks you @snowystinger ! Your explanation addresses the issue for me. Much appreciate!!