@mui/x-data-grid 8.29.0 → 8.29.1

package/CHANGELOG.md

@@ -5,8 +5,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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/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.1
  *
  * @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.1
  *
  * @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.1",
   "author": "MUI Team",
   "description": "The Community plan edition of the MUI X Data Grid components.",
   "license": "MIT",