Console error about state update on unmounted Chart component

[gyoung-panopto]

We are seeing a console error when using the Chart component. This happens when the Chart is unmounted and replaced with a different chart component. Any ideas why this might be happening or how to work around/suppress the error?

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. in Chart (created by ViewsChart)

(ViewsChart is our custom component)

[ljubic]

Same here.

[ravichandrareddyl]

This is happening with Bar chart in particular.

[odinolav]

This happens for me with the Pie Chart. Thanks for your great work though 💯

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[sintanial]

Same problem for me too :(

[rakannimer]

Can anyone create a reproduction of this problem on CodeSandbox ?

Having trouble reproducing it.

[melanievee]

I tried reproducing this on CodeSandbox and was unable to. So I started investigating in my project locally.

I realized that the parent component where I was rendering my Chart was re-rendering several times on unmount and this render thrashing was manifesting itself in this issue. When I fixed my project so I don't have these re-renders, I no longer see this error.

Is anyone seeing this error who has a clean unmount cycle w/o extra re-renders?

[aarononeal]

The problem is in useLoadGoogleCharts() and can happen if the component unloads before the charts API is fully loaded.

google.charts.load(chartVersion, {
        packages: chartPackages,
        language: chartLanguage,
        mapsApiKey,
      });
google.charts.setOnLoadCallback(() => {
       setGoogleCharts(google);
});

The callback setOnLoadCallback may complete after component unload and setGoogleCharts will then trigger the error.

This causes other instability issues where the charts API then refuses to load and you get blank charts.

The solution is exactly as the error message describes. The useEffect cleanup function should set some cancel flag that should be checked in the setOnLoadCallback before attempting to assign state.