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)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
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
readContextoruseContextSelector, avoid rerender through changeBits 3.Like redux, use context as an unchanging subpub center, UseforceUpdateto 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
useContextSelectoror if you want to close it.