DOM nodes count keeps in Performance monitoring tab keeps growing
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 7.1k
- Forks
- 466
- Avg merge
- 2d 31m
- Merged PRs (30d)
- 13
Description
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
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
- I agree to follow this project's Code of Conduct
- 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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the report with the React infinite-scroll example at src/main.tsx, using the linked StackBlitz setup and Brave DevTools Performance monitor. Compare the growing DOM-node count with the Elements tab while scrolling, then determine whether the behavior is expected or indicates a cleanup issue; done means the cause and any required correction are verified.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100