React Query with DnD Kit: Item Goes Back to Original Position for a Split Second on Drop Despite Optimistic Updates

[MaxVhanamane]

I'm working on a project using React Query with DnD Kit to implement drag-and-drop functionality. However, when I drop an item in a new position, it briefly returns to its original position for a split second before settling into the new position. I’m also using the dragOverlay feature provided by DnD Kit and have followed the rules stated in the documentation.

I’m currently using optimistic updates with React Query’s mutate function, and I’ve tried directly updating the cache with setQueryData, but I still see this flicker. Introducing a separate local state to manage the DnD updates stops the flickering, but I'd prefer to avoid adding additional state just for this purpose.

My Goal

I want to achieve a smooth drag-and-drop experience without duplicating state. Specifically, I'm looking to: Avoid the flicker and prevent the item from momentarily returning to its original position. Rely solely on React Query for the updates, without introducing a new local state.

What I've Tried:

Optimistic updates: Using mutate with onMutate to apply optimistic changes.

Direct cache update: Calling setQueryData immediately upon drop to reflect the change instantly.

Has anyone faced a similar issue or found an effective way to handle this scenario?

I am using:

"@dnd-kit/core": "^6.1.0",
"@dnd-kit/sortable": "^8.0.0",
"@dnd-kit/utilities": "^3.2.2",
"@tanstack/react-query": "^5.10.0",

[yellowfuse]

This is not answering your question, but just wanted to share that I have the exact same problem, and I ended up eliminating the flicker with an extra bit of local state – like you did. I don't worry too much about it, since dnd-kit fires off a million re-renders while dragging anyway, so the extra state is not going to make a difference (in my case). Of course, if your dataset is huge, it might be different. Just my two cents...
If you do happen to find a better solution, I'd love to hear it.