[Epic] Support React Strict Mode

[tkajtoch]

✨ Summary

Update EUI to support React's <StrictMode> feature. Kibana requires this to enable concurrent mode, which is on the horizon.

❗ Problem or Opportunity

Enabling strict mode causes some of our components to not render, crash, or behave unexpectedly. Applications using EUI (including Kibana) cannot enable StrictMode.

🎯 Value

TLDR: Required by Kibana, need to prioritize.

The Platform team would like to enable concurrent mode in Kibana, which should provide significant performance gains.

Currently, the errors caused by EUI prevent Kibana from enabling strict mode, which significantly helps developers find and fix React-related mistakes, including concurrent mode support. While strict mode is not mandatory for concurrent mode, there's value in seeing strict mode warnings early and preparing for necessary updates. Having strict mode enabled also helps prevent state errors that could be hard to notice.

EUI should not block Kibana from enabling concurrent mode. EUI should plan to fix this well in advance, before it becomes an urgent blocker for Kibana.

Beyond Kibana, strict mode has caused problems for other EUI users in the past -- they encounter errors and report them to the EUI team, and we discover later that it is caused by strict mode. This can remove a common friction point.

Lastly, strict mode is generally a handy feature for engineers, so supporting it should be generally helpful for all users.

Urgency

Kibana needs this, but the exact date is currently unknown. They will definitely be working on this in Q2, and the work is described in this doc. @Dosant is leading this effort.

It will become a blocker for them if we don't address it.

🧠 Feasibility & Direction

Components known to be buggy in strict mode:

• EuiDataGrid
• EuiBasicTable
• EuiPortal
• EuiToolTip
• EuiResizeObserver
• EuiMutationObserver
• EuiDelayHide

There might be more components affected by enabling <StrictMode>. We need to test them all manually before marking this as complete.

We need to fix all of these buggy behaviors to let our consumers use StrictMode safely.

Q&A

• What's the process to uncover additional components that might be buggy in Strict Mode, and how do we generally fix the issues that we do find? How do we test at the end to ensure components work in Strict Mode, and how do we ensure that we don't inadvertently introduce new strict mode issue in the future?

  • An initial manual QA is necessary to confirm components are working as expected. We might be able to add a check to our e2e cypress tests to ensure no Strict Mode warnings are being printed out
  • StrictMode will inform us of any possible issues in development mode. We'll be able to notice them early during development and fix them before release. A PR QA step can be added to ensure the changes don't cause any (new) strict mode warnings.

• Are there other possible causes for strict mode not working (as implied by this spike?)

  • It's very unlikely that there's a single root cause for the StrictMode issues in EUI. Some components are affected because of EuiPortal incompatibility with StrictMode, but that's just how components like EuiDataGrid are composed.

• What issues need to be replied to to let users know that strict mode is now supported?

  • All currently open issues related to StrictMode support link to this epic

• Do we need to run Kibana in strict mode with these EUI changes before releasing as a confirmation step?

  • As a confirmation step, yes. There may be errors in Kibana that prevent it from functioning properly when StrictMode is enabled, so testing it this way could be impossible. Fixing Kibana components to support StrictMode is out of scope.

---

📐 Definition

As the issue evolves, use this section to add concrete details. This section can grow over time as the direction becomes more clear. Remove sections if they're not needed or captured in an external document.

Design

Proposed Solution

Acceptance criteria

• All EUI components should work as expected with strict mode enabled
• There should be no differences in functionality or UI of components between strict mode and non-strict mode
• Documentation should be updated

Definition of done

• All components are updated to support strict mode, the updates merged to main and released publicly
• Documentation is updated to reflect that strict mode is fully supported in EUI
• Issues should be updated or replied to to let users know that strict mode is now supported

Documentation needs

No StrictMode-specific documentation is necessary. It's a drop-in feature that'll help consumers of EUI as well as the EUI team find React issues.

We'll need to update the Supported environments table.

Impact scope

StrictMode is an opt-in React feature. It can be enabled by wrapping a component tree in <StrictMode> component. Considering that currently EUI breaks when StrictMode is enabled, we don't expect consumers to have it enabled.

Adding support for StrictMode in EUI is an enhancement, and not a breaking change.

Rollout plan

This feature can be rolled out following the regular "new feature" rollout procedure. No extra steps are necessary. See Impact scope for more information

Related issues

• [ ] https://github.com/elastic/eui/issues/9009 - This is already a Subtask of another Epic, so linking it here in the description rather than adding it as a Sub-task