[Strict Mode] Redundant div is portalled and not cleaned up

[weronikaolejniczak]

Describe the bug

When Strict Mode is enabled, a div used for portalling is created twice - one of which is empty. When the portalled component is unmounted, the empty div is not removed, causing unnecessary DOM bloat.

This becomes problematic in cases where many components are portalled on a single screen, as each interaction adds a new DOM node. Over time, this can lead to resource exhaustion or performance issues.

Docs page

Impact and severity

It impacts all end-users of our consumers.

It's severity depends on the amount of portalled elements within one page and intensity of interactions, especially when the portalled elements are triggered on hover (easy access). See the Codesandbox below.

There is no known workaround.

[Search] EuiPortal is used internally in:

• EuiPopover (Kibana, 512)
• EuiOverlayMask (Kibana, 16)
• EuiFlyout (Kibana, 350)
• EuiToolTip (Kibana, 856) and more, see the above search.

[Search] EuiPortal is used 51 times in Kibana

Environment and versions

• EUI version: ~
• React version: React 18 (Strict Mode)
• Kibana version (if applicable): ~
• Browser: ~
• Operating System: ~

Minimum reproducible sandbox

Codesandbox

Try hovering over the button several times and look for data-euiportal in the markup.

To Reproduce

1. Enable Strict Mode in your environment.
2. Render e.g. EuiPopover.
3. Notice how each interaction adds an additional, redundant div that doesn't get cleaned up.

Expected behavior

Only one div gets portalled and when the component is unmounted, it is removed from DOM.

Screenshots

Additional context

In Strict Mode, React executes hooks twice. Our portal doesn't support this behavior and appends a div to the document twice.

We tried fixing this in the past but many issues surfaced, specifically type errors and regression in the current usage.