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",