Virtualize the Rendering of the Nodes #227
Description
Is your feature request related to a problem? Please describe.
I'm currently using the react-dnd-treeview library in a project where I need to manage a large number of nodes within the tree. The issue arises when the number of nodes becomes large (thousands of nodes). The performance of the application degrades significantly, leading to noticeable lag, particularly when interacting with the tree view and switching between different components (e.g., a canvas and a layers manager). The problem seems to stem from the fact that all nodes are being rendered in the DOM simultaneously, which overloads the browser and causes performance issues.
Describe the solution you'd like
It would be beneficial if the library could incorporate virtualization into the rendering of the nodes within the tree. Virtualization would allow only the visible nodes (within the viewport) to be rendered at any given time, drastically improving performance for trees with a large number of nodes. This could be implemented by leveraging existing libraries like react-window or react-virtualized, which are specifically designed to handle large lists efficiently by virtualizing the DOM rendering.
Describe alternatives you've considered
As a workaround, I've considered manually implementing virtualization by wrapping the node rendering logic within a virtualized list component (such as react-window). However, this approach is challenging because the library's current API does not easily support such integration without significant modifications. Another alternative could be lazy loading nodes, but this only addresses part of the problem and doesn't entirely resolve the performance issues with large trees.
Additional context
In my project, as well as in a smaller test sandbox I set up for reference, I've noticed that the performance issue primarily occurs during the initial load of the component. This is particularly evident when dealing with a large number of elements. For instance, in scenarios where the tree contains 20,000+ nodes, the initial load time is significantly delayed. This appears to be due to the fact that all of these elements are being attached to the DOM simultaneously.