HighchartsReact component is mutating the object passed to the `options` prop.

[WillowP]

Hello! Loving this library, found it very easy to make nice things :)

I found what I think is a bug in the handling of the values passed to the series attribute of the options prop in the HighchartsReact component.

I have a component like this. I've omitted quite few of the options for conciseness:

import React from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

export default function Chart({
  testStoreData,
  controlStoreData,
}) {
  return (
    <HighchartsReact
      highcharts={Highcharts}
      options={{
        series: [
          {
            name: "Test",
            data: testStoreData,
          },
          {
            name: "Control",
            data: controlStoreData,
          },
        ],
      }}
    />
  );
}

This component is being rendered by another component which conditionally passes different values for testStoreData and controlStoreData. The different values are stored in state.

What's happening is that, when the values for testStoreData and controlStoreData change, the values of the upstream state are being changed. Took me quite a while to figure out what was happening.

Workaround
If you replace this:

series: [
          {
            name: "Test",
            data: testStoreData,
          },
          {
            name: "Control",
            data: controlStoreData,
          },
        ],

with

series: [
          {
            name: "Test",
            data: [...testStoreData],
          },
          {
            name: "Control",
            data: [...controlStoreData],
          },
        ],

the problem goes away. It's not ideal, especially if you had a very large data set (mine isn't huge atm), but it works.

I haven't had a chance to look at the source code for this project to isolate where this is happening.

Hope this is helpful. Let me know if you have any questions for me.

[ppotaczek]

Hi @WillowP,

This is intentional, Highcharts for performance reasons mutates the original data array. This behaviour is not changed by our wrapper.

You can find more info here: highcharts/highcharts#4259

Best regards!

[WillowP]

Thanks for the answer @ppotaczek ! The link is helpful, and I understand why Highcharts is doing that.

I wouldn't expect this behaviour from a React library, since React props are read only.

Would you consider changing the wrapper so that it makes a copy of the options prop (or the parts of it that might be mutated) before passing it down to Highcharts? I think it would be more friendly to other react developers that way, as it's pretty unexpected that a component would mutate its props. Or would that cause the performance issues that Highcharts is trying to avoid?

If not, I think it would be a good idea to update the documentation to mention that the component might mutate its props, and ideally an explanation of exactly which parts of the props might get mutated.

Thanks again!

[ppotaczek]

Thanks for your suggestions!

I understand your confusion, but I think that we should not reduce performance and the best way will be to mention about data mutation in the docs.

[ppotaczek]

I have updated the docs: https://github.com/highcharts/highcharts-react#why-highcharts-mutates-my-data