Reorder: how to detect item drop?

[warm-tune]

So Reorder.Group.onReorder method calls every time item changes its position during the drag. But that doesn't mean that DnD is finished. If I continue drag from the beginning of the list to its end - I will see multiple onReorder calls. So, I cannot use onReorder as a trigger for issues a api request call.

My question is: how to reliably detect that item reached its final destination after all reorder events, and dropped, so I can persist new state of elements on the server via api call?

Thanks.

[MukundaKatta]

onReorder is the "current order has changed during the drag" event — you're right that it fires continuously. For "drag finished, persist now" you want onDragEnd on the Reorder.Item (or on the group), and you want to capture the latest order from onReorder into a ref so onDragEnd has it available when it fires. Minimal pattern:

import { Reorder } from 'motion/react'
import { useRef, useState } from 'react'

function MyList({ initial }: { initial: Item[] }) {
  const [items, setItems] = useState(initial)
  const latestOrderRef = useRef(items)

  // Keep a ref in sync with state so the drag-end handler sees the newest order.
  latestOrderRef.current = items

  const persist = async () => {
    await fetch('/api/items/reorder', {
      method: 'POST',
      body: JSON.stringify({ ids: latestOrderRef.current.map((i) => i.id) }),
    })
  }

  return (
    <Reorder.Group axis="y" values={items} onReorder={setItems}>
      {items.map((item) => (
        <Reorder.Item
          key={item.id}
          value={item}
          onDragEnd={persist}   // ← the reliable "drop" signal
        >
          {item.name}
        </Reorder.Item>
      ))}
    </Reorder.Group>
  )
}

Three subtleties worth knowing about

1. Guard against no-op drops. Users sometimes start a drag, change their mind, and drop in the same spot. You probably don't want to fire an API call for that:

const snapshotRef = useRef<string>('')

<Reorder.Item
  key={item.id}
  value={item}
  onDragStart={() => { snapshotRef.current = items.map((i) => i.id).join(',') }}
  onDragEnd={() => {
    const next = latestOrderRef.current.map((i) => i.id).join(',')
    if (next !== snapshotRef.current) persist()
  }}
>

2. Rollback on failure. The optimistic UI in the snippet above assumes success. Proper rollback means remembering the pre-drag order:

const rollbackRef = useRef<Item[]>(items)

<Reorder.Item
  onDragStart={() => { rollbackRef.current = items }}
  onDragEnd={async () => {
    try {
      await fetch('/api/items/reorder', { /* ... */ })
    } catch {
      setItems(rollbackRef.current)  // revert
    }
  }}
>

3. Debounce if you also want intermediate saves. If the list is huge and the drag is long, you sometimes want to save intermediate positions so a crash mid-drag doesn't lose progress. onReorder + a 300ms debounce works, and the final onDragEnd is just a "flush now" signal:

import { useMemo } from 'react'
import { debounce } from 'es-toolkit'

const debouncedPersist = useMemo(() => debounce(persist, 300), [])

<Reorder.Group
  values={items}
  onReorder={(next) => {
    setItems(next)
    debouncedPersist()
  }}
>
  {items.map((item) => (
    <Reorder.Item
      value={item}
      onDragEnd={() => {
        debouncedPersist.cancel()
        persist()   // final flush
      }}
    />
  ))}
</Reorder.Group>

Most apps don't need this — the simple onDragEnd pattern at the top is what I'd reach for first.

Why not onDragEnd on Reorder.Group?

Reorder.Group doesn't expose an onDragEnd directly — the drag is "owned" by the active Reorder.Item. If you want a single handler (not N identical ones on each item), lift it to a named function and pass the reference; the callback is shared anyway so there's no real cost.

Don't try to detect "drag ended" from onReorder by debouncing alone — that couples your API call latency to your debounce window and misbehaves when users hold an item still mid-drag. onDragEnd on the item is the definitive signal.