React 18. Moveable(internal) and react state is out of sync during concurrent rendering

[zaqqaz]

Environments

• Framework name: React
• Framework version: 18
• Moveable Component version: 0.32.8-beta.3 | 0.32.7

Description

React state values and moveable container out of sync (easy to reproduce with throttling, likely requires https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore to be used).

Tested with 0.32.7 and 0.32.8-beta.3. To reproduce the issue you need to use new api of react-dom(import {createRoot} from 'react-dom/client';), everything is in sync with old react-dom api (react17 compatability mode)

2022-05-17.12.10.29.mov

[daybrush]

@zaqqaz

• lit-moveable 0.7.0
• moveable 0.30.0
• preact-moveable 0.32.0
• react-compat-moveable 0.18.0
• react-moveable 0.33.0
• svelte-moveable 0.22.0
• vue-moveable 2.0.0-beta.21
• vue3-moveable 0.5.0
• ngx-moveable 0.27.0

moveable's new version is released.
See this docs:
https://github.com/daybrush/moveable/tree/master/packages/react-moveable#react-18-concurrent-mode