Eui: EuiButtonGroup (and EuiButtonToggle) doesn't unmount properly

[simianhacker]

We are using the EuiButtonGroup for our ViewSwitcher in the Metrics UI. Whenever the DOM is re-rendered due to the data changing (by either selecting a different metric OR any other option), this component throws the following warning:

If we remove the component from the page everything works as expected.

Here is where we are using it: https://github.com/elastic/kibana/blob/master/x-pack/legacy/plugins/infra/public/components/waffle/view_switcher.tsx

Here is where I think the problem is: https://github.com/elastic/eui/blob/master/src/components/button/button_toggle/button_toggle.tsx#L104-L107 and https://github.com/elastic/eui/blob/master/src/components/inner_text/render_to_text.tsx

[andrew-goldstein]

Per the details below, we're seeing a similar error in the SIEM app in the 7.6 and master branches when we navigate from the Overview page, which uses EuiButtonGroup, to other parts of the app.

Reproduction steps

1. Navigate to the SIEM app in Kibana. The Overview page will be displayed

2. Click on another tab in the global navigation, e.g. Hosts

Expected result:

• No errors in the Console

Actual result:

• The following error is logged to the Console:

backend.js:6 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 a useEffect cleanup function.
    in EuiButtonToggle (created by EuiButtonGroup)
    in div (created by EuiButtonGroup)
    in fieldset (created by EuiButtonGroup)
    in EuiButtonGroup
    in Unknown
    in div (created by EuiFlexItem)
    in EuiFlexItem
    in div (created by EuiFlexGroup)
    in EuiFlexGroup
    in Unknown
    in div (created by EuiFlexItem)
    in EuiFlexItem
    in div (created by EuiFlexGroup)
    in EuiFlexGroup (created by SidebarFlexGroup)
    in SidebarFlexGroup
    in Unknown
    in Unknown (created by Query)
    in div (created by EuiFlexItem)
    in EuiFlexItem (created by SidebarFlexItem)
    in SidebarFlexItem (created by Query)
    in div (created by EuiFlexGroup)
    in EuiFlexGroup (created by Query)
    in div (created by Wrapper)
    in Wrapper (created by WrapperPageComponent)
    in WrapperPageComponent (created by Query)
    in div (created by Container)
    in Container (created by Query)
    in Query
    in Unknown (created by OverviewComponent)
    in OverviewComponent (created by ConnectFunction)
    in ConnectFunction
    in Unknown (created by Context.Consumer)

@thompsongl would you be willing to consider a backporting a fix for this to the 7.6 Kibana branch?

[snide]

We can likely take this on as a backport. I will add this to https://github.com/elastic/eui/issues/2767 to track and we'll work this in next week.