[DataGrid] Avoid <GridRoot /> double-render pass on mount in SPA mode

packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregation.ts

@@ -63,6 +63,7 @@ export const useGridAggregation = (
       const currentModel = gridAggregationModelSelector(apiRef);
       if (currentModel !== model) {
         apiRef.current.setState(mergeStateWithAggregationModel(model));
+        apiRef.current.updateColumns([]);
         apiRef.current.forceUpdate();
       }
     },

packages/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx

@@ -344,7 +344,14 @@ describe('<DataGridPro /> - Events params', () => {
         rowCount={50}
       />,
     );
-    act(() => apiRef.current.publishEvent('scrollPositionChange', { left: 0, top: 3 * 52 }));
+    act(() => {
+      apiRef.current.publishEvent('renderedRowsIntervalChange', {
+        firstRowIndex: 3,
+        lastRowIndex: 6,
+        firstColumnIndex: 0,
+        lastColumnIndex: 0,
+      });
+    });
     expect(handleFetchRows.callCount).to.equal(1);
   });
 

packages/x-data-grid/package.json

@@ -52,7 +52,8 @@
     "@mui/x-internals": "workspace:*",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "reselect": "^5.1.1"
+    "reselect": "^5.1.1",
+    "use-sync-external-store": "^1.0.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
@@ -77,6 +78,7 @@
     "@mui/system": "^5.16.7",
     "@mui/types": "^7.2.15",
     "@types/prop-types": "^15.7.13",
