Fix lifecycle bugs

.changeset/lifecycle-bug-fixes.md

@@ -0,0 +1,6 @@
+---
+'@dnd-kit/abstract': patch
+'@dnd-kit/react': patch
+---
+
+Added optional `register` argument to instances of `Entity` to disable automatic registration of instances that have a manager supplied on initialization.

packages/abstract/src/core/entities/draggable/draggable.ts

@@ -38,7 +38,9 @@ export class Draggable<
   public accessor type: Type | undefined;
 
   @reactive
-  public accessor status: DraggableStatus = 'idle';
+  public accessor status: DraggableStatus = this.isDragSource
+    ? 'dragging'
+    : 'idle';
 
   /**
    * A boolean indicating whether the draggable item is being dropped.

packages/abstract/src/core/entities/entity/entity.ts

@@ -4,9 +4,27 @@ import {DragDropManager} from '../../manager/index.ts';
 import type {Data, UniqueIdentifier} from './types.ts';
 
 export interface Input<T extends Data = Data> {
+  /**
+   * The unique identifier of the entity.
+   */
   id: UniqueIdentifier;
+  /**
+   * Optional data associated with the entity.
+   */
   data?: T;
+  /**
+   * Whether the entity should initially be disabled.
+   * @default false
+   */
   disabled?: boolean;
+  /**
+   * Whether the entity should be automatically registered with the manager when it is created.
+   * @default true
+   */
+  register?: boolean;
+  /**
+   * An array of effects that are set up when the entity is registered and cleaned up when it is unregistered.
+   */
   effects?(): Effect[];
 }
 
@@ -27,7 +45,7 @@ export class Entity<
    * @param manager - The manager that controls the drag and drop operations.
    */
   constructor(input: Input<T>, manager: U | undefined) {
-    const {effects, id, data = {}, disabled = false} = input;
+    const {effects, id, data = {}, disabled = false, register = true} = input;
 
     let previousId = id;
 
@@ -55,8 +73,8 @@ export class Entity<
     this.unregister = this.unregister.bind(this);
     this.destroy = this.destroy.bind(this);
 
-    if (manager) {
-      queueMicrotask(() => this.manager?.registry.register(this));
+    if (manager && register) {
+      queueMicrotask(this.register);
     }
   }
 

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

@@ -28,14 +28,14 @@ export function useDraggable<T extends Data = Data>(
       new Draggable(
         {
           ...input,
+          register: false,
           handle: currentValue(handle),
           element: currentValue(element),
         },
         manager
       )
   );
   const trackedDraggable = useDeepSignal(draggable);
-  const status = useComputed(() => draggable.status, [draggable]);
 
   useOnValueChange(id, () => (draggable.id = id));
   useOnElementChange(handle, (handle) => (draggable.handle = handle));

packages/react/src/core/droppable/useDroppable.ts

@@ -27,6 +27,7 @@ export function useDroppable<T extends Data = Data>(
       new Droppable(
         {
           ...input,
+          register: false,
           element: currentValue(element),
         },
         manager

packages/react/src/core/hooks/useInstance.ts

@@ -16,7 +16,7 @@ export function useInstance<T extends Instance>(
   initializer: (manager: DragDropManager<any, any> | undefined) => T
 ): T {
   const manager = useDragDropManager() ?? undefined;
-  const [instance] = useState<T>(() => initializer(undefined));
+  const [instance] = useState<T>(() => initializer(manager));
 
   if (instance.manager !== manager) {
     instance.manager = manager;

packages/react/src/sortable/useSortable.ts

@@ -44,6 +44,7 @@ export function useSortable<T extends Data = Data>(input: UseSortableInput<T>) {
     return new Sortable(
       {
         ...input,
+        register: false,
         handle: currentValue(handle),
         element: currentValue(element),
         target: currentValue(target),