【dnd-kit】DragOverlay が ドロップ直後にチラつく

dnd-kit の DragOverlay を使って、ドラッグ中のプレビュー表示をカスタマイズしたのだが、ドロップ直後に DragOverlay が一瞬消えて再描画されるので「チラつき」が気になった

原因はドラッグ終了時（onDragEnd）に activeId を即座に null にしていることだった

表示制御用の state を分ける

なのでドラッグ状態と描画制御を別の state で管理し、dropEndで即座に overId を null にするのではなく

50ms ほど遅延して null にするとよかった

実装例

const [activeId, setActiveId] = useState(null);
const [overlayId, setOverlayId] = useState(null);

const handleDragStart = (event) => {
  setActiveId(event.active.id);
  setOverlayId(event.active.id);
};

const handleDragEnd = () => {
  setActiveId(null);
  setTimeout(() => setOverlayId(null), 50);
};