Replace EuiObserver abstract class with useObserver 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

Author: ragini-pandey

packages/eui/changelogs/upcoming/9458.md

@@ -0,0 +1,3 @@
+- Replaced `EuiObserver` abstract base class with a `useObserver` hook
+- Converted `EuiResizeObserver` from a class component to a function component
+- Converted `EuiMutationObserver` from a class component to a function component

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

@@ -6,9 +6,9 @@
  * Side Public License, v 1.
  */
 
-import { ReactNode, useEffect } from 'react';
+import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
 
-import { EuiObserver } from '../observer';
+import { useObserver } from '../observer';
 
 export interface EuiMutationObserverProps {
   /**
@@ -19,24 +19,35 @@ export interface EuiMutationObserverProps {
   observerOptions?: MutationObserverInit;
 }
 
-export class EuiMutationObserver extends EuiObserver<EuiMutationObserverProps> {
-  name = 'EuiMutationObserver';
+export const EuiMutationObserver: React.FunctionComponent<
+  EuiMutationObserverProps
+> = ({ children, onMutation, observerOptions }) => {
+  // Store onMutation and observerOptions in refs so the observer callback
+  // and setup always use the latest prop values without needing to
+  // re-subscribe (which would cause the ref callback to cycle)
+  const onMutationRef = useRef<MutationCallback>(onMutation);
+  onMutationRef.current = onMutation;
 
-  // the `onMutation` prop may change while the observer is bound, abstracting
-  // it out into a separate function means the current `onMutation` value is used
-  onMutation: MutationCallback = (records, observer) => {
-    this.props.onMutation(records, observer);
-  };
+  const observerOptionsRef = useRef(observerOptions);
+  observerOptionsRef.current = observerOptions;
 
-  beginObserve = () => {
-    const childNode = this.childNode!;
-    this.observer = makeMutationObserver(
-      childNode,
-      this.props.observerOptions,
-      this.onMutation
-    );
-  };
-}
+  const mutationCallback: MutationCallback = useCallback(
+    (records, observer) => {
+      onMutationRef.current(records, observer);
+    },
+    []
+  );
+
+  const beginObserve = useCallback(
+    (node: Element) =>
+      makeMutationObserver(node, observerOptionsRef.current, mutationCallback),
+    [mutationCallback]
+  );
+
+  const updateChildNode = useObserver(beginObserve);
+
+  return children(updateChildNode) as React.ReactElement;
+};
 
 const makeMutationObserver = (
   node: Element,

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

@@ -6,59 +6,53 @@
  * Side Public License, v 1.
  */
 
-import { Component, ReactNode } from 'react';
-
-interface BaseProps {
-  /**
-   * ReactNode to render as this component's content
-   */
-  children: (ref: any) => ReactNode;
-}
+import { useCallback, useEffect, useRef } from 'react';
 
 export interface Observer {
   disconnect: () => void;
   observe: (element: Element, options?: { [key: string]: any }) => void;
 }
 
-export class EuiObserver<Props extends BaseProps> extends Component<Props> {
-  protected name: string = 'EuiObserver';
-  protected childNode: null | Element = null;
-  protected observer: null | Observer = null;
-
-  componentDidMount() {
-    if (this.childNode == null) {
-      throw new Error(`${this.name} did not receive a ref`);
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.observer != null) {
-      this.observer.disconnect();
-    }
-  }
-
-  updateChildNode = (ref: Element) => {
-    if (this.childNode === ref) return; // node hasn't changed
+/**
+ * A shared custom hook that provides a pattern for observing DOM nodes
+ * via browser observer APIs. Used by `EuiResizeObserver`.
+ *
+ * @param beginObserve - A callback that receives the target DOM element and should
+ *   create and return the observer instance (e.g., `ResizeObserver`).
+ */
+export const useObserver = (
+  beginObserve: (node: Element) => Observer | undefined
+) => {
+  const childNodeRef = useRef<Element | null>(null);
+  const observerRef = useRef<Observer | null>(null);
+
+  // Store beginObserve in a ref so the ref callback doesn't cycle
+  const beginObserveRef = useRef(beginObserve);
+  beginObserveRef.current = beginObserve;
+
+  // Clean up observer on unmount
+  useEffect(() => {
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, []);
+
+  const updateChildNode = useCallback((ref: Element | null) => {
+    if (childNodeRef.current === ref) return; // node hasn't changed
 
     // if there's an existing observer disconnect it
-    if (this.observer != null) {
-      this.observer.disconnect();
-      this.observer = null;
+    if (observerRef.current != null) {
+      observerRef.current.disconnect();
+      observerRef.current = null;
     }
 
-    this.childNode = ref;
+    childNodeRef.current = ref;
 
-    if (this.childNode != null) {
-      this.beginObserve();
+    if (childNodeRef.current != null) {
+      observerRef.current =
+        beginObserveRef.current(childNodeRef.current) ?? null;
     }
-  };
+  }, []);
 
-  beginObserve: () => void = () => {
-    throw new Error('EuiObserver has no default observation method');
-  };
-
-  render() {
-    const props: BaseProps = this.props;
-    return props.children(this.updateChildNode);
-  }
-}
+  return updateChildNode;
+};

packages/eui/src/components/observer/resize_observer/resize_observer.tsx

@@ -6,8 +6,14 @@
  * Side Public License, v 1.
  */
 
-import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
-import { EuiObserver } from '../observer';
+import React, {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { useObserver } from '../observer';
 
 export interface EuiResizeObserverProps {
   /**
@@ -20,36 +26,35 @@ export interface EuiResizeObserverProps {
 export const hasResizeObserver =
   typeof window !== 'undefined' && typeof window.ResizeObserver !== 'undefined';
 
-export class EuiResizeObserver extends EuiObserver<EuiResizeObserverProps> {
-  name = 'EuiResizeObserver';
+export const EuiResizeObserver: React.FunctionComponent<
+  EuiResizeObserverProps
+> = ({ children, onResize }) => {
+  const onResizeRef = useRef(onResize);
+  onResizeRef.current = onResize;
 
-  state = {
-    height: 0,
-    width: 0,
-  };
+  const sizeRef = useRef({ height: 0, width: 0 });
 
-  onResize: ResizeObserverCallback = ([entry]) => {
+  const resizeCallback: ResizeObserverCallback = useCallback(([entry]) => {
     const { inlineSize: width, blockSize: height } = entry.borderBoxSize[0];
 
     // Check for actual resize event
-    if (this.state.height === height && this.state.width === width) {
+    if (sizeRef.current.height === height && sizeRef.current.width === width) {
       return;
     }
 
-    this.props.onResize({
-      height,
-      width,
-    });
-    this.setState({ height, width });
-  };
-
-  beginObserve = () => {
-    // The superclass checks that childNode is not null before invoking
-    // beginObserve()
-    const childNode = this.childNode!;
-    this.observer = makeResizeObserver(childNode, this.onResize)!;
-  };
-}
+    sizeRef.current = { height, width };
+    onResizeRef.current({ height, width });
+  }, []);
+
+  const beginObserve = useCallback(
+    (node: Element) => makeResizeObserver(node, resizeCallback),
+    [resizeCallback]
+  );
+
+  const updateChildNode = useObserver(beginObserve);
+
+  return children(updateChildNode) as React.ReactElement;
+};
 
 const makeResizeObserver = (
   node: Element,