Does Tanstack virtual reuse DOM nodes?

[lasseloef]

Looking at the examples given: https://tanstack.com/virtual/latest/docs/framework/vue/examples/dynamic

Whether it be the dynamic or fixed or some other one, when looking at the amount of DOM nodes in the dev tools performance monitor, it is a pretty steady unchanging number, while scrolling.

However, in my own personal implementation, the more I scroll up and down, the more DOM nodes seem to appear. I had the impression that reusing DOM nodes was a standard optimization included in virtual list implementations? I know that Vuetify's v-virtual-scroll reuses DOM nodes. I can see in the DOM that the items are actually being swapped in and out, but DOM nodes still increase.

I have checked my keys and they are all unique, and my implementation is pretty much a carbon copy of the above linked example, except I have removed the div wrapper containing the transform property, and put the transform on the v-for div's themselves.

I actually went so far to try and implement the exact dynamic example from the link above in a plain new vue project, and I still don't see any DOM reuse, DOM nodes keep increasing until a GC happens.

Am I chasing a red herring here, because of a lack of understanding of virtualization, DOM nodes, Devtools etc., or is my implementation botched somehow?

Here are 2 traces when scrolling up and down through a list of ~100 elements, one from Tanstack and one from vuetify's v-virtual-scroll

Tanstack

Vuetify

[piecyk]

Thanks for the detailed write-up! Just to clarify, we only cache rendered nodes, If you're seeing steady growth, a minimal repro (e.g. on StackBlitz) would really help us take a closer look.

[lasseloef]

Just to be thorough, I took the exact Dynamic example and put it in both a Stackblitz and a visual studio code project, and I only see the DOM node increase in the visual studio project code, so I'm starting to think it might be because the Stackblitz is running within an iframe, or something, that I can't see the DOM node increase here.

EDIT: I just took the time to configure Chrome to allow the Stackblitz preview in a new tab, and when you check the DOM nodes here they also increase.

As for the vuetify's v-virtual-scroll, I guess Tan Stack just handles the inserting/removing of items differently, if it's normal that you get an increase in DOM nodes until GC cleans up.

I have not checked if there actually is a steady average/mean increase in the DOM nodes, and I don't think I want to right now, as my implementation seemingly runs fine 😃 .

So, unless Tan Stack Virtual is actually supposed to keep a steady (as in unchanging) amount of DOM nodes as seen in the vuetify trace above, then I will just leave this be 👍

Thanks @piecyk!