Major lag when dragging nodes with react 18 / v10.2

Describe the Bug

Upgrading to React 18 and v10.2 of React Flow introduced noticeable, major lag when dragging nodes, as can be seen in the videos below.

In this example, onNodesChange and onEdgesChange are implemented as the default (calling setNodes and setEdges) and onNodesDrag is not implemented, so there shouldn’t be any major logic going on on drag that could introduce this lag. I’m happy to add any code or context you might want but I’m not sure what else could be helpful here.

No other visible regressions were found when doing this update.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Update react and react-dom to v18 and update react-flow-renderer to v10.2

Expected behavior

I expected dragging nodes to be as fluent as when using v17/v10.1.

Screenshots or Videos

React 17 / v10.1:

https://user-images.githubusercontent.com/24462089/166427288-07ad67ef-abd2-4973-85db-3e9c7d46456a.mp4

React 18 / v10.2:

https://user-images.githubusercontent.com/24462089/166427308-5bf9eaa2-eec5-420f-8f1f-436f5e2f4d74.mp4

Platform

• OS: Windows 11
• Browser: Chrome
• Version: 100.0

Additional context

No response

[moklick]

released in v10.3.0

[stanislav-grin]

I had the same behavior when there was an additional wrapper between ReactFlowProvider and ReactFlow components, such as:

<ReactFlowProvider>
  <MyOwnWrapper> // some custom context provider
    <ReactFlow .../>
  </MyOwnComponent>
</ReactFlowProvider>

When I reworked code so that become

<ReactFlowProvider>
  <ReactFlow .../>
</ReactFlowProvider>

the issue has gone.