Fix needless disabled action dispatches

The `useDroppable` hook was needlessly dispatching `SetDroppableDisabled` actions even if the `disabled` property had not changed since the droppable was registered.
clauderic · Mar 17, 2022 · 77e3d44 · 77e3d44
1 parent 30bbd12
commit 77e3d44
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/.changeset/droppable-disabled-dispatch.md b/.changeset/droppable-disabled-dispatch.md
@@ -0,0 +1,5 @@
+---
+'@dnd-kit/core': minor
+---
+
+Fixed an issue with `useDroppable` hook needlessly dispatching `SetDroppableDisabled` actions even if the `disabled` property had not changed since registering the droppable.
diff --git a/packages/core/src/hooks/useDroppable.ts b/packages/core/src/hooks/useDroppable.ts
@@ -46,6 +46,7 @@ export function useDroppable({
   const {active, dispatch, over, measureDroppableContainers} = useContext(
     InternalContext
   );
+  const previous = useRef({disabled});
   const resizeObserverConnected = useRef(false);
   const rect = useRef<ClientRect | null>(null);
   const callbackId = useRef<NodeJS.Timeout | null>(null);
@@ -140,18 +141,18 @@ export function useDroppable({
     [id]
   );
 
-  useEffect(
-    () => {
+  useEffect(() => {
+    if (disabled !== previous.current.disabled) {
       dispatch({
         type: Action.SetDroppableDisabled,
         id,
         key,
         disabled,
       });
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [disabled]
-  );
+
+      previous.current.disabled = disabled;
+    }
+  }, [id, key, disabled, dispatch]);
 
   return {
     active,