@mui/x-data-grid-pro 8.27.2 → 8.27.4

package/CHANGELOG.md

@@ -5,6 +5,95 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.27.4
+
+_Mar 5, 2026_
+
+We'd like to extend a big thank you to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- 🌎 Improve Ukrainian (uk-UA) locale
+
+Special thanks go out to this community member for their valuable contribution:
+@lion1963
+
+The following team members contributed to this release:
+@arminmeh, @brijeshb42, @dav-is, @JCQuintas, @sai6855
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.27.4`
+
+- [DataGrid] Prevent unnecessary row selection checkbox rerendering (#21571) @arminmeh
+- [DataGrid] Make `GridScrollArea` overrides resolver dynamic (#21612) @sai6855
+- [l10n] Improve Ukrainian (uk-UA) locale (#21381) @lion1963
+
+#### `@mui/x-data-grid-pro@8.27.4` [![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.27.4`, plus:
+
+- [DataGridPro] Use `getRowId` prop to calculate the tree data row update (#21544) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.27.4` [![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.27.4`.
+
+### Charts
+
+#### `@mui/x-charts@8.27.4`
+
+- [charts] Deprecate `ChartDataProvider` in favour of `ChartsDataProvider` (#21549) @JCQuintas
+- [charts] Rename `ChartContainer` to `ChartsContainer` (#21186) @JCQuintas
+- [charts] Rename `ChartZoomSlider` to `ChartsZoomSlider` (#21572) @JCQuintas
+
+#### `@mui/x-charts-pro@8.27.4` [![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.27.4`.
+
+#### `@mui/x-charts-premium@8.27.4` [![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.27.4`.
+
+### Core
+
+- [code-infra] Add eslint rule to prevent `Math.random` in docs (#21505) (#21563) @JCQuintas
+- [code-infra] V8 Dedupe (#21561) @JCQuintas
+- [docs-infra] Apply Cookie Banner to v8.x Branch (#21448) @dav-is
+- [code-infra] Setup checkout to do full clone for non master branches (#21624) @brijeshb42
+
+## 8.27.3
+
+_Feb 25, 2026_
+
+We'd like to extend a big thank you to the 4 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+- ⚡️ Improved dynamic data support and cache invalidation in lazy loading for Data Grid Pro
+
+The following team members contributed to this release:
+@cherniavskii, @michelengelen, @MBilalShafi, @arminmeh
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.27.3`
+
+- [DataGrid] Preserve key input during row edit when using `rowModesModel` (#21457) @michelengelen
+
+#### `@mui/x-data-grid-pro@8.27.3` [![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.27.3`, plus:
+
+- [DataGridPro] Improve dynamic data support and cache invalidation in lazy loading (#21465) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.27.3` [![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.27.3`.
+
+### Core
+
+- [code-infra] Do not append `x` to the last version for the compare API (#21422) @arminmeh
+- [docs-infra] Fix current version detection logic (#21415) @cherniavskii
+
 ## 8.27.2
 
 _Feb 20, 2026_

package/DataGridPro/DataGridPro.js

@@ -34,7 +34,7 @@ const configuration = {
     useFilterValueGetter: apiRef => apiRef.current.getRowValue
   }
 };
-const releaseInfo = "MTc3MTU0NTYwMDAwMA==";
+const releaseInfo = "MTc3MjY2ODgwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo
@@ -192,6 +192,13 @@ DataGridProRaw.propTypes = {
     get: _propTypes.default.func.isRequired,
     set: _propTypes.default.func.isRequired
   }),
+  /**
+   * If positive, the Data Grid will periodically revalidate data source rows by re-fetching them from the server when the cache entry has expired.
+   * If the refetched rows are different from the current rows, the grid will update the rows.
+   * Set to `0` to disable polling.
+   * @default 0
+   */
+  dataSourceRevalidateMs: _propTypes.default.number,
   /**
    * If above 0, the row children will be expanded up to this depth.
    * If equal to -1, all the row children will be expanded.

package/DataGridPro/useDataGridProProps.js

@@ -41,6 +41,7 @@ const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PRO_PROPS_DEFAULT_V
   treeData: false,
   lazyLoading: false,
   lazyLoadingRequestThrottleMs: 500,
+  dataSourceRevalidateMs: 0,
   listView: false,
   multipleColumnsSortingMode: 'withModifierKey',
   pinnedColumnsSectionSeparator: 'border-and-shadow',

package/esm/DataGridPro/DataGridPro.js

@@ -27,7 +27,7 @@ const configuration = {
     useFilterValueGetter: apiRef => apiRef.current.getRowValue
   }
 };
-const releaseInfo = "MTc3MTU0NTYwMDAwMA==";
+const releaseInfo = "MTc3MjY2ODgwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo
@@ -185,6 +185,13 @@ DataGridProRaw.propTypes = {
     get: PropTypes.func.isRequired,
     set: PropTypes.func.isRequired
   }),
+  /**
+   * If positive, the Data Grid will periodically revalidate data source rows by re-fetching them from the server when the cache entry has expired.
+   * If the refetched rows are different from the current rows, the grid will update the rows.
+   * Set to `0` to disable polling.
+   * @default 0
+   */
+  dataSourceRevalidateMs: PropTypes.number,
   /**
    * If above 0, the row children will be expanded up to this depth.
    * If equal to -1, all the row children will be expanded.

package/esm/DataGridPro/useDataGridProProps.js

@@ -33,6 +33,7 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_D
   treeData: false,
   lazyLoading: false,
   lazyLoadingRequestThrottleMs: 500,
+  dataSourceRevalidateMs: 0,
   listView: false,
   multipleColumnsSortingMode: 'withModifierKey',
   pinnedColumnsSectionSeparator: 'border-and-shadow',

package/esm/hooks/features/dataSource/useGridDataSourceBasePro.d.ts

@@ -13,7 +13,7 @@ export declare const useGridDataSourceBasePro: <Api extends GridPrivateApiPro>(a
     public: GridDataSourceApiPro;
     private: GridDataSourcePrivateApiPro;
   };
-  debouncedFetchRows: ((parentId?: import("@mui/x-data-grid").GridRowId, params?: import("@mui/x-data-grid/internals").GridDataSourceFetchRowsParams<import("@mui/x-data-grid").GridGetRowsParams>) => Promise<void>) & import("@mui/utils/debounce").Cancelable;
+  debouncedFetchRows: ((parentId?: GridRowId, params?: import("@mui/x-data-grid/internals").GridDataSourceFetchRowsParams<import("@mui/x-data-grid").GridGetRowsParams>) => Promise<void>) & import("@mui/utils/debounce").Cancelable;
   flatTreeStrategyProcessor: {
     strategyName: DataSourceRowsUpdateStrategy;
     group: "dataSourceRowsUpdate";

package/esm/hooks/features/dataSource/useGridDataSourceBasePro.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import useLazyRef from '@mui/utils/useLazyRef';
-import { useGridSelector, GridGetRowsError, gridRowIdSelector, gridRowNodeSelector, gridRowTreeSelector, GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
+import { useGridSelector, GridGetRowsError, gridRowIdSelector, gridRowNodeSelector, gridRowTreeSelector, GRID_ROOT_GROUP_ID, gridRowsLookupSelector } from '@mui/x-data-grid';
 import { gridRowGroupsToFetchSelector, useGridDataSourceBase, CacheChunkManager, gridGetRowsParamsSelector, DataSourceRowsUpdateStrategy, GridStrategyGroup, getTreeNodeDescendants } from '@mui/x-data-grid/internals';
 import { warnOnce } from '@mui/x-internals/warning';
 import { NestedDataManager, RequestStatus, getGroupKeys } from "./utils.js";
@@ -39,6 +39,7 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
     debouncedFetchRows,
     strategyProcessor: flatTreeStrategyProcessor,
     events,
+    startPolling,
     cacheChunkManager,
     cache
   } = useGridDataSourceBase(apiRef, props, _extends({
@@ -53,6 +54,35 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
     apiRef.current.setStrategyAvailability(GridStrategyGroup.DataSource, currentStrategy, props.dataSource && !props.lazyLoading ? () => true : () => false);
   }, [apiRef, props.dataSource, props.lazyLoading, props.treeData]);
   const onDataSourceErrorProp = props.onDataSourceError;
+  const replaceGroupRows = React.useCallback((groupId, groupPath, rows) => {
+    const tree = gridRowTreeSelector(apiRef);
+    const rowsLookup = gridRowsLookupSelector(apiRef);
+    const fetchedRowIds = new Set(rows.map(row => gridRowIdSelector(apiRef, row)));
+    const currentGroupRows = getTreeNodeDescendants(tree, groupId, false, true);
+    const rowsToDelete = [];
+    currentGroupRows.forEach(rowId => {
+      if (fetchedRowIds.has(rowId)) {
+        return;
+      }
+      const descendants = getTreeNodeDescendants(tree, rowId, false, false);
+      for (let i = descendants.length - 1; i >= 0; i -= 1) {
+        const descendantId = descendants[i];
+        if (fetchedRowIds.has(descendantId)) {
+          continue;
+        }
+        rowsToDelete.push(_extends({}, rowsLookup[descendantId], {
+          _action: 'delete'
+        }));
+      }
+      rowsToDelete.push(_extends({}, rowsLookup[rowId], {
+        _action: 'delete'
+      }));
+    });
+    if (rowsToDelete.length > 0) {
+      apiRef.current.updateNestedRows(rowsToDelete, groupPath);
+    }
+    apiRef.current.updateNestedRows(rows, groupPath);
+  }, [apiRef]);
   const fetchRowChildren = React.useCallback(async id => {
     const pipedParams = apiRef.current.unstable_applyPipeProcessors('getRowsParams', {});
     if (!props.treeData && (pipedParams.groupFields?.length ?? 0) === 0) {
@@ -78,7 +108,7 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
     if (cachedData !== undefined) {
       const rows = cachedData.rows;
       nestedDataManager.setRequestSettled(id);
-      apiRef.current.updateNestedRows(rows, rowNode.path);
+      replaceGroupRows(id, rowNode.path, rows);
       if (cachedData.rowCount !== undefined) {
         apiRef.current.setRowCount(cachedData.rowCount);
       }
@@ -109,23 +139,7 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
       if (getRowsResponse.rowCount !== undefined) {
         apiRef.current.setRowCount(getRowsResponse.rowCount);
       }
-      // Remove existing outdated rows before setting the new ones
-      const rowsToDelete = [];
-      getRowsResponse.rows.forEach(row => {
-        const rowId = gridRowIdSelector(apiRef, row);
-        const treeNode = gridRowNodeSelector(apiRef, rowId);
-        if (treeNode) {
-          rowsToDelete.push({
-            id: rowId,
-            _action: 'delete'
-          });
-        }
-      });
-      if (rowsToDelete.length > 0) {
-        // TODO: Make this happen in a single pass by modifying the pre-processing of the rows
-        apiRef.current.updateNestedRows(rowsToDelete, rowNode.path);
-      }
-      apiRef.current.updateNestedRows(getRowsResponse.rows, rowNode.path);
+      replaceGroupRows(id, rowNode.path, getRowsResponse.rows);
       apiRef.current.setRowChildrenExpansion(id, true);
     } catch (error) {
       const childrenFetchError = error;
@@ -143,7 +157,7 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
       apiRef.current.dataSource.setChildrenLoading(id, false);
       nestedDataManager.setRequestSettled(id);
     }
-  }, [nestedDataManager, cacheChunkManager, cache, onDataSourceErrorProp, apiRef, props.treeData, props.dataSource?.getRows]);
+  }, [nestedDataManager, cacheChunkManager, cache, onDataSourceErrorProp, replaceGroupRows, apiRef, props.treeData, props.dataSource?.getRows]);
   const setChildrenLoading = React.useCallback((parentId, isLoading) => {
     apiRef.current.setState(state => {
       if (!state.dataSource.loading[parentId] && isLoading === false) {
@@ -185,6 +199,7 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
     });
   }, [apiRef]);
   const removeChildrenRows = React.useCallback(parentId => {
+    const rowsLookup = gridRowsLookupSelector(apiRef);
     const rowNode = gridRowNodeSelector(apiRef, parentId);
     if (!rowNode || rowNode.type !== 'group' || rowNode.children.length === 0) {
       return;
@@ -198,10 +213,9 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
       if (node.type === 'group' && node.children.length > 0) {
         node.children.forEach(traverse);
       }
-      removedRows.push({
-        id: nodeId,
+      removedRows.push(_extends({}, rowsLookup[nodeId], {
         _action: 'delete'
-      });
+      }));
     };
     rowNode.children.forEach(traverse);
     if (removedRows.length > 0) {
@@ -226,6 +240,7 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
       apiRef.current.setRows(response.rows);
     } else {
       const tree = gridRowTreeSelector(apiRef);
+      const rowsLookup = gridRowsLookupSelector(apiRef);
       // Remove existing outdated rows before setting the new ones
       // Create a set of the current root rows
       const parentRowsToDelete = new Set(getTreeNodeDescendants(tree, GRID_ROOT_GROUP_ID, false, true));
@@ -239,15 +254,13 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
           const descendants = getTreeNodeDescendants(tree, parentRowId, false, false);
           for (let i = descendants.length - 1; i >= 0; i -= 1) {
             // delete deepest descendants first
-            rowsToDelete.push({
-              id: descendants[i],
+            rowsToDelete.push(_extends({}, rowsLookup[descendants[i]], {
               _action: 'delete'
-            });
+            }));
           }
-          rowsToDelete.push({
-            id: parentRowId,
+          rowsToDelete.push(_extends({}, rowsLookup[parentRowId], {
             _action: 'delete'
-          });
+          }));
         });
       }
       apiRef.current.updateRows(response.rows.concat(rowsToDelete));
@@ -256,7 +269,8 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
       params: params.fetchParams,
       response
     }, true);
-  }, [apiRef]);
+    startPolling();
+  }, [apiRef, startPolling]);
   const dataSourceApi = {
     dataSource: _extends({}, api.public.dataSource, {
       setChildrenLoading,

package/esm/hooks/features/dataSource/utils.d.ts

@@ -20,7 +20,9 @@ export declare class NestedDataManager {
   private maxConcurrentRequests;
   constructor(privateApiRef: RefObject<GridPrivateApiPro>, maxConcurrentRequests?: number);
   private processQueue;
-  queue: (ids: GridRowId[]) => Promise<void>;
+  queue: (ids: GridRowId[], options?: {
+    showChildrenLoading?: boolean;
+  }) => Promise<void>;
   setRequestSettled: (id: GridRowId) => void;
   clear: () => void;
   clearPendingRequest: (id: GridRowId) => void;

package/esm/hooks/features/dataSource/utils.js

@@ -38,17 +38,24 @@ export class NestedDataManager {
       this.api.fetchRowChildren(id);
     }
   };
-  queue = async ids => {
+  queue = async (ids, options = {}) => {
+    const {
+      showChildrenLoading = true
+    } = options;
     const loadingIds = {};
     ids.forEach(id => {
       this.queuedRequests.add(id);
-      loadingIds[id] = true;
+      if (showChildrenLoading) {
+        loadingIds[id] = true;
+      }
     });
-    this.api.setState(state => _extends({}, state, {
-      dataSource: _extends({}, state.dataSource, {
-        loading: _extends({}, state.dataSource.loading, loadingIds)
-      })
-    }));
+    if (showChildrenLoading) {
+      this.api.setState(state => _extends({}, state, {
+        dataSource: _extends({}, state.dataSource, {
+          loading: _extends({}, state.dataSource.loading, loadingIds)
+        })
+      }));
+    }
     this.processQueue();
   };
   setRequestSettled = id => {

package/esm/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.d.ts

@@ -6,4 +6,4 @@ import type { DataGridProProcessedProps } from "../../../models/dataGridProProps
  * @requires useGridPagination (state)
  * @requires useGridScroll (method
  */
-export declare const useGridDataSourceLazyLoader: (privateApiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "dataSource" | "lazyLoading" | "lazyLoadingRequestThrottleMs">) => void;
+export declare const useGridDataSourceLazyLoader: (privateApiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "dataSource" | "lazyLoading" | "lazyLoadingRequestThrottleMs" | "dataSourceRevalidateMs">) => void;

package/esm/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.js

@@ -3,6 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { throttle } from '@mui/x-internals/throttle';
+import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
 import useEventCallback from '@mui/utils/useEventCallback';
 import debounce from '@mui/utils/debounce';
 import { useGridEvent, gridSortModelSelector, gridFilterModelSelector, GRID_ROOT_GROUP_ID, gridPaginationModelSelector, gridFilteredSortedRowIdsSelector, gridRowIdSelector } from '@mui/x-data-grid';
@@ -35,10 +36,42 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
   const loadingTrigger = React.useRef(null);
   const rowsStale = React.useRef(false);
   const draggedRowId = React.useRef(null);
+  const pollingIntervalRef = React.useRef(null);
   const fetchRows = React.useCallback(params => {
     privateApiRef.current.dataSource.fetchRows(GRID_ROOT_GROUP_ID, params);
   }, [privateApiRef]);
   const debouncedFetchRows = React.useMemo(() => debounce(fetchRows, 0), [fetchRows]);
+  const revalidate = useEventCallback(params => {
+    if (rowsStale.current) {
+      return;
+    }
+
+    // Check cache first — if data is still cached, skip entirely
+    // (no backend call, no diffing needed)
+    const cache = privateApiRef.current.dataSource.cache;
+    const cachedResponse = cache.get(params);
+    if (cachedResponse !== undefined) {
+      return;
+    }
+
+    // Cache is stale/expired — fetch in background (no loading indicator)
+    debouncedFetchRows(params);
+  });
+  const stopPolling = React.useCallback(() => {
+    if (pollingIntervalRef.current !== null) {
+      clearInterval(pollingIntervalRef.current);
+      pollingIntervalRef.current = null;
+    }
+  }, []);
+  const startPolling = useEventCallback(params => {
+    stopPolling();
+    if (props.dataSourceRevalidateMs <= 0) {
+      return;
+    }
+    pollingIntervalRef.current = setInterval(() => {
+      revalidate(params);
+    }, props.dataSourceRevalidateMs);
+  });
   const resetGrid = React.useCallback(() => {
     privateApiRef.current.setLoading(true);
     privateApiRef.current.dataSource.cache.clear();
@@ -89,38 +122,10 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
     if (rootChildrenCount === 0) {
       return;
     }
-    const paginationModel = gridPaginationModelSelector(privateApiRef);
-    const pageToSkip = adjustRowParams({
-      start: renderedRowsIntervalCache.current.firstRowToRender,
-      end: renderedRowsIntervalCache.current.lastRowToRender
-    }, {
-      pageSize: paginationModel.pageSize,
-      rowCount: pageRowCount
-    });
     let hasChanged = false;
-    const isInitialPage = renderedRowsIntervalCache.current.firstRowToRender === 0 && renderedRowsIntervalCache.current.lastRowToRender === 0;
-    for (let i = 0; i < rootChildrenCount; i += 1) {
-      if (isInitialPage) {
-        break;
-      }
-      // replace the rows not in the viewport with skeleton rows
-      if (pageToSkip.start <= i && i <= pageToSkip.end || tree[rootGroupChildren[i]]?.type === 'skeletonRow' ||
-      // ignore rows that are already skeleton rows
-      tree[rootGroupChildren[i]]?.id === draggedRowId.current // ignore row that is being dragged (https://github.com/mui/mui-x/issues/17854)
-      ) {
-        continue;
-      }
-      const rowId = tree[rootGroupChildren[i]].id; // keep the id, so that row related state is maintained
-      const skeletonRowNode = {
-        type: 'skeletonRow',
-        id: rowId,
-        parent: GRID_ROOT_GROUP_ID,
-        depth: 0
-      };
-      tree[rowId] = skeletonRowNode;
-      hasChanged = true;
-    }
 
+    // SWR: Only add skeleton padding for never-fetched positions beyond current data.
+    // Previously fetched rows are kept in place (not skeletonized) to avoid flicker on scroll-back.
     // Should only happen with VIEWPORT loading trigger
     if (loadingTrigger.current === LoadingTrigger.VIEWPORT) {
       // fill the grid with skeleton rows
@@ -186,39 +191,121 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
       const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(privateApiRef);
       const startingIndex = typeof fetchParams.start === 'string' ? Math.max(filteredSortedRowIds.indexOf(fetchParams.start), 0) : fetchParams.start;
 
-      // Check for duplicate rows
-      let duplicateRowCount = 0;
-      response.rows.forEach(row => {
-        const rowId = gridRowIdSelector(privateApiRef, row);
-        if (tree[rowId] || dataRowIdToModelLookup[rowId]) {
-          const index = rootGroupChildren.indexOf(rowId);
-          if (index !== -1) {
-            const skeletonId = getSkeletonRowId(index);
-            rootGroupChildren[index] = skeletonId;
-            tree[skeletonId] = {
-              type: 'skeletonRow',
-              id: skeletonId,
-              parent: GRID_ROOT_GROUP_ID,
-              depth: 0
-            };
+      // Determine if this is a background revalidation (target rows are real, not skeletons)
+      const firstTargetRow = rootGroupChildren[startingIndex];
+      const isRevalidation = firstTargetRow && tree[firstTargetRow]?.type !== 'skeletonRow';
+      if (isRevalidation) {
+        // --- SWR PATH ---
+        // Compare response row IDs with existing row IDs at target positions
+        const newRowIds = response.rows.map(row => gridRowIdSelector(privateApiRef, row));
+        const existingRowIds = rootGroupChildren.slice(startingIndex, startingIndex + response.rows.length);
+        const sameRowIds = existingRowIds.length === newRowIds.length && existingRowIds.every((id, i) => id === newRowIds[i]);
+        if (sameRowIds) {
+          // SAME ROW IDs — check for data changes only
+          const changedRows = response.rows.filter((newRow, i) => {
+            const existingRow = dataRowIdToModelLookup[existingRowIds[i]];
+            return !isDeepEqual(newRow, existingRow);
+          });
+          if (changedRows.length === 0) {
+            // No changes — skip update entirely. Cache already refreshed by fetchRows.
+            privateApiRef.current.setLoading(false);
+            return;
           }
-          delete tree[rowId];
-          delete dataRowIdToModelLookup[rowId];
-          duplicateRowCount += 1;
+
+          // Efficient data-only update — no tree restructuring needed
+          privateApiRef.current.updateRows(changedRows);
+          // Cache is already updated by fetchRows in useGridDataSourceBase
+        } else {
+          // DIFFERENT ROW IDs — server returned new rows for this range
+          // 1. Remove old rows at target positions
+          for (let i = startingIndex; i < startingIndex + response.rows.length && i < rootGroupChildren.length; i += 1) {
+            const oldRowId = rootGroupChildren[i];
+            if (oldRowId && tree[oldRowId]?.type !== 'skeletonRow') {
+              delete tree[oldRowId];
+              delete dataRowIdToModelLookup[oldRowId];
+              const skeletonId = getSkeletonRowId(i);
+              rootGroupChildren[i] = skeletonId;
+              tree[skeletonId] = {
+                type: 'skeletonRow',
+                id: skeletonId,
+                parent: GRID_ROOT_GROUP_ID,
+                depth: 0
+              };
+            }
+          }
+
+          // 2. Duplicate detection for incoming rows
+          let duplicateRowCount = 0;
+          response.rows.forEach(row => {
+            const rowId = gridRowIdSelector(privateApiRef, row);
+            if (tree[rowId] || dataRowIdToModelLookup[rowId]) {
+              const index = rootGroupChildren.indexOf(rowId);
+              if (index !== -1) {
+                const skeletonId = getSkeletonRowId(index);
+                rootGroupChildren[index] = skeletonId;
+                tree[skeletonId] = {
+                  type: 'skeletonRow',
+                  id: skeletonId,
+                  parent: GRID_ROOT_GROUP_ID,
+                  depth: 0
+                };
+              }
+              delete tree[rowId];
+              delete dataRowIdToModelLookup[rowId];
+              duplicateRowCount += 1;
+            }
+          });
+          if (duplicateRowCount > 0) {
+            tree[GRID_ROOT_GROUP_ID] = _extends({}, rootGroup, {
+              children: rootGroupChildren
+            });
+            privateApiRef.current.setState(state => _extends({}, state, {
+              rows: _extends({}, state.rows, {
+                tree,
+                dataRowIdToModelLookup
+              })
+            }));
+          }
+
+          // 3. Replace rows
+          privateApiRef.current.unstable_replaceRows(startingIndex, response.rows);
         }
-      });
-      if (duplicateRowCount > 0) {
-        tree[GRID_ROOT_GROUP_ID] = _extends({}, rootGroup, {
-          children: rootGroupChildren
+      } else {
+        // --- ORIGINAL PATH (skeleton → real row replacement) ---
+        // Check for duplicate rows
+        let duplicateRowCount = 0;
+        response.rows.forEach(row => {
+          const rowId = gridRowIdSelector(privateApiRef, row);
+          if (tree[rowId] || dataRowIdToModelLookup[rowId]) {
+            const index = rootGroupChildren.indexOf(rowId);
+            if (index !== -1) {
+              const skeletonId = getSkeletonRowId(index);
+              rootGroupChildren[index] = skeletonId;
+              tree[skeletonId] = {
+                type: 'skeletonRow',
+                id: skeletonId,
+                parent: GRID_ROOT_GROUP_ID,
+                depth: 0
+              };
+            }
+            delete tree[rowId];
+            delete dataRowIdToModelLookup[rowId];
+            duplicateRowCount += 1;
+          }
         });
-        privateApiRef.current.setState(state => _extends({}, state, {
-          rows: _extends({}, state.rows, {
-            tree,
-            dataRowIdToModelLookup
-          })
-        }));
+        if (duplicateRowCount > 0) {
+          tree[GRID_ROOT_GROUP_ID] = _extends({}, rootGroup, {
+            children: rootGroupChildren
+          });
+          privateApiRef.current.setState(state => _extends({}, state, {
+            rows: _extends({}, state.rows, {
+              tree,
+              dataRowIdToModelLookup
+            })
+          }));
+        }
+        privateApiRef.current.unstable_replaceRows(startingIndex, response.rows);
       }
-      privateApiRef.current.unstable_replaceRows(startingIndex, response.rows);
     }
     rowsStale.current = false;
     if (loadingTrigger.current === null) {
@@ -230,8 +317,11 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
       params: params.fetchParams,
       response
     }, false);
+    if (loadingTrigger.current === LoadingTrigger.VIEWPORT) {
+      startPolling(params.fetchParams);
+    }
     privateApiRef.current.requestPipeProcessorsApplication('hydrateRows');
-  }, [privateApiRef, updateLoadingTrigger, addSkeletonRows]);
+  }, [privateApiRef, updateLoadingTrigger, addSkeletonRows, startPolling]);
   const handleRowCountChange = React.useCallback(() => {
     if (rowsStale.current || loadingTrigger.current === null) {
       return;
@@ -289,26 +379,46 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
       visibleRows: currentVisibleRows.rows,
       range: renderContext
     });
+    const paginationModel = gridPaginationModelSelector(privateApiRef);
     if (!skeletonRowsSection) {
+      // SWR: No skeleton rows in viewport — all visible rows have real data.
+      // Schedule background revalidation if cache has expired for this range.
+      if (loadingTrigger.current === LoadingTrigger.VIEWPORT) {
+        const adjustedParams = adjustRowParams(getRowsParams, {
+          pageSize: paginationModel.pageSize,
+          rowCount: privateApiRef.current.state.pagination.rowCount
+        });
+        revalidate(adjustedParams);
+        startPolling(adjustedParams);
+      }
       return;
     }
     getRowsParams.start = skeletonRowsSection.firstRowIndex;
     getRowsParams.end = skeletonRowsSection.lastRowIndex;
-    const paginationModel = gridPaginationModelSelector(privateApiRef);
     fetchRows(adjustRowParams(getRowsParams, {
       pageSize: paginationModel.pageSize,
       rowCount: privateApiRef.current.state.pagination.rowCount
     }));
-  }, [privateApiRef, fetchRows]);
+  }, [privateApiRef, fetchRows, revalidate, startPolling]);
   const throttledHandleRenderedRowsIntervalChange = React.useMemo(() => throttle(handleRenderedRowsIntervalChange, props.lazyLoadingRequestThrottleMs), [props.lazyLoadingRequestThrottleMs, handleRenderedRowsIntervalChange]);
   React.useEffect(() => {
     return () => {
       throttledHandleRenderedRowsIntervalChange.clear();
+      stopPolling();
     };
-  }, [throttledHandleRenderedRowsIntervalChange]);
+  }, [throttledHandleRenderedRowsIntervalChange, stopPolling]);
+
+  // Stop polling when dataSourceRevalidateMs is set to 0
+  React.useEffect(() => {
+    if (props.dataSourceRevalidateMs <= 0) {
+      stopPolling();
+    }
+  }, [props.dataSourceRevalidateMs, stopPolling]);
+  React.useEffect(() => stopPolling, [stopPolling]);
   const handleGridSortModelChange = React.useCallback(newSortModel => {
     rowsStale.current = true;
     throttledHandleRenderedRowsIntervalChange.clear();
+    stopPolling();
     previousLastRowIndex.current = 0;
     const paginationModel = gridPaginationModelSelector(privateApiRef);
     const filterModel = gridFilterModelSelector(privateApiRef);
@@ -320,10 +430,11 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
     };
     privateApiRef.current.setLoading(true);
     debouncedFetchRows(getRowsParams);
-  }, [privateApiRef, debouncedFetchRows, throttledHandleRenderedRowsIntervalChange]);
+  }, [privateApiRef, debouncedFetchRows, throttledHandleRenderedRowsIntervalChange, stopPolling]);
   const handleGridFilterModelChange = React.useCallback(newFilterModel => {
     rowsStale.current = true;
     throttledHandleRenderedRowsIntervalChange.clear();
+    stopPolling();
     previousLastRowIndex.current = 0;
     const paginationModel = gridPaginationModelSelector(privateApiRef);
     const sortModel = gridSortModelSelector(privateApiRef);
@@ -335,7 +446,7 @@ export const useGridDataSourceLazyLoader = (privateApiRef, props) => {
     };
     privateApiRef.current.setLoading(true);
     debouncedFetchRows(getRowsParams);
-  }, [privateApiRef, debouncedFetchRows, throttledHandleRenderedRowsIntervalChange]);
+  }, [privateApiRef, debouncedFetchRows, throttledHandleRenderedRowsIntervalChange, stopPolling]);
   const handleDragStart = React.useCallback(row => {
     draggedRowId.current = row.id;
   }, []);

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v8.27.2
+ * @mui/x-data-grid-pro v8.27.4
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/hooks/features/dataSource/useGridDataSourceBasePro.d.ts

@@ -13,7 +13,7 @@ export declare const useGridDataSourceBasePro: <Api extends GridPrivateApiPro>(a
     public: GridDataSourceApiPro;
     private: GridDataSourcePrivateApiPro;
   };
-  debouncedFetchRows: ((parentId?: import("@mui/x-data-grid").GridRowId, params?: import("@mui/x-data-grid/internals").GridDataSourceFetchRowsParams<import("@mui/x-data-grid").GridGetRowsParams>) => Promise<void>) & import("@mui/utils/debounce").Cancelable;
+  debouncedFetchRows: ((parentId?: GridRowId, params?: import("@mui/x-data-grid/internals").GridDataSourceFetchRowsParams<import("@mui/x-data-grid").GridGetRowsParams>) => Promise<void>) & import("@mui/utils/debounce").Cancelable;
   flatTreeStrategyProcessor: {
     strategyName: DataSourceRowsUpdateStrategy;
     group: "dataSourceRowsUpdate";

package/hooks/features/dataSource/useGridDataSourceBasePro.js

@@ -46,6 +46,7 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
     debouncedFetchRows,
     strategyProcessor: flatTreeStrategyProcessor,
     events,
+    startPolling,
     cacheChunkManager,
     cache
   } = (0, _internals.useGridDataSourceBase)(apiRef, props, (0, _extends2.default)({
@@ -60,6 +61,35 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
     apiRef.current.setStrategyAvailability(_internals.GridStrategyGroup.DataSource, currentStrategy, props.dataSource && !props.lazyLoading ? () => true : () => false);
   }, [apiRef, props.dataSource, props.lazyLoading, props.treeData]);
   const onDataSourceErrorProp = props.onDataSourceError;
+  const replaceGroupRows = React.useCallback((groupId, groupPath, rows) => {
+    const tree = (0, _xDataGrid.gridRowTreeSelector)(apiRef);
+    const rowsLookup = (0, _xDataGrid.gridRowsLookupSelector)(apiRef);
+    const fetchedRowIds = new Set(rows.map(row => (0, _xDataGrid.gridRowIdSelector)(apiRef, row)));
+    const currentGroupRows = (0, _internals.getTreeNodeDescendants)(tree, groupId, false, true);
+    const rowsToDelete = [];
+    currentGroupRows.forEach(rowId => {
+      if (fetchedRowIds.has(rowId)) {
+        return;
+      }
+      const descendants = (0, _internals.getTreeNodeDescendants)(tree, rowId, false, false);
+      for (let i = descendants.length - 1; i >= 0; i -= 1) {
+        const descendantId = descendants[i];
+        if (fetchedRowIds.has(descendantId)) {
+          continue;
+        }
+        rowsToDelete.push((0, _extends2.default)({}, rowsLookup[descendantId], {
+          _action: 'delete'
+        }));
+      }
+      rowsToDelete.push((0, _extends2.default)({}, rowsLookup[rowId], {
+        _action: 'delete'
+      }));
+    });
+    if (rowsToDelete.length > 0) {
+      apiRef.current.updateNestedRows(rowsToDelete, groupPath);
+    }
+    apiRef.current.updateNestedRows(rows, groupPath);
+  }, [apiRef]);
   const fetchRowChildren = React.useCallback(async id => {
     const pipedParams = apiRef.current.unstable_applyPipeProcessors('getRowsParams', {});
     if (!props.treeData && (pipedParams.groupFields?.length ?? 0) === 0) {
@@ -85,7 +115,7 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
     if (cachedData !== undefined) {
       const rows = cachedData.rows;
       nestedDataManager.setRequestSettled(id);
-      apiRef.current.updateNestedRows(rows, rowNode.path);
+      replaceGroupRows(id, rowNode.path, rows);
       if (cachedData.rowCount !== undefined) {
         apiRef.current.setRowCount(cachedData.rowCount);
       }
@@ -116,23 +146,7 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
       if (getRowsResponse.rowCount !== undefined) {
         apiRef.current.setRowCount(getRowsResponse.rowCount);
       }
-      // Remove existing outdated rows before setting the new ones
-      const rowsToDelete = [];
-      getRowsResponse.rows.forEach(row => {
-        const rowId = (0, _xDataGrid.gridRowIdSelector)(apiRef, row);
-        const treeNode = (0, _xDataGrid.gridRowNodeSelector)(apiRef, rowId);
-        if (treeNode) {
-          rowsToDelete.push({
-            id: rowId,
-            _action: 'delete'
-          });
-        }
-      });
-      if (rowsToDelete.length > 0) {
-        // TODO: Make this happen in a single pass by modifying the pre-processing of the rows
-        apiRef.current.updateNestedRows(rowsToDelete, rowNode.path);
-      }
-      apiRef.current.updateNestedRows(getRowsResponse.rows, rowNode.path);
+      replaceGroupRows(id, rowNode.path, getRowsResponse.rows);
       apiRef.current.setRowChildrenExpansion(id, true);
     } catch (error) {
       const childrenFetchError = error;
@@ -150,7 +164,7 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
       apiRef.current.dataSource.setChildrenLoading(id, false);
       nestedDataManager.setRequestSettled(id);
     }
-  }, [nestedDataManager, cacheChunkManager, cache, onDataSourceErrorProp, apiRef, props.treeData, props.dataSource?.getRows]);
+  }, [nestedDataManager, cacheChunkManager, cache, onDataSourceErrorProp, replaceGroupRows, apiRef, props.treeData, props.dataSource?.getRows]);
   const setChildrenLoading = React.useCallback((parentId, isLoading) => {
     apiRef.current.setState(state => {
       if (!state.dataSource.loading[parentId] && isLoading === false) {
@@ -192,6 +206,7 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
     });
   }, [apiRef]);
   const removeChildrenRows = React.useCallback(parentId => {
+    const rowsLookup = (0, _xDataGrid.gridRowsLookupSelector)(apiRef);
     const rowNode = (0, _xDataGrid.gridRowNodeSelector)(apiRef, parentId);
     if (!rowNode || rowNode.type !== 'group' || rowNode.children.length === 0) {
       return;
@@ -205,10 +220,9 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
       if (node.type === 'group' && node.children.length > 0) {
         node.children.forEach(traverse);
       }
-      removedRows.push({
-        id: nodeId,
+      removedRows.push((0, _extends2.default)({}, rowsLookup[nodeId], {
         _action: 'delete'
-      });
+      }));
     };
     rowNode.children.forEach(traverse);
     if (removedRows.length > 0) {
@@ -233,6 +247,7 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
       apiRef.current.setRows(response.rows);
     } else {
       const tree = (0, _xDataGrid.gridRowTreeSelector)(apiRef);
+      const rowsLookup = (0, _xDataGrid.gridRowsLookupSelector)(apiRef);
       // Remove existing outdated rows before setting the new ones
       // Create a set of the current root rows
       const parentRowsToDelete = new Set((0, _internals.getTreeNodeDescendants)(tree, _xDataGrid.GRID_ROOT_GROUP_ID, false, true));
@@ -246,15 +261,13 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
           const descendants = (0, _internals.getTreeNodeDescendants)(tree, parentRowId, false, false);
           for (let i = descendants.length - 1; i >= 0; i -= 1) {
             // delete deepest descendants first
-            rowsToDelete.push({
-              id: descendants[i],
+            rowsToDelete.push((0, _extends2.default)({}, rowsLookup[descendants[i]], {
               _action: 'delete'
-            });
+            }));
           }
-          rowsToDelete.push({
-            id: parentRowId,
+          rowsToDelete.push((0, _extends2.default)({}, rowsLookup[parentRowId], {
             _action: 'delete'
-          });
+          }));
         });
       }
       apiRef.current.updateRows(response.rows.concat(rowsToDelete));
@@ -263,7 +276,8 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
       params: params.fetchParams,
       response
     }, true);
