Merge pull request Expensify#65327 from callstack-internal/fix/63312-multi-files-follow-ups-part2

Change event target to counter to avoid extra rerenders

Author: lakchote

src/hooks/useDragAndDrop/index.ts

@@ -26,13 +26,19 @@ const useDragAndDrop: UseDragAndDrop = ({
     const [isDraggingOver, setIsDraggingOver] = useState(false);
     const {close: closePopover} = useContext(PopoverContext);
 
-    const enterTarget = useRef<EventTarget | null>(null);
+    const dragCounter = useRef(0);
+    const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
     useEffect(() => {
         if (isFocused && !isDisabled) {
             return;
         }
         setIsDraggingOver(false);
+        dragCounter.current = 0;
+        if (debounceTimeoutRef.current) {
+            clearTimeout(debounceTimeoutRef.current);
+            debounceTimeoutRef.current = null;
+        }
     }, [isFocused, isDisabled]);
 
     const handleDragEvent = useCallback(
@@ -73,30 +79,35 @@ const useDragAndDrop: UseDragAndDrop = ({
                 event.stopPropagation();
             }
 
+            // Clear any existing debounce timeout
+            if (debounceTimeoutRef.current) {
+                clearTimeout(debounceTimeoutRef.current);
+                debounceTimeoutRef.current = null;
+            }
+
             switch (event.type) {
                 case DRAG_OVER_EVENT:
                     handleDragEvent(event);
                     break;
                 case DRAG_ENTER_EVENT:
                     handleDragEvent(event);
-                    enterTarget.current = event.target;
-                    if (isDraggingOver) {
-                        return;
+                    dragCounter.current += 1;
+                    if (dragCounter.current === 1 && !isDraggingOver) {
+                        setIsDraggingOver(true);
                     }
-                    setIsDraggingOver(true);
                     break;
                 case DRAG_LEAVE_EVENT:
-                    if (!isDraggingOver) {
-                        return;
+                    dragCounter.current -= 1;
+                    if (dragCounter.current <= 0) {
+                        dragCounter.current = 0;
+                        // Add small debounce to prevent rapid flickering
+                        debounceTimeoutRef.current = setTimeout(() => {
+                            setIsDraggingOver(false);
+                        }, 50);
                     }
-                    // This is necessary because dragging over children will cause dragleave to execute on the parent.
-                    if (enterTarget.current !== event.target) {
-                        return;
-                    }
-
-                    setIsDraggingOver(false);
                     break;
                 case DROP_EVENT:
+                    dragCounter.current = 0;
                     setIsDraggingOver(false);
                     onDrop(event);
                     break;