Memory leak in elastic-charts

[timroes]

Elastic charts currently (in the version on Kibana master 29.1.0) has a memory leak in it's caching layer, that keeps a huge amount of detached DOM nodes around. We're using re-reselect in some place, that by default uses a FlatObjectCache to cache selectors. That will lead to those selectors simply be "cached forever". We use this via the getSeriesSpecsSelector funtion and our state that we cache actually has references to DOM nodes around, that might later be detached, but then kept alive by this cache, preventing the browser from cleaning up the DOM node (and a potential large DOM tree attached to them).

We should ideally make sure that the state that we cache there, does not keep strong references to DOM elements around, that will prevent them from being garbage collected. Alternatively (or better in addition) we can tell re-reselect what cache object it should use (https://github.com/toomuchdesign/re-reselect#cacheobject) and might want to consider one that at least limits the cache size.

This problem is causing problems (high memory consumption, huge detached DOM node count) in placed like Discover where we exchange the chart, e.g. when switching index patterns. If you continue switching index patterns you will see the amount of DOM nodes and JS heap size growing and never be reduced, due to elastic-charts keeping them alive via this cache.

[nickofthyme]

Thanks for the detailed description Tim, we'll get on it right away.

[nickofthyme]

More findings:

I am seeing a retained reference the the .echTooltip element which is a child of the createPortal call. Could be related to facebook/react#18790, also could be a dev-only memory issue.