add unstbale_ prefix and include debounce in the demo

docs/data/data-grid/row-updates/LazyLoadingGrid.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { debounce } from '@mui/material/utils';
 import { DataGridPro, useGridApiRef } from '@mui/x-data-grid-pro';
 import { createFakeServer, loadServerRows } from '@mui/x-data-grid-generator';
 
@@ -69,12 +70,21 @@ export default function LazyLoadingGrid() {
  }, [dataServerSide, fetchRow]);
 
  // Fetch rows as they become visible in the viewport
- const handleFetchRows = async (params) => {
- const { slice, total } = await fetchRow(params);
+ const handleFetchRows = React.useCallback(
+ async (params) => {
+ console.log(params);
+ const { slice, total } = await fetchRow(params);
+
+ apiRef.current.unstable_replaceRows(params.firstRowToRender, slice);
+ setRowCount(total);
+ },
+ [apiRef, fetchRow],
+ );
 
- apiRef.current.replaceRows(params.firstRowToRender, slice);
- setRowCount(total);
- };
+ const debouncedHandleFetchRows = React.useMemo(
+ () => debounce(handleFetchRows, 200),
+ [handleFetchRows],
+ );
 
  return (
  <div style={{ height: 400, width: '100%' }}>
@@ -87,7 +97,7 @@ export default function LazyLoadingGrid() {
  sortingMode="server"
  filterMode="server"
  rowsLoadingMode="server"
- onFetchRows={handleFetchRows}
+ onFetchRows={debouncedHandleFetchRows}
  experimentalFeatures={{
  lazyLoading: true,
  }}

docs/data/data-grid/row-updates/LazyLoadingGrid.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { debounce } from '@mui/material/utils';
 import {
  DataGridPro,
  GridFetchRowsParams,
@@ -77,12 +78,20 @@ export default function LazyLoadingGrid() {
  }, [dataServerSide, fetchRow]);
 
  // Fetch rows as they become visible in the viewport
- const handleFetchRows = async (params: GridFetchRowsParams) => {
- const { slice, total } = await fetchRow(params);
+ const handleFetchRows = React.useCallback(
+ async (params: GridFetchRowsParams) => {
+ const { slice, total } = await fetchRow(params);
+
+ apiRef.current.unstable_replaceRows(params.firstRowToRender, slice);
+ setRowCount(total);
+ },
+ [apiRef, fetchRow],
+ );
 
- apiRef.current.replaceRows(params.firstRowToRender, slice);
- setRowCount(total);
- };
+ const debouncedHandleFetchRows = React.useMemo(
+ () => debounce(handleFetchRows, 200),
+ [handleFetchRows],
+ );
 
  return (
  <div style={{ height: 400, width: '100%' }}>
@@ -95,7 +104,7 @@ export default function LazyLoadingGrid() {
  sortingMode="server"
  filterMode="server"
  rowsLoadingMode="server"
- onFetchRows={handleFetchRows}
+ onFetchRows={debouncedHandleFetchRows}
  experimentalFeatures={{
  lazyLoading: true,
  }}

docs/data/data-grid/row-updates/LazyLoadingGrid.tsx.preview

@@ -7,7 +7,7 @@
  sortingMode="server"
  filterMode="server"
  rowsLoadingMode="server"
- onFetchRows={handleFetchRows}
+ onFetchRows={debouncedHandleFetchRows}
  experimentalFeatures={{
  lazyLoading: true,
  }}

docs/data/data-grid/row-updates/row-updates.md

@@ -65,7 +65,7 @@ Finally, replace the empty rows with the newly fetched ones using `apiRef.curren
 {{"demo": "LazyLoadingGrid.js", "bg": "inline", "disableAd": true}}
 
 :::warning
-The `onFetchRows` callback is called every time a new row is in the viewport, so when you scroll, you can easily send multiple requests to your backend. We recommend developers limit those by implementing throttling.
+The `onFetchRows` callback is called every time a new row is in the viewport, so when you scroll, you can easily send multiple requests to your backend. We recommend developers limit those by implementing debouncing.
 :::
 
 :::info

docs/pages/x/api/data-grid/grid-api.md

@@ -71,7 +71,6 @@ import { GridApi } from '@mui/x-data-grid-pro';
 | <span class="prop-name">pinColumn [<span class="plan-pro" title="Pro plan"></span>](/x/introduction/licensing/#pro-plan)</span> | <span class="prop-type">(field: string, side: GridPinnedPosition) =&gt; void</span> | Pins a column to the left or right side of the grid. |
 | <span class="prop-name">publishEvent</span> | <span class="prop-type">GridEventPublisher</span> | Emits an event. |
 | <span class="prop-name">removeRowGroupingCriteria [<span class="plan-premium" title="Premium plan"></span>](https://mui.com/store/items/material-ui-premium/)</span> | <span class="prop-type">(groupingCriteriaField: string) =&gt; void</span> | Remove the field from the row grouping model. |
-| <span class="prop-name">replaceRows</span> | <span class="prop-type">(firstRowToReplace: number, newRows: GridRowModel[]) =&gt; void</span> | Replace a set of rows with new rows. |
 | <span class="prop-name">resize</span> | <span class="prop-type">() =&gt; void</span> | Triggers a resize of the component and recalculation of width and height. |
 | <span class="prop-name">restoreState</span> | <span class="prop-type">(stateToRestore: InitialState) =&gt; void</span> | Inject the given values into the state of the DataGrid. |
 | <span class="prop-name">scroll</span> | <span class="prop-type">(params: Partial&lt;GridScrollParams&gt;) =&gt; void</span> | Triggers the viewport to scroll to the given positions (in pixels). |
@@ -121,6 +120,7 @@ import { GridApi } from '@mui/x-data-grid-pro';
 | <span class="prop-name">unpinColumn [<span class="plan-pro" title="Pro plan"></span>](/x/introduction/licensing/#pro-plan)</span> | <span class="prop-type">(field: string) =&gt; void</span> | Unpins a column. |
 | <span class="prop-name">unstable_getAllGroupDetails</span> | <span class="prop-type">() =&gt; GridColumnGroupLookup</span> | Returns the column group lookup. |
 | <span class="prop-name">unstable_getColumnGroupPath</span> | <span class="prop-type">(field: string) =&gt; GridColumnGroup['groupId'][]</span> | Returns the id of the groups leading to the requested column.<br />The array is ordered by increasing depth (the last element is the direct parent of the column). |
+| <span class="prop-name">unstable_replaceRows</span> | <span class="prop-type">(firstRowToReplace: number, newRows: GridRowModel[]) =&gt; void</span> | Replace a set of rows with new rows. |
 | <span class="prop-name">unstable_setPinnedRows [<span class="plan-pro" title="Pro plan"></span>](/x/introduction/licensing/#pro-plan)</span> | <span class="prop-type">(pinnedRows?: GridPinnedRowsProp) =&gt; void</span> | Changes the pinned rows. |
 | <span class="prop-name">updateColumn</span> | <span class="prop-type">(col: GridColDef) =&gt; void</span> | Updates the definition of a column. |
 | <span class="prop-name">updateColumns</span> | <span class="prop-type">(cols: GridColDef[]) =&gt; void</span> | Updates the definition of multiple columns at the same time. |

packages/grid/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx

@@ -92,7 +92,7 @@ describe('<DataGridPro /> - Lazy loader', () => {
  expect(getRow(3).dataset.id).to.equal('auto-generated-skeleton-row-root-0');
  });
 
- it('should update all rows accordingly when `apiRef.current.replaceRows` is called', () => {
+ it('should update all rows accordingly when `apiRef.current.unstable_replaceRows` is called', () => {
  render(<TestLazyLoader rowCount={6} />);
 
  const newRows: GridRowModel[] = [
@@ -106,7 +106,7 @@ describe('<DataGridPro /> - Lazy loader', () => {
  'auto-generated-skeleton-row-root-1',
  'auto-generated-skeleton-row-root-2',
  ]);
- act(() => apiRef.current.replaceRows(4, newRows));
+ act(() => apiRef.current.unstable_replaceRows(4, newRows));
 
  const updatedAllRows = apiRef.current.state.rows.ids;
  expect(updatedAllRows.slice(4, 6)).to.deep.equal([4, 5]);

packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts

@@ -332,12 +332,12 @@ export const useGridRows = (
  [apiRef, logger],
  );
 
- const replaceRows = React.useCallback<GridRowApi['replaceRows']>(
+ const replaceRows = React.useCallback<GridRowApi['unstable_replaceRows']>(
  (firstRowToRender, newRows) => {
  if (props.signature === GridSignature.DataGrid && newRows.length > 1) {
  throw new Error(
  [
- "MUI: You can't replace rows using `apiRef.current.replaceRows` on the DataGrid.",
+ "MUI: You can't replace rows using `apiRef.current.unstable_replaceRows` on the DataGrid.",
  'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.',
  ].join('\n'),
  );
@@ -409,7 +409,7 @@ export const useGridRows = (
  getRowNode,
  getRowIndexRelativeToVisibleRows,
  getRowGroupChildren,
- replaceRows,
+ unstable_replaceRows: replaceRows,
  };
 
  /**

packages/grid/x-data-grid/src/models/api/gridRowApi.ts

@@ -99,5 +99,5 @@ export interface GridRowApi {
  * @param {number} firstRowToReplace The index of the first row to be replaced.
  * @param {GridRowModel[]} newRows The new rows.
  */
- replaceRows: (firstRowToReplace: number, newRows: GridRowModel[]) => void;
+ unstable_replaceRows: (firstRowToReplace: number, newRows: GridRowModel[]) => void;
 }