Avoid re-rendering children on click event #1494
Open
+10
−4
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I noticed that clicking on a DnD child node can be costly because it triggers all child nodes to rerender twice. This issue has been reported before. See #1379
This happens when
DndContext
updates theactiveSensor
andactivatorEvent
states on a mouse down event. These state changes cause rerenders in all consumers ofDndContext
. Consumers ofuseSortable
re-render too becauseSortableContext
depends onDndContext
.If the user is just clicking or if activation constraints aren’t met, DndContext resets these states to null, causing another render cycle.
Here’s what it looks like in React Profiler for a click event, where you'll see back-to-back commit cycles causing unnecessary rerenders for every child:
I don't see why we need to update state unless the user is actually dragging. This PR proposes delaying the
activeSensor
andactivatorEvent
state updates until the drag event starts and constraints are met. This reduces unnecessary re-renders, saving two render cycles for every child.Here’s what the React Profiler looks like with this change:
From Perf trace, you'll notice that mouse down and mouse up events aren't doing much work
Before:
After:
Cypress tests are passing -