Is this the right way to rerender?

[bfang711]

This question is kind of general. If needed, I will provide a reproducible case.

I have 9 line plots shown together within one screen. Each plot is a component, with simple <ReactHighcharts config={this.config}/> in render(), where this.config is per plot. Except for the series.data, I keep the configs the same among different plots.

Now I need to add/remove xAxis.crosshair to/from all the plots. The way I am doing is that for "add", write a line of this.config.xAxis.crosshair = {width:3,color:'#FF9800'}; for remove write a line this.config.xAxis.crosshair=undefined; followed by triggering render(). However I need to do the render() for all 9 plots, which make it slow to show them all out, even if users won't see the crosshair difference until they move mouse over.

So my questions are.

1. is this the correct way to rerender the whole thing even for this small change, by changing the this.config? (I think this question is kind of general, not just for add/remove xAxis.crosshair. I kind of rendering any changes, small/big by doing like this.)
2. Even more general question, In this case, how does Virtual DOM act? Can someone explain to me a little bit? (To my understand, whenever I rerender , I will rerender the whole thing, even if there is only small change like the crosshair changes. no?)

thank you.

[ilyjs]

Hi @bfang711 ! 1) The use of the state is the best practice. in your case If you change config this.config.xAxis.crosshair = {width:3,color:'#FF9800'}; You can use update with refs. https://stackblitz.com/edit/react-lok-fqmzjx?file=Hello.js If you use an update then there is no rerendering. 2) Yes.

[bfang711]

Awesome. This is very helpful.

is that possible that I use update to unsubscribe an event as well, since there is no removeEvent like member function? like: this.highchart.getChart().update({chart :{events: {click:undefined}}}); where click: was set to another function before. I tried this, seems not working as expected. or is there another unsubscribe member function that I missed?

Thank you so much.

[ilyjs]

@bfang711 events: {click:undefined}} Defaults to undefined. update will update the value click to undefined. To control the event, use

click: function(event){
  if(event......any )
    .........       
}

[bfang711]

@ilyjs Thank you. I think this is exactly the way I want to get it done.