DOM nodes count keeps in Performance monitoring tab keeps growing

[sebpowell]

Describe the bug

I’ve been using this library to virtualise a grid, and while testing, I noticed that the DOM node count keeps increasing when monitoring via the Performance monitoring tab in Brave DevTools.

At first, I assumed it might be an issue with my implementation, so I tested one of the official examples – specifically, the infinite scroll demo from the website.

Inspecting the Elements tab, it does appear that items are being mounted and unmounted correctly as I scroll. However, the total DOM node count continues to rise, which seems unexpected for a virtualised list.

I then wondered if the performance monitor might be counting some kind of 'virtual' or detached nodes, but to compare, I tried react-virtuoso. There, the node count rises initially as you scroll, but drops back down when items go out of view – which is the behaviour I would expect.

Is this increasing DOM node count an expected behaviour with TanStack Virtual, or could it be a memory leak or cleanup issue?

Your minimal, reproducible example

https://stackblitz.com/github/tanstack/virtual/tree/main/examples/react/infinite-scroll?embed=1&theme=dark&preset=node&file=src/main.tsx

Steps to reproduce

1.) Used the code from the above example, see here.

2.) Open 'Performance monitoring' on this page: https://owailmmbkggithub-0flc--5173--10996a95.local.webcontainer.io/, and then start scrolling.

Expected behavior

Number of DOM nodes should drop back down as user scrolls - it shouldn't keep increasing.

How often does this bug happen?

Appears to be happening consistently.

Screenshots or Videos

https://github.com/user-attachments/assets/1b4f41c2-53a8-4761-8d65-da21568415b5

Platform

• OS: macOS
• Browser: Brave

tanstack-virtual version

3.13.10

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• [x] I agree to follow this project's Code of Conduct
• [x] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[rovolution]

i am noticing this as well

[piecyk]

Ahh, that’s definitely not good, I’ll try to look into it as soon as possible.

[piecyk]

Hmm @sebpowell in the case of a fixed list, we’re not retaining any DOM elements ourselves. When scrolling, the DOM node count does increase temporarily, but it drops back down shortly after. Looks like it’s just React reconciliation + GC timing rather than a leak.

https://github.com/user-attachments/assets/b447972d-e261-4b30-b0a4-48b5d73d251a

[Wei12345]

Hmm @sebpowell in the case of a fixed list, we’re not retaining any DOM elements ourselves. When scrolling, the DOM node count does increase temporarily, but it drops back down shortly after. Looks like it’s just React reconciliation + GC timing rather than a leak.

Nagranie.z.ekranu.2025-06-24.o.14.50.56.mov

Hi @piecyk ,

Using the official infinite-scroll example, here's an example of growing only DOM Nodes without GC. https://stackblitz.com/github/tanstack/virtual/tree/main/examples/react/infinite-scroll?embed=1&theme=light&preset=node&file=src/main.tsx

https://github.com/user-attachments/assets/2b67bcec-5b8f-48f7-beb2-b36bed74c14c

[andrewmozolev]

Hmm @sebpowell in the case of a fixed list, we’re not retaining any DOM elements ourselves. When scrolling, the DOM node count does increase temporarily, but it drops back down shortly after. Looks like it’s just React reconciliation + GC timing rather than a leak. Nagranie.z.ekranu.2025-06-24.o.14.50.56.mov

Hi @piecyk ,

Using the official infinite-scroll example, here's an example of growing only DOM Nodes without GC. https://stackblitz.com/github/tanstack/virtual/tree/main/examples/react/infinite-scroll?embed=1&theme=light&preset=node&file=src/main.tsx

20250714135244_rec_.mp4

I can confirm the issue, since I got the same result when I ran the sample locally.

[alex-uxify]

+1

"version": "3.13.12"

The node count grows and never GC'ed.

https://github.com/user-attachments/assets/b34a3cd4-b570-4d7f-b8d8-b0d4d9d74003

[novsource]

As I understand it, the memory leak is not related to this library, but to the official browser extension "React Developer Tools".

If the extension is disabled, the leak problem is fixed.

https://github.com/user-attachments/assets/cf7835c1-eef9-45ff-9538-8f356db426f2

https://github.com/user-attachments/assets/05910258-029b-4b9a-a571-b2641b9adfdf

The problem is also solved if you use the key on the react component, rather than on the DOM element (for example, you can wrap a div in a Fragment and set the key to it - the problem will be solved) Or you can enable the display of DOM nodes in the extension

https://github.com/user-attachments/assets/b82b69d8-1101-47ed-830d-9cdf7940c808

https://github.com/user-attachments/assets/63706fb1-f0e5-4cd1-b77e-c27fa4c027fd

[alex-uxify]

As I understand it, the memory leak is not related to this library, but to the official browser extension "React Developer Tools".

If the extension is disabled, the leak problem is fixed.

DevTools.is.enabled.mov DevTools.is.disabled.mov The problem is also solved if you use the key on the react component, rather than on the DOM element (for example, you can wrap a div in a Fragment and set the key to it - the problem will be solved) Or you can enable the display of DOM nodes in the extension

DOM.nodes.are.displayed.mov DOM.nodes.are.hidden.mov

Works for me. Huge thanks 😄 👍

[melishev]

I use this library in a vuejs application and also observe this problem when using it in dynamic height mode.

The difference is especially noticeable when compared to virtua.

version: 3.13.12