React Query with dnd
Hello. I’m building a Kanban board with drag-and-drop functionality using react-query and @hello-pangea/dnd (formerly react-beautiful-dnd).
The Kanban data is directly displayed from the data managed by a query, and I’ve implemented optimistic updates using onMutate and setQueryData as shown in the code below.
The problem is that when I change the order of the Kanban data via drag-and-drop, the data briefly shows the state before the change and then updates to the new order, causing a flicker in the component.
This momentary flicker negatively affects the user experience.
As far as I can tell, there’s nothing in my setQueryData code that violates data immutability.
Is there something I might be missing?
The Kanban data is directly displayed from the data managed by a query, and I’ve implemented optimistic updates using onMutate and setQueryData as shown in the code below.
The problem is that when I change the order of the Kanban data via drag-and-drop, the data briefly shows the state before the change and then updates to the new order, causing a flicker in the component.
This momentary flicker negatively affects the user experience.
As far as I can tell, there’s nothing in my setQueryData code that violates data immutability.
Is there something I might be missing?
