From eb6f4bf94e746d4128e7190d2dff2f30974a367a Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Fri, 20 Mar 2026 20:39:52 +0100
Subject: [PATCH] fix: stabilize useDragManager callback refs and
 containerHandlers memo

Remove activeDrag from drag-start dependency arrays to prevent
unnecessary re-renders during drag. Wrap containerHandlers in
useMemo for consistent reference stability.
---
 packages/web/src/hooks/useDragManager.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/web/src/hooks/useDragManager.ts b/packages/web/src/hooks/useDragManager.ts
index ce943586..4fbb06a2 100644
--- a/packages/web/src/hooks/useDragManager.ts
+++ b/packages/web/src/hooks/useDragManager.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, type RefObject } from 'react';
+import { useState, useCallback, useEffect, useMemo, type RefObject } from 'react';
 
 export type DragType = 'channel' | 'category' | 'voiceUser';
 
@@ -39,18 +39,18 @@ export function useDragManager(opts: UseDragManagerOpts) {
   // --- Channel/Category drag handlers ---
 
   const handleChannelDragStart = useCallback((e: React.DragEvent, channelId: string) => {
-    if (!canManage || activeDrag !== null) return;
+    if (!canManage) return;
     e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData('text/plain', channelId); // Firefox requires setData for drag to work
     setActiveDrag({ type: 'channel', dragId: channelId });
-  }, [canManage, activeDrag]);
+  }, [canManage]);
 
   const handleCategoryDragStart = useCallback((e: React.DragEvent, categoryId: string) => {
-    if (!canManage || activeDrag !== null) return;
+    if (!canManage) return;
     e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData('text/plain', categoryId); // Firefox requires setData for drag to work
     setActiveDrag({ type: 'category', dragId: categoryId });
-  }, [canManage, activeDrag]);
+  }, [canManage]);
 
   const handleLayoutDragOver = useCallback((e: React.DragEvent, targetId: string, targetType: 'channel' | 'category') => {
     if (!activeDrag || activeDrag.type === 'voiceUser') return;
@@ -107,10 +107,10 @@ export function useDragManager(opts: UseDragManagerOpts) {
     clearState();
   }, [activeDrag, dropTarget, onChannelDrop, onCategoryDrop, clearState]);
 
-  const containerHandlers = {
+  const containerHandlers = useMemo(() => ({
     onDrop: handleContainerDrop,
     onDragOver: handleContainerDragOver,
-  };
+  }), [handleContainerDrop, handleContainerDragOver]);
 
   // --- Voice user drag handlers ---