+    "@types/use-sync-external-store": "^0.0.6",
     "rimraf": "^6.0.1"
   },
   "engines": {

packages/x-data-grid/src/components/containers/GridRoot.tsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import {
   unstable_useForkRef as useForkRef,
-  unstable_useEnhancedEffect as useEnhancedEffect,
   unstable_capitalize as capitalize,
   unstable_composeClasses as composeClasses,
 } from '@mui/utils';
@@ -17,6 +16,7 @@ import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { gridDensitySelector } from '../../hooks/features/density/densitySelector';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { GridDensity } from '../../models/gridDensity';
+import { useIsSSR } from '../../hooks/utils/useIsSSR';
 
 export interface GridRootProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -56,13 +56,9 @@ const GridRoot = React.forwardRef<HTMLDivElement, GridRootProps>(function GridRo
 
   const classes = useUtilityClasses(ownerState, density);
 
-  // Our implementation of <NoSsr />
-  const [mountedState, setMountedState] = React.useState(false);
-  useEnhancedEffect(() => {
-    setMountedState(true);
-  }, []);
+  const isSSR = useIsSSR();
 
-  if (!mountedState) {
+  if (isSSR) {
     return null;
   }
 

packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx

@@ -110,12 +110,6 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
   const offsetLeft = computeOffsetLeft(columnPositions, renderContext, pinnedColumns.left.length);
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
 
-  React.useEffect(() => {
-    if (apiRef.current.columnHeadersContainerRef.current) {
-      apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
-    }
-  }, [apiRef]);
-
   const handleColumnResizeStart = React.useCallback<GridEventListener<'columnResizeStart'>>(
     (params) => setResizeCol(params.field),
     [],

packages/x-data-grid/src/hooks/features/columns/useGridColumns.tsx

@@ -396,6 +396,14 @@ export function useGridColumns(
   ) => {
     if (prevInnerWidth.current !== viewportInnerSize.width) {
       prevInnerWidth.current = viewportInnerSize.width;
+
+      const hasFlexColumns = gridVisibleColumnDefinitionsSelector(apiRef).some(
+        (col) => col.flex && col.flex > 0,
+      );
+      if (!hasFlexColumns) {
+        return;
+      }
+
       setGridColumnsState(
         hydrateColumnsWidth(
           gridColumnsStateSelector(apiRef.current.state),

packages/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts

@@ -96,6 +96,7 @@ export function useGridDimensions(
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
+  const isFirstSizing = React.useRef(true);
   const validRowHeight = React.useMemo(
     () =>
       getValidRowHeight(
@@ -160,6 +161,10 @@ export function useGridDimensions(
   }, [apiRef, props.pagination, props.paginationMode, props.getRowHeight, rowHeight]);
 
   const updateDimensions = React.useCallback(() => {
+    // No need to calculate dimension until we have the root size
+    if (isFirstSizing.current) {
+      return;
+    }
     const rootElement = apiRef.current.rootElementRef.current;
     const pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
 
@@ -323,7 +328,6 @@ export function useGridDimensions(
     set('--height', `${dimensionsState.rowHeight}px`);
   }, [root, dimensionsState]);
 
-  const isFirstSizing = React.useRef(true);
   const handleResize = React.useCallback<GridEventListener<'resize'>>(
     (size) => {
       rootDimensionsRef.current = size;
@@ -368,8 +372,6 @@ export function useGridDimensions(
     [props.autoHeight, debouncedSetSavedSize, logger],
   );
 
-  useEnhancedEffect(updateDimensions, [updateDimensions]);
-
   useGridApiOptionHandler(apiRef, 'sortedRowsSet', updateDimensions);
   useGridApiOptionHandler(apiRef, 'paginationModelChange', updateDimensions);
   useGridApiOptionHandler(apiRef, 'columnsChange', updateDimensions);

packages/x-data-grid/src/hooks/features/pagination/useGridPagination.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
-
 import {
   throwIfPageSizeExceedsTheLimit,
   getDefaultGridPaginationModel,
@@ -20,6 +19,7 @@ export const paginationStateInitializer: GridStateInitializer<
     | 'autoPageSize'
     | 'signature'
     | 'paginationMeta'
+    | 'paginationMode'
   >
 > = (state, props) => {
   const paginationModel = {
@@ -29,7 +29,10 @@ export const paginationStateInitializer: GridStateInitializer<
 
   throwIfPageSizeExceedsTheLimit(paginationModel.pageSize, props.signature);
 
-  const rowCount = props.rowCount ?? props.initialState?.pagination?.rowCount;
+  const rowCount =
+    props.rowCount ??
+    props.initialState?.pagination?.rowCount ??
+    (props.paginationMode === 'client' ? state.rows?.totalRowCount : undefined);
   const meta = props.paginationMeta ?? props.initialState?.pagination?.meta ?? {};
   return {
     ...state,

packages/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { ResizeObserver } from '../../../utils/ResizeObserver';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridRowsMetaApi, GridRowsMetaPrivateApi } from '../../../models/api/gridRowsMetaApi';
@@ -255,7 +256,7 @@ export const useGridRowsMeta = (
 
   // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
   // Because of variable row height this is needed for the virtualization
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     hydrateRowsMeta();
   }, [filterModel, paginationState, sortModel, hydrateRowsMeta]);
 

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

@@ -146,8 +146,8 @@ export const useGridVirtualScroller = () => {
 
       const initialRect = node.getBoundingClientRect();
       let lastSize = {
-        width: initialRect.width,
-        height: initialRect.height,
+        width: roundToSubPixel(initialRect.width),
+        height: roundToSubPixel(initialRect.height),
       };
 
       apiRef.current.publishEvent('resize', lastSize);
@@ -163,8 +163,8 @@ export const useGridVirtualScroller = () => {
         }
 
         const newSize = {
-          width: entry.contentRect.width,
-          height: entry.contentRect.height,
+          width: roundToSubPixel(entry.contentRect.width),
+          height: roundToSubPixel(entry.contentRect.height),
         };
 
         if (newSize.width === lastSize.width && newSize.height === lastSize.height) {
@@ -1104,3 +1104,7 @@ function bufferForDirection(
       throw new Error('unreachable');
   }
 }
+
+function roundToSubPixel(value: number) {
+  return Math.round(value * 10) / 10;
+}

packages/x-data-grid/src/hooks/utils/useIsSSR.ts

@@ -0,0 +1,10 @@
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+
+const emptySubscribe = () => () => {};
+
+export const useIsSSR = () =>
+  useSyncExternalStore(
+    emptySubscribe,
+    () => false,
+    () => true,
+  );

packages/x-data-grid/src/tests/layout.DataGrid.test.tsx

@@ -1278,20 +1278,21 @@ describe('<DataGrid /> - Layout & warnings', () => {
     }
 
     expect(() => {
+      const columns = [
+        { field: 'id', flex: 1 },
+        { field: 'id', flex: 1 },
+      ];
+      const rows = [{ id: 1 }];
       render(
         <div style={{ height: 200, width: 400 }}>
-          <DataGrid
-            rows={[{ id: 1 }]}
-            columns={[
-              { field: 'id', flex: 1 },
-              { field: 'id', flex: 1 },
-            ]}
-          />
+          <DataGrid rows={rows} columns={columns} />
         </div>,
       );
     }).toErrorDev([
       'Encountered two children with the same key, `id`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.',
       'Encountered two children with the same key, `id`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.',
+      'Encountered two children with the same key, `id`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.',
+      'Encountered two children with the same key, `id`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.',
     ]);
   });