Performance drop when panning or zooming

We have a graph with over 600 elements and when panning and/or zooming there seems to be performance drop and the movement gets laggy. This can also be experienced in https://reactflow.dev/examples/stress example after randomizing positions and panning around - especially when nodes get outside of visible area.

After some investigation it seems that in case nodes getting outside/inside of visible area the internal state nodes (useStoreState(store => store.nodes) change - which can be improved by setting onlyRenderVisibleElements={false} prop on ReactFlow component (which removes some of the lags for our case).

But there is also re-render of Edge due to transform prop change, however I am not sure that this is the main cause of the issue.

I wonder if changing transform should automatically trigger re-render of Edge, especially when re-render of Nodes is not triggered in such case.

Thank you.

PS: the library is great, thanks for your hard work, BTW 😃

[moklick]

Hey @Xalsar

react-flow is not made for flows with more than 1000+ nodes. I am not sure if a DOM based renderer can satisfy your requirements here. I would check out a canvas based solution in your case.

[moklick]

Hey @wladimiiir

since react flow is DOM based we have some limitations. I would say that ~1000 nodes is the limit depending on the complexity of the nodes.

The onlyRenderVisibleElements was supposed to speed up the flows but at the moment it does the opposite 😦 When nodes reenter the view they have to be expensively reinitialized. The Edge component needs the current transform value only to check if it’s inside the viewport (when onlyRenderVisibleElements=true)… So for nodes and edges onlyRenderVisibleElements=true is actually bad right now.

I am aware of this and I will try to improve this over the next weeks!