Major performance issues with the sortable tree example

[idanlo]

Hey, I just want to start by saying thank you for this awesome library! I am trying to implement something similar to the sortable tree example in https://examples.dndkit.com/ (it's on the bottom of the list). It works great in the example with only a few items but once you get to a couple hundreds of rows it starts to get extremely laggy. The problem is whenever I am dragging one item, every row is getting re-rendered, (you can see that if you add a render counter using a ref on the component and increasing it with useEffect). By the time I am finished dragging one item, all the rows have been rendered a few hundred times which causes a major performance hit. By looking at the React dev tools it seems that all the rows are rendering because the dragHandle prop is changed

I tried memoizing some stuff but had no luck. Would love to get some help on this

Thanks!

[marcelino-borges]

Hey @idanlo! I don't have hundreds, but I have a list with duzens of cards (which have some html, animations, svgs etc) and I'm also struggling with performance. I can't barely start dragging 1 card and it gets extremly laggy. I have useMemos everywhere to optimize things, but no luck so far...

Even with a list containing like 2 elements (but using these cards) I get a lot laggy, even though I don't have so much lag as with the larger list...

Somebody help?

[tomasmenezes]

+1 on this, have a use case where I need to draw hundreds of sortable items and virtualization is not possible. Dragging, updating, placeholder movement are all extremely laggy (up to ~400 elements the major problems seem to be the lag between mousedown and drag start, and the choppiness of the dragged element's movement). This can be tested on the MultipleContainers example, for instance, by adding in a few hundred cards.

[altsst]

+1 tried to replicate the tree example as well with upto 1000 virtualized elements, but with only like 50 elements it starts to lag on lower end machines

[notrealdev]

+1

[omridevk]

+1

[altsst]

I noticed the useSortable hook is triggering a re-render every time the order is being changed on EVERY sortable item (and therefore ignoring React.memo).

[alissaVrk]

prepared a PR fixing this issue https://github.com/clauderic/dnd-kit/pull/1096.

[hoelshen]

+1