Potential improvement to shouldComponentUpdate. about highcharts-react HOT 5 CLOSED

For now if you create a new object for chart.options then changes will be auto-detected.

Changes in a nested object, like chart's options, are not auto-detected and comparing old options with new ones might take some time. This is not a big problem unless the compare runs often, and unfortunately it does.

We could prepare a code that will make a deep compare and even use a more dedicated updates for e.g. axis or series changes. Now only chart.update is used. Next we'll need to check performance. This could be a nice enhancement for future version of the wrapper.

Let's see who else would require this feature by adding more comments in the issue thread since there's no userVoice for the wrapper.

from highcharts-react.

You could allow update to be a predicate function and just defer to its return value.
e.g.,

  shouldComponentUpdate: function (nextProps, nextState) {
    var update = this.props.update

    // allow client update resolution
    if (typeof update === 'function') {
        return update(nextProps, nextState);
    }

    // Update if not specified or set to true
    return (typeof update === 'undefined') || update
  },

That would provide maximum flexibility without much extra logic to maintain.

from highcharts-react.

React does not deeply compare props by default.
We are already using custom change detection (for the update flag), so we could detect what kind of change was done to decide what function should be used there.

from highcharts-react.

Changes in a nested object, like chart's options, are not auto-detected and comparing old options with new ones might take some time.

Are there event hooks that you can listen to to detect any changes to the chart options? In that case, that would be a simpler architecture instead of deep-comparing the whole options tree.

Also, if you can make the options set sent to chart.update as small as possible, Highcharts will take care of optimizing. For example, if only chart.backgroundColor is changed, the options should be limited to this:

{
   chart: {
      backgroundColor: 'yellow'
   }
}

This also applies to series and axes. If you can limit the structure to the options that actually changed, you can use chart.update and it will perform as good as for example series.update or even series.setData.

from highcharts-react.

Actually the wrapper uses React.PureComponent’s shouldComponentUpdate to compare the options. The best way to update is to keep all chart options in the state and call setState with the new ones:

constructor(props) {
  this.state = {
    chartOptions: {...},
    hoverData: null
  };
}

setHoverData = (e) => {
  this.setState({ hoverData: ... }); // the chart is not updated
}

setNewSeriesData = () => {
  this.setState({ chartOptions: {...} }); // the chart is updated with only new options
}

render() {
  ...
  return (
    <div>
      <HighchartsReact
        ...
        options={this.state.chartOptions}
      />
    ...
    </div>
  )
}

Live demo: https://stackblitz.com/edit/react-9hwir4?file=index.js

Additionally, it is also possible to block updates by the allowChartUpdate option.

from highcharts-react.