[DataGrid] Improve resize performance (#15549)

Co-authored-by: Andrew Cherniavskyi <[email protected]>

packages/x-data-grid/src/hooks/core/useGridRefs.ts

@@ -5,7 +5,7 @@ export const useGridRefs = <PrivateApi extends GridPrivateApiCommon>(
   apiRef: React.MutableRefObject<PrivateApi>,
 ) => {
   const rootElementRef = React.useRef<HTMLDivElement>(null);
-  const mainElementRef = React.useRef<HTMLDivElement>(null);
+  const mainElementRef = React.useRef<HTMLDivElement | null>(null);
   const virtualScrollerRef = React.useRef<HTMLDivElement>(null);
   const virtualScrollbarVerticalRef = React.useRef<HTMLDivElement>(null);
   const virtualScrollbarHorizontalRef = React.useRef<HTMLDivElement>(null);

packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx

@@ -6,8 +6,8 @@ import {
 } from '@mui/utils';
 import useLazyRef from '@mui/utils/useLazyRef';
 import useTimeout from '@mui/utils/useTimeout';
-import { useResizeObserver } from '@mui/x-internals/useResizeObserver';
 import { useRtl } from '@mui/system/RtlProvider';
+import reactMajor from '@mui/x-internals/reactMajor';
 import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
@@ -136,7 +136,57 @@ export const useGridVirtualScroller = () => {
   const columnsTotalWidth = dimensions.columnsTotalWidth;
   const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector);
 
-  useResizeObserver(mainRef, () => apiRef.current.resize());
+  const mainRefCallback = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      mainRef.current = node;
+
+      if (!node) {
+        return undefined;
+      }
+
+      const initialRect = node.getBoundingClientRect();
+      let lastSize = {
+        width: initialRect.width,
+        height: initialRect.height,
+      };
+
+      apiRef.current.publishEvent('resize', lastSize);
+
+      if (typeof ResizeObserver === 'undefined') {
+        return undefined;
+      }
+
+      const observer = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (!entry) {
+          return;
+        }
+
+        const newSize = {
+          width: entry.contentRect.width,
+          height: entry.contentRect.height,
+        };
+
+        if (newSize.width === lastSize.width && newSize.height === lastSize.height) {
+          return;
+        }
+
+        apiRef.current.publishEvent('resize', newSize);
+        lastSize = newSize;
+      });
+
+      observer.observe(node);
+
+      if (reactMajor >= 19) {
+        return () => {
+          mainRef.current = null;
+          observer.disconnect();
+        };
+      }
+      return undefined;
+    },
+    [apiRef, mainRef],
+  );
 
   /*
    * Scroll context logic
@@ -550,11 +600,6 @@ export const useGridVirtualScroller = () => {
     apiRef.current.publishEvent('virtualScrollerContentSizeChange');
   }, [apiRef, contentSize]);
 
-  useEnhancedEffect(() => {
-    // FIXME: Is this really necessary?
-    apiRef.current.resize();
-  }, [apiRef, rowsMeta.currentPageTotalHeight]);
-
   useEnhancedEffect(() => {
     // TODO a scroll reset should not be necessary
     if (enabledForColumns) {
@@ -597,7 +642,7 @@ export const useGridVirtualScroller = () => {
     setPanels,
     getRows,
     getContainerProps: () => ({
-      ref: mainRef,
+      ref: mainRefCallback,
     }),
     getScrollerProps: () => ({
       ref: scrollerRef,

packages/x-data-grid/src/models/api/gridCoreApi.ts

@@ -67,7 +67,7 @@ export interface GridCorePrivateApi<
   /**
    * The React ref of the grid main container div element.
    */
-  mainElementRef: React.RefObject<HTMLDivElement>;
+  mainElementRef: React.MutableRefObject<HTMLDivElement | null>;
   /**
    * The React ref of the grid's virtual scroller container element.
    */

packages/x-internals/src/reactMajor.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export default parseInt(React.version, 10);