React Drag and Drop in Production: dnd-kit Setup (2026)

dnd-kit’s default DndContext setup might be leaking event listeners into the DOM, causing performance degradation and unexpected behavior in production.

Common Causes and Fixes

Unbounded Event Listeners on Window or Document:
- Diagnosis: Use your browser’s performance profiling tools (e.g., Chrome DevTools Performance tab) to record interactions. Look for a high number of event listeners, especially those attached to window or document that don’t have clear origins. If you see listeners for pointerdown, pointermove, pointerup, touchstart, touchmove, touchend that seem to originate from dnd-kit but aren’t being cleaned up, this is likely the culprit.
- Fix: Ensure your DndContext is properly unmounted when the component using it is removed from the DOM. The most robust way is to wrap your drag-and-drop setup within a conditional render or a useEffect cleanup.
```
import { DndContext } from '@dnd-kit/core';
import { useState, useEffect } from 'react';

function MyDraggableComponent({ children }) {
  const [isMounted, setIsMounted] = useState(true);

  useEffect(() => {
    // Simulate unmounting after some time or based on a condition
    const timer = setTimeout(() => {
      setIsMounted(false);
    }, 30000); // Example: unmount after 30 seconds

    return () => clearTimeout(timer);
  }, []);

  if (!isMounted) {
    return null;
  }

  return (
    <DndContext onDragEnd={(event) => console.log(event)}>
      {children}
    </DndContext>
  );
}
```
- Why it works: React’s useEffect cleanup function (return () => ...) is invoked when the component unmounts. By ensuring DndContext is conditionally rendered and its parent component is managed correctly, React’s lifecycle handles the removal of dnd-kit’s event listeners automatically.
Improper Cleanup in Custom Hooks or Higher-Order Components:
- Diagnosis: If you’ve built custom hooks or HOCs that wrap dnd-kit’s context or components, inspect their useEffect hooks. Look for any manual window.addEventListener or document.addEventListener calls that lack corresponding removeEventListener calls in their cleanup functions.
- Fix: Add explicit cleanup logic for any manually attached listeners.
```
import { useEffect } from 'react';

function useGlobalDragListener(callback) {
  useEffect(() => {
    const handleDrag = (event) => {
      // Your custom drag handling logic
      callback(event);
    };
    window.addEventListener('pointermove', handleDrag);
    return () => {
      window.removeEventListener('pointermove', handleDrag);
    };
  }, [callback]);
}
```
- Why it works: This directly addresses the root cause by ensuring that any listener registered within the hook or HOC is correctly deregistered when the component using the hook/HOC unmounts.
Long-Running Drag Operations or Infinite Loops in Event Handlers:
- Diagnosis: In your performance profile, observe if drag operations are taking an unusually long time, or if the event handlers (onDragStart, onDragMove, onDragEnd, etc.) are being called excessively without proper termination. This can happen if your handler logic itself gets stuck or triggers re-renders that interfere with dnd-kit’s state management.
- Fix: Optimize your onDragMove and onDragEnd handler logic. Avoid complex computations, deep DOM traversals, or excessive state updates within these handlers. Use memoization (useMemo, useCallback) for functions passed as props to child components involved in drag operations.
```
import { useCallback } from 'react';
import { DndContext } from '@dnd-kit/core';

function ParentComponent() {
  const handleDragEnd = useCallback((event) => {
    // Optimized logic
    console.log('Drag ended:', event.active.id);
  }, []); // Empty dependency array means this function is stable

  return (
    <DndContext onDragEnd={handleDragEnd}>
      {/* ... draggable items ... */}
    </DndContext>
  );
}
```
- Why it works: useCallback ensures that the handleDragEnd function reference remains stable across re-renders. This prevents unnecessary re-creation of the function, which can lead to issues where dnd-kit might re-attach listeners or get into confused states if it expects a stable handler.
Conflicting Global Styles or CSS:
- Diagnosis: Sometimes, aggressive CSS rules (e.g., pointer-events: none; applied too broadly, or overflow: hidden; on a parent that hides drag feedback) can interfere with dnd-kit’s ability to capture pointer events or render drag overlays correctly. Check your global CSS files and component-level styles for anything that might be affecting pointer event propagation or visibility of elements during drag.
- Fix: Be specific with your CSS. Use unique class names or IDs for drag-related elements and avoid overly general selectors. Ensure that elements intended to be draggable or droppable have pointer-events: auto; explicitly set if necessary, and that their ancestors don’t inadvertently block events.
```
/* In your CSS file */
.my-draggable-item {
  pointer-events: auto !important; /* Ensure events are captured */
}

.drag-overlay {
  /* Styles for the element being dragged */
  pointer-events: none; /* The overlay itself shouldn't block interaction */
}
```
- Why it works: Explicitly controlling pointer-events ensures that dnd-kit can correctly identify and interact with the elements involved in the drag-and-drop operation, preventing CSS from silently dropping events.
Incorrect sensors Configuration:
- Diagnosis: dnd-kit uses sensors (like PointerSensor, KeyboardSensor) to detect user input. If these are not configured or initialized correctly, or if multiple conflicting sensors are active without proper management, it can lead to unexpected event handling. Inspect the sensors prop passed to DndContext.
- Fix: Ensure you are using the appropriate sensors and that they are correctly configured. For most web applications, PointerSensor is sufficient. If you need keyboard support, include KeyboardSensor and manage its activation.
```
import { DndContext, PointerSensor, KeyboardSensor, useSensor, useSensors } from '@dnd-kit/core';

function MyComponent() {
  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: (event, { currentTarget, active }) => {
        // Custom coordinate getter for keyboard if needed
        return { x: 0, y: 0 }; // Example: fallback
      },
    })
  );

  return (
    <DndContext sensors={sensors} onDragEnd={(e) => console.log(e)}>
      {/* ... */}
    </DndContext>
  );
}
```
- Why it works: By explicitly defining and configuring the sensors, you ensure that dnd-kit is using the intended input methods and that their configurations are sound, preventing potential race conditions or misinterpretations of user input.
Third-Party Library Conflicts:
- Diagnosis: If you have other libraries that heavily rely on global event listeners or DOM manipulation (e.g., charting libraries, other drag-and-drop implementations, certain UI frameworks), they might interfere with dnd-kit’s event capturing or cleanup. Use your browser’s performance profiler to identify event listeners originating from unexpected libraries during drag operations.
- Fix: Isolate dnd-kit in a test environment or by temporarily disabling other suspect libraries. If a conflict is found, try to configure the conflicting library to avoid global listeners or adjust its event handling. Alternatively, wrap dnd-kit within a specific DOM subtree to limit its scope if the conflict is global.
- Why it works: This allows you to pinpoint the source of the conflict and apply targeted solutions, either by modifying the behavior of the conflicting library or by segmenting the DOM to prevent interference.

The next error you’ll likely encounter after fixing these is related to accessibility, specifically when trying to implement proper ARIA attributes for screen reader users during drag-and-drop operations.