Flicker after synchronous state update with react-query

[Liboul]

Hey 👋 Love the library, thanks for taking over react-beautiful-dnd, adding typing, supporting React 18 ... it's great! I had this issue pop up while making the switch from react-beautiful-dnd, which makes me think it's a small regression

Expected behavior

Making a synchronous state update through react-query's setQueryData should not cause a flicker. By "flicker", I mean that the dropped element goes back to its original place then to the right place.

Actual behavior

The dropped element goes back to its original place for a time

Steps to reproduce

0. Implement onDragEnd to make an optimistic synchronous update, using react-query's setQueryData.
1. Drop an item.
2. Witness the flicker.

Suggested solution?

Under the hood, react-query uses react's hook useSyncExternalStore. My best guess is that @hello-pangea/dnd does not wait for the state update before moving the dropped item back to its original place, as is described here

We try hard to ensure that an entire lifecycle is completed before a new one starts. If you find that not to be the case - it is a bug: please raise it!

What version of React are you using?

18.2.0

What version of @hello-pangea/dnd are you running?

16.0.0

What browser are you using?

Chrome Version 105.0.5195.102

Demo

Minimal use case implemented in this sandbox: https://codesandbox.io/s/react-beautiful-dnd-flicker-after-synchronous-update-with-reactquery-n207n1

https://user-images.githubusercontent.com/16024169/190988569-a145890f-1852-4c2b-9d65-d68fbb123b10.mov

Note: To enhance the issue on this dummy example, I faked a costly rendering time.

[Gorbus]

We're having exactly the same issue in the same configuration, any progress on this ?

[Liboul]

So far the only hack I have is to duplicate the state between react-query's cache and a local component state, but that's really not ideal, as it's easy to get out of sync and it requires more code.

I did try to flushSync in various places, to no avail.

[Xhale1]

Interesting. I ran into a similar issue when switching from react 17 to 18, which makes me think it's primarily an issue with how the library supports react 18.

The solution ended up being a simple flushSync call, I'll play with the code sandbox and see if I can find a solution in the morning. Thanks for the report!

[Gorbus]

Thanks a lot for having a look @Xhale1 , for us it's a very problematic regression. Ready to test if you have anything you think may help.

[Gorbus]

Any success on the subject by any chance @Xhale1 ? Still preventing us to upgrade to latest react unfortunately, but couldn't find a fix on my own :(

[Liboul]

I guess one could try dichotomizing versions:

• No issue on react-beautiful-dnd's latest version
• Issue on @hello-pangea/dnd's latest version

To see which exact version caused the regression, which would narrow down the culprits. I don't have any time to dedicate to this right now, maybe @Gorbus?

[nunocaseiro]

I have the same issue. Is there any update regarding the fix?

[Gorbus]

As react-beautiful-dnd was updated to be react 18 compatible we went back to the other library : react-beautiful-dnd/

[ghost]

Is there any updates on this? I am struggling with the same issue...

[nunocaseiro]

+1

[hichemfantar]

As react-beautiful-dnd was updated to be react 18 compatible we went back to the other library : react-beautiful-dnd/

Are you having the same issue with beautiful dnd?

[saogregl]

Is there any updates on this? I am experiencing the same issue... Been thinking about keeping a local state to "isolate" the draggables from the state updates performed by react query, but this requires more (seemingly) unnecessary code.

[arnolddddddd]

Also having the same issue react v 18.2.0

[elsigh]

I also had the same issue with react-beautiful-dnd. I believe the cause is more wrt react 18 based on all the comments I've read. Perhaps under the hood this might be a good opportunity to try useOptimistic?

[kr4chinin]

Still facing this issue, any recent workarounds?