useSortable re-renders all items even with just clicking one item, affecting performance

[wdire]

useSortable re-renders all items even with just clicking one item, affecting performance

[wdire]

@igorbrasileiro in addition to the code I shared above with memo, making sure container doesn't re-render etc. I've added debounce like this on DndContext: onDragOver={debounce(handleDragMove, 75)}.

Going from my example, even though parent of ContentCard doesn't re-render, useSortable itself re-renders while dragging and affects the performance, as I've interpreted. So adding debounce to onDragOver is like dropping down the FPS of drag movement a bit, 75 value felt like balanced between performance and user experience for me.

[lukjaki]

Encountered this but got solved by wrapping whole component in memo() where the second argument is the function that checks if component should rerender.

[wdire]

For people having similar usage and problem. In addition to using memo I made performance manageable with removing items array changes in onDragMove, depending on DragOverlay except when item changes between Sortable Containers. And used debounce on onDragMove. It cost a bit smoothness while dragging between containers tho.

[igorbrasileiro]

I'm facing the same issue @wdire , can you share the final idea of your code, to inspire me?

[DakotaWray2]

@wdire personally I experienced issues with keeping track of items jumping over containers in a kanban layout while testing your debounce recommendation. For example jumping from container column 1 -> container column 3.