-  }, [apiRef]);
+    startPolling();
+  }, [apiRef, startPolling]);
   const dataSourceApi = {
     dataSource: (0, _extends2.default)({}, api.public.dataSource, {
       setChildrenLoading,

package/hooks/features/dataSource/utils.d.ts

@@ -20,7 +20,9 @@ export declare class NestedDataManager {
   private maxConcurrentRequests;
   constructor(privateApiRef: RefObject<GridPrivateApiPro>, maxConcurrentRequests?: number);
   private processQueue;
-  queue: (ids: GridRowId[]) => Promise<void>;
+  queue: (ids: GridRowId[], options?: {
+    showChildrenLoading?: boolean;
+  }) => Promise<void>;
   setRequestSettled: (id: GridRowId) => void;
   clear: () => void;
   clearPendingRequest: (id: GridRowId) => void;

package/hooks/features/dataSource/utils.js

@@ -44,17 +44,24 @@ class NestedDataManager {
       this.api.fetchRowChildren(id);
     }
   };
-  queue = async ids => {
+  queue = async (ids, options = {}) => {
+    const {
+      showChildrenLoading = true
+    } = options;
     const loadingIds = {};
     ids.forEach(id => {
       this.queuedRequests.add(id);
-      loadingIds[id] = true;
+      if (showChildrenLoading) {
+        loadingIds[id] = true;
+      }
     });
-    this.api.setState(state => (0, _extends2.default)({}, state, {
-      dataSource: (0, _extends2.default)({}, state.dataSource, {
-        loading: (0, _extends2.default)({}, state.dataSource.loading, loadingIds)
-      })
-    }));
+    if (showChildrenLoading) {
+      this.api.setState(state => (0, _extends2.default)({}, state, {
+        dataSource: (0, _extends2.default)({}, state.dataSource, {
+          loading: (0, _extends2.default)({}, state.dataSource.loading, loadingIds)
+        })
+      }));
+    }
     this.processQueue();
   };
   setRequestSettled = id => {

package/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.d.ts

@@ -6,4 +6,4 @@ import type { DataGridProProcessedProps } from "../../../models/dataGridProProps
  * @requires useGridPagination (state)
  * @requires useGridScroll (method
  */
-export declare const useGridDataSourceLazyLoader: (privateApiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "dataSource" | "lazyLoading" | "lazyLoadingRequestThrottleMs">) => void;
+export declare const useGridDataSourceLazyLoader: (privateApiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "dataSource" | "lazyLoading" | "lazyLoadingRequestThrottleMs" | "dataSourceRevalidateMs">) => void;

package/hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader.js

@@ -10,6 +10,7 @@ exports.useGridDataSourceLazyLoader = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _throttle = require("@mui/x-internals/throttle");
+var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _debounce = _interopRequireDefault(require("@mui/utils/debounce"));
 var _xDataGrid = require("@mui/x-data-grid");
@@ -42,10 +43,42 @@ const useGridDataSourceLazyLoader = (privateApiRef, props) => {
   const loadingTrigger = React.useRef(null);
   const rowsStale = React.useRef(false);
   const draggedRowId = React.useRef(null);
+  const pollingIntervalRef = React.useRef(null);
   const fetchRows = React.useCallback(params => {
     privateApiRef.current.dataSource.fetchRows(_xDataGrid.GRID_ROOT_GROUP_ID, params);
   }, [privateApiRef]);
   const debouncedFetchRows = React.useMemo(() => (0, _debounce.default)(fetchRows, 0), [fetchRows]);
+  const revalidate = (0, _useEventCallback.default)(params => {
+    if (rowsStale.current) {
+      return;
+    }
+
+    // Check cache first — if data is still cached, skip entirely
+    // (no backend call, no diffing needed)
+    const cache = privateApiRef.current.dataSource.cache;
+    const cachedResponse = cache.get(params);
+    if (cachedResponse !== undefined) {
+      return;
+    }
+
+    // Cache is stale/expired — fetch in background (no loading indicator)
+    debouncedFetchRows(params);
+  });
+  const stopPolling = React.useCallback(() => {
+    if (pollingIntervalRef.current !== null) {
+      clearInterval(pollingIntervalRef.current);
+      pollingIntervalRef.current = null;
+    }
+  }, []);
+  const startPolling = (0, _useEventCallback.default)(params => {
+    stopPolling();
+    if (props.dataSourceRevalidateMs <= 0) {
+      return;
+    }
+    pollingIntervalRef.current = setInterval(() => {
+      revalidate(params);
+    }, props.dataSourceRevalidateMs);
+  });
   const resetGrid = React.useCallback(() => {
     privateApiRef.current.setLoading(true);
     privateApiRef.current.dataSource.cache.clear();
@@ -96,38 +129,10 @@ const useGridDataSourceLazyLoader = (privateApiRef, props) => {
     if (rootChildrenCount === 0) {
       return;
     }
-    const paginationModel = (0, _xDataGrid.gridPaginationModelSelector)(privateApiRef);
-    const pageToSkip = (0, _utils.adjustRowParams)({
-      start: renderedRowsIntervalCache.current.firstRowToRender,
-      end: renderedRowsIntervalCache.current.lastRowToRender
-    }, {
-      pageSize: paginationModel.pageSize,
-      rowCount: pageRowCount
-    });
     let hasChanged = false;
-    const isInitialPage = renderedRowsIntervalCache.current.firstRowToRender === 0 && renderedRowsIntervalCache.current.lastRowToRender === 0;
-    for (let i = 0; i < rootChildrenCount; i += 1) {
-      if (isInitialPage) {
-        break;
-      }
-      // replace the rows not in the viewport with skeleton rows
-      if (pageToSkip.start <= i && i <= pageToSkip.end || tree[rootGroupChildren[i]]?.type === 'skeletonRow' ||
-      // ignore rows that are already skeleton rows
-      tree[rootGroupChildren[i]]?.id === draggedRowId.current // ignore row that is being dragged (https://github.com/mui/mui-x/issues/17854)
-      ) {
-        continue;
-      }
-      const rowId = tree[rootGroupChildren[i]].id; // keep the id, so that row related state is maintained
-      const skeletonRowNode = {
-        type: 'skeletonRow',
-        id: rowId,
-        parent: _xDataGrid.GRID_ROOT_GROUP_ID,
-        depth: 0
-      };
-      tree[rowId] = skeletonRowNode;
-      hasChanged = true;
-    }
 
+    // SWR: Only add skeleton padding for never-fetched positions beyond current data.
+    // Previously fetched rows are kept in place (not skeletonized) to avoid flicker on scroll-back.
     // Should only happen with VIEWPORT loading trigger
     if (loadingTrigger.current === LoadingTrigger.VIEWPORT) {
       // fill the grid with skeleton rows
@@ -193,39 +198,121 @@ const useGridDataSourceLazyLoader = (privateApiRef, props) => {
       const filteredSortedRowIds = (0, _xDataGrid.gridFilteredSortedRowIdsSelector)(privateApiRef);
       const startingIndex = typeof fetchParams.start === 'string' ? Math.max(filteredSortedRowIds.indexOf(fetchParams.start), 0) : fetchParams.start;
 
-      // Check for duplicate rows
-      let duplicateRowCount = 0;
-      response.rows.forEach(row => {
-        const rowId = (0, _xDataGrid.gridRowIdSelector)(privateApiRef, row);
-        if (tree[rowId] || dataRowIdToModelLookup[rowId]) {
-          const index = rootGroupChildren.indexOf(rowId);
-          if (index !== -1) {
-            const skeletonId = getSkeletonRowId(index);
-            rootGroupChildren[index] = skeletonId;
-            tree[skeletonId] = {
-              type: 'skeletonRow',
-              id: skeletonId,
-              parent: _xDataGrid.GRID_ROOT_GROUP_ID,
-              depth: 0
-            };
+      // Determine if this is a background revalidation (target rows are real, not skeletons)
+      const firstTargetRow = rootGroupChildren[startingIndex];
+      const isRevalidation = firstTargetRow && tree[firstTargetRow]?.type !== 'skeletonRow';
+      if (isRevalidation) {
+        // --- SWR PATH ---
+        // Compare response row IDs with existing row IDs at target positions
+        const newRowIds = response.rows.map(row => (0, _xDataGrid.gridRowIdSelector)(privateApiRef, row));
+        const existingRowIds = rootGroupChildren.slice(startingIndex, startingIndex + response.rows.length);
+        const sameRowIds = existingRowIds.length === newRowIds.length && existingRowIds.every((id, i) => id === newRowIds[i]);
+        if (sameRowIds) {
+          // SAME ROW IDs — check for data changes only
+          const changedRows = response.rows.filter((newRow, i) => {
+            const existingRow = dataRowIdToModelLookup[existingRowIds[i]];
+            return !(0, _isDeepEqual.isDeepEqual)(newRow, existingRow);
+          });
+          if (changedRows.length === 0) {
+            // No changes — skip update entirely. Cache already refreshed by fetchRows.
+            privateApiRef.current.setLoading(false);
+            return;
           }
-          delete tree[rowId];
-          delete dataRowIdToModelLookup[rowId];
-          duplicateRowCount += 1;
+
+          // Efficient data-only update — no tree restructuring needed
+          privateApiRef.current.updateRows(changedRows);
+          // Cache is already updated by fetchRows in useGridDataSourceBase
+        } else {
+          // DIFFERENT ROW IDs — server returned new rows for this range
+          // 1. Remove old rows at target positions
+          for (let i = startingIndex; i < startingIndex + response.rows.length && i < rootGroupChildren.length; i += 1) {
+            const oldRowId = rootGroupChildren[i];
+            if (oldRowId && tree[oldRowId]?.type !== 'skeletonRow') {
+              delete tree[oldRowId];
+              delete dataRowIdToModelLookup[oldRowId];
+              const skeletonId = getSkeletonRowId(i);
+              rootGroupChildren[i] = skeletonId;
+              tree[skeletonId] = {
+                type: 'skeletonRow',
+                id: skeletonId,
+                parent: _xDataGrid.GRID_ROOT_GROUP_ID,
+                depth: 0
+              };
+            }
+          }
+
+          // 2. Duplicate detection for incoming rows
+          let duplicateRowCount = 0;
+          response.rows.forEach(row => {
+            const rowId = (0, _xDataGrid.gridRowIdSelector)(privateApiRef, row);
+            if (tree[rowId] || dataRowIdToModelLookup[rowId]) {
+              const index = rootGroupChildren.indexOf(rowId);
+              if (index !== -1) {
+                const skeletonId = getSkeletonRowId(index);
+                rootGroupChildren[index] = skeletonId;
+                tree[skeletonId] = {
+                  type: 'skeletonRow',
+                  id: skeletonId,
+                  parent: _xDataGrid.GRID_ROOT_GROUP_ID,
+                  depth: 0
+                };
+              }
+              delete tree[rowId];
+              delete dataRowIdToModelLookup[rowId];
+              duplicateRowCount += 1;
+            }
+          });
+          if (duplicateRowCount > 0) {
+            tree[_xDataGrid.GRID_ROOT_GROUP_ID] = (0, _extends2.default)({}, rootGroup, {
+              children: rootGroupChildren
+            });
+            privateApiRef.current.setState(state => (0, _extends2.default)({}, state, {
+              rows: (0, _extends2.default)({}, state.rows, {
+                tree,
+                dataRowIdToModelLookup
+              })
+            }));
+          }
+
+          // 3. Replace rows
+          privateApiRef.current.unstable_replaceRows(startingIndex, response.rows);
         }
-      });
-      if (duplicateRowCount > 0) {
-        tree[_xDataGrid.GRID_ROOT_GROUP_ID] = (0, _extends2.default)({}, rootGroup, {
-          children: rootGroupChildren
+      } else {
+        // --- ORIGINAL PATH (skeleton → real row replacement) ---
+        // Check for duplicate rows
+        let duplicateRowCount = 0;
+        response.rows.forEach(row => {
+          const rowId = (0, _xDataGrid.gridRowIdSelector)(privateApiRef, row);
+          if (tree[rowId] || dataRowIdToModelLookup[rowId]) {
+            const index = rootGroupChildren.indexOf(rowId);
+            if (index !== -1) {
+              const skeletonId = getSkeletonRowId(index);
+              rootGroupChildren[index] = skeletonId;
+              tree[skeletonId] = {
+                type: 'skeletonRow',
+                id: skeletonId,
+                parent: _xDataGrid.GRID_ROOT_GROUP_ID,
+                depth: 0
+              };
+            }
+            delete tree[rowId];
+            delete dataRowIdToModelLookup[rowId];
+            duplicateRowCount += 1;
+          }
         });
-        privateApiRef.current.setState(state => (0, _extends2.default)({}, state, {
-          rows: (0, _extends2.default)({}, state.rows, {
-            tree,
-            dataRowIdToModelLookup
-          })
-        }));
+        if (duplicateRowCount > 0) {
+          tree[_xDataGrid.GRID_ROOT_GROUP_ID] = (0, _extends2.default)({}, rootGroup, {
+            children: rootGroupChildren
+          });
+          privateApiRef.current.setState(state => (0, _extends2.default)({}, state, {
+            rows: (0, _extends2.default)({}, state.rows, {
+              tree,
+              dataRowIdToModelLookup
+            })
+          }));
+        }
+        privateApiRef.current.unstable_replaceRows(startingIndex, response.rows);
       }
-      privateApiRef.current.unstable_replaceRows(startingIndex, response.rows);
     }
     rowsStale.current = false;
     if (loadingTrigger.current === null) {
@@ -237,8 +324,11 @@ const useGridDataSourceLazyLoader = (privateApiRef, props) => {
       params: params.fetchParams,
       response
     }, false);
+    if (loadingTrigger.current === LoadingTrigger.VIEWPORT) {
+      startPolling(params.fetchParams);
+    }
     privateApiRef.current.requestPipeProcessorsApplication('hydrateRows');
-  }, [privateApiRef, updateLoadingTrigger, addSkeletonRows]);
+  }, [privateApiRef, updateLoadingTrigger, addSkeletonRows, startPolling]);
   const handleRowCountChange = React.useCallback(() => {
     if (rowsStale.current || loadingTrigger.current === null) {
       return;
@@ -296,26 +386,46 @@ const useGridDataSourceLazyLoader = (privateApiRef, props) => {
       visibleRows: currentVisibleRows.rows,
       range: renderContext
     });
+    const paginationModel = (0, _xDataGrid.gridPaginationModelSelector)(privateApiRef);
     if (!skeletonRowsSection) {
+      // SWR: No skeleton rows in viewport — all visible rows have real data.
+      // Schedule background revalidation if cache has expired for this range.
+      if (loadingTrigger.current === LoadingTrigger.VIEWPORT) {
+        const adjustedParams = (0, _utils.adjustRowParams)(getRowsParams, {
+          pageSize: paginationModel.pageSize,
+          rowCount: privateApiRef.current.state.pagination.rowCount
+        });
+        revalidate(adjustedParams);
+        startPolling(adjustedParams);
+      }
       return;
     }
     getRowsParams.start = skeletonRowsSection.firstRowIndex;
     getRowsParams.end = skeletonRowsSection.lastRowIndex;
-    const paginationModel = (0, _xDataGrid.gridPaginationModelSelector)(privateApiRef);
     fetchRows((0, _utils.adjustRowParams)(getRowsParams, {
       pageSize: paginationModel.pageSize,
       rowCount: privateApiRef.current.state.pagination.rowCount
     }));
-  }, [privateApiRef, fetchRows]);
+  }, [privateApiRef, fetchRows, revalidate, startPolling]);
   const throttledHandleRenderedRowsIntervalChange = React.useMemo(() => (0, _throttle.throttle)(handleRenderedRowsIntervalChange, props.lazyLoadingRequestThrottleMs), [props.lazyLoadingRequestThrottleMs, handleRenderedRowsIntervalChange]);
   React.useEffect(() => {
     return () => {
       throttledHandleRenderedRowsIntervalChange.clear();
+      stopPolling();
     };
-  }, [throttledHandleRenderedRowsIntervalChange]);
+  }, [throttledHandleRenderedRowsIntervalChange, stopPolling]);
+
+  // Stop polling when dataSourceRevalidateMs is set to 0
+  React.useEffect(() => {
+    if (props.dataSourceRevalidateMs <= 0) {
+      stopPolling();
+    }
+  }, [props.dataSourceRevalidateMs, stopPolling]);
+  React.useEffect(() => stopPolling, [stopPolling]);
   const handleGridSortModelChange = React.useCallback(newSortModel => {
     rowsStale.current = true;
     throttledHandleRenderedRowsIntervalChange.clear();
+    stopPolling();
     previousLastRowIndex.current = 0;
     const paginationModel = (0, _xDataGrid.gridPaginationModelSelector)(privateApiRef);
     const filterModel = (0, _xDataGrid.gridFilterModelSelector)(privateApiRef);
@@ -327,10 +437,11 @@ const useGridDataSourceLazyLoader = (privateApiRef, props) => {
     };
     privateApiRef.current.setLoading(true);
     debouncedFetchRows(getRowsParams);
-  }, [privateApiRef, debouncedFetchRows, throttledHandleRenderedRowsIntervalChange]);
+  }, [privateApiRef, debouncedFetchRows, throttledHandleRenderedRowsIntervalChange, stopPolling]);
   const handleGridFilterModelChange = React.useCallback(newFilterModel => {
     rowsStale.current = true;
     throttledHandleRenderedRowsIntervalChange.clear();
+    stopPolling();
     previousLastRowIndex.current = 0;
     const paginationModel = (0, _xDataGrid.gridPaginationModelSelector)(privateApiRef);
     const sortModel = (0, _xDataGrid.gridSortModelSelector)(privateApiRef);
@@ -342,7 +453,7 @@ const useGridDataSourceLazyLoader = (privateApiRef, props) => {
     };
     privateApiRef.current.setLoading(true);
     debouncedFetchRows(getRowsParams);
-  }, [privateApiRef, debouncedFetchRows, throttledHandleRenderedRowsIntervalChange]);
+  }, [privateApiRef, debouncedFetchRows, throttledHandleRenderedRowsIntervalChange, stopPolling]);
   const handleDragStart = React.useCallback(row => {
     draggedRowId.current = row.id;
   }, []);

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v8.27.2
+ * @mui/x-data-grid-pro v8.27.4
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "8.27.2",
+  "version": "8.27.4",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Data Grid components.",
   "license": "SEE LICENSE IN LICENSE",
@@ -37,9 +37,9 @@
     "@mui/utils": "^7.3.5",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
+    "@mui/x-internals": "8.26.0",
     "@mui/x-license": "8.26.0",
-    "@mui/x-data-grid": "8.27.1",
-    "@mui/x-internals": "8.26.0"
+    "@mui/x-data-grid": "8.27.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",