GoJS performance with React

GoJS
1

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 AvoidsNodes to 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!

2

Can you tell if the number of transactions has greatly increased with the use of React?

3

Can you tell if the number of transactions has greatly increased with the use of React?

In the cases I’ve looked at, the number of transactions has been the same in both versions of our app (from looking at the length of UndoManager.history).

4

Does profiling tell you which (root) called method is called much more when using React? Or just find any method that is called 5(?) times as much and look up the stack to see what is the root caller that is called so much more than before.