Drag and drop list flickers back to original position for a second before optimistic update kicks in
When dragging and dropping an element in my list (using dndkit), it all works fine when I am working with local state. However, when I use react query with optimistic updates, the UI flickers back to the original ordering for a split second and then renders the new order. Note - The flicker happens before the invalidation completes so the new (optimisitic) state does kick in before the new response is cached. I have validated with local state that my drag and drop is set up properly.
What could be causing this split second flicker?
2 Replies
variable-lime•9mo ago
Can you post a reproduction with local state and query? You can use Stackblitz for this.
variable-lime•9mo ago
Imagine your doing something similar to this? https://tanstack.com/query/latest/docs/framework/react/guides/optimistic-updates#updating-a-list-of-todos-when-adding-a-new-todo
Optimistic Updates | TanStack Query React Docs
React Query provides two ways to optimistically update your UI before a mutation has completed. You can either use the onMutate option to update your cache directly, or leverage the returned variables...