I’ve been re-writing an existing codebase (GoJS with plain HTML/CSS/JS) in React, and am following the implementation in gojs-react-basic / gojs-react-samples, using a wrapper component to keep diagram state in sync with React state.
I’m seeing that the diagram implemented in React is slower than the old implementation. A particular noticeable case is when dropping a group of selected nodes (hundreds to a thousand) in a new position – from profiling with Chrome DevTools, the
mouseup event took ~700ms in the old implementation and ~4000ms in React when moving a few hundred nodes in the same diagram, during which the whole app is unresponsive. In both cases, virtually all of this execution time is Scripting activity (and not Rendering/Painting etc), and the call-stack consists of functions from the GoJS library.
I looked at the Performance Considerations page and was able to reduce this time significantly by changing the Link routing from
Orthogonal so for the most part we no longer have any issues, but I just wanted to try understand potential causes for the difference in performance with React.
I had assumed that the overhead with React wouldn’t lead to much difference (we are using the
skipsDiagramUpdate flag of
<ReactDiagram>) and from the Chrome profiling it seems like the execution of the GoJS library itself is taking longer. However, I’m not quite sure where to look to identify the cause and would appreciate any pointers/suggestions you may have.
Please let me know if there is any additional information I can provide that would be useful; thanks in advance!