Memory leak in SearchBar component

[timroes]

The SearchBar component currently has a severe memory leak. It creates ResizeObserver that it connects in it's componentDidMount method, but will never unobserve and disconnect that when the component gets unmounted, thus leading to the now unmounted (no longer used) ResizeObserver keeping around a reference to the DOM object it's watching and causing a potential very large detached DOM tree around. This will cause memory consumption and grow in detached (and not garbage collectable) DOM nodes every time this component unmounts. This is perceivable very well e.g. in Discover when you switch index patterns, which currently rerenders the page (thus unmounts and mount the search bar). Looking at the browsers performance tools you can see how every time the DOM node count and the JS heap will continue growing and never been cleaned up.

[elasticmachine]

Pinging @elastic/kibana-app-services (Team:AppServices)

[Dosant]

@timroes, have you actually seen a leakage there from the search bar, or did you assume from reviewing code?
It looks like there is an unobserve

kibana/src/plugins/data/public/ui/search_bar/search_bar.tsx

Line 365 in ebe8566

this.ro.unobserve(this.filterBarRef);

[timroes]

@Dosant I have actually seen the leakage and debugged it. That unobserve you're referring to is called in componentDidUpdate, but there is simply no componentWillUnmount present that will unobserve and destroy it. I validated that adding an unobserve and destroy in the componentWillUnmount actually resolved that described memory leak.

[Dosant]

Fixed by #99603
thanks @timroes for brining this up