Replace `EuiObserver` abstract class with `useObserver` hook by ragini-pandey · Pull Request #9511 · elastic/eui

ragini-pandey · 2026-03-16T16:47:36Z

Summary

What: Replaced the abstract EuiObserver base class with a shared useObserver custom hook. Converted both EuiResizeObserver and EuiMutationObserver from class components to function components.
Why: Closes [EuiObserver] Migrate abstract base class to a hook #9458 — Migrate abstract base class to a hook-based pattern as part of the class-to-hooks migration effort.
How:
- observer.ts: Replaced the EuiObserver class with a useObserver hook that accepts a beginObserve callback (receives a DOM node, returns an observer instance). The hook manages the ref callback, observer lifecycle, and cleanup.
- resize_observer.tsx: Converted EuiResizeObserver from a class extending EuiObserver to a function component using useObserver. Used refs instead of setState for tracking dimensions to avoid unnecessary re-renders.
- mutation_observer.tsx: Converted EuiMutationObserver from a class extending EuiObserver to a function component using useObserver. The existing useMutationObserver hook and makeMutationObserver helper are unchanged.
- The Observer interface and hasResizeObserver exports are preserved. No public API changes.

API Changes

component / parent	prop / child	change	description
~~No public API changes~~

Screenshots

N/A — No visual changes. This is an internal refactor only.

Impact Assessment

🔴 Breaking changes — No breaking changes. Public API is identical.
💅 Visual changes — No visual changes.
🧪 Test impact — No test changes needed. All existing tests pass.
🔧 Hard to integrate — No integration impact. Drop-in replacement.

Impact level: 🟢 None

Release Readiness

Changelog: Added changelog entry
Documentation: No docs changes needed (internal refactor)
Figma: N/A
Migration guide: N/A (no breaking changes)
Adoption plan: N/A (internal refactor)

QA instructions for reviewer

Verify EuiResizeObserver still works by checking components that use it (e.g., accordion, context menu panel, markdown editor, tooltip)
Verify EuiMutationObserver still works by checking the popover component
Run the observer tests: cd packages/eui && yarn test-unit --testPathPattern=observer
Run TypeScript check: cd packages/eui && npx tsc --noEmit

Checklist before marking Ready for Review

Filled out all sections above
QA: Verified all observer tests pass, TypeScript compiles with no errors
Tests: Existing tests pass with no modifications needed
Changelog: Added changelog entry
Breaking changes: N/A

github-actions · 2026-03-16T16:47:48Z

👋 Since this is a community submitted pull request, a Buildkite build has not been started automatically. Would an Elastic organization member please verify the contents of this pull request and kick off a build manually?

weronikaolejniczak · 2026-03-17T09:36:13Z

@ragini-pandey The 2 PRs you opened both migrate EuiMutationObserver. Could we close #9508 and focus on this one instead?

It would resolve:

We could link all of these in the PR description so they get automatically closed 😄

Copilot

Pull request overview

