@mui/x-data-grid 5.11.0 → 5.12.1

package/hooks/features/filter/gridFilterUtils.js

@@ -10,7 +10,7 @@ import { gridColumnFieldsSelector } from '../columns';
  * @return {GridFilterItem} The clean filter item with an uniq ID and an always-defined operatorValue.
  * TODO: Make the typing reflect the different between GridFilterInputItem and GridFilterItem.
  */
-const cleanFilterItem = (item, apiRef) => {
+export const cleanFilterItem = (item, apiRef) => {
   const cleanItem = _extends({}, item);
 
   if (cleanItem.id == null) {
@@ -25,7 +25,6 @@ const cleanFilterItem = (item, apiRef) => {
 
   return cleanItem;
 };
-
 const filterModelDisableMultiColumnsFilteringWarning = buildWarning(['MUI: The `filterModel` can only contain a single item when the `disableMultipleColumnsFiltering` prop is set to `true`.', 'If you are using the community version of the `DataGrid`, this prop is always `true`.'], 'error');
 const filterModelMissingItemIdWarning = buildWarning("MUI: The 'id' field is required on `filterModel.items` when you use multiple filters.", 'error');
 const filterModelMissingItemOperatorWarning = buildWarning(['MUI: One of your filtering item have no `operatorValue` provided.', 'This property will become required on `@mui/x-data-grid@6.X`.']);
@@ -65,10 +64,8 @@ export const sanitizeFilterModel = (model, disableMultipleColumnsFiltering, apiR
 
   return model;
 };
-export const mergeStateWithFilterModel = (filterModel, disableMultipleColumnsFiltering, apiRef) => state => _extends({}, state, {
-  filter: _extends({}, state.filter, {
-    filterModel: sanitizeFilterModel(filterModel, disableMultipleColumnsFiltering, apiRef)
-  })
+export const mergeStateWithFilterModel = (filterModel, disableMultipleColumnsFiltering, apiRef) => filteringState => _extends({}, filteringState, {
+  filterModel: sanitizeFilterModel(filterModel, disableMultipleColumnsFiltering, apiRef)
 });
 /**
  * Generates a method to easily check if a row is matching the current filter model.

package/hooks/features/filter/useGridFilter.js

@@ -12,7 +12,7 @@ import { useFirstRender } from '../../utils/useFirstRender';
 import { gridRowIdsSelector } from '../rows';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
-import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel } from './gridFilterUtils';
+import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel, cleanFilterItem } from './gridFilterUtils';
 import { isDeepEqual } from '../../../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const filterStateInitializer = (state, props, apiRef) => {
@@ -37,7 +37,7 @@ export const useGridFilter = (apiRef, props) => {
   var _props$componentsProp2;
 
   const logger = useGridLogger(apiRef, 'useGridFilter');
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'filter',
     propModel: props.filterModel,
     propOnChange: props.onFilterModelChange,
@@ -78,7 +78,23 @@ export const useGridFilter = (apiRef, props) => {
 
     apiRef.current.setFilterModel(_extends({}, filterModel, {
       items
-    }));
+    }), 'upsertFilterItem');
+  }, [apiRef]);
+  const upsertFilterItems = React.useCallback(items => {
+    const filterModel = gridFilterModelSelector(apiRef);
+    const existingItems = [...filterModel.items];
+    items.forEach(item => {
+      const itemIndex = items.findIndex(filterItem => filterItem.id === item.id);
+
+      if (itemIndex === -1) {
+        existingItems.push(item);
+      } else {
+        existingItems[itemIndex] = item;
+      }
+    });
+    apiRef.current.setFilterModel(_extends({}, filterModel, {
+      items
+    }), 'upsertFilterItems');
   }, [apiRef]);
   const deleteFilterItem = React.useCallback(itemToDelete => {
     const filterModel = gridFilterModelSelector(apiRef);
@@ -90,7 +106,7 @@ export const useGridFilter = (apiRef, props) => {
 
     apiRef.current.setFilterModel(_extends({}, filterModel, {
       items
-    }));
+    }), 'deleteFilterItem');
   }, [apiRef]);
   const showFilterPanel = React.useCallback(targetColumnField => {
     logger.debug('Displaying filter panel');
@@ -104,13 +120,13 @@ export const useGridFilter = (apiRef, props) => {
       if (filterItemOnTarget) {
         newFilterItems = filterItemsWithValue;
       } else if (props.disableMultipleColumnsFiltering) {
-        newFilterItems = [{
+        newFilterItems = [cleanFilterItem({
           columnField: targetColumnField
-        }];
+        }, apiRef)];
       } else {
-        newFilterItems = [...filterItemsWithValue, {
+        newFilterItems = [...filterItemsWithValue, cleanFilterItem({
           columnField: targetColumnField
-        }];
+        }, apiRef)];
       }
 
       apiRef.current.setFilterModel(_extends({}, filterModel, {
@@ -133,7 +149,7 @@ export const useGridFilter = (apiRef, props) => {
 
     apiRef.current.setFilterModel(_extends({}, filterModel, {
       linkOperator
-    }));
+    }), 'changeLogicOperator');
   }, [apiRef]);
   const setQuickFilterValues = React.useCallback(values => {
     const filterModel = gridFilterModelSelector(apiRef);
@@ -146,12 +162,12 @@ export const useGridFilter = (apiRef, props) => {
       quickFilterValues: [...values]
     }));
   }, [apiRef]);
-  const setFilterModel = React.useCallback(model => {
+  const setFilterModel = React.useCallback((model, reason) => {
     const currentModel = gridFilterModelSelector(apiRef);
 
     if (currentModel !== model) {
       logger.debug('Setting filter model');
-      apiRef.current.setState(mergeStateWithFilterModel(model, props.disableMultipleColumnsFiltering, apiRef));
+      apiRef.current.unstable_updateControlState('filter', mergeStateWithFilterModel(model, props.disableMultipleColumnsFiltering, apiRef), reason);
       apiRef.current.unstable_applyFilters();
     }
   }, [apiRef, logger, props.disableMultipleColumnsFiltering]);
@@ -164,6 +180,7 @@ export const useGridFilter = (apiRef, props) => {
     unstable_applyFilters: applyFilters,
     deleteFilterItem,
     upsertFilterItem,
+    upsertFilterItems,
     setFilterModel,
     showFilterPanel,
     hideFilterPanel,
@@ -197,7 +214,7 @@ export const useGridFilter = (apiRef, props) => {
       return params;
     }
 
-    apiRef.current.setState(mergeStateWithFilterModel(filterModel, props.disableMultipleColumnsFiltering, apiRef));
+    apiRef.current.unstable_updateControlState('filter', mergeStateWithFilterModel(filterModel, props.disableMultipleColumnsFiltering, apiRef), 'restoreState');
     return _extends({}, params, {
       callbacks: [...params.callbacks, apiRef.current.unstable_applyFilters]
     });

package/hooks/features/pagination/useGridPage.js

@@ -39,7 +39,7 @@ export const useGridPage = (apiRef, props) => {
 
   const logger = useGridLogger(apiRef, 'useGridPage');
   const visibleTopLevelRowCount = useGridSelector(apiRef, gridVisibleTopLevelRowCountSelector);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'page',
     propModel: props.page,
     propOnChange: props.onPageChange,

package/hooks/features/pagination/useGridPageSize.js

@@ -21,7 +21,7 @@ export const useGridPageSize = (apiRef, props) => {
 
   const logger = useGridLogger(apiRef, 'useGridPageSize');
   const rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'pageSize',
     propModel: props.pageSize,
     propOnChange: props.onPageSizeChange,

package/hooks/features/rows/gridRowsState.d.ts

@@ -1,4 +1,5 @@
-import { GridRowId, GridRowsLookup, GridRowsProp, GridRowTreeConfig } from '../../../models/gridRows';
+import { GridRowId, GridRowsLookup, GridRowTreeConfig } from '../../../models/gridRows';
+import type { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 export interface GridRowTreeCreationParams {
     ids: GridRowId[];
     idRowsLookup: GridRowsLookup;
@@ -17,14 +18,16 @@ export interface GridRowTreeCreationValue {
     idRowsLookup: GridRowsLookup;
     idToIdLookup: Record<string, GridRowId>;
 }
-export declare type GridRowInternalCacheValue = Omit<GridRowTreeCreationParams, 'previousTree'>;
-export interface GridRowsInternalCache {
-    value: GridRowInternalCacheValue;
+export interface GridRowsInternalCache extends Omit<GridRowTreeCreationParams, 'previousTree'> {
     /**
      * The rows as they were the last time all the rows have been updated at once
      * It is used to avoid processing several time the same set of rows
      */
-    rowsBeforePartialUpdates: GridRowsProp;
+    rowsBeforePartialUpdates: DataGridProcessedProps['rows'];
+    /**
+     * The value of the `loading` prop since the last time that the rows state was updated.
+     */
+    loadingPropBeforePartialUpdates: DataGridProcessedProps['loading'];
 }
 export interface GridRowsState extends GridRowTreeCreationValue {
     /**
@@ -41,4 +44,10 @@ export interface GridRowsState extends GridRowTreeCreationValue {
      * It does not count the expanded children rows.
      */
     totalTopLevelRowCount: number;
+    /**
+     * Tree returned by the `rowTreeCreation` strategy processor.
+     * It is used to re-apply the `hydrateRows` pipe processor without having to recreate the tree.
+     */
+    groupingResponseBeforeRowHydration: GridRowTreeCreationValue;
 }
+export declare type GridHydrateRowsValue = GridRowTreeCreationValue;

package/hooks/features/rows/gridRowsUtils.d.ts

@@ -1,4 +1,8 @@
-import { GridRowId, GridRowModel, GridRowTreeConfig } from '../../../models';
+import * as React from 'react';
+import { GridRowId, GridRowIdGetter, GridRowModel, GridRowTreeConfig } from '../../../models';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+import { GridRowsInternalCache, GridRowsState } from './gridRowsState';
 /**
  * A helper function to check if the id provided is valid.
  * @param {GridRowId} id Id as [[GridRowId]].
@@ -6,4 +10,12 @@ import { GridRowId, GridRowModel, GridRowTreeConfig } from '../../../models';
  * @param {string} detailErrorMessage A custom error message to display for invalid IDs
  */
 export declare function checkGridRowIdIsValid(id: GridRowId, row: GridRowModel | Partial<GridRowModel>, detailErrorMessage?: string): void;
+export declare const getRowIdFromRowModel: (rowModel: GridRowModel, getRowId?: GridRowIdGetter<any> | undefined, detailErrorMessage?: string | undefined) => GridRowId;
+export declare const createRowsInternalCache: ({ rows, getRowId, loading, }: Pick<DataGridProcessedProps, 'rows' | 'getRowId' | 'loading'>) => GridRowsInternalCache;
+export declare const getRowsStateFromCache: ({ apiRef, previousTree, rowCountProp, loadingProp, }: {
+    apiRef: React.MutableRefObject<GridApiCommunity>;
+    previousTree: GridRowTreeConfig | null;
+    rowCountProp: number | undefined;
+    loadingProp: boolean | undefined;
+}) => GridRowsState;
 export declare const getTreeNodeDescendants: (tree: GridRowTreeConfig, parentId: GridRowId, skipAutoGeneratedRows: boolean) => GridRowId[];

package/hooks/features/rows/gridRowsUtils.js

@@ -1,3 +1,7 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["rowsBeforePartialUpdates"];
+
 /**
  * A helper function to check if the id provided is valid.
  * @param {GridRowId} id Id as [[GridRowId]].
@@ -9,6 +13,56 @@ export function checkGridRowIdIsValid(id, row, detailErrorMessage = 'A row was p
     throw new Error(['MUI: The data grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
   }
 }
+export const getRowIdFromRowModel = (rowModel, getRowId, detailErrorMessage) => {
+  const id = getRowId ? getRowId(rowModel) : rowModel.id;
+  checkGridRowIdIsValid(id, rowModel, detailErrorMessage);
+  return id;
+};
+export const createRowsInternalCache = ({
+  rows,
+  getRowId,
+  loading
+}) => {
+  const cache = {
+    rowsBeforePartialUpdates: rows,
+    loadingPropBeforePartialUpdates: loading,
+    idRowsLookup: {},
+    idToIdLookup: {},
+    ids: []
+  };
+
+  for (let i = 0; i < rows.length; i += 1) {
+    const row = rows[i];
+    const id = getRowIdFromRowModel(row, getRowId);
+    cache.idRowsLookup[id] = row;
+    cache.idToIdLookup[id] = id;
+    cache.ids.push(id);
+  }
+
+  return cache;
+};
+export const getRowsStateFromCache = ({
+  apiRef,
+  previousTree,
+  rowCountProp,
+  loadingProp
+}) => {
+  const _apiRef$current$unsta = apiRef.current.unstable_caches.rows,
+        cacheForGrouping = _objectWithoutPropertiesLoose(_apiRef$current$unsta, _excluded);
+
+  const rowCount = rowCountProp != null ? rowCountProp : 0;
+  const groupingResponse = apiRef.current.unstable_applyStrategyProcessor('rowTreeCreation', _extends({}, cacheForGrouping, {
+    previousTree
+  }));
+  const processedGroupingResponse = apiRef.current.unstable_applyPipeProcessors('hydrateRows', groupingResponse);
+  const dataTopLevelRowCount = processedGroupingResponse.treeDepth === 1 ? processedGroupingResponse.ids.length : Object.values(processedGroupingResponse.tree).filter(node => node.parent == null).length;
+  return _extends({}, processedGroupingResponse, {
+    groupingResponseBeforeRowHydration: groupingResponse,
+    loading: loadingProp,
+    totalRowCount: Math.max(rowCount, processedGroupingResponse.ids.length),
+    totalTopLevelRowCount: Math.max(rowCount, dataTopLevelRowCount)
+  });
+};
 export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) => {
   var _tree$parentId;
 

package/hooks/features/rows/useGridRows.js

@@ -7,76 +7,21 @@ import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEve
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridSortedRowIdsSelector } from '../sorting/gridSortingSelector';
 import { gridFilteredRowsLookupSelector } from '../filter/gridFilterSelector';
-import { checkGridRowIdIsValid, getTreeNodeDescendants } from './gridRowsUtils';
-
-function getGridRowId(rowModel, getRowId, detailErrorMessage) {
-  const id = getRowId ? getRowId(rowModel) : rowModel.id;
-  checkGridRowIdIsValid(id, rowModel, detailErrorMessage);
-  return id;
-}
-
-const convertRowsPropToState = ({
-  prevCache: prevState,
-  rows,
-  getRowId
-}) => {
-  let value;
-
-  if (rows) {
-    value = {
-      idRowsLookup: {},
-      idToIdLookup: {},
-      ids: []
-    };
-
-    for (let i = 0; i < rows.length; i += 1) {
-      const row = rows[i];
-      const id = getGridRowId(row, getRowId);
-      value.idRowsLookup[id] = row;
-      value.idToIdLookup[id] = id;
-      value.ids.push(id);
-    }
-  } else {
-    value = prevState.value;
-  }
-
-  return {
-    value,
-    rowsBeforePartialUpdates: rows != null ? rows : prevState.rowsBeforePartialUpdates
-  };
-};
-
-const getRowsStateFromCache = (rowsCache, previousTree, apiRef, rowCountProp, loadingProp) => {
-  const {
-    value
-  } = rowsCache;
-  const rowCount = rowCountProp != null ? rowCountProp : 0;
-  const groupingResponse = apiRef.current.unstable_applyStrategyProcessor('rowTreeCreation', _extends({}, value, {
-    previousTree
-  }));
-  const dataTopLevelRowCount = groupingResponse.treeDepth === 1 ? groupingResponse.ids.length : Object.values(groupingResponse.tree).filter(node => node.parent == null).length;
-  return _extends({}, groupingResponse, {
-    loading: loadingProp,
-    totalRowCount: Math.max(rowCount, groupingResponse.ids.length),
-    totalTopLevelRowCount: Math.max(rowCount, dataTopLevelRowCount)
-  });
-};
-
+import { getTreeNodeDescendants, createRowsInternalCache, getRowsStateFromCache, getRowIdFromRowModel } from './gridRowsUtils';
+import { useGridRegisterPipeApplier } from '../../core/pipeProcessing';
 export const rowsStateInitializer = (state, props, apiRef) => {
-  apiRef.current.unstable_caches.rows = convertRowsPropToState({
+  apiRef.current.unstable_caches.rows = createRowsInternalCache({
     rows: props.rows,
     getRowId: props.getRowId,
-    prevCache: {
-      value: {
-        idRowsLookup: {},
-        idToIdLookup: {},
-        ids: []
-      },
-      rowsBeforePartialUpdates: []
-    }
+    loading: props.loading
   });
   return _extends({}, state, {
-    rows: getRowsStateFromCache(apiRef.current.unstable_caches.rows, null, apiRef, props.rowCount, props.loading)
+    rows: getRowsStateFromCache({
+      apiRef,
+      previousTree: null,
+      rowCountProp: props.rowCount,
+      loadingProp: props.loading
+    })
   });
 };
 export const useGridRows = (apiRef, props) => {
@@ -105,7 +50,12 @@ export const useGridRows = (apiRef, props) => {
       timeout.current = null;
       lastUpdateMs.current = Date.now();
       apiRef.current.setState(state => _extends({}, state, {
-        rows: getRowsStateFromCache(apiRef.current.unstable_caches.rows, gridRowTreeSelector(apiRef), apiRef, props.rowCount, props.loading)
+        rows: getRowsStateFromCache({
+          apiRef,
+          previousTree: gridRowTreeSelector(apiRef),
+          rowCountProp: props.rowCount,
+          loadingProp: props.loading
+        })
       }));
       apiRef.current.publishEvent('rowsSet');
       apiRef.current.forceUpdate();
@@ -138,12 +88,12 @@ export const useGridRows = (apiRef, props) => {
 
   const setRows = React.useCallback(rows => {
     logger.debug(`Updating all rows, new length ${rows.length}`);
-    throttledRowsChange(convertRowsPropToState({
+    throttledRowsChange(createRowsInternalCache({
       rows,
-      prevCache: apiRef.current.unstable_caches.rows,
-      getRowId: props.getRowId
+      getRowId: props.getRowId,
+      loading: props.loading
     }), true);
-  }, [apiRef, logger, props.getRowId, throttledRowsChange]);
+  }, [logger, props.getRowId, props.loading, throttledRowsChange]);
   const updateRows = React.useCallback(updates => {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
       // TODO: Add test with direct call to `apiRef.current.updateRows` in DataGrid after enabling the `apiRef` on the free plan.
@@ -153,7 +103,7 @@ export const useGridRows = (apiRef, props) => {
 
     const uniqUpdates = new Map();
     updates.forEach(update => {
-      const id = getGridRowId(update, props.getRowId, 'A row was provided without id when calling updateRows():');
+      const id = getRowIdFromRowModel(update, props.getRowId, 'A row was provided without id when calling updateRows():');
 
       if (uniqUpdates.has(id)) {
         uniqUpdates.set(id, _extends({}, uniqUpdates.get(id), update));
@@ -162,16 +112,19 @@ export const useGridRows = (apiRef, props) => {
       }
     });
     const deletedRowIds = [];
-    const newStateValue = {
-      idRowsLookup: _extends({}, apiRef.current.unstable_caches.rows.value.idRowsLookup),
-      idToIdLookup: _extends({}, apiRef.current.unstable_caches.rows.value.idToIdLookup),
-      ids: [...apiRef.current.unstable_caches.rows.value.ids]
+    const prevCache = apiRef.current.unstable_caches.rows;
+    const newCache = {
+      rowsBeforePartialUpdates: prevCache.rowsBeforePartialUpdates,
+      loadingPropBeforePartialUpdates: prevCache.loadingPropBeforePartialUpdates,
+      idRowsLookup: _extends({}, prevCache.idRowsLookup),
+      idToIdLookup: _extends({}, prevCache.idToIdLookup),
+      ids: [...prevCache.ids]
     };
     uniqUpdates.forEach((partialRow, id) => {
       // eslint-disable-next-line no-underscore-dangle
       if (partialRow._action === 'delete') {
-        delete newStateValue.idRowsLookup[id];
-        delete newStateValue.idToIdLookup[id];
+        delete newCache.idRowsLookup[id];
+        delete newCache.idToIdLookup[id];
         deletedRowIds.push(id);
         return;
       }
@@ -179,24 +132,20 @@ export const useGridRows = (apiRef, props) => {
       const oldRow = apiRef.current.getRow(id);
 
       if (!oldRow) {
-        newStateValue.idRowsLookup[id] = partialRow;
-        newStateValue.idToIdLookup[id] = id;
-        newStateValue.ids.push(id);
+        newCache.idRowsLookup[id] = partialRow;
+        newCache.idToIdLookup[id] = id;
+        newCache.ids.push(id);
         return;
       }
 
-      newStateValue.idRowsLookup[id] = _extends({}, apiRef.current.getRow(id), partialRow);
+      newCache.idRowsLookup[id] = _extends({}, apiRef.current.getRow(id), partialRow);
     });
 
     if (deletedRowIds.length > 0) {
-      newStateValue.ids = newStateValue.ids.filter(id => !deletedRowIds.includes(id));
+      newCache.ids = newCache.ids.filter(id => !deletedRowIds.includes(id));
     }
 
-    const state = _extends({}, apiRef.current.unstable_caches.rows, {
-      value: newStateValue
-    });
-
-    throttledRowsChange(state, true);
+    throttledRowsChange(newCache, true);
   }, [props.signature, props.getRowId, throttledRowsChange, apiRef]);
   const getRowModels = React.useCallback(() => {
     const allRows = gridRowIdsSelector(apiRef);
@@ -310,25 +259,25 @@ export const useGridRows = (apiRef, props) => {
 
   const groupRows = React.useCallback(() => {
     logger.info(`Row grouping pre-processing have changed, regenerating the row tree`);
-    let rows;
+    let cache;
 
     if (apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows) {
-      // The `props.rows` has not changed since the last row grouping
-      // We can keep the potential updates stored in `inputRowsAfterUpdates` on the new grouping
-      rows = undefined;
+      // The `props.rows` did not change since the last row grouping
+      // We can use the current rows cache which contains the partial updates done recently.
+      cache = apiRef.current.unstable_caches.rows;
     } else {
       // The `props.rows` has changed since the last row grouping
       // We must use the new `props.rows` on the new grouping
       // This occurs because this event is triggered before the `useEffect` on the rows when both the grouping pre-processing and the rows changes on the same render
-      rows = props.rows;
+      cache = createRowsInternalCache({
+        rows: props.rows,
+        getRowId: props.getRowId,
+        loading: props.loading
+      });
     }
 
-    throttledRowsChange(convertRowsPropToState({
-      rows,
-      getRowId: props.getRowId,
-      prevCache: apiRef.current.unstable_caches.rows
-    }), false);
-  }, [logger, apiRef, props.rows, props.getRowId, throttledRowsChange]);
+    throttledRowsChange(cache, false);
+  }, [logger, apiRef, props.rows, props.getRowId, props.loading, throttledRowsChange]);
   const handleStrategyProcessorChange = React.useCallback(methodName => {
     if (methodName === 'rowTreeCreation') {
       groupRows();
@@ -343,6 +292,18 @@ export const useGridRows = (apiRef, props) => {
   }, [apiRef, groupRows]);
   useGridApiEventHandler(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
   useGridApiEventHandler(apiRef, 'strategyAvailabilityChange', handleStrategyActivityChange);
+  /**
+   * APPLIERS
+   */
+
+  const applyHydrateRowsProcessor = React.useCallback(() => {
+    apiRef.current.setState(state => _extends({}, state, {
+      rows: _extends({}, state.rows, apiRef.current.unstable_applyPipeProcessors('hydrateRows', state.rows.groupingResponseBeforeRowHydration))
+    }));
+    apiRef.current.publishEvent('rowsSet');
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  useGridRegisterPipeApplier(apiRef, 'hydrateRows', applyHydrateRowsProcessor);
   useGridApiMethod(apiRef, rowApi, 'GridRowApi');
   /**
    * EFFECTS
@@ -365,15 +326,15 @@ export const useGridRows = (apiRef, props) => {
     } // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
 
 
-    if (apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows) {
+    if (apiRef.current.unstable_caches.rows.rowsBeforePartialUpdates === props.rows && apiRef.current.unstable_caches.rows.loadingPropBeforePartialUpdates === props.loading) {
       return;
     }
 
     logger.debug(`Updating all rows, new length ${props.rows.length}`);
-    throttledRowsChange(convertRowsPropToState({
+    throttledRowsChange(createRowsInternalCache({
       rows: props.rows,
       getRowId: props.getRowId,
-      prevCache: apiRef.current.unstable_caches.rows
+      loading: props.loading
     }), false);
-  }, [props.rows, props.rowCount, props.getRowId, logger, throttledRowsChange, apiRef]);
+  }, [props.rows, props.rowCount, props.getRowId, props.loading, logger, throttledRowsChange, apiRef]);
 };

package/hooks/features/rows/useGridRowsMeta.d.ts

@@ -7,4 +7,4 @@ export declare const rowsMetaStateInitializer: GridStateInitializer;
  * @requires useGridPageSize (method)
  * @requires useGridPage (method)
  */
-export declare const useGridRowsMeta: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'getRowHeight' | 'getRowSpacing' | 'pagination' | 'paginationMode'>) => void;
+export declare const useGridRowsMeta: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'getRowHeight' | 'getEstimatedRowHeight' | 'getRowSpacing' | 'pagination' | 'paginationMode'>) => void;