Unnecessary rerenders cause poor performance

Our application has many droppable and draggable components displayed at once and is suffering from poor performance when dragging. When the dragged element crosses over a droppable, it causes all of our draggable and droppable components to rerender for seemingly no reason.

Here’s a code sandbox that demonstrates the issue. Each Draggable/Droppable displays the number of times it has rendered. You’ll notice that when dragging one of the red boxes, the render count of the other Draggable and Droppable components increases even though their props have not changed.

Code Sandbox

The performance of the code sandbox is actually fine, but the unnecessary rerenders cause performance issues in our app because the draggables are expensive to rerender (something we could probably fix).

I’m not sure if this is expected behavior or a bug. If it does seem to be a fixable problem I would be happy to attempt a PR if you provide some direction.

P.S. Great library!

[uinz]

Nice Project!

This is caused by the react context mechanism

https://github.com/clauderic/dnd-kit/blob/master/packages/core/src/components/DndContext/DndContext.tsx#L629

I know there are several ways to avoid rerender

1. Further subdivide the context, honestly it is difficult
2. Use unstable API readContext or useContextSelector, avoid rerender through changeBits 3.Like redux, use context as an unchanging subpub center, Use forceUpdate to notify the component update

[srmagura]

Sounds good. I am pretty sure our issue can be addressed with proper memoization.

Up to you if you want to keep this issue open for when React officially supports useContextSelector or if you want to close it.