Refactors the observer utilities in EUI away from a shared abstract class (EuiObserver) into a shared hook (useObserver) as part of the class-to-hooks migration effort (issue #9458), while keeping the EuiResizeObserver and EuiMutationObserver public component APIs intact.

Changes:

Replaced the EuiObserver abstract base class with a new useObserver hook that manages node ref updates and observer lifecycle/cleanup.
Converted EuiResizeObserver and EuiMutationObserver from class components into function components that use useObserver.
Added an upcoming changelog entry documenting the internal refactor.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
packages/eui/src/components/observer/resize_observer/resize_observer.tsx	Converts `EuiResizeObserver` to a function component powered by `useObserver` and refs.
packages/eui/src/components/observer/observer.ts	Replaces the `EuiObserver` class with the `useObserver` hook and observer lifecycle management.
packages/eui/src/components/observer/mutation_observer/mutation_observer.tsx	Converts `EuiMutationObserver` to a function component powered by `useObserver` and refs.
packages/eui/changelogs/upcoming/9511.md	Adds a changelog entry for the observer refactor.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

ragini-pandey · 2026-03-17T16:34:20Z

Thanks for the review! Both comments have been addressed in the latest commit:

1. JSDoc updated — The @description for useObserver now reads "Used by EuiResizeObserver and EuiMutationObserver" and a @param componentName tag is documented.

2. Mount-time ref guard restored — Added an optional componentName parameter (defaults to 'useObserver') and a useEffect that throws "${componentName} did not receive a ref" on mount if the ref callback was never called with an element. This exactly mirrors the old EuiObserver.componentDidMount check. Both EuiResizeObserver and EuiMutationObserver now pass their component names to the hook.

…#9458) Convert the abstract `EuiObserver` base class to a shared `useObserver` custom hook. Migrate both `EuiResizeObserver` and `EuiMutationObserver` from class components extending `EuiObserver` to function components that use the new hook. - Replace `EuiObserver` class with `useObserver` hook in `observer.ts` - Convert `EuiResizeObserver` to a function component using `useObserver` - Convert `EuiMutationObserver` to a function component using `useObserver` - All existing tests pass - No public API changes

- Update JSDoc to mention both EuiResizeObserver and EuiMutationObserver - Add optional componentName parameter to useObserver - Add mount-time guard (throws if no ref received), matching EuiObserver.componentDidMount behavior - Merge cleanup useEffect into the guard effect for clarity - Pass componentName from EuiResizeObserver and EuiMutationObserver callers

Copilot

Pull request overview

Refactors EUI’s internal observer components away from an abstract class pattern and into a shared hook, supporting the ongoing class-to-hooks migration effort (issue #9458) while keeping EuiResizeObserver/EuiMutationObserver behavior and exports intact.

Changes:

Replaced the EuiObserver abstract class with a shared useObserver(beginObserve, componentName) hook.
Converted EuiResizeObserver and EuiMutationObserver from class components to function components using useObserver.
Added an upcoming changelog entry describing the internal refactor.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
packages/eui/src/components/observer/observer.ts	Introduces `useObserver` hook to manage ref callback + observer lifecycle/cleanup.
packages/eui/src/components/observer/resize_observer/resize_observer.tsx	Migrates `EuiResizeObserver` to hooks; uses refs to track prior size and latest callback.
packages/eui/src/components/observer/mutation_observer/mutation_observer.tsx	Migrates `EuiMutationObserver` to hooks; uses refs to keep latest mutation callback/options without cycling the ref callback.
packages/eui/changelogs/upcoming/9511.md	Documents the observer refactor for the next release notes.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Copilot

Pull request overview

Refactors the observer utilities in packages/eui by replacing the EuiObserver abstract base class with a shared useObserver hook, and migrating EuiResizeObserver/EuiMutationObserver from class components to function components.

Changes:

Replaced the EuiObserver class with a reusable useObserver(beginObserve, componentName?) hook for ref + lifecycle management.
Converted EuiResizeObserver and EuiMutationObserver to function components built on useObserver.
Added an upcoming changelog entry documenting the refactor.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
packages/eui/src/components/observer/observer.ts	Removes the abstract class and introduces the shared `useObserver` hook for observer lifecycle/ref handling.
packages/eui/src/components/observer/resize_observer/resize_observer.tsx	Migrates `EuiResizeObserver` to a hook-based function component and uses refs to avoid rerenders.
packages/eui/src/components/observer/mutation_observer/mutation_observer.tsx	Migrates `EuiMutationObserver` to a hook-based function component and stabilizes callback/options via refs.
packages/eui/changelogs/upcoming/9511.md	Adds changelog notes for the internal observer refactor.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

- Add componentName to useEffect dependency array in useObserver, remove eslint-disable suppression - Remove React.FunctionComponent annotation from EuiMutationObserver, use typed destructured props instead - Remove as React.ReactElement type cast from EuiMutationObserver return statement

…nect behavior The old EuiObserver class called observer.disconnect() twice on unmount: once in componentWillUnmount and again via the ref callback (called with null). Each disconnect() calls clearTimeout in the MutationObserver polyfill, so the count was 9. The new useObserver hook only disconnects once (via the ref callback), then sets observerRef to null, so the useEffect cleanup is a no-op. This is the correct behavior. Update the expected count from 9 to 8.

Copilot

Pull request overview

Refactors EUI’s observer components by replacing the shared EuiObserver abstract class with a useObserver hook, and migrates EuiResizeObserver/EuiMutationObserver to function components as part of the broader class-to-hooks effort (issue #9458).

Changes:

Added a shared useObserver hook to manage ref binding, observer lifecycle, and cleanup.
Converted EuiResizeObserver and EuiMutationObserver from class components to function components using useObserver.
Updated a popover cleanup test expectation and added an upcoming changelog entry.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/eui/src/components/observer/observer.ts	Replaces `EuiObserver` base class with the new `useObserver` hook and preserves the ref-on-mount guard behavior.
packages/eui/src/components/observer/resize_observer/resize_observer.tsx	Migrates `EuiResizeObserver` to a function component using `useObserver` and refs for dimension tracking.
packages/eui/src/components/observer/mutation_observer/mutation_observer.tsx	Migrates `EuiMutationObserver` to a function component using `useObserver`, keeping existing mutation observer helpers intact.
packages/eui/src/components/popover/popover.test.tsx	Updates timeout cleanup assertion to match new runtime behavior.
packages/eui/changelogs/upcoming/9511.md	Documents the internal refactor and component migrations.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

weronikaolejniczak · 2026-03-18T10:47:36Z

@ragini-pandey additionally, as you can see above, our tests failed ☝🏻 specifically for EuiPopover. Let's make sure popover tests pass and we test all components you've mentioned: accordion, context menu panel, markdown editor, tooltip, make sure they behave correctly 😄 If you need any help, let me know!

weronikaolejniczak · 2026-03-18T16:09:43Z


      unmount();
-      expect(window.clearTimeout).toHaveBeenCalledTimes(9);
+      expect(window.clearTimeout).toHaveBeenCalledTimes(8);


Is it expected that clearTimeout is called 8 times and not 9?

Yes, this is expected and intentional. The count dropped from 9 → 8 because the old EuiObserver class disconnected the observer twice on unmount:

In componentWillUnmount — explicitly called this.observer.disconnect()

Via the ref callback — React calls the ref with null on unmount, which also triggered updateChildNode(null) → this.observer.disconnect()

Each disconnect() call invokes clearTimeout inside the MutationObserver polyfill (used in the test environment), so there were 2 disconnects = 2 extra clearTimeout calls, giving a total of 9.

The new useObserver hook disconnects only once — the updateChildNode ref callback handles disconnection when called with null on unmount. The useEffect cleanup also calls observerRef.current?.disconnect(), but by that point observerRef.current is already null (nulled out by the ref callback), making it a no-op. So there is now 1 observer disconnect = 1 clearTimeout, giving a total of 8.

This is the correct behavior — cleaning up once is better than twice, and the count change reflects that improvement.

weronikaolejniczak · 2026-03-18T16:09:54Z

@ragini-pandey since we are removing EuiObserver and adding useObserver, we should also update the documentation in packages/website. Instead of being in "Components", it should be documented in "Utilities".

…n type

Copilot

Pull request overview

This PR continues the EUI class-to-hooks migration by replacing the internal abstract EuiObserver base class with a shared useObserver hook, and converting EuiResizeObserver/EuiMutationObserver to function components while preserving their public APIs.

Changes:

Replaced EuiObserver class logic with a reusable useObserver(beginObserve, componentName) hook that manages ref attachment, observer lifecycle, and cleanup.
Converted EuiResizeObserver and EuiMutationObserver to function components using useObserver, using refs to avoid unnecessary re-renders.
Updated an EuiPopover cleanup test expectation and added a changelog entry.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/eui/src/components/observer/observer.ts	Replaces the abstract class with the new `useObserver` hook and keeps the `Observer` interface.
packages/eui/src/components/observer/resize_observer/resize_observer.tsx	Refactors `EuiResizeObserver` to a function component backed by `useObserver`.
packages/eui/src/components/observer/mutation_observer/mutation_observer.tsx	Refactors `EuiMutationObserver` to a function component backed by `useObserver`.
packages/eui/src/components/popover/popover.test.tsx	Adjusts timeout cleanup assertion to match updated observer behavior.
packages/eui/changelogs/upcoming/9511.md	Records the internal refactor in the upcoming changelog.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated no new comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

ragini-pandey · 2026-04-02T07:11:34Z

Hey @ragini-pandey hope you're good! I see that the CI is failing for our documentation website, specifically:

Error: Can't render static file for pathname "/pr_9511/docs/utilities/resize-observer/"

To run the docs:
yarn
yarn workspace @elastic/eui-website build:workspaces
yarn workspace @elastic/eui-website start

Hey @weronikaolejniczak,
All three commands are working:

yarn — Completed successfully (with non-blocking peer dependency warnings)
yarn workspace @elastic/eui-website build:workspaces — Completed in ~2 minutes with warnings only (no errors)
yarn workspace @elastic/eui-website start — Dev server is running at [http://localhost:3000/]

Copilot

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

weronikaolejniczak

CI is failing because of formatting issues. Could you please address them? 🙏🏻 They're mentioned by the Copilot as well.

Hopefully after that the CI passes, I'll do some manual tests and we could be good to go!

weronikaolejniczak

Sorry, missclick 😅

…n_observer.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

elasticmachine · 2026-04-15T15:43:58Z

💚 Build Succeeded

History

💚 Build #3147 succeeded 01cf1c6
💔 Build #3112 failed 0baf169
💔 Build #3035 failed 466b6a2
💔 Build #3001 failed 14c72a5

weronikaolejniczak

@ragini-pandey linter is still complaining because of formatting issues:

/app/packages/eui/src/components/observer/mutation_observer/mutation_observer.tsx

28:53 error Replace EuiMutationObserverProps>·=·({⏎··children,⏎··onMutation,⏎··observerOptions,⏎ with ⏎··EuiMutationObserverProps⏎>·=·({·children,·onMutation,·observerOptions· prettier/prettier

Could you please address any issues on the PR 🙏🏻

all unit tests with Jest should pass,
all Cypress tests should pass,
Storybook should run and stories should be tested manually,
documentation website builds,
there are no linter errors / formatting errors.

Additionally, could you add displayName to EuiMutationObserver and EuiResizeObserver? Thanks! 💚

elasticmachine · 2026-04-15T16:01:20Z

💔 Build Failed

Buildkite Build
Commit: 8a861a2

Failed CI Steps

🔨 EUI pull request test

History

💔 Build #6185 failed 01cf1c6
💚 Build #6158 succeeded 0baf169
💚 Build #6096 succeeded 466b6a2
💔 Build #6068 failed 14c72a5

ragini-pandey requested a review from a team as a code owner March 16, 2026 16:47

ragini-pandey force-pushed the fix/9458-observer-hook branch from 13b05a2 to f7f685d Compare March 16, 2026 16:47

github-actions bot added the community contribution (Don't delete - used for automation) label Mar 16, 2026

weronikaolejniczak requested review from Copilot and weronikaolejniczak March 17, 2026 09:31

Copilot started reviewing on behalf of weronikaolejniczak March 17, 2026 09:32 View session

Copilot AI reviewed Mar 17, 2026

View reviewed changes

Comment thread packages/eui/src/components/observer/observer.ts Outdated

Comment thread packages/eui/src/components/observer/observer.ts

ragini-pandey mentioned this pull request Mar 17, 2026

Convert EuiMutationObserver from class to function component #9508

Closed

2 tasks

ragini-pandey added 2 commits March 17, 2026 22:04

ragini-pandey force-pushed the fix/9458-observer-hook branch from c185fff to 9fe935c Compare March 17, 2026 16:34

ragini-pandey requested a review from Copilot March 17, 2026 16:35

Copilot started reviewing on behalf of ragini-pandey March 17, 2026 16:36 View session

Copilot AI reviewed Mar 17, 2026

View reviewed changes

Comment thread packages/eui/src/components/observer/resize_observer/resize_observer.tsx Outdated

Comment thread packages/eui/src/components/observer/mutation_observer/mutation_observer.tsx Outdated

ragini-pandey requested a review from Copilot March 17, 2026 16:43

Copilot started reviewing on behalf of ragini-pandey March 17, 2026 16:43 View session

Copilot AI reviewed Mar 17, 2026

View reviewed changes

Comment thread packages/eui/src/components/observer/observer.ts Outdated

Comment thread packages/eui/src/components/observer/mutation_observer/mutation_observer.tsx Outdated

ragini-pandey added 2 commits March 18, 2026 00:25

ragini-pandey force-pushed the fix/9458-observer-hook branch from aca833e to 466b6a2 Compare March 18, 2026 03:19

ragini-pandey requested a review from Copilot March 18, 2026 03:25

Copilot started reviewing on behalf of ragini-pandey March 18, 2026 03:26 View session

Copilot AI reviewed Mar 18, 2026

View reviewed changes

Comment thread packages/eui/src/components/observer/resize_observer/resize_observer.tsx Outdated

Comment thread packages/eui/src/components/observer/observer.ts

weronikaolejniczak reviewed Mar 18, 2026

View reviewed changes

Merge branch 'main' into fix/9458-observer-hook

0baf169

ragini-pandey added 2 commits April 2, 2026 11:26

Merge branch 'main' into fix/9458-observer-hook

1d4b872

Refactor EuiResizeObserver to use function component and update retur…

da96704

…n type

ragini-pandey requested a review from Copilot April 2, 2026 06:21

Copilot started reviewing on behalf of ragini-pandey April 2, 2026 06:21 View session

Refactor EuiMutationObserver to explicitly define FunctionComponent type

daef143

Copilot AI reviewed Apr 2, 2026

View reviewed changes

Comment thread packages/eui/src/components/popover/popover.test.tsx

Refactor EuiResizeObserver to explicitly define FunctionComponent type

6c0a6d9

ragini-pandey requested a review from Copilot April 2, 2026 06:36

Copilot started reviewing on behalf of ragini-pandey April 2, 2026 06:37 View session

Copilot AI reviewed Apr 2, 2026

View reviewed changes

Comment thread packages/eui/src/components/observer/observer.ts Outdated

Fix useObserver to reference componentName from a ref for error messages

5628050

ragini-pandey requested a review from Copilot April 2, 2026 07:02

Copilot started reviewing on behalf of ragini-pandey April 2, 2026 07:02 View session

Copilot AI reviewed Apr 2, 2026

View reviewed changes

ragini-pandey requested a review from weronikaolejniczak April 2, 2026 09:24

Merge branch 'main' into fix/9458-observer-hook

01cf1c6

weronikaolejniczak requested a review from Copilot April 7, 2026 10:40

Copilot started reviewing on behalf of weronikaolejniczak April 7, 2026 10:41 View session

Copilot AI reviewed Apr 7, 2026

View reviewed changes

Comment thread packages/eui/src/components/observer/mutation_observer/mutation_observer.tsx Outdated

weronikaolejniczak approved these changes Apr 7, 2026

View reviewed changes

weronikaolejniczak requested changes Apr 7, 2026

View reviewed changes

ragini-pandey and others added 2 commits April 7, 2026 21:08

Update packages/eui/src/components/observer/mutation_observer/mutatio…

0f82619

…n_observer.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Merge branch 'main' into fix/9458-observer-hook

8a861a2

ragini-pandey requested a review from weronikaolejniczak April 7, 2026 16:24

This was linked to issues Apr 15, 2026

[EuiMutationObserver] Migrate from class to function component #9459

Open

[EuiResizeObserver] Migrate from class to function component #9460

Open

weronikaolejniczak requested changes Apr 15, 2026

View reviewed changes

Conversation

ragini-pandey commented Mar 16, 2026

Summary

API Changes

Screenshots

Impact Assessment

Release Readiness

QA instructions for reviewer

Checklist before marking Ready for Review

Uh oh!

github-actions bot commented Mar 16, 2026

Uh oh!

weronikaolejniczak commented Mar 17, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

ragini-pandey commented Mar 17, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

weronikaolejniczak commented Mar 18, 2026

Uh oh!

weronikaolejniczak Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

ragini-pandey Apr 2, 2026

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak commented Mar 18, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

ragini-pandey commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

ragini-pandey commented Apr 2, 2026 •

edited

Loading