diff --git a/code/addons/a11y/src/components/Report/Rules.tsx b/code/addons/a11y/src/components/Report/Rules.tsx
index fa7bb73ea8fe..1e7d72e08278 100644
--- a/code/addons/a11y/src/components/Report/Rules.tsx
+++ b/code/addons/a11y/src/components/Report/Rules.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { styled } from '@storybook/theming';
 import { Badge } from '@storybook/components';
 import type { CheckResult } from 'axe-core';
-import ReactResizeDetector from 'react-resize-detector';
+import { useResizeDetector } from 'react-resize-detector';
 
 const List = styled.div({
   display: 'flex',
@@ -53,6 +53,11 @@ const formatSeverityText = (severity: string) => {
 };
 
 const Rule: FC<RuleProps> = ({ rule }) => {
+  const { ref, width } = useResizeDetector({
+    refreshMode: 'debounce',
+    handleHeight: false,
+    handleWidth: true,
+  });
   let badgeType: any = null;
   switch (rule.impact) {
     case ImpactValue.CRITICAL:
@@ -71,14 +76,10 @@ const Rule: FC<RuleProps> = ({ rule }) => {
       break;
   }
   return (
-    <ReactResizeDetector handleWidth handleHeight refreshMode="debounce">
-      {(size) => (
-        <Item elementWidth={size.width || 0}>
-          <StyledBadge status={badgeType}>{formatSeverityText(rule.impact)}</StyledBadge>
-          <Message>{rule.message}</Message>
-        </Item>
-      )}
-    </ReactResizeDetector>
+    <Item ref={ref} elementWidth={width || 0}>
+      <StyledBadge status={badgeType}>{formatSeverityText(rule.impact)}</StyledBadge>
+      <Message>{rule.message}</Message>
+    </Item>
   );
 };
 
diff --git a/code/addons/a11y/src/components/Tabs.tsx b/code/addons/a11y/src/components/Tabs.tsx
index aef69aafaace..ba4a1fb8689a 100644
--- a/code/addons/a11y/src/components/Tabs.tsx
+++ b/code/addons/a11y/src/components/Tabs.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { styled } from '@storybook/theming';
 import type { NodeResult, Result } from 'axe-core';
-import ReactResizeDetector from 'react-resize-detector';
+import { useResizeDetector } from 'react-resize-detector';
 import HighlightToggle from './Report/HighlightToggle';
 
 import type { RuleType } from './A11YPanel';
@@ -99,6 +99,11 @@ function retrieveAllNodesFromResults(items: Result[]): NodeResult[] {
 }
 
 export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
+  const { ref, width } = useResizeDetector({
+    refreshMode: 'debounce',
+    handleHeight: false,
+    handleWidth: true,
+  });
   const { tab: activeTab, setTab } = useA11yContext();
 
   const handleToggle = React.useCallback(
@@ -111,38 +116,32 @@ export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
   const highlightToggleId = `${tabs[activeTab].type}-global-checkbox`;
   const highlightLabel = `Highlight results`;
   return (
-    <ReactResizeDetector handleWidth handleHeight refreshMode="debounce">
-      {(size) => (
-        <Container>
-          <List>
-            <TabsWrapper>
-              {tabs.map((tab, index) => (
-                <Item
-                  /* eslint-disable-next-line react/no-array-index-key */
-                  key={index}
-                  data-index={index}
-                  active={activeTab === index}
-                  onClick={handleToggle}
-                >
-                  {tab.label}
-                </Item>
-              ))}
-            </TabsWrapper>
-          </List>
-          {tabs[activeTab].items.length > 0 ? (
-            <GlobalToggle elementWidth={size.width || 0}>
-              <HighlightToggleLabel htmlFor={highlightToggleId}>
-                {highlightLabel}
-              </HighlightToggleLabel>
-              <HighlightToggle
-                toggleId={highlightToggleId}
-                elementsToHighlight={retrieveAllNodesFromResults(tabs[activeTab].items)}
-              />
-            </GlobalToggle>
-          ) : null}
-          {tabs[activeTab].panel}
-        </Container>
-      )}
-    </ReactResizeDetector>
+    <Container ref={ref}>
+      <List>
+        <TabsWrapper>
+          {tabs.map((tab, index) => (
+            <Item
+              /* eslint-disable-next-line react/no-array-index-key */
+              key={index}
+              data-index={index}
+              active={activeTab === index}
+              onClick={handleToggle}
+            >
+              {tab.label}
+            </Item>
+          ))}
+        </TabsWrapper>
+      </List>
+      {tabs[activeTab].items.length > 0 ? (
+        <GlobalToggle elementWidth={width || 0}>
+          <HighlightToggleLabel htmlFor={highlightToggleId}>{highlightLabel}</HighlightToggleLabel>
+          <HighlightToggle
+            toggleId={highlightToggleId}
+            elementsToHighlight={retrieveAllNodesFromResults(tabs[activeTab].items)}
+          />
+        </GlobalToggle>
+      ) : null}
+      {tabs[activeTab].panel}
+    </Container>
   );
 };
diff --git a/code/addons/jest/src/components/Panel.tsx b/code/addons/jest/src/components/Panel.tsx
index cba956f1ec0a..ce7ee16c70f8 100644
--- a/code/addons/jest/src/components/Panel.tsx
+++ b/code/addons/jest/src/components/Panel.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import React, { Fragment } from 'react';
 import { styled, themes, convert } from '@storybook/theming';
 import { ScrollArea, TabsState, Link, Placeholder } from '@storybook/components';
-import ResizeObserver from 'react-resize-detector';
+import { useResizeDetector } from 'react-resize-detector';
 import { Result } from './Result';
 import type { Test } from '../hoc/provideJestResult';
 import { provideTests as provideJestResult } from '../hoc/provideJestResult';
@@ -118,150 +118,143 @@ const getColorByType = (type: string) => {
   }
 };
 
-const Content = styled(({ tests, className }: ContentProps) => (
-  <div className={className}>
-    {tests.map(({ name, result }) => {
-      if (!result || !result.assertionResults) {
-        return (
-          <Placeholder key={name}>
-            This story has tests configured, but no file was found
-          </Placeholder>
-        );
-      }
+const TestPanel: FC<{ test: Test }> = ({ test }) => {
+  const { ref, width } = useResizeDetector();
+  const { result } = test;
+  if (!result || !result.assertionResults) {
+    return <Placeholder>This story has tests configured, but no file was found</Placeholder>;
+  }
 
-      const testsByType: Map<string, any> = getTestsByTypeMap(result);
-      const entries: any = testsByType.entries();
-      const sortedTestsByCount = [...entries].sort((a, b) => a[1].length - b[1].length);
+  const testsByType: Map<string, any> = getTestsByTypeMap(result);
+  const entries: any = testsByType.entries();
+  const sortedTestsByCount = [...entries].sort((a, b) => a[1].length - b[1].length);
 
-      return (
-        <ResizeObserver refreshMode="debounce" key={name}>
-          {(size) => {
-            const { width } = size;
-            return (
-              <section>
-                <SuiteHead>
-                  <SuiteTotals {...{ result, width }} />
-                  {width > 240 ? (
-                    <ProgressWrapper>
-                      {sortedTestsByCount.map((entry: any) => {
-                        return (
-                          <SuiteProgressPortion
-                            key={`progress-portion-${entry[0]}`}
-                            color={getColorByType(entry[0])}
-                            progressPercent={
-                              entry[1]
-                                ? (entry[1].length / result.assertionResults.length) * 100
-                                : 0
-                            }
-                          />
-                        );
-                      })}
-                    </ProgressWrapper>
-                  ) : null}
-                </SuiteHead>
-                <TabsState
-                  initial="failing-tests"
-                  backgroundColor={convert(themes.light).background.hoverable}
-                >
-                  <div
-                    id="failing-tests"
-                    title={`${
-                      testsByType.get(StatusTypes.FAILED_TYPE)
-                        ? testsByType.get(StatusTypes.FAILED_TYPE).length
-                        : 0
-                    } Failed`}
-                    color={getColorByType(StatusTypes.FAILED_TYPE)}
-                  >
-                    <List>
-                      {testsByType.get(StatusTypes.FAILED_TYPE) ? (
-                        testsByType.get(StatusTypes.FAILED_TYPE).map((res: any) => (
-                          <Item key={res.fullName || res.title}>
-                            <Result {...res} />
-                          </Item>
-                        ))
-                      ) : (
-                        <Placeholder key={`no-tests-${StatusTypes.FAILED_TYPE}`}>
-                          This story has no failing tests.
-                        </Placeholder>
-                      )}
-                    </List>
-                  </div>
-                  <div
-                    id="passing-tests"
-                    title={`${
-                      testsByType.get(StatusTypes.PASSED_TYPE)
-                        ? testsByType.get(StatusTypes.PASSED_TYPE).length
-                        : 0
-                    } Passed`}
-                    color={getColorByType(StatusTypes.PASSED_TYPE)}
-                  >
-                    <List>
-                      {testsByType.get(StatusTypes.PASSED_TYPE) ? (
-                        testsByType.get(StatusTypes.PASSED_TYPE).map((res: any) => (
-                          <Item key={res.fullName || res.title}>
-                            <Result {...res} />
-                          </Item>
-                        ))
-                      ) : (
-                        <Placeholder key={`no-tests-${StatusTypes.PASSED_TYPE}`}>
-                          This story has no passing tests.
-                        </Placeholder>
-                      )}
-                    </List>
-                  </div>
-                  <div
-                    id="pending-tests"
-                    title={`${
-                      testsByType.get(StatusTypes.PENDING_TYPE)
-                        ? testsByType.get(StatusTypes.PENDING_TYPE).length
-                        : 0
-                    } Pending`}
-                    color={getColorByType(StatusTypes.PENDING_TYPE)}
-                  >
-                    <List>
-                      {testsByType.get(StatusTypes.PENDING_TYPE) ? (
-                        testsByType.get(StatusTypes.PENDING_TYPE).map((res: any) => (
-                          <Item key={res.fullName || res.title}>
-                            <Result {...res} />
-                          </Item>
-                        ))
-                      ) : (
-                        <Placeholder key={`no-tests-${StatusTypes.PENDING_TYPE}`}>
-                          This story has no pending tests.
-                        </Placeholder>
-                      )}
-                    </List>
-                  </div>
-                  <div
-                    id="todo-tests"
-                    title={`${
-                      testsByType.get(StatusTypes.TODO_TYPE)
-                        ? testsByType.get(StatusTypes.TODO_TYPE).length
-                        : 0
-                    } Todo`}
-                    color={getColorByType(StatusTypes.TODO_TYPE)}
-                  >
-                    <List>
-                      {testsByType.get(StatusTypes.TODO_TYPE) ? (
-                        testsByType.get(StatusTypes.TODO_TYPE).map((res: any) => (
-                          <Item key={res.fullName || res.title}>
-                            <Result {...res} />
-                          </Item>
-                        ))
-                      ) : (
-                        <Placeholder key={`no-tests-${StatusTypes.TODO_TYPE}`}>
-                          This story has no tests todo.
-                        </Placeholder>
-                      )}
-                    </List>
-                  </div>
-                </TabsState>
-              </section>
-            );
-          }}
-        </ResizeObserver>
-      );
-    })}
+  return (
+    <section ref={ref}>
+      <SuiteHead>
+        <SuiteTotals {...{ result, width }} />
+        {width > 240 ? (
+          <ProgressWrapper>
+            {sortedTestsByCount.map((entry: any) => {
+              return (
+                <SuiteProgressPortion
+                  key={`progress-portion-${entry[0]}`}
+                  color={getColorByType(entry[0])}
+                  progressPercent={
+                    entry[1] ? (entry[1].length / result.assertionResults.length) * 100 : 0
+                  }
+                />
+              );
+            })}
+          </ProgressWrapper>
+        ) : null}
+      </SuiteHead>
+      <TabsState
+        initial="failing-tests"
+        backgroundColor={convert(themes.light).background.hoverable}
+      >
+        <div
+          id="failing-tests"
+          title={`${
+            testsByType.get(StatusTypes.FAILED_TYPE)
+              ? testsByType.get(StatusTypes.FAILED_TYPE).length
+              : 0
+          } Failed`}
+          color={getColorByType(StatusTypes.FAILED_TYPE)}
+        >
+          <List>
+            {testsByType.get(StatusTypes.FAILED_TYPE) ? (
+              testsByType.get(StatusTypes.FAILED_TYPE).map((res: any) => (
+                <Item key={res.fullName || res.title}>
+                  <Result {...res} />
+                </Item>
+              ))
+            ) : (
+              <Placeholder key={`no-tests-${StatusTypes.FAILED_TYPE}`}>
+                This story has no failing tests.
+              </Placeholder>
+            )}
+          </List>
+        </div>
+        <div
+          id="passing-tests"
+          title={`${
+            testsByType.get(StatusTypes.PASSED_TYPE)
+              ? testsByType.get(StatusTypes.PASSED_TYPE).length
+              : 0
+          } Passed`}
+          color={getColorByType(StatusTypes.PASSED_TYPE)}
+        >
+          <List>
+            {testsByType.get(StatusTypes.PASSED_TYPE) ? (
+              testsByType.get(StatusTypes.PASSED_TYPE).map((res: any) => (
+                <Item key={res.fullName || res.title}>
+                  <Result {...res} />
+                </Item>
+              ))
+            ) : (
+              <Placeholder key={`no-tests-${StatusTypes.PASSED_TYPE}`}>
+                This story has no passing tests.
+              </Placeholder>
+            )}
+          </List>
+        </div>
+        <div
+          id="pending-tests"
+          title={`${
+            testsByType.get(StatusTypes.PENDING_TYPE)
+              ? testsByType.get(StatusTypes.PENDING_TYPE).length
+              : 0
+          } Pending`}
+          color={getColorByType(StatusTypes.PENDING_TYPE)}
+        >
+          <List>
+            {testsByType.get(StatusTypes.PENDING_TYPE) ? (
+              testsByType.get(StatusTypes.PENDING_TYPE).map((res: any) => (
+                <Item key={res.fullName || res.title}>
+                  <Result {...res} />
+                </Item>
+              ))
+            ) : (
+              <Placeholder key={`no-tests-${StatusTypes.PENDING_TYPE}`}>
+                This story has no pending tests.
+              </Placeholder>
+            )}
+          </List>
+        </div>
+        <div
+          id="todo-tests"
+          title={`${
+            testsByType.get(StatusTypes.TODO_TYPE)
+              ? testsByType.get(StatusTypes.TODO_TYPE).length
+              : 0
+          } Todo`}
+          color={getColorByType(StatusTypes.TODO_TYPE)}
+        >
+          <List>
+            {testsByType.get(StatusTypes.TODO_TYPE) ? (
+              testsByType.get(StatusTypes.TODO_TYPE).map((res: any) => (
+                <Item key={res.fullName || res.title}>
+                  <Result {...res} />
+                </Item>
+              ))
+            ) : (
+              <Placeholder key={`no-tests-${StatusTypes.TODO_TYPE}`}>
+                This story has no tests todo.
+              </Placeholder>
+            )}
+          </List>
+        </div>
+      </TabsState>
+    </section>
+  );
+};
+
+const Content = styled(({ tests, className }: ContentProps) => (
+  <div className={className}>
+    {tests.map((test) => (
+      <TestPanel key={test.name} test={test} />
+    ))}
   </div>
 ))({
   flex: '1 1 0%',
diff --git a/code/ui/manager/src/app.tsx b/code/ui/manager/src/app.tsx
index 666c93752b42..3935126f4674 100644
--- a/code/ui/manager/src/app.tsx
+++ b/code/ui/manager/src/app.tsx
@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
-import ResizeObserver from 'react-resize-detector';
+import { useResizeDetector } from 'react-resize-detector';
 
 import { type State } from '@storybook/manager-api';
 import { Symbols } from '@storybook/components';
@@ -27,92 +27,59 @@ export interface AppProps {
   viewMode: State['viewMode'];
   layout: State['layout'];
   panelCount: number;
-  width: number;
-  height: number;
 }
 
-const App = React.memo<AppProps>(
-  ({ viewMode, layout, panelCount, width, height }) => {
-    let content;
+const App: React.FC<AppProps> = ({ viewMode, layout, panelCount }) => {
+  const { width, height, ref } = useResizeDetector();
+  let content;
 
-    const props = useMemo(
-      () => ({
-        Sidebar,
-        Preview,
-        Panel,
-        Notifications,
-        pages: [
-          {
-            key: 'settings',
-            render: () => <SettingsPages />,
-            route: (({ children }) => (
-              <Route path="/settings/" startsWith>
-                {children}
-              </Route>
-            )) as FC,
-          },
-        ],
-      }),
-      []
-    );
-
-    if (!width || !height) {
-      content = <div />;
-    } else if (width < 600) {
-      content = <Mobile {...props} viewMode={viewMode} options={layout} />;
-    } else {
-      content = (
-        <Desktop
-          {...props}
-          viewMode={viewMode}
-          options={layout}
-          {...{ width, height }}
-          panelCount={panelCount}
-        />
-      );
-    }
+  const props = useMemo(
+    () => ({
+      Sidebar,
+      Preview,
+      Panel,
+      Notifications,
+      pages: [
+        {
+          key: 'settings',
+          render: () => <SettingsPages />,
+          route: (({ children }) => (
+            <Route path="/settings/" startsWith>
+              {children}
+            </Route>
+          )) as FC,
+        },
+      ],
+    }),
+    []
+  );
 
-    return (
-      <View>
-        <Global styles={createGlobal} />
-        <Symbols icons={['folder', 'component', 'document', 'bookmarkhollow']} />
-        {content}
-      </View>
+  if (!width || !height) {
+    content = <div />;
+  } else if (width < 600) {
+    content = <Mobile {...props} viewMode={viewMode} options={layout} />;
+  } else {
+    content = (
+      <Desktop
+        {...props}
+        viewMode={viewMode}
+        options={layout}
+        width={width}
+        height={height}
+        panelCount={panelCount}
+      />
     );
-  },
-  // This is the default shallowEqual implementation, but with custom behavior for the `size` prop.
-  (prevProps: any, nextProps: any) => {
-    if (Object.is(prevProps, nextProps)) return true;
-    if (typeof prevProps !== 'object' || prevProps === null) return false;
-    if (typeof nextProps !== 'object' || nextProps === null) return false;
-
-    const keysA = Object.keys(prevProps);
-    const keysB = Object.keys(nextProps);
-    if (keysA.length !== keysB.length) return false;
-
-    // eslint-disable-next-line no-restricted-syntax
-    for (const key of keysA) {
-      if (key === 'size') {
-        // SizeMe injects a new `size` object every time, even if the width/height doesn't change,
-        // so we chech that one manually.
-        if (prevProps[key].width !== nextProps[key].width) return false;
-        if (prevProps[key].height !== nextProps[key].height) return false;
-      } else {
-        if (!Object.prototype.hasOwnProperty.call(nextProps, key)) return false;
-        if (!Object.is(prevProps[key], nextProps[key])) return false;
-      }
-    }
-
-    return true;
   }
-);
 
-const SizedApp = (props: Omit<AppProps, 'width' | 'height'>) => (
-  <ResizeObserver>
-    {({ width, height }) => <App {...props} {...{ width, height }} />}
-  </ResizeObserver>
-);
+  return (
+    <View ref={ref}>
+      <Global styles={createGlobal} />
+      <Symbols icons={['folder', 'component', 'document', 'bookmarkhollow']} />
+      {content}
+    </View>
+  );
+};
 
 App.displayName = 'App';
 
-export default SizedApp;
+export default App;
diff --git a/code/ui/manager/src/components/layout/container.tsx b/code/ui/manager/src/components/layout/container.tsx
index e65de7bd71fe..d9e482b162c8 100644
--- a/code/ui/manager/src/components/layout/container.tsx
+++ b/code/ui/manager/src/components/layout/container.tsx
@@ -349,9 +349,14 @@ class Layout extends Component<LayoutProps, LayoutState> {
     viewMode: undefined,
   };
 
+  navRef: React.RefObject<HTMLDivElement>;
+
+  panelRef: React.RefObject<HTMLDivElement>;
+
   constructor(props: LayoutProps) {
     super(props);
-
+    this.navRef = React.createRef();
+    this.panelRef = React.createRef();
     const { bounds, options } = props;
 
     const { resizerNav, resizerPanel } = persistence.get();
@@ -533,8 +538,9 @@ class Layout extends Component<LayoutProps, LayoutState> {
             onStart={this.setDragNav}
             onDrag={this.resizeNav}
             onStop={this.unsetDrag}
+            nodeRef={this.navRef}
           >
-            <Handle axis="x" isDragging={isDragging === 'nav'} />
+            <Handle ref={this.navRef} axis="x" isDragging={isDragging === 'nav'} />
           </Draggable>
         )}
 
@@ -560,8 +566,10 @@ class Layout extends Component<LayoutProps, LayoutState> {
             onStart={this.setDragPanel}
             onDrag={this.resizePanel}
             onStop={this.unsetDrag}
+            nodeRef={this.panelRef}
           >
             <Handle
+              ref={this.panelRef}
               isDragging={isDragging === 'panel'}
               style={
                 isPanelBottom