Synchronize isDragSource from true to false synchronously

.changeset/should-update-synchronously.md

@@ -0,0 +1,5 @@
+---
+'@dnd-kit/react': patch
+---
+
+Force synchronous re-render when `isDragSource` property is updated from `true` to `false` to enable seamless transition into idle state after drop animation. Without this change, the drop animation can finish before React has had a chance to update the drag source styles back to its idle state, which can cause some flickering.

apps/stories/stories/react/Sortable/Iframe/IframeExample.tsx

@@ -136,7 +136,6 @@ function SortableItem({
     group,
     accept: 'item',
     type: 'item',
-    feedback: 'clone',
     index,
     data: {group},
   });

packages/react/src/core/draggable/useDraggable.ts

@@ -35,7 +35,7 @@ export function useDraggable<T extends Data = Data>(
         manager
       )
   );
-  const trackedDraggable = useDeepSignal(draggable);
+  const trackedDraggable = useDeepSignal(draggable, shouldUpdateSynchronously);
 
   useOnValueChange(id, () => (draggable.id = id));
   useOnElementChange(handle, (handle) => (draggable.handle = handle));
@@ -87,3 +87,10 @@ export function useDraggable<T extends Data = Data>(
     ),
   };
 }
+
+function shouldUpdateSynchronously(key: string, oldValue: any, newValue: any) {
+  // Update synchronously after drop animation
+  if (key === 'isDragSource' && !newValue && oldValue) return true;
+
+  return false;
+}

packages/react/src/hooks/useDeepSignal.ts

@@ -1,12 +1,14 @@
 import {useMemo, useRef} from 'react';
+import {flushSync} from 'react-dom';
 import {effect, untracked} from '@dnd-kit/state';
 
 import {useIsomorphicLayoutEffect} from './useIsomorphicLayoutEffect.ts';
 import {useForceUpdate} from './useForceUpdate.ts';
 
 /** Trigger a re-render when reading signal properties of an object. */
 export function useDeepSignal<T extends object | null | undefined>(
-  target: T
+  target: T,
+  synchronous?: (property: keyof T, oldValue: any, newValue: any) => boolean
 ): T {
   const tracked = useRef(new Map<string | symbol, any>());
   const forceUpdate = useForceUpdate();
@@ -19,6 +21,7 @@ export function useDeepSignal<T extends object | null | undefined>(
 
     return effect(() => {
       let stale = false;
+      let sync = false;
 
       for (const entry of tracked.current) {
         const [key] = entry;
@@ -28,10 +31,13 @@ export function useDeepSignal<T extends object | null | undefined>(
         if (value !== latestValue) {
           stale = true;
           tracked.current.set(key, latestValue);
+          sync = synchronous?.(key as keyof T, value, latestValue) ?? false;
         }
       }
 
-      if (stale) forceUpdate();
+      if (stale) {
+        sync ? flushSync(forceUpdate) : forceUpdate();
+      }
     });
   }, [target]);
 

packages/react/src/sortable/useSortable.ts

@@ -5,7 +5,6 @@ import {Sortable, defaultSortableTransition} from '@dnd-kit/dom/sortable';
 import type {SortableInput} from '@dnd-kit/dom/sortable';
 import {useInstance} from '@dnd-kit/react';
 import {
-  useComputed,
   useImmediateEffect as immediateEffect,
   useIsomorphicLayoutEffect,
   useOnValueChange,
@@ -54,7 +53,7 @@ export function useSortable<T extends Data = Data>(input: UseSortableInput<T>) {
     );
   });
 
-  const trackedSortable = useDeepSignal(sortable);
+  const trackedSortable = useDeepSignal(sortable, shouldUpdateSynchronously);
 
   useOnValueChange(id, () => (sortable.id = id));
 
@@ -168,3 +167,10 @@ export function useSortable<T extends Data = Data>(input: UseSortableInput<T>) {
     ),
   };
 }
+
+function shouldUpdateSynchronously(key: string, oldValue: any, newValue: any) {
+  // Update synchronously after drop animation
+  if (key === 'isDragSource' && !newValue && oldValue) return true;
+
+  return false;
+}