@mui/x-data-grid 8.29.0 → 8.29.2

package/CHANGELOG.md

@@ -5,8 +5,111 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.29.2
+
+_Jul 2, 2026_
+
+We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+Special thanks go out to these community members for their valuable contributions:
+@Anexus5919, @timbuckley
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @brijeshb42, @cherniavskii, @LukasTy, @MBilalShafi
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.29.2`
+
+- [DataGrid] Avoid reading `type` of `undefined` in `gridRowUtils` (#22963) @timbuckley
+- [DataGrid] Define `overflowAnchor` style at the right element (#22860) @arminmeh
+- [DataGrid] Fix panel placement jump on mount (#22946) @cherniavskii
+- [DataGrid] Fix scrollbars not showing up on scroll on iOS (#22884) @cherniavskii
+- [DataGrid] Wait for rows before reacting on `autosizeOnMount` (#22886) @MBilalShafi
+
+#### `@mui/x-data-grid-pro@8.29.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.29.2`.
+
+#### `@mui/x-data-grid-premium@8.29.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.29.2`, plus:
+
+- [DataGridPremium] Escape `singleSelect` values in Excel export with `escapeFormulas` enabled (#22966) @Anexus5919
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.29.2`
+
+- [pickers] Fix localized digit crash (#23010) @alexfauquette
+- [pickers] Respect explicit `notched` prop on the outlined `PickersTextField` (#22875) (#22893) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.29.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.29.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.29.2`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@8.29.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.29.2`.
+
+#### `@mui/x-charts-premium@8.29.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.29.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.29.2`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.29.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.29.2`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.29.2`
+
+Internal changes.
+
+### Core
+
+- [code-infra] Pin mui-public actions to nearest git hash (#22824) @brijeshb42
+- [internal] Switch resolutions to workspace overrides (#22865) @cherniavskii
+
+### Miscellaneous
+
+- [virtualizer] Improve the dimensions' initial state (#22890) @arminmeh
+- [virtualizer] Remeasure scrollbars when layout changes (#23003) @arminmeh
+
+## 8.29.1
+
+_Jun 11, 2026_
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.29.1`
+
+- [DataGrid] Prevent React state update before mount (#22749) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.29.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.29.1`.
+
+#### `@mui/x-data-grid-premium@8.29.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.29.1`.
+
 ## 8.29.0
-<!-- generated comparing v8.28.7..v8.x -->
+
 _Jun 5, 2026_
 
 We'd like to extend a big thank you to the 2 contributors who made this release possible. Here are some highlights ✨:

package/components/columnsPanel/ColumnsPanelTrigger.js

@@ -51,9 +51,9 @@ const ColumnsPanelTrigger = exports.ColumnsPanelTrigger = (0, _forwardRef.forwar
   };
   const resolvedClassName = typeof className === 'function' ? className(state) : className;
   const {
-    columnsPanelTriggerRef
+    triggers
   } = (0, _GridPanelContext.useGridPanelContext)();
-  const handleRef = (0, _useForkRef.default)(ref, columnsPanelTriggerRef);
+  const handleRef = (0, _useForkRef.default)(ref, triggers.columnsPanel.setRef);
   const handleClick = event => {
     if (open) {
       apiRef.current.hidePreferences();

package/components/columnsPanel/ColumnsPanelTrigger.mjs

@@ -43,9 +43,9 @@ const ColumnsPanelTrigger = forwardRef(function ColumnsPanelTrigger(props, ref)
   };
   const resolvedClassName = typeof className === 'function' ? className(state) : className;
   const {
-    columnsPanelTriggerRef
+    triggers
   } = useGridPanelContext();
-  const handleRef = useForkRef(ref, columnsPanelTriggerRef);
+  const handleRef = useForkRef(ref, triggers.columnsPanel.setRef);
   const handleClick = event => {
     if (open) {
       apiRef.current.hidePreferences();

package/components/containers/GridRootStyles.js

@@ -126,11 +126,12 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     minHeight: 0,
     flexDirection: 'column',
     overflow: 'hidden',
-    overflowAnchor: 'none',
-    // Keep the same scrolling position
     transform: 'translate(0, 0)',
     // Create a stacking context to keep scrollbars from showing on top
 
+    [`& .${_gridClasses.gridClasses.virtualScroller}`]: {
+      overflowAnchor: 'none' // Keep the same scrolling position
+    },
     [`.${_gridClasses.gridClasses.main} > *:first-child${ignoreSsrWarning}`]: {
       borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
       borderTopRightRadius: 'var(--unstable_DataGrid-radius)'

package/components/containers/GridRootStyles.mjs

@@ -120,11 +120,12 @@ export const GridRootStyles = styled('div', {
     minHeight: 0,
     flexDirection: 'column',
     overflow: 'hidden',
-    overflowAnchor: 'none',
-    // Keep the same scrolling position
     transform: 'translate(0, 0)',
     // Create a stacking context to keep scrollbars from showing on top
 
+    [`& .${c.virtualScroller}`]: {
+      overflowAnchor: 'none' // Keep the same scrolling position
+    },
     [`.${c.main} > *:first-child${ignoreSsrWarning}`]: {
       borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
       borderTopRightRadius: 'var(--unstable_DataGrid-radius)'

package/components/filterPanel/FilterPanelTrigger.js

@@ -54,9 +54,9 @@ const FilterPanelTrigger = exports.FilterPanelTrigger = (0, _forwardRef.forwardR
   };
   const resolvedClassName = typeof className === 'function' ? className(state) : className;
   const {
-    filterPanelTriggerRef
+    triggers
   } = (0, _GridPanelContext.useGridPanelContext)();
-  const handleRef = (0, _useForkRef.default)(ref, filterPanelTriggerRef);
+  const handleRef = (0, _useForkRef.default)(ref, triggers.filterPanel.setRef);
   const handleClick = event => {
     if (open) {
       apiRef.current.hidePreferences();

package/components/filterPanel/FilterPanelTrigger.mjs

@@ -46,9 +46,9 @@ const FilterPanelTrigger = forwardRef(function FilterPanelTrigger(props, ref) {
   };
   const resolvedClassName = typeof className === 'function' ? className(state) : className;
   const {
-    filterPanelTriggerRef
+    triggers
   } = useGridPanelContext();
-  const handleRef = useForkRef(ref, filterPanelTriggerRef);
+  const handleRef = useForkRef(ref, triggers.filterPanel.setRef);
   const handleClick = event => {
     if (open) {
       apiRef.current.hidePreferences();

package/components/panel/GridPanelContext.d.mts

@@ -1,8 +1,14 @@
 import * as React from 'react';
+export interface GridPanelTrigger {
+  setRef: (instance: HTMLElement | null) => void;
+  element: HTMLElement | null;
+}
 export interface GridPanelContextValue {
-  columnsPanelTriggerRef: React.RefObject<HTMLButtonElement | null>;
-  filterPanelTriggerRef: React.RefObject<HTMLButtonElement | null>;
-  aiAssistantPanelTriggerRef: React.RefObject<HTMLButtonElement | null>;
+  triggers: {
+    filterPanel: GridPanelTrigger;
+    aiAssistantPanel: GridPanelTrigger;
+    columnsPanel: GridPanelTrigger;
+  };
 }
 export declare const GridPanelContext: React.Context<GridPanelContextValue | undefined>;
 export declare function useGridPanelContext(): GridPanelContextValue;

package/components/panel/GridPanelContext.d.ts

@@ -1,8 +1,14 @@
 import * as React from 'react';
+export interface GridPanelTrigger {
+  setRef: (instance: HTMLElement | null) => void;
+  element: HTMLElement | null;
+}
 export interface GridPanelContextValue {
-  columnsPanelTriggerRef: React.RefObject<HTMLButtonElement | null>;
-  filterPanelTriggerRef: React.RefObject<HTMLButtonElement | null>;
-  aiAssistantPanelTriggerRef: React.RefObject<HTMLButtonElement | null>;
+  triggers: {
+    filterPanel: GridPanelTrigger;
+    aiAssistantPanel: GridPanelTrigger;
+    columnsPanel: GridPanelTrigger;
+  };
 }
 export declare const GridPanelContext: React.Context<GridPanelContextValue | undefined>;
 export declare function useGridPanelContext(): GridPanelContextValue;

package/components/panel/GridPanelContext.js

@@ -2,12 +2,14 @@
 'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridPanelContext = void 0;
 exports.GridPanelContextProvider = GridPanelContextProvider;
 exports.useGridPanelContext = useGridPanelContext;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
 const GridPanelContext = exports.GridPanelContext = /*#__PURE__*/React.createContext(undefined);
@@ -22,14 +24,46 @@ function useGridPanelContext() {
 function GridPanelContextProvider({
   children
 }) {
-  const columnsPanelTriggerRef = React.useRef(null);
-  const filterPanelTriggerRef = React.useRef(null);
-  const aiAssistantPanelTriggerRef = React.useRef(null);
+  const [triggerElements, setTriggerElements] = React.useState({
+    columnsPanel: null,
+    filterPanel: null,
+    aiAssistantPanel: null
+  });
+  const updateTriggerElement = React.useCallback((key, instance) => {
+    setTriggerElements(prev => {
+      if (prev[key] === instance) {
+        return prev;
+      }
+      return (0, _extends2.default)({}, prev, {
+        [key]: instance
+      });
+    });
+  }, []);
+  const setColumnsPanelTrigger = React.useCallback(instance => {
+    updateTriggerElement('columnsPanel', instance);
+  }, [updateTriggerElement]);
+  const setFilterPanelTrigger = React.useCallback(instance => {
+    updateTriggerElement('filterPanel', instance);
+  }, [updateTriggerElement]);
+  const setAiAssistantPanelTrigger = React.useCallback(instance => {
+    updateTriggerElement('aiAssistantPanel', instance);
+  }, [updateTriggerElement]);
   const value = React.useMemo(() => ({
-    columnsPanelTriggerRef,
-    filterPanelTriggerRef,
-    aiAssistantPanelTriggerRef
-  }), []);
+    triggers: {
+      columnsPanel: {
+        element: triggerElements.columnsPanel,
+        setRef: setColumnsPanelTrigger
+      },
+      filterPanel: {
+        element: triggerElements.filterPanel,
+        setRef: setFilterPanelTrigger
+      },
+      aiAssistantPanel: {
+        element: triggerElements.aiAssistantPanel,
+        setRef: setAiAssistantPanelTrigger
+      }
+    }
+  }), [triggerElements, setColumnsPanelTrigger, setFilterPanelTrigger, setAiAssistantPanelTrigger]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelContext.Provider, {
     value: value,
     children: children

package/components/panel/GridPanelContext.mjs

@@ -1,5 +1,6 @@
 'use client';
 
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GridPanelContext = /*#__PURE__*/React.createContext(undefined);
@@ -14,14 +15,46 @@ export function useGridPanelContext() {
 export function GridPanelContextProvider({
   children
 }) {
-  const columnsPanelTriggerRef = React.useRef(null);
-  const filterPanelTriggerRef = React.useRef(null);
-  const aiAssistantPanelTriggerRef = React.useRef(null);
+  const [triggerElements, setTriggerElements] = React.useState({
+    columnsPanel: null,
+    filterPanel: null,
+    aiAssistantPanel: null
+  });
+  const updateTriggerElement = React.useCallback((key, instance) => {
+    setTriggerElements(prev => {
+      if (prev[key] === instance) {
+        return prev;
+      }
+      return _extends({}, prev, {
+        [key]: instance
+      });
+    });
+  }, []);
+  const setColumnsPanelTrigger = React.useCallback(instance => {
+    updateTriggerElement('columnsPanel', instance);
+  }, [updateTriggerElement]);
+  const setFilterPanelTrigger = React.useCallback(instance => {
+    updateTriggerElement('filterPanel', instance);
+  }, [updateTriggerElement]);
+  const setAiAssistantPanelTrigger = React.useCallback(instance => {
+    updateTriggerElement('aiAssistantPanel', instance);
+  }, [updateTriggerElement]);
   const value = React.useMemo(() => ({
-    columnsPanelTriggerRef,
-    filterPanelTriggerRef,
-    aiAssistantPanelTriggerRef
-  }), []);
+    triggers: {
+      columnsPanel: {
+        element: triggerElements.columnsPanel,
+        setRef: setColumnsPanelTrigger
+      },
+      filterPanel: {
+        element: triggerElements.filterPanel,
+        setRef: setFilterPanelTrigger
+      },
+      aiAssistantPanel: {
+        element: triggerElements.aiAssistantPanel,
+        setRef: setAiAssistantPanelTrigger
+      }
+    }
+  }), [triggerElements, setColumnsPanelTrigger, setFilterPanelTrigger, setAiAssistantPanelTrigger]);
   return /*#__PURE__*/_jsx(GridPanelContext.Provider, {
     value: value,
     children: children

package/components/panel/GridPreferencesPanel.js

@@ -20,21 +20,19 @@ function GridPreferencesPanel() {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const preferencePanelState = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
   const {
-    columnsPanelTriggerRef,
-    filterPanelTriggerRef,
-    aiAssistantPanelTriggerRef
+    triggers
   } = (0, _GridPanelContext.useGridPanelContext)();
   const panelContent = apiRef.current.unstable_applyPipeProcessors('preferencePanel', null, preferencePanelState.openedPanelValue ?? _gridPreferencePanelsValue.GridPreferencePanelsValue.filters);
   let target = null;
   switch (preferencePanelState.openedPanelValue) {
     case _gridPreferencePanelsValue.GridPreferencePanelsValue.filters:
-      target = filterPanelTriggerRef.current;
+      target = triggers.filterPanel.element;
       break;
     case _gridPreferencePanelsValue.GridPreferencePanelsValue.columns:
-      target = columnsPanelTriggerRef.current;
+      target = triggers.columnsPanel.element;
       break;
     case _gridPreferencePanelsValue.GridPreferencePanelsValue.aiAssistant:
-      target = aiAssistantPanelTriggerRef.current;
+      target = triggers.aiAssistantPanel.element;
       break;
     default:
   }

package/components/panel/GridPreferencesPanel.mjs

@@ -13,21 +13,19 @@ export function GridPreferencesPanel() {
   const rootProps = useGridRootProps();
   const preferencePanelState = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   const {
-    columnsPanelTriggerRef,
-    filterPanelTriggerRef,
-    aiAssistantPanelTriggerRef
+    triggers
   } = useGridPanelContext();
   const panelContent = apiRef.current.unstable_applyPipeProcessors('preferencePanel', null, preferencePanelState.openedPanelValue ?? GridPreferencePanelsValue.filters);
   let target = null;
   switch (preferencePanelState.openedPanelValue) {
     case GridPreferencePanelsValue.filters:
-      target = filterPanelTriggerRef.current;
+      target = triggers.filterPanel.element;
       break;
     case GridPreferencePanelsValue.columns:
-      target = columnsPanelTriggerRef.current;
+      target = triggers.columnsPanel.element;
       break;
     case GridPreferencePanelsValue.aiAssistant:
-      target = aiAssistantPanelTriggerRef.current;
+      target = triggers.aiAssistantPanel.element;
       break;
     default:
   }

package/components/toolbar/GridToolbarColumnsButton.js

@@ -34,10 +34,10 @@ const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = (0, _forward
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
-    columnsPanelTriggerRef
+    triggers
   } = (0, _GridPanelContext.useGridPanelContext)();
   const preferencePanel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
-  const handleRef = (0, _useForkRef.default)(ref, columnsPanelTriggerRef);
+  const handleRef = (0, _useForkRef.default)(ref, triggers.columnsPanel.setRef);
   const showColumns = event => {
     if (preferencePanel.open && preferencePanel.openedPanelValue === _gridPreferencePanelsValue.GridPreferencePanelsValue.columns) {
       apiRef.current.hidePreferences();

package/components/toolbar/GridToolbarColumnsButton.mjs

@@ -27,10 +27,10 @@ const GridToolbarColumnsButton = forwardRef(function GridToolbarColumnsButton(pr
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const {
-    columnsPanelTriggerRef
+    triggers
   } = useGridPanelContext();
   const preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
-  const handleRef = useForkRef(ref, columnsPanelTriggerRef);
+  const handleRef = useForkRef(ref, triggers.columnsPanel.setRef);
   const showColumns = event => {
     if (preferencePanel.open && preferencePanel.openedPanelValue === GridPreferencePanelsValue.columns) {
       apiRef.current.hidePreferences();

package/components/toolbar/GridToolbarFilterButton.js

@@ -62,9 +62,9 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = (0, _forwardRe
   const filterButtonId = (0, _useId.default)();
   const filterPanelId = (0, _useId.default)();
   const {
-    filterPanelTriggerRef
+    triggers
   } = (0, _GridPanelContext.useGridPanelContext)();
-  const handleRef = (0, _useForkRef.default)(ref, filterPanelTriggerRef);
+  const handleRef = (0, _useForkRef.default)(ref, triggers.filterPanel.setRef);
   const tooltipContentNode = React.useMemo(() => {
     if (preferencePanel.open) {
       return apiRef.current.getLocaleText('toolbarFiltersTooltipHide');

package/components/toolbar/GridToolbarFilterButton.mjs

@@ -55,9 +55,9 @@ const GridToolbarFilterButton = forwardRef(function GridToolbarFilterButton(prop
   const filterButtonId = useId();
   const filterPanelId = useId();
   const {
-    filterPanelTriggerRef
+    triggers
   } = useGridPanelContext();
-  const handleRef = useForkRef(ref, filterPanelTriggerRef);
+  const handleRef = useForkRef(ref, triggers.filterPanel.setRef);
   const tooltipContentNode = React.useMemo(() => {
     if (preferencePanel.open) {
       return apiRef.current.getLocaleText('toolbarFiltersTooltipHide');

package/components/virtualization/GridVirtualScrollbar.js

@@ -9,11 +9,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.scrollbarSizeCssExpression = exports.ScrollbarCorner = exports.GridVirtualScrollbar = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
-var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
-var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
-var _useOnMount = require("../../hooks/utils/useOnMount");
+var _platform = require("@mui/x-internals/platform");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _hooks = require("../../hooks");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -45,7 +43,13 @@ const Scrollbar = (0, _styles.styled)('div', {
   '&:hover': {
     zIndex: 70
   },
-  '--size': scrollbarSizeCssExpression
+  '--size': scrollbarSizeCssExpression,
+  // [iOS-scrollbar-swap]
+  // On iOS, native scrollbars of the `GridVirtualScroller` are shown instead,
+  // so hide these to avoid a duplicate thumb.
+  [_platform.iOSMediaQuery]: {
+    display: 'none'
+  }
 });
 const ScrollbarVertical = (0, _styles.styled)(Scrollbar, {
   slot: 'internal'
@@ -91,64 +95,16 @@ const ScrollbarCorner = exports.ScrollbarCorner = (0, _styles.styled)(Scrollbar,
 const GridVirtualScrollbar = exports.GridVirtualScrollbar = (0, _forwardRef.forwardRef)(function GridVirtualScrollbar(props, ref) {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const isLocked = React.useRef(false);
-  const lastPosition = React.useRef(0);
-  const scrollbarRef = React.useRef(null);
   const classes = useUtilityClasses(rootProps, props.position);
   const dimensions = (0, _hooks.useGridSelector)(apiRef, _hooks.gridDimensionsSelector);
   const propertyDimension = props.position === 'vertical' ? 'height' : 'width';
-  const propertyScroll = props.position === 'vertical' ? 'scrollTop' : 'scrollLeft';
-  const propertyScrollPosition = props.position === 'vertical' ? 'top' : 'left';
   const scrollbarInnerSize = props.position === 'horizontal' ? dimensions.minimumSize.width : dimensions.minimumSize.height - dimensions.headersTotalHeight;
-  const onScrollerScroll = (0, _useEventCallback.default)(() => {
-    const scrollbar = scrollbarRef.current;
-    const scrollPosition = props.scrollPosition.current;
-    if (!scrollbar) {
-      return;
-    }
-    if (scrollPosition[propertyScrollPosition] === lastPosition.current) {
-      return;
-    }
-    lastPosition.current = scrollPosition[propertyScrollPosition];
-    if (isLocked.current) {
-      isLocked.current = false;
-      return;
-    }
-    isLocked.current = true;
-    scrollbar[propertyScroll] = props.scrollPosition.current[propertyScrollPosition];
-  });
-  const onScrollbarScroll = (0, _useEventCallback.default)(() => {
-    const scroller = apiRef.current.virtualScrollerRef.current;
-    const scrollbar = scrollbarRef.current;
-    if (!scrollbar) {
-      return;
-    }
-    if (isLocked.current) {
-      isLocked.current = false;
-      return;
-    }
-    isLocked.current = true;
-    scroller[propertyScroll] = scrollbar[propertyScroll];
-  });
-  (0, _useOnMount.useOnMount)(() => {
-    const scroller = apiRef.current.virtualScrollerRef.current;
-    const scrollbar = scrollbarRef.current;
-    const options = {
-      passive: true
-    };
-    scroller.addEventListener('scroll', onScrollerScroll, options);
-    scrollbar.addEventListener('scroll', onScrollbarScroll, options);
-    return () => {
-      scroller.removeEventListener('scroll', onScrollerScroll, options);
-      scrollbar.removeEventListener('scroll', onScrollbarScroll, options);
-    };
-  });
   const Container = props.position === 'vertical' ? ScrollbarVertical : ScrollbarHorizontal;
   const scrollbarInnerStyle = React.useMemo(() => ({
     [propertyDimension]: `${scrollbarInnerSize}px`
   }), [propertyDimension, scrollbarInnerSize]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
-    ref: (0, _useForkRef.default)(ref, scrollbarRef),
+    ref: ref,
     className: classes.root,
     tabIndex: -1,
     "aria-hidden": "true"

package/components/virtualization/GridVirtualScrollbar.mjs

@@ -2,11 +2,9 @@
 
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
-import useEventCallback from '@mui/utils/useEventCallback';
-import useForkRef from '@mui/utils/useForkRef';
 import composeClasses from '@mui/utils/composeClasses';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { useOnMount } from "../../hooks/utils/useOnMount.mjs";
+import { iOSMediaQuery } from '@mui/x-internals/platform';
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.mjs";
 import { gridDimensionsSelector, useGridSelector } from "../../hooks/index.mjs";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
@@ -38,7 +36,13 @@ const Scrollbar = styled('div', {
   '&:hover': {
     zIndex: 70
   },
-  '--size': scrollbarSizeCssExpression
+  '--size': scrollbarSizeCssExpression,
+  // [iOS-scrollbar-swap]
+  // On iOS, native scrollbars of the `GridVirtualScroller` are shown instead,
+  // so hide these to avoid a duplicate thumb.
+  [iOSMediaQuery]: {
+    display: 'none'
+  }
 });
 const ScrollbarVertical = styled(Scrollbar, {
   slot: 'internal'
@@ -84,64 +88,16 @@ export const ScrollbarCorner = styled(Scrollbar, {
 const GridVirtualScrollbar = forwardRef(function GridVirtualScrollbar(props, ref) {
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
-  const isLocked = React.useRef(false);
-  const lastPosition = React.useRef(0);
-  const scrollbarRef = React.useRef(null);
   const classes = useUtilityClasses(rootProps, props.position);
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const propertyDimension = props.position === 'vertical' ? 'height' : 'width';
-  const propertyScroll = props.position === 'vertical' ? 'scrollTop' : 'scrollLeft';
-  const propertyScrollPosition = props.position === 'vertical' ? 'top' : 'left';
   const scrollbarInnerSize = props.position === 'horizontal' ? dimensions.minimumSize.width : dimensions.minimumSize.height - dimensions.headersTotalHeight;
-  const onScrollerScroll = useEventCallback(() => {
-    const scrollbar = scrollbarRef.current;
-    const scrollPosition = props.scrollPosition.current;
-    if (!scrollbar) {
-      return;
-    }
-    if (scrollPosition[propertyScrollPosition] === lastPosition.current) {
-      return;
-    }
-    lastPosition.current = scrollPosition[propertyScrollPosition];
-    if (isLocked.current) {
-      isLocked.current = false;
-      return;
-    }
-    isLocked.current = true;
-    scrollbar[propertyScroll] = props.scrollPosition.current[propertyScrollPosition];
-  });
-  const onScrollbarScroll = useEventCallback(() => {
-    const scroller = apiRef.current.virtualScrollerRef.current;
-    const scrollbar = scrollbarRef.current;
-    if (!scrollbar) {
-      return;
-    }
-    if (isLocked.current) {
-      isLocked.current = false;
-      return;
-    }
-    isLocked.current = true;
-    scroller[propertyScroll] = scrollbar[propertyScroll];
-  });
-  useOnMount(() => {
-    const scroller = apiRef.current.virtualScrollerRef.current;
-    const scrollbar = scrollbarRef.current;
-    const options = {
-      passive: true
-    };
-    scroller.addEventListener('scroll', onScrollerScroll, options);
-    scrollbar.addEventListener('scroll', onScrollbarScroll, options);
-    return () => {
-      scroller.removeEventListener('scroll', onScrollerScroll, options);
-      scrollbar.removeEventListener('scroll', onScrollbarScroll, options);
-    };
-  });
   const Container = props.position === 'vertical' ? ScrollbarVertical : ScrollbarHorizontal;
   const scrollbarInnerStyle = React.useMemo(() => ({
     [propertyDimension]: `${scrollbarInnerSize}px`
   }), [propertyDimension, scrollbarInnerSize]);
   return /*#__PURE__*/_jsx(Container, {
-    ref: useForkRef(ref, scrollbarRef),
+    ref: ref,
     className: classes.root,
     tabIndex: -1,
     "aria-hidden": "true"

package/components/virtualization/GridVirtualScroller.js

@@ -10,6 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _platform = require("@mui/x-internals/platform");
 var _gridDimensionsSelectors = require("../../hooks/features/dimensions/gridDimensionsSelectors");
 var _rows = require("../../hooks/features/rows");
 var _GridScrollArea = require("../GridScrollArea");
@@ -64,6 +65,17 @@ const Scroller = (0, _styles.styled)('div', {
   '&::-webkit-scrollbar': {
     display: 'none' /* Safari and Chrome */
   },
+  // [iOS-scrollbar-swap]
+  // On iOS, virtual scrollbars do not show a thumb unless the user scrolls the element directly:
+  // https://github.com/mui/mui-x/issues/22386
+  // So keep this scroller's own native scrollbars and hide the ones in `GridVirtualScrollbar`
+  // instead to avoid a duplicate thumb.
+  [_platform.iOSMediaQuery]: {
+    scrollbarWidth: 'auto',
+    '&::-webkit-scrollbar': {
+      display: 'block'
+    }
+  },
   '@media print': {
     overflow: 'hidden'
   },

package/components/virtualization/GridVirtualScroller.mjs

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
+import { iOSMediaQuery } from '@mui/x-internals/platform';
 import { gridHasBottomFillerSelector, gridHasScrollXSelector, gridHasScrollYSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.mjs";
 import { gridRowTreeSelector } from "../../hooks/features/rows/index.mjs";
 import { GridScrollArea } from "../GridScrollArea.mjs";
@@ -56,6 +57,17 @@ const Scroller = styled('div', {
   '&::-webkit-scrollbar': {
     display: 'none' /* Safari and Chrome */
   },
+  // [iOS-scrollbar-swap]
+  // On iOS, virtual scrollbars do not show a thumb unless the user scrolls the element directly:
+  // https://github.com/mui/mui-x/issues/22386
+  // So keep this scroller's own native scrollbars and hide the ones in `GridVirtualScrollbar`
+  // instead to avoid a duplicate thumb.
+  [iOSMediaQuery]: {
+    scrollbarWidth: 'auto',
+    '&::-webkit-scrollbar': {
+      display: 'block'
+    }
+  },
   '@media print': {
     overflow: 'hidden'
   },

package/hooks/features/columnResize/useGridColumnResize.js

@@ -25,7 +25,30 @@ var _gridColumnsInterfaces = require("../columns/gridColumnsInterfaces");
 var _columns = require("../columns");
 var _dimensions = require("../dimensions");
 var _headerFiltering = require("../headerFiltering");
+var _pagination = require("../pagination");
 var _columnResizeSelector = require("./columnResizeSelector");
+function isRenderContextReadyForAutosizeOnMount(apiRef) {
+  const dimensions = (0, _dimensions.gridDimensionsSelector)(apiRef);
+  if (!dimensions.isReady) {
+    return false;
+  }
+  const {
+    rows
+  } = (0, _pagination.gridVisibleRowsSelector)(apiRef);
+  if (rows.length === 0) {
+    return true;
+  }
+  const renderContext = (0, _virtualization.gridRenderContextSelector)(apiRef);
+  if (renderContext.lastRowIndex <= renderContext.firstRowIndex) {
+    return false;
+  }
+
+  // If all rows fit in the viewport, wait for them all; otherwise we can only measure the rendered rows.
+  if (!dimensions.hasScrollY) {
+    return renderContext.firstRowIndex === 0 && renderContext.lastRowIndex >= rows.length;
+  }
+  return true;
+}
 function trackFinger(event, currentTouchId) {
   if (currentTouchId !== undefined && event.changedTouches) {
     for (let i = 0; i < event.changedTouches.length; i += 1) {
@@ -589,10 +612,41 @@ const useGridColumnResize = (apiRef, props) => {
   React.useEffect(() => stopListening, [stopListening]);
   (0, _utils.useOnMount)(() => {
     if (props.autosizeOnMount) {
-      Promise.resolve().then(() => {
+      let frameHandle;
+      let unsubscribeStateChange;
+      let unsubscribeRenderedRowsIntervalChange;
+      const cleanupListeners = () => {
+        unsubscribeStateChange?.();
+        unsubscribeRenderedRowsIntervalChange?.();
+        unsubscribeStateChange = undefined;
+        unsubscribeRenderedRowsIntervalChange = undefined;
+      };
+      const runAutosize = () => {
+        frameHandle = undefined;
+        cleanupListeners();
         apiRef.current.autosizeColumns(props.autosizeOptions);
-      });
+      };
+      const scheduleAutosize = () => {
+        if (frameHandle === undefined) {
+          frameHandle = requestAnimationFrame(runAutosize);
+        }
+      };
+      const checkRenderContext = () => {
+        if (isRenderContextReadyForAutosizeOnMount(apiRef)) {
+          scheduleAutosize();
+        }
+      };
+      unsubscribeStateChange = apiRef.current.subscribeEvent('stateChange', checkRenderContext);
+      unsubscribeRenderedRowsIntervalChange = apiRef.current.subscribeEvent('renderedRowsIntervalChange', checkRenderContext);
+      checkRenderContext();
+      return () => {
+        cleanupListeners();
+        if (frameHandle !== undefined) {
+          cancelAnimationFrame(frameHandle);
+        }
+      };
     }
+    return undefined;
   });
   (0, _utils.useGridNativeEventListener)(apiRef, () => apiRef.current.columnHeadersContainerRef?.current, 'touchstart', handleTouchStart, {
     passive: true

package/hooks/features/columnResize/useGridColumnResize.mjs

@@ -10,7 +10,7 @@ import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterC
 import { DEFAULT_GRID_AUTOSIZE_OPTIONS } from "./gridColumnResizeApi.mjs";
 import { gridClasses } from "../../../constants/gridClasses.mjs";
 import { useGridEvent, useGridApiMethod, useGridEventPriority, useGridLogger, useGridNativeEventListener, useGridSelector, useOnMount } from "../../utils/index.mjs";
-import { gridVirtualizationColumnEnabledSelector } from "../virtualization/index.mjs";
+import { gridRenderContextSelector, gridVirtualizationColumnEnabledSelector } from "../virtualization/index.mjs";
 import { createControllablePromise } from "../../../utils/createControllablePromise.mjs";
 import { clamp } from "../../../utils/utils.mjs";
 import { useTimeout } from "../../utils/useTimeout.mjs";
@@ -18,7 +18,30 @@ import { GridPinnedColumnPosition } from "../columns/gridColumnsInterfaces.mjs";
 import { gridColumnsStateSelector } from "../columns/index.mjs";
 import { gridDimensionsSelector } from "../dimensions/index.mjs";
 import { gridHeaderFilteringEnabledSelector } from "../headerFiltering/index.mjs";
+import { gridVisibleRowsSelector } from "../pagination/index.mjs";
 import { gridResizingColumnFieldSelector } from "./columnResizeSelector.mjs";
+function isRenderContextReadyForAutosizeOnMount(apiRef) {
+  const dimensions = gridDimensionsSelector(apiRef);
+  if (!dimensions.isReady) {
+    return false;
+  }
+  const {
+    rows
+  } = gridVisibleRowsSelector(apiRef);
+  if (rows.length === 0) {
+    return true;
+  }
+  const renderContext = gridRenderContextSelector(apiRef);
+  if (renderContext.lastRowIndex <= renderContext.firstRowIndex) {
+    return false;
+  }
+
+  // If all rows fit in the viewport, wait for them all; otherwise we can only measure the rendered rows.
+  if (!dimensions.hasScrollY) {
+    return renderContext.firstRowIndex === 0 && renderContext.lastRowIndex >= rows.length;
+  }
+  return true;
+}
 function trackFinger(event, currentTouchId) {
   if (currentTouchId !== undefined && event.changedTouches) {
     for (let i = 0; i < event.changedTouches.length; i += 1) {
@@ -581,10 +604,41 @@ export const useGridColumnResize = (apiRef, props) => {
   React.useEffect(() => stopListening, [stopListening]);
   useOnMount(() => {
     if (props.autosizeOnMount) {
-      Promise.resolve().then(() => {
+      let frameHandle;
+      let unsubscribeStateChange;
+      let unsubscribeRenderedRowsIntervalChange;
+      const cleanupListeners = () => {
+        unsubscribeStateChange?.();
+        unsubscribeRenderedRowsIntervalChange?.();
+        unsubscribeStateChange = undefined;
+        unsubscribeRenderedRowsIntervalChange = undefined;
+      };
+      const runAutosize = () => {
+        frameHandle = undefined;
+        cleanupListeners();
         apiRef.current.autosizeColumns(props.autosizeOptions);
-      });
+      };
+      const scheduleAutosize = () => {
+        if (frameHandle === undefined) {
+          frameHandle = requestAnimationFrame(runAutosize);
+        }
+      };
+      const checkRenderContext = () => {
+        if (isRenderContextReadyForAutosizeOnMount(apiRef)) {
+          scheduleAutosize();
+        }
+      };
+      unsubscribeStateChange = apiRef.current.subscribeEvent('stateChange', checkRenderContext);
+      unsubscribeRenderedRowsIntervalChange = apiRef.current.subscribeEvent('renderedRowsIntervalChange', checkRenderContext);
+      checkRenderContext();
+      return () => {
+        cleanupListeners();
+        if (frameHandle !== undefined) {
+          cancelAnimationFrame(frameHandle);
+        }
+      };
     }
+    return undefined;
   });
   useGridNativeEventListener(apiRef, () => apiRef.current.columnHeadersContainerRef?.current, 'touchstart', handleTouchStart, {
     passive: true

package/hooks/features/rows/gridRowsUtils.js

@@ -149,7 +149,7 @@ const isAutogeneratedRowNode = rowNode => rowNode.type === 'skeletonRow' || rowN
 exports.isAutogeneratedRowNode = isAutogeneratedRowNode;
 const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows, directChildrenOnly) => {
   const node = tree[parentId];
-  if (node.type !== 'group') {
+  if (node?.type !== 'group') {
     return [];
   }
   const validDescendants = [];

package/hooks/features/rows/gridRowsUtils.mjs

@@ -131,7 +131,7 @@ export const isAutogeneratedRow = row => GRID_ID_AUTOGENERATED in row;
 export const isAutogeneratedRowNode = rowNode => rowNode.type === 'skeletonRow' || rowNode.type === 'footer' || rowNode.type === 'group' && rowNode.isAutoGenerated || rowNode.type === 'pinnedRow' && rowNode.isAutoGenerated;
 export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows, directChildrenOnly) => {
   const node = tree[parentId];
-  if (node.type !== 'group') {
+  if (node?.type !== 'group') {
     return [];
   }
   const validDescendants = [];

package/hooks/utils/useGridSelector.js

@@ -1,6 +1,7 @@
 "use strict";
 'use client';
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,9 +9,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.objectShallowCompare = exports.argsEqual = void 0;
 exports.useGridSelector = useGridSelector;
 var React = _interopRequireWildcard(require("react"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _fastObjectShallowCompare = require("@mui/x-internals/fastObjectShallowCompare");
 var _warning = require("@mui/x-internals/warning");
-var _shim = require("use-sync-external-store/shim");
 var _useLazyRef = require("./useLazyRef");
 const defaultCompare = Object.is;
 const objectShallowCompare = exports.objectShallowCompare = _fastObjectShallowCompare.fastObjectShallowCompare;
@@ -34,10 +35,10 @@ const createRefs = () => ({
   state: null,
   equals: null,
   selector: null,
-  args: undefined
+  args: undefined,
+  storeState: null
 });
 const EMPTY = [];
-const emptyGetSnapshot = () => null;
 function useGridSelector(apiRef, selector, args = undefined, equals = defaultCompare) {
   if (!apiRef.current.state) {
     (0, _warning.warnOnce)(['MUI X: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
@@ -48,6 +49,9 @@ function useGridSelector(apiRef, selector, args = undefined, equals = defaultCom
   // We don't use an initialization function to avoid allocations
   didInit ? null : selector(apiRef, args));
   refs.current.state = state;
+  if (!didInit) {
+    refs.current.storeState = apiRef.current.store.state;
+  }
   refs.current.equals = equals;
   refs.current.selector = selector;
   const prevArgs = refs.current.args;
@@ -58,35 +62,34 @@ function useGridSelector(apiRef, selector, args = undefined, equals = defaultCom
       refs.current.state = newState;
       setState(newState);
     }
+    refs.current.storeState = apiRef.current.store.state;
   }
-  const subscribe = React.useCallback(() => {
-    if (refs.current.subscription) {
-      return null;
-    }
-    refs.current.subscription = apiRef.current.store.subscribe(() => {
+  const updateState = React.useCallback(() => {
+    const storeState = apiRef.current.store.state;
+    if (refs.current.storeState !== storeState) {
       const newState = refs.current.selector(apiRef, refs.current.args);
+      refs.current.storeState = storeState;
       if (!refs.current.equals(refs.current.state, newState)) {
         refs.current.state = newState;
         setState(newState);
       }
-    });
-    return null;
+    }
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   EMPTY);
-  const unsubscribe = React.useCallback(() => {
-    // Fixes issue in React Strict Mode, where getSnapshot is not called
-    if (!refs.current.subscription) {
-      subscribe();
-    }
-    return () => {
-      if (refs.current.subscription) {
-        refs.current.subscription();
-        refs.current.subscription = undefined;
-      }
-    };
+
+  // Why subscribe in an effect instead of during render: a component can render without
+  // ever mounting (e.g. when it suspends during hydration). If it subscribed during render,
+  // it could receive a store update and call `setState` before being mounted (#17077).
+  // Effects only run for mounted components, so subscribing here is safe.
+  //
+  // Using a layout effect because the store may already have changed
+  // between render and mount (e.g. from a child's ref callback or layout effect).
+  // `updateState()` picks up such changes, so the corrected value is shown right away instead of in a second frame.
+  (0, _useEnhancedEffect.default)(() => {
+    updateState();
+    return apiRef.current.store.subscribe(updateState);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, EMPTY);
-  (0, _shim.useSyncExternalStore)(unsubscribe, subscribe, emptyGetSnapshot);
   return state;
 }

package/hooks/utils/useGridSelector.mjs

@@ -1,9 +1,9 @@
 'use client';
 
 import * as React from 'react';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import { warnOnce } from '@mui/x-internals/warning';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { useLazyRef } from "./useLazyRef.mjs";
 const defaultCompare = Object.is;
 export const objectShallowCompare = fastObjectShallowCompare;
@@ -26,10 +26,10 @@ const createRefs = () => ({
   state: null,
   equals: null,
   selector: null,
-  args: undefined
+  args: undefined,
+  storeState: null
 });
 const EMPTY = [];
-const emptyGetSnapshot = () => null;
 export function useGridSelector(apiRef, selector, args = undefined, equals = defaultCompare) {
   if (!apiRef.current.state) {
     warnOnce(['MUI X: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
@@ -40,6 +40,9 @@ export function useGridSelector(apiRef, selector, args = undefined, equals = def
   // We don't use an initialization function to avoid allocations
   didInit ? null : selector(apiRef, args));
   refs.current.state = state;
+  if (!didInit) {
+    refs.current.storeState = apiRef.current.store.state;
+  }
   refs.current.equals = equals;
   refs.current.selector = selector;
   const prevArgs = refs.current.args;
@@ -50,35 +53,34 @@ export function useGridSelector(apiRef, selector, args = undefined, equals = def
       refs.current.state = newState;
       setState(newState);
     }
+    refs.current.storeState = apiRef.current.store.state;
   }
-  const subscribe = React.useCallback(() => {
-    if (refs.current.subscription) {
-      return null;
-    }
-    refs.current.subscription = apiRef.current.store.subscribe(() => {
+  const updateState = React.useCallback(() => {
+    const storeState = apiRef.current.store.state;
+    if (refs.current.storeState !== storeState) {
       const newState = refs.current.selector(apiRef, refs.current.args);
+      refs.current.storeState = storeState;
       if (!refs.current.equals(refs.current.state, newState)) {
         refs.current.state = newState;
         setState(newState);
       }
-    });
-    return null;
+    }
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   EMPTY);
-  const unsubscribe = React.useCallback(() => {
-    // Fixes issue in React Strict Mode, where getSnapshot is not called
-    if (!refs.current.subscription) {
-      subscribe();
-    }
-    return () => {
-      if (refs.current.subscription) {
-        refs.current.subscription();
-        refs.current.subscription = undefined;
-      }
-    };
+
+  // Why subscribe in an effect instead of during render: a component can render without
+  // ever mounting (e.g. when it suspends during hydration). If it subscribed during render,
+  // it could receive a store update and call `setState` before being mounted (#17077).
+  // Effects only run for mounted components, so subscribing here is safe.
+  //
+  // Using a layout effect because the store may already have changed
+  // between render and mount (e.g. from a child's ref callback or layout effect).
+  // `updateState()` picks up such changes, so the corrected value is shown right away instead of in a second frame.
+  useEnhancedEffect(() => {
+    updateState();
+    return apiRef.current.store.subscribe(updateState);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, EMPTY);
-  useSyncExternalStore(unsubscribe, subscribe, emptyGetSnapshot);
   return state;
 }

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.29.0
+ * @mui/x-data-grid v8.29.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.29.0
+ * @mui/x-data-grid v8.29.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid",
-  "version": "8.29.0",
+  "version": "8.29.2",
   "author": "MUI Team",
   "description": "The Community plan edition of the MUI X Data Grid components.",
   "license": "MIT",
@@ -42,8 +42,8 @@
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
     "use-sync-external-store": "^1.6.0",
-    "@mui/x-internals": "8.29.0",
-    "@mui/x-virtualizer": "0.4.0"
+    "@mui/x-internals": "8.29.2",
+    "@mui/x-virtualizer": "0.4.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
@@ -166,98 +166,98 @@
       }
     },
     "./context": {
-      "import": {
-        "types": "./context/index.d.mts",
-        "default": "./context/index.mjs"
-      },
       "require": {
         "types": "./context/index.d.ts",
         "default": "./context/index.js"
       },
+      "import": {
+        "types": "./context/index.d.mts",
+        "default": "./context/index.mjs"
+      },
       "default": {
         "types": "./context/index.d.mts",
         "default": "./context/index.mjs"
       }
     },
     "./hooks": {
-      "import": {
-        "types": "./hooks/index.d.mts",
-        "default": "./hooks/index.mjs"
-      },
       "require": {
         "types": "./hooks/index.d.ts",
         "default": "./hooks/index.js"
       },
+      "import": {
+        "types": "./hooks/index.d.mts",
+        "default": "./hooks/index.mjs"
+      },
       "default": {
         "types": "./hooks/index.d.mts",
         "default": "./hooks/index.mjs"
       }
     },
     "./internals": {
-      "import": {
-        "types": "./internals/index.d.mts",
-        "default": "./internals/index.mjs"
-      },
       "require": {
         "types": "./internals/index.d.ts",
         "default": "./internals/index.js"
       },
+      "import": {
+        "types": "./internals/index.d.mts",
+        "default": "./internals/index.mjs"
+      },
       "default": {
         "types": "./internals/index.d.mts",
         "default": "./internals/index.mjs"
       }
     },
     "./locales": {
-      "import": {
-        "types": "./locales/index.d.mts",
-        "default": "./locales/index.mjs"
-      },
       "require": {
         "types": "./locales/index.d.ts",
         "default": "./locales/index.js"
       },
+      "import": {
+        "types": "./locales/index.d.mts",
+        "default": "./locales/index.mjs"
+      },
       "default": {
         "types": "./locales/index.d.mts",
         "default": "./locales/index.mjs"
       }
     },
     "./models": {
-      "import": {
-        "types": "./models/index.d.mts",
-        "default": "./models/index.mjs"
-      },
       "require": {
         "types": "./models/index.d.ts",
         "default": "./models/index.js"
       },
+      "import": {
+        "types": "./models/index.d.mts",
+        "default": "./models/index.mjs"
+      },
       "default": {
         "types": "./models/index.d.mts",
         "default": "./models/index.mjs"
       }
     },
     "./themeAugmentation": {
-      "import": {
-        "types": "./themeAugmentation/index.d.mts",
-        "default": "./themeAugmentation/index.mjs"
-      },
       "require": {
         "types": "./themeAugmentation/index.d.ts",
         "default": "./themeAugmentation/index.js"
       },
+      "import": {
+        "types": "./themeAugmentation/index.d.mts",
+        "default": "./themeAugmentation/index.mjs"
+      },
       "default": {
         "types": "./themeAugmentation/index.d.mts",
         "default": "./themeAugmentation/index.mjs"
       }
     },
     "./utils": {
-      "import": {
-        "types": "./utils/index.d.mts",
-        "default": "./utils/index.mjs"
-      },
       "require": {
         "types": "./utils/index.d.ts",
         "default": "./utils/index.js"
       },
+      "import": {
+        "types": "./utils/index.d.mts",
+        "default": "./utils/index.mjs"
+      },
       "default": {
         "types": "./utils/index.d.mts",
         "default": "./utils/index.mjs"