User avatar
clint_milner
Posts: 17
Joined: Tue Nov 17, 2015 11:14 am

React componentWillUnmount() best practices?

I'm using 'highcharts-react-official' and trying to find if the chart needs to be destroyed during componentWillUnmount()?
I've just tried calling this.chart.destroy(), but that's not working.

I can't find examples, or any posts outlining the best practices.

Any thoughts?
Thanks.
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: React componentWillUnmount() best practices?

Hi, clint_milner!

I don't quite understand your question. Chart should be destroyed in componentWillUnmount() method due to not wasting memory and performance.
And it's normal that your this.chart.destroy() isn't doing anything because chart already has been destroyed by the wrapper.
https://github.com/highcharts/highchart ... tsReact.js

Am I missing something?

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
User avatar
clint_milner
Posts: 17
Joined: Tue Nov 17, 2015 11:14 am

Re: React componentWillUnmount() best practices?

Hi Rafal,
Thanks for the reply. Yes, I'm concerned with performance because I'm building a dashboard with many Highcharts instances, and I was starting to see some performance problems, so I thought I'd try to implement this.chart.destroy() in the componentWillUnmount() method, but I was getting an error.

I'm creating a chart ref in a parent component, and then passing the ref via props to my Highcharts component which does the actual rendering. Which component needs to call the destroy() method?

Thanks!
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: React componentWillUnmount() best practices?

clint_milner,

You said that you want to implement this.chart.destroy() in the componentWillUnmount() method. But it is already implemented in our wrapper:

Code: Select all

componentWillUnmount() {
    // Destroy chart
    if (this.chart) {
      this.chart.destroy();
      this.chart = null;
    }
  }
Are you able to create a simplified online demo of your chart? You can rely on this: https://codesandbox.io/s/v08qmw5983

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
User avatar
clint_milner
Posts: 17
Joined: Tue Nov 17, 2015 11:14 am

Re: React componentWillUnmount() best practices?

Ah, I thought you were pointing me to that for reference, but glad it's already handled for me.

Thank you!
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: React componentWillUnmount() best practices?

Small misunderstanding ;) you're welcome! Have a good day
Rafal Sebestjanski,
Highcharts Team Lead

Return to “Highcharts Usage”