useMeasure dimensions out of sync in react18

[TaiyabAashir]

React version: 18

Due to automatic batching in react18, state updates in useMeasure's ResizeObserver may be applied after paint. This can cause visual glitches if we depend on useMeasure dimensions for visual updates.

Same issue is raised in react: facebook/react#24331

They are recommending that state updates in ResizeObserver should be wrapped in flushSync from ReactDOM.

Can we do this in useMeasure or at least add optional support for flushSync in useMeasure. So that consumers can opt-in if they are using the dimensions for visual update(For eg. in useLayoutEffect).

Link to code example: https://codesandbox.io/s/amazing-montalcini-j6lz46?file=/src/App.js

[agusterodin]

This library is great and works with React 18 https://www.npmjs.com/package/react-use-measure

[TaiyabAashir]

Not sure about this, since same issue is reported there: pmndrs/react-use-measure#93
@streamich