Unnecessary rerenders cause poor performance
See original GitHub issueOur 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.
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!
Issue Analytics
- State:
- Created 2 years ago
- Reactions:11
- Comments:13 (2 by maintainers)
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
readContext
oruseContextSelector
, avoid rerender through changeBits 3.Like redux, use context as an unchanging subpub center, UseforceUpdate
to notify the component updateSounds 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.