Skip to content

Popover doesn't clean up immediately after unmount  #2604

@dgieselaar

Description

@dgieselaar

I've recently started seeing warnings in our APM tests that use the EUIPopover component:

  console.error ../node_modules/react-dom/cjs/react-dom.development.js:530
    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 EuiPopover (created by TransactionActionMenu)
        in TransactionActionMenu

I know that React was upgraded recently (439708a6f9), this might be why we're just seeing them now. The warning only shows when multiple tests are ran successively (I'm honestly not sure why).

I've looked into the EUIPopover component and it looks like some of the timeouts are not cleared after unmounting, which leads to the aforementioned warning:

  1. setTimeout(() => {
    this.setState({ isOpenStable: true }, () => {
    this.positionPopoverFixed();
    this.updateFocus();
    });
    }, durationMatch + delayMatch);
  2. window.requestAnimationFrame(() => {
    this.setState({
    isOpening: true,
    });
    });

It's relatively innocent, and I don't think it's a memory leak, but it would be nice to prevent the warning without having to await a timeout in our tests.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions