Performance

Due to the increasing size of the parsers and UIComponents we’re loosing performance. We should investigate what causes the laggy behaviour and then fix it.

e.g. shouldComponentUpdate could help fixing problems with the UI performance.

[jansule]

We can declare components with simple props and states as PureComponents. These components already call shouldComponentUpdate() with a shallow comparison. This could reduce code.

React.PureComponent is similar to React.Component. The difference between them is that React.Component doesn’t implement shouldComponentUpdate(), but React.PureComponent implements it with a shallow prop and state comparison. https://reactjs.org/docs/react-api.html#reactpurecomponent

This is especially applicable for the input fields. Then, we have to implement shouldComponentUpdate() only for the other components.

[jansule]

We still have a few unneccessary render() calls, because in some components we are using state and props for the same property (usually a style-subprop). An example can be found in Style component (see code below).

// src/Component/Style/Style.tsx

// default props
interface DefaultStyleProps {
  style: GsStyle;
  locale: StyleLocale;
}

// ...

// state
interface StyleState {
  style: GsStyle;
}

// ...

onNameChange = (name: string) => {
  const style = _cloneDeep(this.state.style);
  style.name = name;
  if (this.props.onStyleChange) {
    this.props.onStyleChange(style);   // <-- calling onStyleChange, which will update this.props.style
  }
  this.setState({style}); // <-- calling this.setState, which will update this.state.style
}

This component is a mixture of a controlled and uncontrolled component. It will be rendered twice due to the calls to onStyleChange and this.setState on the same change event.

I think we should remove the state and let the parent handle the change. This also complies with common react patterns.