Merge pull request #1494 from dinkinflickaa/dinkinflicka/optimize-rer…

…enders-on-click Avoid re-rendering children on click event
clauderic · Nov 23, 2024 · 8919eb1 · 8919eb1
2 parents 9c078b4 + b3de0f7
commit 8919eb1
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/.changeset/brave-kids-explain.md b/.changeset/brave-kids-explain.md
@@ -0,0 +1,5 @@
+---
+'@dnd-kit/core': patch
+---
+
+Improves performance by eliminating wasteful re-renders on every child item on click
diff --git a/packages/core/src/components/DndContext/DndContext.tsx b/packages/core/src/components/DndContext/DndContext.tsx
@@ -319,6 +319,7 @@ export const DndContext = memo(function DndContext({
     activeNodeRect
   );
 
+  const activeSensorRef = useRef<SensorInstance | null>(null);
   const instantiateSensor = useCallback(
     (
       event: React.SyntheticEvent,
@@ -372,6 +373,8 @@ export const DndContext = memo(function DndContext({
               active: id,
             });
             dispatchMonitorEvent({type: 'onDragStart', event});
+            setActiveSensor(activeSensorRef.current);
+            setActivatorEvent(activatorEvent);
           });
         },
         onMove(coordinates) {
@@ -384,10 +387,7 @@ export const DndContext = memo(function DndContext({
         onCancel: createHandler(Action.DragCancel),
       });
 
-      unstable_batchedUpdates(() => {
-        setActiveSensor(sensorInstance);
-        setActivatorEvent(event.nativeEvent);
-      });
+      activeSensorRef.current = sensorInstance;
 
       function createHandler(type: Action.DragEnd | Action.DragCancel) {
         return async function handler() {
@@ -423,6 +423,7 @@ export const DndContext = memo(function DndContext({
             setOver(null);
             setActiveSensor(null);
             setActivatorEvent(null);
+            activeSensorRef.current = null;
 
             const eventName =
               type === Action.DragEnd ? 'onDragEnd' : 'onDragCancel';