diff --git a/packages/vkui/docs/common/hooks/useInfiniteList.tsx b/packages/vkui/docs/common/hooks/useInfiniteList.tsx
index 550c9f244fb..f4ecff62f37 100644
--- a/packages/vkui/docs/common/hooks/useInfiniteList.tsx
+++ b/packages/vkui/docs/common/hooks/useInfiniteList.tsx
@@ -1,7 +1,7 @@
 import { type ReactNode, type RefObject, useEffect, useMemo, useRef, useState } from 'react';
 import { Spinner } from '../../../src';
-import { useResizeObserver } from '../../../src/hooks/useResizeObserver';
 import { useDOM } from '../../../src/lib/dom';
+import { useResizeObserver } from '../../../src/hooks/useResizeObserver/useResizeObserver';
 
 const SPINNER_HEIGHT = 24;
 const WINDOW_PADDING_BOTTOM = 64;
@@ -138,7 +138,10 @@ export const useInfiniteList = <Section extends { id: string }>(
 
   useEffect(recalculateSectionsBounds, [sectionsRefs]);
 
-  useResizeObserver(containerRef, () => requestAnimationFrame(showMoreVisible));
+  useResizeObserver({
+    ref: containerRef,
+    onResize: showMoreVisible,
+  });
 
   useEffect(() => {
     window!.addEventListener('scroll', recalculateVisibleSections);
diff --git a/packages/vkui/docs/components-overview/components/ComponentOverviewCard.tsx b/packages/vkui/docs/components-overview/components/ComponentOverviewCard.tsx
index dbc9fee268e..2ec3dc666e2 100644
--- a/packages/vkui/docs/components-overview/components/ComponentOverviewCard.tsx
+++ b/packages/vkui/docs/components-overview/components/ComponentOverviewCard.tsx
@@ -3,12 +3,12 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { Card, Mark, Title, useDirection } from '../../../src';
-import { useResizeObserver } from '../../../src/hooks/useResizeObserver';
 import { useDOM } from '../../../src/lib/dom';
 import type { CSSCustomProperties } from '../../../src/types';
 import { useOverviewLayoutContext } from '../../common/components/OverviewLayoutContext';
 import type { ComponentConfigData } from '../config';
 import styles from './ComponentOverviewCard.module.css';
+import { useResizeObserver } from '../../../src/hooks/useResizeObserver/useResizeObserver';
 
 const CONTENT_PADDING = 10;
 
@@ -74,7 +74,10 @@ export const ComponentOverviewCard: React.FC<ComponentOverviewCardProps> = ({
 
   React.useEffect(() => calculateScale(), [calculateScale]);
 
-  useResizeObserver(containerRef, calculateScale);
+  useResizeObserver({
+    ref: containerRef,
+    onResize: calculateScale,
+  });
 
   const componentUrl = React.useMemo(() => {
     if (!window) {
diff --git a/packages/vkui/src/components/CarouselBase/CarouselBase.tsx b/packages/vkui/src/components/CarouselBase/CarouselBase.tsx
index 94300e7445e..6bcd5c84d77 100644
--- a/packages/vkui/src/components/CarouselBase/CarouselBase.tsx
+++ b/packages/vkui/src/components/CarouselBase/CarouselBase.tsx
@@ -5,8 +5,8 @@ import { classNames } from '@vkontakte/vkjs';
 import { useConfigDirection } from '../../hooks/useConfigDirection';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useMutationObserver } from '../../hooks/useMutationObserver';
-import { useResizeObserver } from '../../hooks/useResizeObserver';
-import { useDOM } from '../../lib/dom';
+import { useResizeObserver } from '../../hooks/useResizeObserver/useResizeObserver';
+import { useWindowResizeObserver } from '../../hooks/useResizeObserver/useWindowResizeObserver';
 import { mergeCalls } from '../../lib/mergeCalls';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
@@ -347,8 +347,15 @@ export const CarouselBase = ({
       initializeSlides();
     }
   };
-  const { window } = useDOM();
-  useResizeObserver(resizeSource === 'element' ? rootRef : window, onResize);
+  useWindowResizeObserver({
+    enabled: resizeSource === 'window',
+    onResize,
+  });
+  useResizeObserver({
+    ref: rootRef,
+    enabled: resizeSource === 'element',
+    onResize,
+  });
 
   const loopedSlideChangePerform = () => {
     const { snaps, slides } = slidesManager.current;
diff --git a/packages/vkui/src/components/FixedLayout/FixedLayout.test.tsx b/packages/vkui/src/components/FixedLayout/FixedLayout.test.tsx
index 27d58a341f5..ff6c4d38f19 100644
--- a/packages/vkui/src/components/FixedLayout/FixedLayout.test.tsx
+++ b/packages/vkui/src/components/FixedLayout/FixedLayout.test.tsx
@@ -1,98 +1,94 @@
 import { act, type RefObject } from 'react';
 import { render } from '@testing-library/react';
-import { baselineComponent } from '../../testing/utils';
+import { baselineComponent, withFakeTimers } from '../../testing/utils';
 import { SplitCol } from '../SplitCol/SplitCol';
 import { FixedLayout, type FixedLayoutProps } from './FixedLayout';
 import styles from './FixedLayout.module.css';
 
-let updateFunction: () => void;
-
-const mockResizeObserver = vi.fn(
-  class MockResizeObserver {
-    constructor(updateFunctionFn: () => void) {
-      updateFunction = updateFunctionFn;
-    }
+describe('FixedLayout', () => {
+  baselineComponent(FixedLayout);
 
-    observe = vi.fn();
-    unobserve = vi.fn();
-    disconnect = vi.fn();
-  },
-);
+  it(
+    'check update width by parent width',
+    withFakeTimers(async () => {
+      const parentRef: RefObject<HTMLDivElement | null> = {
+        current: null,
+      };
+      const layoutRef: RefObject<HTMLDivElement | null> = {
+        current: null,
+      };
+      let parentWidth = 500;
 
-vi.stubGlobal('ResizeObserver', mockResizeObserver);
+      const mockParentRef = (element: HTMLDivElement) => {
+        if (!element) {
+          return;
+        }
+        vi.spyOn(element, 'getBoundingClientRect').mockImplementation(
+          () => new DOMRect(0, 0, parentWidth, 800),
+        );
 
-describe('FixedLayout', () => {
-  baselineComponent(FixedLayout);
+        parentRef.current = element;
+      };
 
-  it('check update width by parent width', async () => {
-    const parentRef: RefObject<HTMLDivElement | null> = {
-      current: null,
-    };
-    const layoutRef: RefObject<HTMLDivElement | null> = {
-      current: null,
-    };
-    let parentWidth = 500;
-
-    const mockParentRef = (element: HTMLDivElement) => {
-      if (!element) {
-        return;
-      }
-      vi.spyOn(element, 'getBoundingClientRect').mockImplementation(
-        () => new DOMRect(0, 0, parentWidth, 800),
+      render(
+        <div ref={mockParentRef} style={{ width: 500, height: 800 }}>
+          <FixedLayout getRootRef={layoutRef} useParentWidth>
+            <div style={{ width: 200, height: 400 }} />
+          </FixedLayout>
+        </div>,
       );
 
-      parentRef.current = element;
-    };
+      expect(layoutRef.current!).toHaveStyle('width: 500px');
+
+      parentWidth = 600;
+      act(() => {
+        globalThis.__resizeObserverMock.triggerAll();
+        vi.runAllTimers();
+      });
 
-    render(
-      <div ref={mockParentRef} style={{ width: 500, height: 800 }}>
-        <FixedLayout getRootRef={layoutRef} useParentWidth>
-          <div style={{ width: 200, height: 400 }} />
-        </FixedLayout>
-      </div>,
-    );
+      expect(layoutRef.current!).toHaveStyle('width: 600px');
+    }),
+  );
 
-    expect(layoutRef.current!).toHaveStyle('width: 500px');
+  it(
+    'check update width by column width',
+    withFakeTimers(async () => {
+      const colRef: RefObject<HTMLDivElement | null> = {
+        current: null,
+      };
+      const layoutRef: RefObject<HTMLDivElement | null> = {
+        current: null,
+      };
+      let colWidth = 280;
 
-    parentWidth = 600;
-    await act(async () => updateFunction());
+      const mockColRef = (element: HTMLDivElement) => {
+        if (!element) {
+          return;
+        }
+        vi.spyOn(element, 'clientWidth', 'get').mockImplementation(() => colWidth);
 
-    expect(layoutRef.current!).toHaveStyle('width: 600px');
-  });
+        colRef.current = element;
+      };
 
-  it('check update width by column width', async () => {
-    const colRef: RefObject<HTMLDivElement | null> = {
-      current: null,
-    };
-    const layoutRef: RefObject<HTMLDivElement | null> = {
-      current: null,
-    };
-    let colWidth = 280;
-
-    const mockColRef = (element: HTMLDivElement) => {
-      if (!element) {
-        return;
-      }
-      vi.spyOn(element, 'clientWidth', 'get').mockImplementation(() => colWidth);
-
-      colRef.current = element;
-    };
-
-    render(
-      <SplitCol width={colWidth} maxWidth={colWidth} getRootRef={mockColRef}>
-        <FixedLayout getRootRef={layoutRef}>
-          <div style={{ width: colWidth, height: 400 }} />
-        </FixedLayout>
-      </SplitCol>,
-    );
-
-    expect(layoutRef.current!).toHaveStyle('width: 280px');
-
-    colWidth = 360;
-    await act(async () => updateFunction());
-
-    expect(layoutRef.current!).toHaveStyle('width: 360px');
-  });
+      render(
+        <SplitCol width={colWidth} maxWidth={colWidth} getRootRef={mockColRef}>
+          <FixedLayout getRootRef={layoutRef}>
+            <div style={{ width: colWidth, height: 400 }} />
+          </FixedLayout>
+        </SplitCol>,
+      );
+
+      expect(layoutRef.current!).toHaveStyle('width: 280px');
+
+      colWidth = 360;
+      act(() => {
+        globalThis.__resizeObserverMock.triggerAll();
+        vi.runAllTimers();
+      });
+
+      expect(layoutRef.current!).toHaveStyle('width: 360px');
+    }),
+  );
 
   describe('check correct classNames', () => {
     it.each<{ props: Partial<FixedLayoutProps>; className: string }>([
diff --git a/packages/vkui/src/components/FixedLayout/FixedLayout.tsx b/packages/vkui/src/components/FixedLayout/FixedLayout.tsx
index 2af227e0229..f8a3b038d84 100644
--- a/packages/vkui/src/components/FixedLayout/FixedLayout.tsx
+++ b/packages/vkui/src/components/FixedLayout/FixedLayout.tsx
@@ -4,8 +4,8 @@ import { useCallback } from 'react';
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
-import { useResizeObserver } from '../../hooks/useResizeObserver';
-import { useDOM } from '../../lib/dom';
+import { useResizeObserver } from '../../hooks/useResizeObserver/useResizeObserver';
+import { useWindowResizeObserver } from '../../hooks/useResizeObserver/useWindowResizeObserver';
 import { setRef } from '../../lib/utils';
 import { warnOnce } from '../../lib/warnOnce';
 import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
@@ -62,7 +62,6 @@ export const FixedLayout = ({
   const platform = usePlatform();
   const ref = React.useRef<HTMLElement | null>(null);
   const [width, setWidth] = React.useState<string | undefined>(undefined);
-  const { window } = useDOM();
   const { colRef } = React.useContext(SplitColContext);
   const parentRef = React.useRef<HTMLElement | null>(null);
 
@@ -99,8 +98,13 @@ export const FixedLayout = ({
   };
   React.useEffect(doResize, [colRef, platform, ref, useParentWidth]);
 
-  useResizeObserver(window, doResize);
-  useResizeObserver(useParentWidth ? parentRef : colRef, doResize);
+  useWindowResizeObserver({
+    onResize: doResize,
+  });
+  useResizeObserver({
+    ref: useParentWidth ? parentRef : (colRef ?? undefined),
+    onResize: doResize,
+  });
 
   return (
     <OnboardingTooltipContainer
diff --git a/packages/vkui/src/components/FixedLayout/ParentWidthWrapper.tsx b/packages/vkui/src/components/FixedLayout/ParentWidthWrapper.tsx
index d1d679994f6..5f09e798c0b 100644
--- a/packages/vkui/src/components/FixedLayout/ParentWidthWrapper.tsx
+++ b/packages/vkui/src/components/FixedLayout/ParentWidthWrapper.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useResizeObserver } from '../../hooks/useResizeObserver';
+import { useResizeObserver } from '../../hooks/useResizeObserver/useResizeObserver';
 import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
 import { setRef } from '../../lib/utils';
 import type { HasComponent } from '../../types';
@@ -37,7 +37,10 @@ export const ParentWidthWrapper: React.ForwardRefExoticComponent<
     }, []);
 
     React.useEffect(doResize, [doResize]);
-    useResizeObserver(parentRef, doResize);
+    useResizeObserver({
+      ref: parentRef,
+      onResize: doResize,
+    });
 
     return <Component {...restProps} ref={handleRootRef} style={{ width, ...style }} />;
   },
diff --git a/packages/vkui/src/components/Gallery/Gallery.test.tsx b/packages/vkui/src/components/Gallery/Gallery.test.tsx
index f36c7dcaa8b..81dcb3c7557 100644
--- a/packages/vkui/src/components/Gallery/Gallery.test.tsx
+++ b/packages/vkui/src/components/Gallery/Gallery.test.tsx
@@ -491,8 +491,10 @@ describe('Gallery', () => {
 
       mockedData.containerWidth = 250;
 
-      fireEvent.resize(window);
-      vi.runAllTimers();
+      act(() => {
+        fireEvent.resize(window);
+        vi.runAllTimers();
+      });
 
       if (looped) {
         expect(mockedData.layerTransform).toBe('translate3d(35px, 0, 0)');
@@ -763,41 +765,9 @@ describe('Gallery', () => {
     });
   });
 
-  const mockResizeObserver = () => {
-    const callbacks = new Set<ResizeObserverCallback>();
-
-    class MockResizeObserver implements ResizeObserver {
-      constructor(callback: ResizeObserverCallback) {
-        callbacks.add(callback);
-      }
-
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      observe() {}
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      unobserve() {}
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      disconnect() {}
-    }
-
-    const originalResizeObserver = window.ResizeObserver;
-    window.ResizeObserver = MockResizeObserver;
-
-    return {
-      triggerResize: () => {
-        callbacks.forEach((callback) => {
-          callback([], {} as unknown as ResizeObserver);
-        });
-      },
-      restore: () => {
-        window.ResizeObserver = originalResizeObserver;
-      },
-    };
-  };
-
   it(
     'check recalculate slides positions when resize element with resizeSource="element"',
     withFakeTimers(() => {
-      const { triggerResize, restore } = mockResizeObserver();
       const onChange = vi.fn();
 
       const mockedData = setup({
@@ -817,12 +787,13 @@ describe('Gallery', () => {
 
       mockedData.containerWidth = 250;
 
-      act(triggerResize);
-      vi.runAllTimers();
+      act(() => {
+        globalThis.__resizeObserverMock.triggerAll();
+        vi.runAllTimers();
+      });
 
       expect(mockedData.layerTransform).toBe('translate3d(35px, 0, 0)');
       expect(mockedData.getSlideMockData(0).transform).toBe('translate3d(0px, 0, 0)');
-      restore();
     }),
   );
 
@@ -884,10 +855,11 @@ describe('Gallery', () => {
       mockedData.viewPortWidth = 540;
       onDragStart.mockClear();
       onDragEnd.mockClear();
-      fireEvent.resize(window);
-
-      rerender({ slideIndex: 1 });
-      vi.runAllTimers();
+      act(() => {
+        fireEvent.resize(window);
+        rerender({ slideIndex: 1 });
+        vi.runAllTimers();
+      });
 
       expect(getArrows()).toHaveLength(0);
 
diff --git a/packages/vkui/src/components/Skeleton/Skeleton.tsx b/packages/vkui/src/components/Skeleton/Skeleton.tsx
index 3426f020ffd..1730ce5012f 100644
--- a/packages/vkui/src/components/Skeleton/Skeleton.tsx
+++ b/packages/vkui/src/components/Skeleton/Skeleton.tsx
@@ -5,10 +5,9 @@ import { classNames } from '@vkontakte/vkjs';
 import { mergeStyle } from '../../helpers/mergeStyle';
 import { useBooleanState } from '../../hooks/useBooleanState';
 import { useExternRef } from '../../hooks/useExternRef';
-import { useResizeObserver } from '../../hooks/useResizeObserver';
+import { useWindowResizeObserver } from '../../hooks/useResizeObserver/useWindowResizeObserver';
 import { useStateWithPrev } from '../../hooks/useStateWithPrev';
 import { millisecondsInSecond } from '../../lib/date';
-import { useDOM } from '../../lib/dom';
 import { animationVisibilityDelayStyles } from '../../styles/animationVisibilityDelay';
 import type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
@@ -68,7 +67,6 @@ function useSkeletonSyncAnimation(disableAnimation: boolean, duration = 1.5) {
  * Вычисляет позицию скелетона.
  */
 function useSkeletonPosition(rootRef: React.RefObject<HTMLElement | null>) {
-  const { window } = useDOM();
   const [[skeletonGradientLeft, prevSkeletonGradientLeft], setSkeletonGradientLeft] =
     useStateWithPrev('0');
 
@@ -88,7 +86,9 @@ function useSkeletonPosition(rootRef: React.RefObject<HTMLElement | null>) {
   }, [prevSkeletonGradientLeft, rootRef, setSkeletonGradientLeft]);
 
   React.useEffect(updatePosition, [updatePosition]);
-  useResizeObserver(window, updatePosition);
+  useWindowResizeObserver({
+    onResize: updatePosition,
+  });
 
   return skeletonGradientLeft;
 }
diff --git a/packages/vkui/src/components/Textarea/Textarea.test.tsx b/packages/vkui/src/components/Textarea/Textarea.test.tsx
index c507e09ba9a..9c6a596b740 100644
--- a/packages/vkui/src/components/Textarea/Textarea.test.tsx
+++ b/packages/vkui/src/components/Textarea/Textarea.test.tsx
@@ -1,4 +1,4 @@
-import { createRef } from 'react';
+import { act, createRef } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { noop } from '@vkontakte/vkjs';
 import { Platform } from '../../lib/platform';
@@ -235,7 +235,10 @@ describe(Textarea, () => {
       const onResize = vi.fn();
       render(<Textarea value="" onResize={onResize} />);
       mockTextareaScrollHeight();
-      fireEvent(window, new Event('resize'));
+      act(() => {
+        globalThis.__resizeObserverMock.triggerAll();
+        vi.runAllTimers();
+      });
       expect(onResize).toHaveBeenCalledTimes(2);
     });
     it("won't resize if parent is invisible", () => {
diff --git a/packages/vkui/src/components/Textarea/Textarea.tsx b/packages/vkui/src/components/Textarea/Textarea.tsx
index 731dfcf2aa1..9e90416a2b2 100644
--- a/packages/vkui/src/components/Textarea/Textarea.tsx
+++ b/packages/vkui/src/components/Textarea/Textarea.tsx
@@ -6,9 +6,8 @@ import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useMergeProps } from '../../hooks/useMergeProps';
 import { usePlatform } from '../../hooks/usePlatform';
-import { useResizeObserver } from '../../hooks/useResizeObserver';
+import { useResizeObserver } from '../../hooks/useResizeObserver/useResizeObserver';
 import { callMultiple } from '../../lib/callMultiple';
-import { useDOM } from '../../lib/dom';
 import { warnOnce } from '../../lib/warnOnce';
 import type { HasAlign, HasDataAttribute, HasRootRef } from '../../types';
 import { FormField, type FormFieldProps } from '../FormField/FormField';
@@ -139,9 +138,9 @@ export const Textarea = ({
 
   const { density = 'none' } = useAdaptivity();
   const platform = usePlatform();
-  const { window } = useDOM();
 
-  const { className, ...rootProps } = useMergeProps(restProps, slotProps?.root);
+  const { className, getRootRef, ...rootProps } = useMergeProps(restProps, slotProps?.root);
+  const rootRef = useExternRef(getRootRef);
 
   const {
     onChange,
@@ -185,7 +184,12 @@ export const Textarea = ({
   const elementRef = useExternRef(getTextAreaRef, refResizeTextarea);
 
   React.useEffect(resize, [resize, density, platform, value]);
-  useResizeObserver(window, resize);
+
+  useResizeObserver({
+    enabled: grow,
+    ref: rootRef,
+    onResize: resize,
+  });
 
   return (
     <FormField
@@ -204,6 +208,7 @@ export const Textarea = ({
       afterAlign={afterAlign}
       beforeAlign={beforeAlign}
       maxHeight={maxHeight}
+      getRootRef={rootRef}
       {...rootProps}
     >
       <UnstyledTextField
diff --git a/packages/vkui/src/hooks/useResizeObserver.test.tsx b/packages/vkui/src/hooks/useResizeObserver.test.tsx
deleted file mode 100644
index ecab23f17bd..00000000000
--- a/packages/vkui/src/hooks/useResizeObserver.test.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { act, useRef } from 'react';
-import { render } from '@testing-library/react';
-import { useResizeObserver } from './useResizeObserver';
-
-// Глобальный мок ResizeObserver для всех тестов
-const callbacks = new Set<ResizeObserverCallback>();
-
-class MockResizeObserver implements ResizeObserver {
-  constructor(callback: ResizeObserverCallback) {
-    callbacks.add(callback);
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  observe() {}
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  unobserve() {}
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  disconnect() {}
-}
-
-vi.stubGlobal('ResizeObserver', MockResizeObserver);
-
-const triggerResize = () => {
-  callbacks.forEach((callback) => {
-    callback([], {} as unknown as ResizeObserver);
-  });
-};
-
-describe('useResizeObserver', () => {
-  const Fixture = ({
-    mockedBlocksIds,
-    resizeCallback,
-    useWindow = false,
-  }: {
-    mockedBlocksIds: string[];
-    resizeCallback: () => void;
-    useWindow?: boolean | undefined;
-  }) => {
-    const ref = useRef(null);
-    useResizeObserver(useWindow ? window : ref, resizeCallback);
-    return (
-      <div ref={ref} style={{ position: 'static' }}>
-        {mockedBlocksIds.map((id) => (
-          <div key={id} data-testid={id} style={{ height: 50 }}></div>
-        ))}
-      </div>
-    );
-  };
-
-  beforeEach(() => {
-    callbacks.clear();
-  });
-
-  it('should call callback when resize is triggered', async () => {
-    const callback = vi.fn();
-
-    render(<Fixture mockedBlocksIds={['block-1']} resizeCallback={callback} />);
-
-    await act(async () => {
-      triggerResize();
-    });
-
-    expect(callback).toHaveBeenCalledTimes(1);
-  });
-
-  it('should use ResizeObserver when available', () => {
-    const callback = vi.fn();
-
-    render(<Fixture mockedBlocksIds={['block-1']} resizeCallback={callback} />);
-
-    triggerResize();
-
-    expect(callback).toHaveBeenCalledTimes(1);
-  });
-
-  it('should handle window resize events', () => {
-    const callback = vi.fn();
-
-    render(<Fixture mockedBlocksIds={[]} resizeCallback={callback} useWindow />);
-
-    act(() => {
-      window.dispatchEvent(new Event('resize'));
-    });
-
-    expect(callback).toHaveBeenCalledExactlyOnceWith(window);
-  });
-});
diff --git a/packages/vkui/src/hooks/useResizeObserver.ts b/packages/vkui/src/hooks/useResizeObserver.ts
deleted file mode 100644
index c030ad0a750..00000000000
--- a/packages/vkui/src/hooks/useResizeObserver.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useEffect } from 'react';
-import type * as React from 'react';
-import { isWindow } from '../lib/dom';
-import { isRefObject } from '../lib/isRefObject';
-import { useStableCallback } from './useStableCallback';
-
-/**
- * Хук вызывает переданный коллбэк при изменении размеров элемента.
- */
-export function useResizeObserver(
-  ref: React.RefObject<HTMLElement | null> | Window | null | undefined,
-  callback: (element: HTMLElement | Window) => void,
-): void {
-  const stableCallback = useStableCallback(callback);
-
-  useEffect(
-    function addResizeObserverHandler() {
-      if (!ref) {
-        return;
-      }
-
-      if (isWindow(ref)) {
-        const onResize = () => stableCallback(ref);
-        ref.addEventListener('resize', onResize);
-        return () => ref.removeEventListener('resize', onResize);
-      }
-
-      /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */
-      if (!isRefObject(ref) || !ref.current) {
-        return;
-      }
-      const element = ref.current;
-
-      const observeFn = () => stableCallback(element);
-
-      // eslint-disable-next-line compat/compat
-      const observer: ResizeObserver = new ResizeObserver(observeFn);
-      observer.observe(element);
-
-      return () => observer.disconnect();
-    },
-    [ref, stableCallback],
-  );
-}
diff --git a/packages/vkui/src/hooks/useResizeObserver/useResizeObserver.stories.tsx b/packages/vkui/src/hooks/useResizeObserver/useResizeObserver.stories.tsx
new file mode 100644
index 00000000000..f9012e01f1c
--- /dev/null
+++ b/packages/vkui/src/hooks/useResizeObserver/useResizeObserver.stories.tsx
@@ -0,0 +1,534 @@
+'use client';
+
+/* eslint-disable no-console, import/no-default-export */
+
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../../components/Button/Button';
+import { Card } from '../../components/Card/Card';
+import { Checkbox } from '../../components/Checkbox/Checkbox';
+import { Flex } from '../../components/Flex/Flex';
+import { FormItem } from '../../components/FormItem/FormItem';
+import { Input } from '../../components/Input/Input';
+import { Spinner } from '../../components/Spinner/Spinner';
+import { Caption } from '../../components/Typography/Caption/Caption';
+import { Headline } from '../../components/Typography/Headline/Headline';
+import { Text } from '../../components/Typography/Text/Text';
+import { type ResizePayload, useResizeObserver } from './useResizeObserver';
+
+const story: Meta = {
+  title: 'Hooks/useResizeObserver',
+  component: () => <div />,
+};
+
+export default story;
+
+type Story = StoryObj;
+
+const ResizeBox = ({
+  id,
+  box,
+  onResize,
+  elementRef,
+}: {
+  id: number;
+  box?: ResizeObserverBoxOptions;
+  onResize?: () => void;
+  elementRef?: React.RefObject<HTMLDivElement | null>;
+}) => {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [size, setSize] = React.useState({ width: 0, height: 0 });
+  const [resizeCount, setResizeCount] = React.useState(0);
+
+  useResizeObserver({
+    ref: elementRef || ref,
+    box,
+    onResize: (payload: ResizePayload<HTMLDivElement>) => {
+      setSize({ width: payload.width, height: payload.height });
+      setResizeCount((c) => c + 1);
+      onResize?.();
+    },
+  });
+
+  return (
+    <Card
+      getRootRef={elementRef || ref}
+      style={{
+        minWidth: 100,
+        minHeight: 80,
+        padding: 8,
+        resize: 'both',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 4,
+        background: '#f5f5f5',
+      }}
+    >
+      <Caption weight="1">#{id}</Caption>
+      <Caption>
+        {Math.round(size.width)}x{Math.round(size.height)}
+      </Caption>
+      <Caption>resizes: {resizeCount}</Caption>
+    </Card>
+  );
+};
+
+// Box WITHOUT pooling - creates individual ResizeObserver for each element
+const ResizeBoxNoPool = ({
+  id,
+  elementRef,
+  onResize,
+}: {
+  id: number;
+  elementRef?: React.RefObject<HTMLDivElement | null>;
+  onResize?: () => void;
+}) => {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [size, setSize] = React.useState({ width: 0, height: 0 });
+  const [resizeCount, setResizeCount] = React.useState(0);
+
+  // NON-OPTIMIZED: Each component creates its own ResizeObserver
+  React.useEffect(() => {
+    const node = (elementRef || ref).current;
+    if (!node) {
+      return;
+    }
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setSize({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height,
+        });
+        setResizeCount((c) => c + 1);
+        onResize?.();
+      }
+    });
+
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [elementRef, onResize, ref]);
+
+  return (
+    <Card
+      getRootRef={elementRef || ref}
+      style={{
+        minWidth: 100,
+        minHeight: 80,
+        padding: 8,
+        resize: 'both',
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 4,
+        background: '#f5f5f5',
+      }}
+    >
+      <Caption weight="1">#{id}</Caption>
+      <Caption>
+        {Math.round(size.width)}x{Math.round(size.height)}
+      </Caption>
+      <Caption>resizes: {resizeCount}</Caption>
+    </Card>
+  );
+};
+
+export const Playground: Story = {
+  render: function Render() {
+    const [count, setCount] = React.useState(100);
+    const [box, setBox] = React.useState<ResizeObserverBoxOptions>('content-box');
+    const [totalResizes, setTotalResizes] = React.useState(0);
+    const [benchmarkRunning, setBenchmarkRunning] = React.useState(false);
+    const [benchmarkResults, setBenchmarkResults] = React.useState<{
+      totalTime: number;
+      avgTime: number;
+    } | null>(null);
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const resizeCounterRef = React.useRef(0);
+
+    const handleResize = React.useCallback(() => {
+      resizeCounterRef.current += 1;
+      setTotalResizes((prev) => prev + 1);
+    }, []);
+
+    const runBenchmark = async () => {
+      setBenchmarkRunning(true);
+      setBenchmarkResults(null);
+      resizeCounterRef.current = 0;
+      setTotalResizes(0);
+
+      const iterations = 30;
+      const startTime = performance.now();
+
+      for (let i = 0; i < iterations; i++) {
+        if (containerRef.current) {
+          containerRef.current.style.width = `${800 + i * 5}px`;
+        }
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+      }
+
+      const endTime = performance.now();
+      const totalTime = endTime - startTime;
+
+      setBenchmarkResults({
+        totalTime,
+        avgTime: totalTime / iterations,
+      });
+      setBenchmarkRunning(false);
+
+      if (containerRef.current) {
+        containerRef.current.style.width = '';
+      }
+    };
+
+    return (
+      <Flex direction="column" gap="xl" style={{ padding: 16 }}>
+        <Headline weight="1">useResizeObserver — Pooled ResizeObserver</Headline>
+
+        <Flex gap="m">
+          <FormItem top="Elements">
+            <Input
+              type="number"
+              value={count}
+              onChange={(e) => setCount(Math.max(1, parseInt(e.target.value) || 1))}
+              style={{ width: 100 }}
+            />
+          </FormItem>
+          <FormItem top="Box">
+            <select
+              value={box}
+              onChange={(e) => setBox(e.target.value as ResizeObserverBoxOptions)}
+              style={{ padding: '8px 12px', borderRadius: 8 }}
+            >
+              <option value="content-box">content-box</option>
+              <option value="border-box">border-box</option>
+              <option value="device-pixel-content-box">device-pixel-content-box</option>
+            </select>
+          </FormItem>
+        </Flex>
+
+        <Flex gap="m">
+          <Button appearance="neutral" onClick={() => setCount(100)}>
+            100
+          </Button>
+          <Button appearance="neutral" onClick={() => setCount(500)}>
+            500
+          </Button>
+          <Button appearance="neutral" onClick={() => setCount(1000)}>
+            1000
+          </Button>
+          <Button
+            appearance="accent"
+            onClick={() => {
+              // eslint-disable-next-line @typescript-eslint/no-floating-promises
+              runBenchmark();
+            }}
+            disabled={benchmarkRunning}
+          >
+            {benchmarkRunning ? <Spinner size="s" /> : 'Benchmark'}
+          </Button>
+        </Flex>
+
+        {benchmarkResults && (
+          <Card style={{ padding: 12 }}>
+            <Text>
+              Total: {benchmarkResults.totalTime.toFixed(2)}ms | Avg:{' '}
+              {benchmarkResults.avgTime.toFixed(2)}ms | Resizes: {totalResizes}
+            </Text>
+          </Card>
+        )}
+
+        <div
+          ref={containerRef}
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
+            gap: 8,
+            maxHeight: '50vh',
+            overflow: 'auto',
+            padding: 8,
+            background: '#fafafa',
+            borderRadius: 8,
+          }}
+        >
+          {Array.from({ length: count }, (_, i) => (
+            <ResizeBox key={i} id={i + 1} box={box} onResize={handleResize} />
+          ))}
+        </div>
+      </Flex>
+    );
+  },
+};
+
+export const NoPoolBenchmark: Story = {
+  render: function Render() {
+    const [count, setCount] = React.useState(100);
+    const [totalResizes, setTotalResizes] = React.useState(0);
+    const [benchmarkRunning, setBenchmarkRunning] = React.useState(false);
+    const [benchmarkResults, setBenchmarkResults] = React.useState<{
+      totalTime: number;
+      avgTime: number;
+    } | null>(null);
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const resizeCounterRef = React.useRef(0);
+
+    const handleResize = React.useCallback(() => {
+      resizeCounterRef.current += 1;
+      setTotalResizes((prev) => prev + 1);
+    }, []);
+
+    const runBenchmark = async () => {
+      setBenchmarkRunning(true);
+      setBenchmarkResults(null);
+      resizeCounterRef.current = 0;
+      setTotalResizes(0);
+
+      const iterations = 30;
+      const startTime = performance.now();
+
+      for (let i = 0; i < iterations; i++) {
+        if (containerRef.current) {
+          containerRef.current.style.width = `${800 + i * 5}px`;
+        }
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+      }
+
+      const endTime = performance.now();
+      const totalTime = endTime - startTime;
+
+      setBenchmarkResults({
+        totalTime,
+        avgTime: totalTime / iterations,
+      });
+      setBenchmarkRunning(false);
+
+      if (containerRef.current) {
+        containerRef.current.style.width = '';
+      }
+    };
+
+    return (
+      <Flex direction="column" gap="xl" style={{ padding: 16 }}>
+        <Headline weight="1">
+          useResizeObserver — NO Pooling (each element has own ResizeObserver)
+        </Headline>
+
+        <Card style={{ padding: 16, background: '#ffebee' }}>
+          <Flex direction="column" gap="s">
+            <Text weight="1" style={{ color: '#c62828' }}>
+              NON-OPTIMIZED: {count} separate ResizeObserver instances
+            </Text>
+            <Text>Each element creates its own ResizeObserver</Text>
+          </Flex>
+        </Card>
+
+        <Flex gap="m">
+          <FormItem top="Elements">
+            <Input
+              type="number"
+              value={count}
+              onChange={(e) => setCount(Math.max(1, parseInt(e.target.value) || 1))}
+              style={{ width: 100 }}
+            />
+          </FormItem>
+        </Flex>
+
+        <Flex gap="m">
+          <Button appearance="neutral" onClick={() => setCount(100)}>
+            100
+          </Button>
+          <Button appearance="neutral" onClick={() => setCount(500)}>
+            500
+          </Button>
+          <Button appearance="neutral" onClick={() => setCount(1000)}>
+            1000
+          </Button>
+          <Button
+            appearance="accent"
+            onClick={() => {
+              // eslint-disable-next-line @typescript-eslint/no-floating-promises
+              runBenchmark();
+            }}
+            disabled={benchmarkRunning}
+          >
+            {benchmarkRunning ? <Spinner size="s" /> : 'Benchmark'}
+          </Button>
+        </Flex>
+
+        {benchmarkResults && (
+          <Card style={{ padding: 12 }}>
+            <Text>
+              Total: {benchmarkResults.totalTime.toFixed(2)}ms | Avg:{' '}
+              {benchmarkResults.avgTime.toFixed(2)}ms | Resizes: {totalResizes}
+            </Text>
+          </Card>
+        )}
+
+        <div
+          ref={containerRef}
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
+            gap: 8,
+            maxHeight: '50vh',
+            overflow: 'auto',
+            padding: 8,
+            background: '#fafafa',
+            borderRadius: 8,
+          }}
+        >
+          {Array.from({ length: count }, (_, i) => (
+            <ResizeBoxNoPool key={i} id={i + 1} onResize={handleResize} />
+          ))}
+        </div>
+      </Flex>
+    );
+  },
+};
+
+export const PoolingComparison: Story = {
+  render: function Render() {
+    const [count, setCount] = React.useState(100);
+    const [usePooling, setUsePooling] = React.useState(true);
+
+    const ResizeBoxComponent = usePooling ? ResizeBox : ResizeBoxNoPool;
+
+    return (
+      <Flex direction="column" gap="xl" style={{ padding: 16 }}>
+        <Headline weight="1">Pooling Comparison</Headline>
+
+        <Card style={{ padding: 16, background: usePooling ? '#e8f5e9' : '#ffebee' }}>
+          <Flex direction="column" gap="s">
+            <Text weight="1" style={{ color: usePooling ? '#2e7d32' : '#c62828' }}>
+              {usePooling
+                ? 'POOLED (1 ResizeObserver for all)'
+                : 'NO POOL (N ResizeObserver instances)'}
+            </Text>
+            <Text>ResizeObserver instances: {usePooling ? 1 : count}</Text>
+          </Flex>
+        </Card>
+
+        <Flex gap="m">
+          <FormItem top="Elements">
+            <Input
+              type="number"
+              value={count}
+              onChange={(e) => setCount(Math.max(1, parseInt(e.target.value) || 1))}
+              style={{ width: 100 }}
+            />
+          </FormItem>
+          <Checkbox checked={usePooling} onChange={(e) => setUsePooling(e.target.checked)}>
+            Use pooling
+          </Checkbox>
+        </Flex>
+
+        <Flex gap="m">
+          <Button appearance="neutral" onClick={() => setCount(100)}>
+            100
+          </Button>
+          <Button appearance="neutral" onClick={() => setCount(500)}>
+            500
+          </Button>
+          <Button appearance="neutral" onClick={() => setCount(1000)}>
+            1000
+          </Button>
+        </Flex>
+
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
+            gap: 8,
+            maxHeight: '50vh',
+            overflow: 'auto',
+            padding: 8,
+            background: '#fafafa',
+            borderRadius: 8,
+          }}
+        >
+          {Array.from({ length: count }, (_, i) => (
+            <ResizeBoxComponent key={i} id={i + 1} />
+          ))}
+        </div>
+
+        <Card style={{ padding: 16 }}>
+          <Headline weight="2" style={{ marginBottom: 8 }}>
+            Verify in DevTools
+          </Headline>
+          <ol style={{ paddingLeft: 20 }}>
+            <li>
+              <Text>DevTools → Memory → Heap snapshot</Text>
+            </li>
+            <li>
+              <Text>Search for ResizeObserver</Text>
+            </li>
+            <li>
+              <Text>Pooled: 1 instance | No pool: {count} instances</Text>
+            </li>
+          </ol>
+        </Card>
+      </Flex>
+    );
+  },
+};
+
+export const SingleElement: Story = {
+  render: function Render() {
+    const ref = React.useRef<HTMLDivElement>(null);
+    const [size, setSize] = React.useState({ width: 0, height: 0 });
+    const [box, setBox] = React.useState<ResizeObserverBoxOptions>('content-box');
+
+    useResizeObserver({
+      ref,
+      box,
+      onResize: (payload) => {
+        setSize({ width: payload.width, height: payload.height });
+      },
+    });
+
+    return (
+      <Flex direction="column" gap="m" style={{ padding: 16 }}>
+        <FormItem top="Box">
+          <select
+            value={box}
+            onChange={(e) => setBox(e.target.value as ResizeObserverBoxOptions)}
+            style={{ padding: '8px 12px', borderRadius: 8 }}
+          >
+            <option value="content-box">content-box</option>
+            <option value="border-box">border-box</option>
+            <option value="device-pixel-content-box">device-pixel-content-box</option>
+          </select>
+        </FormItem>
+
+        <div
+          ref={ref}
+          style={{
+            width: 300,
+            height: 200,
+            padding: 16,
+            resize: 'both',
+            overflow: 'hidden',
+            background: '#f0f0f0',
+            borderRadius: 8,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Flex direction="column" align="center" gap="s">
+            <Headline weight="1">Resize me!</Headline>
+            <Text>
+              {Math.round(size.width)} × {Math.round(size.height)}
+            </Text>
+            <Caption>box: {box}</Caption>
+          </Flex>
+        </div>
+      </Flex>
+    );
+  },
+};
diff --git a/packages/vkui/src/hooks/useResizeObserver/useResizeObserver.test.tsx b/packages/vkui/src/hooks/useResizeObserver/useResizeObserver.test.tsx
new file mode 100644
index 00000000000..6c0f6b696e5
--- /dev/null
+++ b/packages/vkui/src/hooks/useResizeObserver/useResizeObserver.test.tsx
@@ -0,0 +1,311 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+
+type MockResizeObserverEntry = Partial<ResizeObserverEntry> & {
+  target: Element;
+  contentRect: DOMRectReadOnly;
+};
+
+const getObserverForTarget = (target: Element) =>
+  globalThis.__resizeObserverMock.getObserverForTarget(target);
+
+function createEntry(
+  target: Element,
+  {
+    width = 100,
+    height = 50,
+    borderBoxSize,
+    contentBoxSize,
+    devicePixelContentBoxSize,
+  }: {
+    width?: number;
+    height?: number;
+    borderBoxSize?: Array<{ inlineSize: number; blockSize: number }>;
+    contentBoxSize?: Array<{ inlineSize: number; blockSize: number }>;
+    devicePixelContentBoxSize?: Array<{ inlineSize: number; blockSize: number }>;
+  } = {},
+): MockResizeObserverEntry {
+  return {
+    target,
+    contentRect: { width, height } as unknown as DOMRectReadOnly,
+    borderBoxSize: borderBoxSize as ResizeObserverSize[],
+    contentBoxSize: contentBoxSize as ResizeObserverSize[],
+    devicePixelContentBoxSize: devicePixelContentBoxSize as ResizeObserverSize[],
+  };
+}
+
+describe('useResizeObserver', () => {
+  beforeEach(() => {
+    vi.resetModules();
+    globalThis.__resizeObserverMock.reset();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('observes node and emits resize payload', async () => {
+    const onResize = vi.fn();
+    const { useResizeObserver } = await import('./useResizeObserver');
+
+    const Fixture = () => {
+      const ref = React.useRef<HTMLDivElement | null>(null);
+      useResizeObserver<HTMLDivElement>({ onResize, ref });
+      return <div data-testid="target" ref={ref} />;
+    };
+
+    const { getByTestId } = render(<Fixture />);
+    const target = getByTestId('target');
+    const observer = getObserverForTarget(target);
+
+    expect(observer.observe).toHaveBeenCalledWith(target, { box: 'content-box' });
+
+    observer.emit([createEntry(target, { width: 320, height: 180 })]);
+
+    expect(onResize).toHaveBeenCalledTimes(1);
+    expect(onResize).toHaveBeenCalledWith({
+      target,
+      width: 320,
+      height: 180,
+      entry: expect.objectContaining({ target }),
+    });
+  });
+
+  it('unobserves node on unmount', async () => {
+    const onResize = vi.fn();
+    const { useResizeObserver } = await import('./useResizeObserver');
+
+    const Fixture = () => {
+      const ref = React.useRef<HTMLDivElement | null>(null);
+      useResizeObserver<HTMLDivElement>({ onResize, ref });
+      return <div data-testid="target" ref={ref} />;
+    };
+
+    const { getByTestId, unmount } = render(<Fixture />);
+    const target = getByTestId('target');
+    const observer = getObserverForTarget(target);
+
+    observer.emit([createEntry(target)]);
+    unmount();
+
+    expect(observer.unobserve).toHaveBeenCalledWith(target);
+  });
+
+  it('does not subscribe when disabled', async () => {
+    const onResize = vi.fn();
+    const { useResizeObserver } = await import('./useResizeObserver');
+
+    const Fixture = () => {
+      const ref = React.useRef<HTMLDivElement | null>(null);
+      useResizeObserver<HTMLDivElement>({ enabled: false, onResize, ref });
+      return <div data-testid="target" ref={ref} />;
+    };
+
+    const { getByTestId } = render(<Fixture />);
+    const target = getByTestId('target');
+    const observeCallsForTarget = globalThis.__resizeObserverMock
+      .getInstances()
+      .flatMap((instance) =>
+        instance.observe.mock.calls.filter(([observedTarget]) => observedTarget === target),
+      );
+
+    expect(observeCallsForTarget).toHaveLength(0);
+    expect(onResize).not.toHaveBeenCalled();
+  });
+
+  it('reads size according to selected box and falls back to contentRect', async () => {
+    const onResizeBorder = vi.fn();
+    const onResizeContent = vi.fn();
+    const onResizeDevicePixel = vi.fn();
+    const { useResizeObserver } = await import('./useResizeObserver');
+
+    const Fixture = ({
+      box,
+      onResize,
+      testId,
+    }: {
+      box: ResizeObserverBoxOptions;
+      onResize: () => void;
+      testId: string;
+    }) => {
+      const ref = React.useRef<HTMLDivElement | null>(null);
+      useResizeObserver<HTMLDivElement>({ box, onResize, ref });
+      return <div data-testid={testId} ref={ref} />;
+    };
+
+    const { getByTestId } = render(
+      <>
+        <Fixture box="border-box" onResize={onResizeBorder} testId="border-target" />
+        <Fixture box="content-box" onResize={onResizeContent} testId="content-target" />
+        <Fixture
+          box="device-pixel-content-box"
+          onResize={onResizeDevicePixel}
+          testId="device-pixel-target"
+        />
+      </>,
+    );
+
+    const borderTarget = getByTestId('border-target');
+    const contentTarget = getByTestId('content-target');
+    const devicePixelTarget = getByTestId('device-pixel-target');
+    const borderObserver = getObserverForTarget(borderTarget);
+    const contentObserver = getObserverForTarget(contentTarget);
+    const devicePixelObserver = getObserverForTarget(devicePixelTarget);
+
+    borderObserver.emit([
+      createEntry(borderTarget, {
+        width: 10,
+        height: 20,
+        borderBoxSize: [{ inlineSize: 300, blockSize: 150 }],
+        contentBoxSize: [{ inlineSize: 301, blockSize: 151 }],
+      }),
+    ]);
+
+    expect(onResizeBorder).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        width: 300,
+        height: 150,
+      }),
+    );
+
+    contentObserver.emit([
+      createEntry(contentTarget, {
+        width: 11,
+        height: 21,
+        contentBoxSize: [{ inlineSize: 400, blockSize: 220 }],
+        borderBoxSize: [{ inlineSize: 401, blockSize: 221 }],
+      }),
+    ]);
+
+    expect(onResizeContent).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        width: 400,
+        height: 220,
+      }),
+    );
+
+    devicePixelObserver.emit([
+      createEntry(devicePixelTarget, {
+        width: 12,
+        height: 22,
+        devicePixelContentBoxSize: [{ inlineSize: 500, blockSize: 260 }],
+      }),
+    ]);
+
+    expect(onResizeDevicePixel).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        width: 500,
+        height: 260,
+      }),
+    );
+
+    devicePixelObserver.emit([
+      createEntry(devicePixelTarget, {
+        width: 13,
+        height: 23,
+      }),
+    ]);
+
+    expect(onResizeDevicePixel).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        width: 13,
+        height: 23,
+      }),
+    );
+  });
+
+  it('creates separate observers for different box options', async () => {
+    const onResizeA = vi.fn();
+    const onResizeB = vi.fn();
+    const { useResizeObserver } = await import('./useResizeObserver');
+
+    const Fixture = ({
+      box,
+      onResize,
+    }: {
+      box: ResizeObserverBoxOptions;
+      onResize: () => void;
+    }) => {
+      const ref = React.useRef<HTMLDivElement | null>(null);
+      useResizeObserver<HTMLDivElement>({ box, onResize, ref });
+      return <div ref={ref} />;
+    };
+
+    const { container } = render(
+      <>
+        <Fixture box="content-box" onResize={onResizeA} />
+        <Fixture box="border-box" onResize={onResizeB} />
+      </>,
+    );
+
+    const [contentTarget, borderTarget] = container.querySelectorAll('div');
+    const contentObserver = getObserverForTarget(contentTarget);
+    const borderObserver = getObserverForTarget(borderTarget);
+    expect(contentObserver).not.toBe(borderObserver);
+  });
+
+  it('reuses one ResizeObserver instance for multiple elements with same box', async () => {
+    const onResizeA = vi.fn();
+    const onResizeB = vi.fn();
+    const { useResizeObserver } = await import('./useResizeObserver');
+
+    const Fixture = ({ testId, onResize }: { testId: string; onResize: () => void }) => {
+      const ref = React.useRef<HTMLDivElement | null>(null);
+      useResizeObserver<HTMLDivElement>({ onResize, ref });
+      return <div data-testid={testId} ref={ref} />;
+    };
+
+    const { getByTestId } = render(
+      <>
+        <Fixture testId="first-target" onResize={onResizeA} />
+        <Fixture testId="second-target" onResize={onResizeB} />
+      </>,
+    );
+
+    const firstTarget = getByTestId('first-target');
+    const secondTarget = getByTestId('second-target');
+    const firstObserver = getObserverForTarget(firstTarget);
+    const secondObserver = getObserverForTarget(secondTarget);
+
+    expect(firstObserver).toBe(secondObserver);
+    expect(firstObserver.observe).toHaveBeenCalledTimes(2);
+  });
+
+  it('calls all handlers subscribed to the same target node', async () => {
+    const onResizeA = vi.fn();
+    const onResizeB = vi.fn();
+    const { useResizeObserver } = await import('./useResizeObserver');
+
+    const Fixture = () => {
+      const ref = React.useRef<HTMLDivElement | null>(null);
+      useResizeObserver<HTMLDivElement>({ onResize: onResizeA, ref });
+      useResizeObserver<HTMLDivElement>({ onResize: onResizeB, ref });
+      return <div data-testid="target" ref={ref} />;
+    };
+
+    const { getByTestId } = render(<Fixture />);
+    const target = getByTestId('target');
+    const observer = getObserverForTarget(target);
+
+    expect(observer.observe).toHaveBeenCalledTimes(1);
+
+    observer.emit([createEntry(target, { width: 240, height: 120 })]);
+
+    expect(onResizeA).toHaveBeenCalledTimes(1);
+    expect(onResizeB).toHaveBeenCalledTimes(1);
+    expect(onResizeA).toHaveBeenCalledWith(
+      expect.objectContaining({
+        target,
+        width: 240,
+        height: 120,
+      }),
+    );
+    expect(onResizeB).toHaveBeenCalledWith(
+      expect.objectContaining({
+        target,
+        width: 240,
+        height: 120,
+      }),
+    );
+  });
+});
diff --git a/packages/vkui/src/hooks/useResizeObserver/useResizeObserver.ts b/packages/vkui/src/hooks/useResizeObserver/useResizeObserver.ts
new file mode 100644
index 00000000000..0f703f575c6
--- /dev/null
+++ b/packages/vkui/src/hooks/useResizeObserver/useResizeObserver.ts
@@ -0,0 +1,137 @@
+import * as React from 'react';
+import { useStableCallback } from '../useStableCallback';
+
+export type ResizePayload<T extends HTMLElement> = {
+  target: T;
+  width: number;
+  height: number;
+  entry?: ResizeObserverEntry;
+};
+
+type ElementResizeOptions<T extends HTMLElement = HTMLElement> = {
+  ref?: React.RefObject<T | null> | undefined;
+  enabled?: boolean | undefined;
+  box?: ResizeObserverBoxOptions | undefined;
+  onResize: (payload: ResizePayload<T>) => void;
+};
+
+type ResizeHandler = (entry: ResizeObserverEntry) => void;
+
+type ResizePool = {
+  observer: ResizeObserver;
+  handlers: WeakMap<Element, Set<ResizeHandler>>;
+};
+
+const resizePools = new Map<string, ResizePool>();
+
+function getResizePool(box: ResizeObserverBoxOptions = 'content-box'): ResizePool {
+  const key = `box:${box}`;
+  const existing = resizePools.get(key);
+  if (existing) {
+    return existing;
+  }
+
+  const handlers = new WeakMap<Element, Set<ResizeHandler>>();
+
+  const observer = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      const targetHandlers = handlers.get(entry.target);
+      if (!targetHandlers) {
+        continue;
+      }
+      for (const handler of targetHandlers) {
+        handler(entry);
+      }
+    }
+  });
+
+  const pool: ResizePool = { observer, handlers };
+  resizePools.set(key, pool);
+  return pool;
+}
+
+function getEntrySize(entry: ResizeObserverEntry, box: ResizeObserverBoxOptions) {
+  switch (box) {
+    case 'border-box':
+      if (entry.borderBoxSize?.length) {
+        return {
+          width: entry.borderBoxSize[0].inlineSize,
+          height: entry.borderBoxSize[0].blockSize,
+        };
+      }
+      break;
+    case 'device-pixel-content-box':
+      if (entry.devicePixelContentBoxSize?.length) {
+        return {
+          width: entry.devicePixelContentBoxSize[0].inlineSize,
+          height: entry.devicePixelContentBoxSize[0].blockSize,
+        };
+      }
+      break;
+    case 'content-box':
+    default:
+      if (entry.contentBoxSize?.length) {
+        return {
+          width: entry.contentBoxSize[0].inlineSize,
+          height: entry.contentBoxSize[0].blockSize,
+        };
+      }
+      break;
+  }
+
+  return {
+    width: entry.contentRect.width,
+    height: entry.contentRect.height,
+  };
+}
+
+/**
+ * @private
+ */
+export function useResizeObserver<T extends HTMLElement = HTMLElement>(
+  options: ElementResizeOptions<T>,
+) {
+  const { ref: externalRef, enabled = true, box = 'content-box', onResize: onResizeProp } = options;
+
+  const onResize = useStableCallback<[ResizePayload<T>], void>(onResizeProp);
+
+  React.useEffect(() => {
+    if (!enabled || !externalRef || !externalRef.current) {
+      return;
+    }
+    const node = externalRef.current;
+
+    const pool = getResizePool(box);
+
+    const handler: ResizeHandler = (entry) => {
+      const { width, height } = getEntrySize(entry, box);
+      onResize({
+        target: node,
+        width,
+        height,
+        entry,
+      });
+    };
+
+    const nodeHandlers = pool.handlers.get(node);
+    if (nodeHandlers) {
+      nodeHandlers.add(handler);
+    } else {
+      pool.handlers.set(node, new Set([handler]));
+      pool.observer.observe(node, { box });
+    }
+
+    return () => {
+      const currentNodeHandlers = pool.handlers.get(node);
+      if (!currentNodeHandlers) {
+        return;
+      }
+
+      currentNodeHandlers.delete(handler);
+      if (currentNodeHandlers.size === 0) {
+        pool.handlers.delete(node);
+        pool.observer.unobserve(node);
+      }
+    };
+  }, [externalRef, enabled, box, onResize]);
+}
diff --git a/packages/vkui/src/hooks/useResizeObserver/useWindowResizeObserver.test.tsx b/packages/vkui/src/hooks/useResizeObserver/useWindowResizeObserver.test.tsx
new file mode 100644
index 00000000000..dad52405096
--- /dev/null
+++ b/packages/vkui/src/hooks/useResizeObserver/useWindowResizeObserver.test.tsx
@@ -0,0 +1,154 @@
+import { act, render } from '@testing-library/react';
+
+describe('useWindowResizeObserver', () => {
+  const originalInnerWidth = globalThis.window.innerWidth;
+  const originalInnerHeight = globalThis.window.innerHeight;
+
+  beforeEach(() => {
+    vi.resetModules();
+    Object.defineProperty(globalThis.window, 'innerWidth', { configurable: true, value: 1280 });
+    Object.defineProperty(globalThis.window, 'innerHeight', { configurable: true, value: 720 });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    Object.defineProperty(globalThis.window, 'innerWidth', {
+      configurable: true,
+      value: originalInnerWidth,
+    });
+    Object.defineProperty(globalThis.window, 'innerHeight', {
+      configurable: true,
+      value: originalInnerHeight,
+    });
+  });
+
+  it('reacts to window resize', async () => {
+    const onResize = vi.fn();
+    const { useWindowResizeObserver } = await import('./useWindowResizeObserver');
+
+    const Fixture = () => {
+      useWindowResizeObserver({ onResize });
+      return null;
+    };
+
+    render(<Fixture />);
+
+    expect(onResize).not.toHaveBeenCalled();
+
+    Object.defineProperty(globalThis.window, 'innerWidth', { configurable: true, value: 900 });
+    Object.defineProperty(globalThis.window, 'innerHeight', { configurable: true, value: 500 });
+
+    await act(async () => {
+      globalThis.window.dispatchEvent(new Event('resize'));
+    });
+
+    expect(onResize).toHaveBeenCalledTimes(1);
+    expect(onResize).toHaveBeenCalledWith({
+      target: globalThis.window,
+      width: 900,
+      height: 500,
+    });
+  });
+
+  it('does not subscribe when disabled=false', async () => {
+    const onResize = vi.fn();
+    const addEventListenerSpy = vi.spyOn(globalThis.window, 'addEventListener');
+    const { useWindowResizeObserver } = await import('./useWindowResizeObserver');
+
+    const Fixture = () => {
+      useWindowResizeObserver({ enabled: false, onResize });
+      return null;
+    };
+
+    render(<Fixture />);
+
+    expect(onResize).not.toHaveBeenCalled();
+    expect(addEventListenerSpy).not.toHaveBeenCalledWith(
+      'resize',
+      expect.any(Function),
+      expect.anything(),
+    );
+  });
+
+  it('detaches listener on unmount', async () => {
+    const onResize = vi.fn();
+    const removeEventListenerSpy = vi.spyOn(globalThis.window, 'removeEventListener');
+    const { useWindowResizeObserver } = await import('./useWindowResizeObserver');
+
+    const Fixture = () => {
+      useWindowResizeObserver({ onResize });
+      return null;
+    };
+
+    const { unmount } = render(<Fixture />);
+    unmount();
+
+    expect(removeEventListenerSpy).toHaveBeenCalledWith('resize', expect.any(Function));
+  });
+
+  it('attaches window resize listener only once for multiple subscribers', async () => {
+    const onResizeA = vi.fn();
+    const onResizeB = vi.fn();
+    const addEventListenerSpy = vi.spyOn(globalThis.window, 'addEventListener');
+    const removeEventListenerSpy = vi.spyOn(globalThis.window, 'removeEventListener');
+    const { useWindowResizeObserver } = await import('./useWindowResizeObserver');
+
+    const Fixture = ({ onResize }: { onResize: (payload: unknown) => void }) => {
+      useWindowResizeObserver({ onResize });
+      return null;
+    };
+
+    const first = render(<Fixture onResize={onResizeA} />);
+    const second = render(<Fixture onResize={onResizeB} />);
+
+    const addCalls = addEventListenerSpy.mock.calls.filter(([event]) => event === 'resize');
+    expect(addCalls).toHaveLength(1);
+
+    first.unmount();
+    expect(removeEventListenerSpy.mock.calls.filter(([event]) => event === 'resize')).toHaveLength(
+      0,
+    );
+
+    second.unmount();
+    const removeCalls = removeEventListenerSpy.mock.calls.filter(([event]) => event === 'resize');
+    expect(removeCalls).toHaveLength(1);
+  });
+
+  it('notifies all subscribers on resize', async () => {
+    const onResizeA = vi.fn();
+    const onResizeB = vi.fn();
+    const { useWindowResizeObserver } = await import('./useWindowResizeObserver');
+
+    const Fixture = ({ onResize }: { onResize: (payload: unknown) => void }) => {
+      useWindowResizeObserver({ onResize });
+      return null;
+    };
+
+    render(
+      <>
+        <Fixture onResize={onResizeA} />
+        <Fixture onResize={onResizeB} />
+      </>,
+    );
+
+    Object.defineProperty(globalThis.window, 'innerWidth', { configurable: true, value: 900 });
+    Object.defineProperty(globalThis.window, 'innerHeight', { configurable: true, value: 500 });
+
+    await act(async () => {
+      globalThis.window.dispatchEvent(new Event('resize'));
+    });
+
+    expect(onResizeA).toHaveBeenCalledTimes(1);
+    expect(onResizeB).toHaveBeenCalledTimes(1);
+    expect(onResizeA).toHaveBeenCalledWith({
+      target: globalThis.window,
+      width: 900,
+      height: 500,
+    });
+    expect(onResizeB).toHaveBeenCalledWith({
+      target: globalThis.window,
+      width: 900,
+      height: 500,
+    });
+  });
+});
diff --git a/packages/vkui/src/hooks/useResizeObserver/useWindowResizeObserver.ts b/packages/vkui/src/hooks/useResizeObserver/useWindowResizeObserver.ts
new file mode 100644
index 00000000000..21625e9a3be
--- /dev/null
+++ b/packages/vkui/src/hooks/useResizeObserver/useWindowResizeObserver.ts
@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { useDOM } from '../../lib/dom';
+import { useStableCallback } from '../useStableCallback';
+
+export type WindowResizePayload = {
+  target: Window;
+  width: number;
+  height: number;
+};
+
+export type WindowResizeOptions = {
+  enabled?: boolean;
+  onResize: (payload: WindowResizePayload) => void;
+};
+
+type HandlersMapValue = {
+  subscribers: Set<WindowResizeOptions['onResize']>;
+  resizeHandler: VoidFunction;
+};
+
+const handlersMap = new WeakMap<Window, HandlersMapValue>();
+
+function getWindowSize(window: Window) {
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight,
+  };
+}
+
+function notifySubscribers(window: Window) {
+  const windowHandler = handlersMap.get(window);
+  if (!windowHandler) {
+    return;
+  }
+
+  const size = getWindowSize(window);
+  for (const onResize of windowHandler.subscribers) {
+    onResize({
+      target: window,
+      width: size.width,
+      height: size.height,
+    });
+  }
+}
+
+function ensureWindowListener(window: Window): HandlersMapValue {
+  const handlersFromMap = handlersMap.get(window);
+
+  if (handlersFromMap) {
+    return handlersFromMap;
+  }
+
+  const windowResizeHandler = () => notifySubscribers(window);
+  window.addEventListener('resize', windowResizeHandler, { passive: true });
+
+  const handler: HandlersMapValue = {
+    subscribers: new Set<WindowResizeOptions['onResize']>(),
+    resizeHandler: windowResizeHandler,
+  };
+
+  handlersMap.set(window, handler);
+  return handler;
+}
+
+function maybeDetachWindowListener(window: Window, handlersValue: HandlersMapValue) {
+  if (handlersValue.subscribers.size > 0) {
+    return;
+  }
+  window.removeEventListener('resize', handlersValue.resizeHandler);
+  handlersMap.delete(window);
+}
+
+/**
+ * @private
+ */
+export function useWindowResizeObserver(options: WindowResizeOptions) {
+  const { window } = useDOM();
+  const { enabled = true, onResize: onResizeProp } = options;
+
+  const onResize = useStableCallback<[WindowResizePayload], void>(onResizeProp);
+
+  React.useEffect(() => {
+    if (!enabled || !window) {
+      return;
+    }
+
+    const handler = ensureWindowListener(window);
+    handler.subscribers.add(onResize);
+
+    return () => {
+      handler.subscribers.delete(onResize);
+      maybeDetachWindowListener(window, handler);
+    };
+  }, [enabled, onResize, window]);
+}
diff --git a/packages/vkui/src/lib/randomUUID.test.ts b/packages/vkui/src/lib/randomUUID.test.ts
index 69fd64c1330..175d1fa6576 100644
--- a/packages/vkui/src/lib/randomUUID.test.ts
+++ b/packages/vkui/src/lib/randomUUID.test.ts
@@ -1,6 +1,8 @@
 import { describe, expect, test, vi } from 'vitest';
 import { randomUUID } from './randomUUID';
 
+const originalCrypto = globalThis.crypto;
+
 describe('generateUUID', () => {
   test('generates a valid UUID v4 format', () => {
     const uuid = randomUUID();
@@ -70,8 +72,6 @@ describe('generateUUID', () => {
   });
 
   describe('fallback when crypto.randomUUID is not available', () => {
-    const originalCrypto = global.crypto;
-
     beforeEach(() => {
       vi.stubGlobal('crypto', {
         ...originalCrypto,
@@ -85,7 +85,7 @@ describe('generateUUID', () => {
     });
 
     afterEach(() => {
-      vi.unstubAllGlobals();
+      vi.stubGlobal('crypto', originalCrypto);
     });
 
     test('uses crypto.getRandomValues when available', () => {
@@ -118,7 +118,6 @@ describe('generateUUID', () => {
 
   describe('fallback when crypto.randomUUID and crypto.getRandomValues are not available', () => {
     beforeEach(() => {
-      const originalCrypto = globalThis.crypto;
       vi.stubGlobal('crypto', {
         ...originalCrypto,
         randomUUID: undefined,
@@ -127,7 +126,7 @@ describe('generateUUID', () => {
     });
 
     afterEach(() => {
-      vi.unstubAllGlobals();
+      vi.stubGlobal('crypto', originalCrypto);
     });
 
     test('uses Math.random as fallback', () => {
@@ -175,7 +174,7 @@ describe('generateUUID', () => {
     });
 
     afterEach(() => {
-      vi.unstubAllGlobals();
+      vi.stubGlobal('crypto', originalCrypto);
     });
 
     test('uses Math.random as fallback', () => {
diff --git a/packages/vkui/src/testing/resizeObserverMockGlobal.d.ts b/packages/vkui/src/testing/resizeObserverMockGlobal.d.ts
new file mode 100644
index 00000000000..b8b1cae0fb4
--- /dev/null
+++ b/packages/vkui/src/testing/resizeObserverMockGlobal.d.ts
@@ -0,0 +1,50 @@
+type ResizeObserverMockEntry = Partial<ResizeObserverEntry> & {
+  target: Element;
+  contentRect: DOMRectReadOnly;
+};
+
+type ResizeObserverObserveFn = {
+  (target: Element, options?: ResizeObserverOptions): void;
+  mock: {
+    calls: Array<[Element, ResizeObserverOptions?]>;
+  };
+  mockClear: () => void;
+};
+
+type ResizeObserverUnobserveFn = {
+  (target: Element): void;
+  mock: {
+    calls: Array<[Element]>;
+  };
+  mockClear: () => void;
+};
+
+type ResizeObserverDisconnectFn = {
+  (): void;
+  mock: {
+    calls: Array<[]>;
+  };
+  mockClear: () => void;
+};
+
+interface ResizeObserverMockInstance {
+  observe: ResizeObserverObserveFn;
+  unobserve: ResizeObserverUnobserveFn;
+  disconnect: ResizeObserverDisconnectFn;
+  emit: (entries: ResizeObserverMockEntry[]) => void;
+}
+
+declare global {
+  // eslint-disable-next-line no-var, @typescript-eslint/naming-convention
+  var __resizeObserverMock: {
+    reset: () => void;
+    getInstances: () => ResizeObserverMockInstance[];
+    getObserverForTarget: (target: Element) => ResizeObserverMockInstance;
+    emitForTarget: (target: Element, entries?: ResizeObserverMockEntry[]) => void;
+    emitAll: (entries?: ResizeObserverMockEntry[]) => void;
+    triggerAll: () => void;
+    triggerForTarget: (target: Element, rect?: { width?: number; height?: number }) => void;
+  };
+}
+
+export {};
diff --git a/packages/vkui/vitest.setup.ts b/packages/vkui/vitest.setup.ts
index 32f653e9478..10e0890f187 100644
--- a/packages/vkui/vitest.setup.ts
+++ b/packages/vkui/vitest.setup.ts
@@ -129,13 +129,96 @@ vi.stubGlobal(
 vi.stubGlobal('scrollTo', vi.fn());
 Element.prototype.scrollTo = vi.fn();
 
-// Mock ResizeObserver for JSDOM
+type MockResizeObserverEntry = Partial<ResizeObserverEntry> & {
+  target: Element;
+  contentRect: DOMRectReadOnly;
+};
+
 class MockResizeObserver {
-  observe = vi.fn();
-  unobserve = vi.fn();
-  disconnect = vi.fn();
+  public static instances: MockResizeObserver[] = [];
+
+  private readonly observedTargets = new Set<Element>();
+
+  public observe = vi.fn((target: Element) => {
+    this.observedTargets.add(target);
+  });
+  public unobserve = vi.fn((target: Element) => {
+    this.observedTargets.delete(target);
+  });
+  public disconnect = vi.fn(() => {
+    this.observedTargets.clear();
+  });
+
+  private readonly callback: ResizeObserverCallback;
+
+  public constructor(callback: ResizeObserverCallback) {
+    this.callback = callback;
+    MockResizeObserver.instances.push(this);
+  }
+
+  public emit(entries: MockResizeObserverEntry[]) {
+    this.callback(entries as ResizeObserverEntry[], this as unknown as ResizeObserver);
+  }
+
+  public emitObserved() {
+    const entries = [...this.observedTargets].map((target) => ({
+      target,
+      contentRect: DOMRect.fromRect({ width: 0, height: 0 }),
+    }));
+    this.emit(entries);
+  }
+
+  /**
+   * Сбрасываем состояние мока между тестами, но не обнуляем `instances`:
+   * в `useResizeObserver` пул (`resizePools`) живёт весь прогон и переиспользует
+   * один и тот же `ResizeObserver`. Если очистить только массив `instances`,
+   * `triggerAll` перестаёт вызывать колбэки для уже существующего инстанса.
+   */
+  public static reset() {
+    for (const instance of MockResizeObserver.instances) {
+      instance.observedTargets.clear();
+      instance.observe.mockClear();
+      instance.unobserve.mockClear();
+      instance.disconnect.mockClear();
+    }
+  }
+}
+
+function getResizeObserverForTarget(target: Element): MockResizeObserver {
+  const observer = MockResizeObserver.instances.find((instance) =>
+    instance.observe.mock.calls.some(([observedTarget]) => observedTarget === target),
+  );
+  if (!observer) {
+    throw new Error('ResizeObserver for target was not found');
+  }
+  return observer;
 }
+
 vi.stubGlobal('ResizeObserver', MockResizeObserver);
+vi.stubGlobal('__resizeObserverMock', {
+  reset: () => MockResizeObserver.reset(),
+  getInstances: () => MockResizeObserver.instances,
+  getObserverForTarget: (target: Element) => getResizeObserverForTarget(target),
+  emitForTarget: (target: Element, entries: MockResizeObserverEntry[] = []) => {
+    getResizeObserverForTarget(target).emit(entries);
+  },
+  emitAll: (entries: MockResizeObserverEntry[] = []) => {
+    MockResizeObserver.instances.forEach((observer) => observer.emit(entries));
+  },
+  triggerAll: () => {
+    MockResizeObserver.instances.forEach((observer) => observer.emitObserved());
+  },
+  triggerForTarget: (target: Element, rect: { width?: number; height?: number } = {}) => {
+    const { width = 0, height = 0 } = rect;
+    getResizeObserverForTarget(target).emit([
+      { target, contentRect: DOMRect.fromRect({ width, height }) },
+    ]);
+  },
+});
+
+beforeEach(() => {
+  globalThis.__resizeObserverMock.reset();
+});
 
 class FakeTransitionEvent extends Event {
   propertyName: string;