#Dragging nodes lag/performance issue

1 messages · Page 1 of 1 (latest)

solar frigate
#

I'm sorry if this has already been discussed but I'm running into some performance issues when upgrading from React flow 9 to the latest version.

On dragging a node, it seems to be quite laggy for me when I have more than 50 nodes (and gets progressively worse as the nodes increase)

I believe it's because I have defined nodes/edges in a parent component that passes down the nodes/edges as props to a child component that contans the <ReactFlow ... /> and when the node is dragged, it causes the parent and child to re-render many times from the onNodesChange function.

I'm currently open to any suggestions here but is there any way for me to improve this? I need the nodes in the parent as I have other functionality in the parent component that depends on the nodes array so I don't think I can move it to child..

Probably a stupid question but is it possible for me to retain react flow 9s drag update logic without going to an uncontrolled flow while using the latest react flow version?

Any help is appreciated!

unique prism
#

Hey! We are working on a version with a better performance. For now you can check that you are not using nodes in places where it's not needed. You should only use it directly in the component that renders <ReactFlow />. More over that it's important that your custom nodes use memo.