Multiple rerendering [ Performance issue]

[Harshmakadia]

There is a lot of rerendering happening in the diagram engine, not sure how it can be prevented, Take a look at the React profiling. Even if I click on the canvas the entire diagram is rendered again

Here is my sample code that extends the DiagramEngine

import * as SRD from "storm-react-diagrams";
import * as _ from "lodash";

export default class CustomEngineWidget extends SRD.DiagramWidget {
    onKeyUp(event) {
        if (event.keyCode === 8) {
            event.stopPropagation();
            return;
        }
        //overriding this func
        if ([46].indexOf(event.keyCode) !== -1 && !this.props.inputFocus) {
            _.forEach(this.props.diagramEngine.getDiagramModel().getSelectedItems(), element => {
                //only delete items which are not locked
                if(element.dialogType && element.dialogType !== "custom" && element.dialogType !== "trigger") {
                    this.props.removeNode(element, false);
                }
            });
        }
    }
}

I'm trying to add shouldComponentUpdate method here to avoid rerendering but there are issues in comparing the props value for the diagram engine.

Can you let me know what is the best way to avoid multiple rerendering happening or in other words change the node that is updated and not entire diagram as this is having a lot of performance issues.

[dylanvorster]

the diagram is re-rendered, but the node wrappers do the shouldComponentUpdate optimisations, this is actually built into the engine. See PerformanceWidget (which has a spelling mistake, which I am also now fixing)

[mralebrije]

@dylanvorster thanks for the amazing work on the library, quick question:

I'm using "6.0.1-beta.4" and trying to render up to 1000 nodes, currently, it's taking more than 10s to render the content, is there any better way to use this library instead of the conventional way in order to improve performance when painting a lot of nodes?

Thanks!

BTW, I tried to look for PerformanceWidget but not sure where is this placed, nvm, I found it PeformanceWidget.