Resizable component trembles/flickers with React 18 createRoot

[sylvainDNS]

Bug Description

I tried to use re-resizable to make a resizable floating box like this:

I tried to use the solution given by @AJLoveChina here but this is what I got:

On top & left resize directions we compute the box position which seems un-synced with the computed dimensions, and cause a trembling/flickering effect on the opposite edge

The difference with the expected result is that I use the new react-dom api createRoot(rootElement).render(<App />) instead of the deprecated render(<App />, document.getElementById("root")).

Environment

• re-resizable version: 6.9.11
• React version: 18.2.0
• react-dom version: 18.2.0
• Browser: Chrome, Firefox, Safari (all affected)
• OS: macOS, Windows, Linux (all affected)

Minimal Reproduction

On this codesandbox, comment/uncomment last lines (createRoot/render) to see the difference.

https://codesandbox.io/p/sandbox/priceless-framework-lvhyr8

Expected Behavior

The resizable component should resize smoothly without any trembling or flickering on any edge, just like it works with the legacy ReactDOM.render API.

Workaround

Use flushSync during the manual resize solve the issue.

import { flushSync } from "react-dom";

const onResize = useCallback(
  ({ delta, direction, size }) => {
    if (!dragStartSize) return;
    
    // ... resize logic ...
    
    flushSync(() => {
      setSize({
        ...size,
        left: newLeft,
        top: newTop,
      });
    });
  },
  [dragStartSize]
);

Considering the number of warning there is on the documentation, I don't think it's the kind of code we want to maintain in our codebase: https://react.dev/reference/react-dom/flushSync Do you think you could find a way to avoid syncing size on our side?

Thank you!

[SourceCodeDeleted]

hmmm mine flickers even with that there.

[DmitryAvanesov]

flushSync fixed this issue for me, it'd still be great to avoid using it

[SourceCodeDeleted]

Do you think a PR could be submitted to resolve this state handling, so we didn't have to flush it?