[core] Rework useGridRows high frequency update

docs/src/pages/components/data-grid/rows/ThrottledRowsGrid.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { DataGridPro, useGridApiRef } from '@mui/x-data-grid-pro';
+import { interval } from 'rxjs';
+import { randomInt, randomUserName } from '@mui/x-data-grid-generator';
+
+const columns = [
+  { field: 'id' },
+  { field: 'username', width: 150 },
+  { field: 'age', width: 80, type: 'number' },
+];
+
+const rows = [
+  { id: 1, username: randomUserName(), age: randomInt(10, 80) },
+  { id: 2, username: randomUserName(), age: randomInt(10, 80) },
+  { id: 3, username: randomUserName(), age: randomInt(10, 80) },
+  { id: 4, username: randomUserName(), age: randomInt(10, 80) },
+];
+
+export default function ApiRefRowsGrid() {
+  const apiRef = useGridApiRef();
+
+  React.useEffect(() => {
+    const subscription = interval(10).subscribe(() => {
+      apiRef.current.updateRows([
+        {
+          id: randomInt(1, 4),
+          username: randomUserName(),
+          age: randomInt(10, 80),
+        },
+        {
+          id: randomInt(1, 4),
+          username: randomUserName(),
+          age: randomInt(10, 80),
+        },
+      ]);
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [apiRef]);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        rows={rows}
+        columns={columns}
+        apiRef={apiRef}
+        throttleRowsMs={500}
+      />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/rows/ThrottledRowsGrid.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { DataGridPro, useGridApiRef } from '@mui/x-data-grid-pro';
+import { interval } from 'rxjs';
+import { randomInt, randomUserName } from '@mui/x-data-grid-generator';
+
+const columns = [
+  { field: 'id' },
+  { field: 'username', width: 150 },
+  { field: 'age', width: 80, type: 'number' },
+];
+
+const rows = [
+  { id: 1, username: randomUserName(), age: randomInt(10, 80) },
+  { id: 2, username: randomUserName(), age: randomInt(10, 80) },
+  { id: 3, username: randomUserName(), age: randomInt(10, 80) },
+  { id: 4, username: randomUserName(), age: randomInt(10, 80) },
+];
+
+export default function ApiRefRowsGrid() {
+  const apiRef = useGridApiRef();
+
+  React.useEffect(() => {
+    const subscription = interval(10).subscribe(() => {
+      apiRef.current.updateRows([
+        {
+          id: randomInt(1, 4),
+          username: randomUserName(),
+          age: randomInt(10, 80),
+        },
+        {
+          id: randomInt(1, 4),
+          username: randomUserName(),
+          age: randomInt(10, 80),
+        },
+      ]);
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [apiRef]);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        rows={rows}
+        columns={columns}
+        apiRef={apiRef}
+        throttleRowsMs={500}
+      />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/rows/rows.md

@@ -53,6 +53,15 @@ Alternatively, if you would like to delete a row, you would need to pass an extr
 apiRef.current.updateRows([{ id: 1, _action: 'delete' }]);
 ```
 
+### Throttling grid update [<span class="pro"></span>](https://material-ui.com/store/items/material-ui-pro/)
+
+If you have high frequency updates, but you want to keep good performances, you can pass set the `throttleRowsMs` prop to define the maximum update frequency.
+When receiving updates more frequent than this threshold, the Grid will wait before applying the new values to avoid triggering heavy work too many times.
+
+The following demo updates the rows every 10ms but only apply them to the Grid every 500ms.
+
+{{"demo": "pages/components/data-grid/rows/ThrottledRowsGrid.js", "bg": "inline"}}
+
 ## Row height
 
 By default, the rows have a height of 52 pixels.

packages/grid/_modules_/grid/constants/eventsConstants.ts

@@ -281,23 +281,11 @@ export enum GridEvents {
    * Fired when the user ends reordering a column.
    */
   columnOrderChange = 'columnOrderChange',
-  /**
-   * Fired when some of the rows are updated.
-   * @ignore - do not document.
-   */
-  rowsUpdate = 'rowsUpdate',
   /**
    * Fired when all the rows are updated.
    * @ignore - do not document.
    */
   rowsSet = 'rowsSet',
-  /**
-   * Implementation detail.
-   * Fired to reset the sortedRow when the set of rows changes.
-   * It's important as the rendered rows are coming from the sortedRow
-   * @ignore - do not document.
-   */
-  rowsClear = 'rowsClear',
   /**
    * Fired when the columns state is changed.
    * Called with an array of strings corresponding to the field names.

packages/grid/_modules_/grid/hooks/features/core/gridState.ts

@@ -23,7 +23,7 @@ import {
 } from '../filter/visibleGridRowsState';
 import { GridFocusState, GridTabIndexState } from '../focus/gridFocusState';
 import { GridPreferencePanelState } from '../preferencesPanel/gridPreferencePanelState';
-import { getInitialGridRowState, InternalGridRowsState } from '../rows/gridRowsState';
+import { getInitialGridRowState, GridRowsState } from '../rows/gridRowsState';
 import { GridSelectionModel } from '../../../models/gridSelectionModel';
 import { getInitialGridSortingState, GridSortingState } from '../sorting/gridSortingState';
 import {
@@ -33,7 +33,7 @@ import {
 import { getInitialPaginationState, GridPaginationState } from '../pagination/gridPaginationState';
 
 export interface GridState {
-  rows: InternalGridRowsState;
+  rows: GridRowsState;
   editRows: GridEditRowsModel;
   pagination: GridPaginationState;
   columns: GridColumnsState;

packages/grid/_modules_/grid/hooks/features/filter/useGridFilter.ts

@@ -321,6 +321,5 @@ export const useGridFilter = (
   }, [apiRef, logger, props.filterModel, setGridState]);
 
   useGridApiEventHandler(apiRef, GridEvents.rowsSet, apiRef.current.applyFilters);
-  useGridApiEventHandler(apiRef, GridEvents.rowsUpdate, apiRef.current.applyFilters);
   useGridApiEventHandler(apiRef, GridEvents.columnsChange, onColUpdated);
 };

packages/grid/_modules_/grid/hooks/features/rows/gridRowsSelector.ts

@@ -1,28 +1,28 @@
 import { createSelector } from 'reselect';
 import { GridRowId, GridRowModel } from '../../../models/gridRows';
 import { GridState } from '../core/gridState';
-import { InternalGridRowsState } from './gridRowsState';
+import { GridRowsState } from './gridRowsState';
 
 export type GridRowsLookup = Record<GridRowId, GridRowModel>;
 
 export const gridRowsStateSelector = (state: GridState) => state.rows;
 
 export const gridRowCountSelector = createSelector(
   gridRowsStateSelector,
-  (rows: InternalGridRowsState) => rows && rows.totalRowCount,
+  (rows: GridRowsState) => rows.totalRowCount,
 );
 
 export const gridRowsLookupSelector = createSelector(
   gridRowsStateSelector,
-  (rows: InternalGridRowsState) => rows && rows.idRowsLookup,
+  (rows: GridRowsState) => rows.idRowsLookup,
 );
 
 export const unorderedGridRowIdsSelector = createSelector(
   gridRowsStateSelector,
-  (rows: InternalGridRowsState) => rows.allRows,
+  (rows: GridRowsState) => rows.allRows,
 );
 
 export const unorderedGridRowModelsSelector = createSelector(
   gridRowsStateSelector,
-  (rows: InternalGridRowsState) => rows.allRows.map((id) => rows.idRowsLookup[id]),
+  (rows: GridRowsState) => rows.allRows.map((id) => rows.idRowsLookup[id]),
 );

packages/grid/_modules_/grid/hooks/features/rows/gridRowsState.ts

@@ -1,12 +1,18 @@
 import { GridRowId, GridRowModel } from '../../../models/gridRows';
 
-export interface InternalGridRowsState {
+export interface GridRowsState {
   idRowsLookup: Record<GridRowId, GridRowModel>;
   allRows: GridRowId[];
   totalRowCount: number;
 }
 
-export const getInitialGridRowState: () => InternalGridRowsState = () => ({
+export interface GridRowsInternalCache {
+  state: GridRowsState;
+  timeout: NodeJS.Timeout | null;
+  lastUpdateMs: number | null;
+}
+
+export const getInitialGridRowState: () => GridRowsState = () => ({
   idRowsLookup: {},
   allRows: [],
   totalRowCount: 0,