Performance drop when panning or zooming
See original GitHub issueWe 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 😃
Issue Analytics
- State:
- Created 3 years ago
- Reactions:4
- Comments:11 (4 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
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.
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
onlyRenderVisibleElementswas 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. TheEdgecomponent needs the currenttransformvalue only to check if it’s inside the viewport (whenonlyRenderVisibleElements=true)… So for nodes and edgesonlyRenderVisibleElements=trueis actually bad right now.I am aware of this and I will try to improve this over the next weeks!