[DataGrid] Extract getRowId API method as a selector

docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json

@@ -169,7 +169,9 @@
         "GridRowHeightReturnValue": "The row height value. If <code>null</code> or <code>undefined</code> then the default row height is applied. If &quot;auto&quot; then the row height is calculated based on the content."
       }
     },
-    "getRowId": { "description": "Return the id of a given GridRowModel." },
+    "getRowId": {
+      "description": "Return the id of a given GridRowModel. Ensure the reference of this prop is stable to avoid performance implications. It could be done by either defining the prop outside of the component or by memoizing it."
+    },
     "getRowSpacing": {
       "description": "Function that allows to specify the spacing between rows.",
       "typeDescriptions": {

docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json

@@ -150,7 +150,9 @@
         "GridRowHeightReturnValue": "The row height value. If <code>null</code> or <code>undefined</code> then the default row height is applied. If &quot;auto&quot; then the row height is calculated based on the content."
       }
     },
-    "getRowId": { "description": "Return the id of a given GridRowModel." },
+    "getRowId": {
+      "description": "Return the id of a given GridRowModel. Ensure the reference of this prop is stable to avoid performance implications. It could be done by either defining the prop outside of the component or by memoizing it."
+    },
     "getRowSpacing": {
       "description": "Function that allows to specify the spacing between rows.",
       "typeDescriptions": {

docs/translations/api-docs/data-grid/data-grid/data-grid.json

@@ -118,7 +118,9 @@
         "GridRowHeightReturnValue": "The row height value. If <code>null</code> or <code>undefined</code> then the default row height is applied. If &quot;auto&quot; then the row height is calculated based on the content."
       }
     },
-    "getRowId": { "description": "Return the id of a given GridRowModel." },
+    "getRowId": {
+      "description": "Return the id of a given GridRowModel. Ensure the reference of this prop is stable to avoid performance implications. It could be done by either defining the prop outside of the component or by memoizing it."
+    },
     "getRowSpacing": {
       "description": "Function that allows to specify the spacing between rows.",
       "typeDescriptions": {

packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx

@@ -398,6 +398,8 @@ DataGridPremiumRaw.propTypes = {
   getRowHeight: PropTypes.func,
   /**
    * Return the id of a given [[GridRowModel]].
+   * Ensure the reference of this prop is stable to avoid performance implications.
+   * It could be done by either defining the prop outside of the component or by memoizing it.
    */
   getRowId: PropTypes.func,
   /**

packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx

@@ -72,6 +72,7 @@ import {
   rowSpanningStateInitializer,
   useGridListView,
   listViewStateInitializer,
+  propsStateInitializer,
 } from '@mui/x-data-grid-pro/internals';
 import { GridApiPremium, GridPrivateApiPremium } from '../models/gridApiPremium';
 import { DataGridPremiumProcessedProps } from '../models/dataGridPremiumProps';
@@ -122,6 +123,7 @@ export const useDataGridPremiumComponent = (
   /**
    * Register all state initializers here.
    */
+  useGridInitializeState(propsStateInitializer, apiRef, props);
   useGridInitializeState(headerFilteringStateInitializer, apiRef, props);
   useGridInitializeState(rowGroupingStateInitializer, apiRef, props);
   useGridInitializeState(aggregationStateInitializer, apiRef, props);

packages/x-data-grid-premium/src/hooks/features/aggregation/createAggregationLookup.ts

@@ -46,7 +46,7 @@ const getGroupAggregatedValue = (
     //   A.B
     //     A.B.A
     //     A.B.B
-    const rowNode = apiRef.current.getRowNode(rowId)!;
+    const rowNode = gridRowTreeSelector(apiRef)[rowId];
     if (rowNode.type === 'group') {
       return;
     }

packages/x-data-grid-premium/src/hooks/features/aggregation/wrapColumnWithAggregation.tsx

@@ -1,9 +1,18 @@
 import * as React from 'react';
 import { RefObject } from '@mui/x-internals/types';
-import { GridColDef, GridFilterOperator, GridRowId } from '@mui/x-data-grid-pro';
-import { GridBaseColDef } from '@mui/x-data-grid-pro/internals';
-import { GridApiPremium } from '../../../models/gridApiPremium';
 import {
+  GridColDef,
+  GridFilterOperator,
+  GridRowId,
+  gridRowTreeSelector,
+} from '@mui/x-data-grid-pro';
+import {
+  type GridBaseColDef,
+  gridPropsStateSelector,
+  getRowId,
+} from '@mui/x-data-grid-pro/internals';
+import { GridApiPremium } from '../../../models/gridApiPremium';
+import type {
   GridAggregationCellMeta,
   GridAggregationLookup,
   GridAggregationPosition,
@@ -47,7 +56,8 @@ const getAggregationValueWrappedValueGetter: ColumnPropertyWrapper<'valueGetter'
   getCellAggregationResult,
 }) => {
   const wrappedValueGetter: GridBaseColDef['valueGetter'] = (value, row, column, apiRef) => {
-    const rowId = apiRef.current.getRowId?.(row);
+    const { getRowId: getRowIdProp } = gridPropsStateSelector(apiRef.current.state);
+    const rowId = getRowId(row, getRowIdProp);
     const cellAggregationResult = rowId ? getCellAggregationResult(rowId, column.field) : null;
     if (cellAggregationResult != null) {
       return cellAggregationResult?.value ?? null;
@@ -75,7 +85,8 @@ const getAggregationValueWrappedValueFormatter: ColumnPropertyWrapper<'valueForm
   }
 
   const wrappedValueFormatter: GridBaseColDef['valueFormatter'] = (value, row, column, apiRef) => {
-    const rowId = apiRef.current.getRowId(row);
+    const { getRowId: getRowIdProp } = gridPropsStateSelector(apiRef.current.state);
+    const rowId = getRowId(row, getRowIdProp);
     if (rowId != null) {
       const cellAggregationResult = getCellAggregationResult(rowId, column.field);
       if (cellAggregationResult != null) {
@@ -147,7 +158,9 @@ const getWrappedFilterOperators: ColumnPropertyWrapper<'filterOperators'> = ({
         return null;
       }
       return (value, row, column, api) => {
-        if (getCellAggregationResult(apiRef.current.getRowId(row), column.field) != null) {
+        const { getRowId: getRowIdProp } = gridPropsStateSelector(apiRef.current.state);
+        const rowId = getRowId(row, getRowIdProp);
+        if (getCellAggregationResult(rowId, column.field) != null) {
           return true;
         }
         return filterFn(value, row, column, api);
@@ -197,7 +210,7 @@ export const wrapColumnWithAggregationValue = ({
     field: string,
   ): GridAggregationLookup[GridRowId][string] | null => {
     let cellAggregationPosition: GridAggregationPosition | null = null;
-    const rowNode = apiRef.current.getRowNode(id)!;
+    const rowNode = gridRowTreeSelector(apiRef)[id];
 
     if (rowNode.type === 'group') {
       cellAggregationPosition = 'inline';

packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx

@@ -9,8 +9,14 @@ import {
   GridGroupNode,
   GridTreeNodeWithRender,
   GridValueFormatter,
+  gridRowTreeSelector,
 } from '@mui/x-data-grid-pro';
-import { GridColumnRawLookup, isSingleSelectColDef } from '@mui/x-data-grid-pro/internals';
+import {
+  getRowId,
+  GridColumnRawLookup,
+  isSingleSelectColDef,
+  gridPropsStateSelector,
+} from '@mui/x-data-grid-pro/internals';
 import { GridApiPremium } from '../../../models/gridApiPremium';
 import { GridGroupingColumnFooterCell } from '../../../components/GridGroupingColumnFooterCell';
 import { GridGroupingCriteriaCell } from '../../../components/GridGroupingCriteriaCell';
@@ -210,8 +216,9 @@ export const createGroupingColDefForOneGroupingCriteria = ({
       return '';
     },
     valueGetter: (value, row, column, apiRef) => {
-      const rowId = apiRef.current.getRowId(row);
-      const rowNode = apiRef.current.getRowNode<GridTreeNodeWithRender>(rowId);
+      const { getRowId: getRowIdProp } = gridPropsStateSelector(apiRef.current.state);
+      const rowId = getRowId(row, getRowIdProp);
+      const rowNode = gridRowTreeSelector(apiRef)[rowId] as GridTreeNodeWithRender;
       if (!rowNode || rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
         return undefined;
       }
@@ -340,8 +347,9 @@ export const createGroupingColDefForAllGroupingCriteria = ({
       );
     },
     valueGetter: (value, row) => {
-      const rowId = apiRef.current.getRowId(row);
-      const rowNode = apiRef.current.getRowNode<GridTreeNodeWithRender>(rowId);
+      const { getRowId: getRowIdProp } = gridPropsStateSelector(apiRef.current.state);
+      const rowId = getRowId(row, getRowIdProp);
+      const rowNode = gridRowTreeSelector(apiRef)[rowId] as GridTreeNodeWithRender;
       if (!rowNode || rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
         return undefined;
       }

packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx

@@ -354,6 +354,8 @@ DataGridProRaw.propTypes = {
   getRowHeight: PropTypes.func,
   /**
    * Return the id of a given [[GridRowModel]].
+   * Ensure the reference of this prop is stable to avoid performance implications.
+   * It could be done by either defining the prop outside of the component or by memoizing it.
    */
   getRowId: PropTypes.func,
   /**

packages/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx

@@ -51,6 +51,7 @@ import {
   rowSpanningStateInitializer,
   useGridListView,
   listViewStateInitializer,
+  propsStateInitializer,
 } from '@mui/x-data-grid/internals';
 import { GridApiPro, GridPrivateApiPro } from '../models/gridApiPro';
 import { DataGridProProcessedProps } from '../models/dataGridProProps';
@@ -110,6 +111,7 @@ export const useDataGridProComponent = (
   /**
    * Register all state initializers here.
    */
+  useGridInitializeState(propsStateInitializer, apiRef, props);
   useGridInitializeState(headerFilteringStateInitializer, apiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(detailPanelStateInitializer, apiRef, props);

packages/x-data-grid-pro/src/hooks/features/detailPanel/gridDetailPanelToggleColDef.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { GRID_STRING_COL_DEF, GridColDef } from '@mui/x-data-grid';
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '@mui/x-data-grid/internals';
+import {
+  GRID_DETAIL_PANEL_TOGGLE_FIELD,
+  gridPropsStateSelector,
+  getRowId,
+} from '@mui/x-data-grid/internals';
 import { GridApiPro } from '../../../models/gridApiPro';
 import { GridDetailPanelToggleCell } from '../../../components/GridDetailPanelToggleCell';
 import { gridDetailPanelExpandedRowIdsSelector } from './gridDetailPanelSelector';
@@ -23,7 +27,8 @@ export const GRID_DETAIL_PANEL_TOGGLE_COL_DEF: GridColDef = {
   align: 'left',
   width: 40,
   valueGetter: (value, row, column, apiRef) => {
-    const rowId = apiRef.current.getRowId(row);
+    const { getRowId: getRowIdProp } = gridPropsStateSelector(apiRef.current.state);
+    const rowId = getRowId(row, getRowIdProp);
     const expandedRowIds = gridDetailPanelExpandedRowIdsSelector(
       (apiRef.current as GridApiPro).state,
     );

packages/x-data-grid-pro/src/hooks/features/lazyLoader/utils.ts

@@ -1,5 +1,5 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridRowEntry } from '@mui/x-data-grid';
+import { GridRowEntry, gridRowTreeSelector } from '@mui/x-data-grid';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 
 export const findSkeletonRowsSection = ({
@@ -19,9 +19,9 @@ export const findSkeletonRowsSection = ({
 
   while (!isSkeletonSectionFound && firstRowIndex < lastRowIndex) {
     const isStartingWithASkeletonRow =
-      apiRef.current.getRowNode(visibleRowsSection[startIndex].id)?.type === 'skeletonRow';
+      gridRowTreeSelector(apiRef)[visibleRowsSection[startIndex].id]?.type === 'skeletonRow';
     const isEndingWithASkeletonRow =
-      apiRef.current.getRowNode(visibleRowsSection[endIndex].id)?.type === 'skeletonRow';
+      gridRowTreeSelector(apiRef)[visibleRowsSection[endIndex].id]?.type === 'skeletonRow';
 
     if (isStartingWithASkeletonRow && isEndingWithASkeletonRow) {
       isSkeletonSectionFound = true;

packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx

@@ -11,6 +11,7 @@ import {
   gridRowMaximumTreeDepthSelector,
   useGridApiOptionHandler,
   GridRowId,
+  gridRowTreeSelector,
 } from '@mui/x-data-grid';
 import {
   gridEditRowsStateSelector,
@@ -114,7 +115,7 @@ export const useGridRowReorder = (
         return;
       }
 
-      const rowNode = apiRef.current.getRowNode(params.id);
+      const rowNode = gridRowTreeSelector(apiRef)[params.id];
 
       if (!rowNode || rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
         return;

packages/x-data-grid-pro/src/hooks/features/treeData/gridTreeDataGroupColDef.ts

@@ -1,5 +1,9 @@
-import { GRID_STRING_COL_DEF, GridColDef } from '@mui/x-data-grid';
-import { GRID_TREE_DATA_GROUPING_FIELD } from '@mui/x-data-grid/internals';
+import { GRID_STRING_COL_DEF, GridColDef, gridRowTreeSelector } from '@mui/x-data-grid';
+import {
+  GRID_TREE_DATA_GROUPING_FIELD,
+  gridPropsStateSelector,
+  getRowId,
+} from '@mui/x-data-grid/internals';
 
 /**
  * TODO: Add sorting and filtering on the value and the filteredDescendantCount
@@ -14,8 +18,9 @@ export const GRID_TREE_DATA_GROUPING_COL_DEF: Omit<GridColDef, 'field' | 'editab
   align: 'left',
   width: 200,
   valueGetter: (value, row, column, apiRef) => {
-    const rowId = apiRef.current.getRowId(row);
-    const rowNode = apiRef.current.getRowNode(rowId);
+    const { getRowId: getRowIdProp } = gridPropsStateSelector(apiRef.current.state);
+    const rowId = getRowId(row, getRowIdProp);
+    const rowNode = gridRowTreeSelector(apiRef)[rowId];
     return rowNode?.type === 'group' || rowNode?.type === 'leaf' ? rowNode.groupingKey : undefined;
   },
 };

packages/x-data-grid/src/DataGrid/DataGrid.tsx

@@ -294,6 +294,8 @@ DataGridRaw.propTypes = {
   getRowHeight: PropTypes.func,
   /**
    * Return the id of a given [[GridRowModel]].
+   * Ensure the reference of this prop is stable to avoid performance implications.
+   * It could be done by either defining the prop outside of the component or by memoizing it.
    */
   getRowId: PropTypes.func,
   /**

packages/x-data-grid/src/DataGrid/useDataGridComponent.tsx

@@ -62,6 +62,7 @@ import {
   listViewStateInitializer,
   useGridListView,
 } from '../hooks/features/listView/useGridListView';
+import { propsStateInitializer } from '../hooks/core/useGridProps';
 
 export const useDataGridComponent = (
   inputApiRef: RefObject<GridApiCommunity | null> | undefined,
@@ -81,6 +82,7 @@ export const useDataGridComponent = (
   /**
    * Register all state initializers here.
    */
+  useGridInitializeState(propsStateInitializer, apiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(paginationStateInitializer, apiRef, props);

packages/x-data-grid/src/colDef/gridCheckboxSelectionColDef.tsx

@@ -4,6 +4,8 @@ import { GridHeaderCheckbox } from '../components/columnSelection/GridHeaderChec
 import { selectedIdsLookupSelector } from '../hooks/features/rowSelection/gridRowSelectionSelector';
 import { GridColDef } from '../models/colDef/gridColDef';
 import { GRID_BOOLEAN_COL_DEF } from './gridBooleanColDef';
+import { gridPropsStateSelector } from '../hooks/core/useGridProps';
+import { getRowId } from '../hooks/features/rows/gridRowsUtils';
 
 export const GRID_CHECKBOX_SELECTION_FIELD = '__check__';
 
@@ -24,7 +26,8 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF: GridColDef = {
   display: 'flex',
   valueGetter: (value, row, column, apiRef) => {
     const selectionLookup = selectedIdsLookupSelector(apiRef);
-    const rowId = apiRef.current.getRowId(row);
+    const { getRowId: getRowIdProp } = gridPropsStateSelector(apiRef.current.state);
+    const rowId = getRowId(row, getRowIdProp);
     return selectionLookup[rowId] !== undefined;
   },
   renderHeader: (params) => <GridHeaderCheckbox {...params} />,

packages/x-data-grid/src/colDef/gridDateColDef.ts

@@ -3,6 +3,8 @@ import { getGridDateOperators } from './gridDateOperators';
 import { GRID_STRING_COL_DEF } from './gridStringColDef';
 import { GridColTypeDef, GridValueFormatter } from '../models/colDef/gridColDef';
 import { renderEditDateCell } from '../components/cell/GridEditDateCell';
+import { gridPropsStateSelector } from '../hooks/core/useGridProps';
+import { getRowId } from '../hooks/features/rows/gridRowsUtils';
 
 function throwIfNotDateObject({
   value,
@@ -30,7 +32,8 @@ export const gridDateFormatter: GridValueFormatter = (value: Date, row, column,
   if (!value) {
     return '';
   }
-  const rowId = apiRef.current.getRowId(row);
+  const { getRowId: getRowIdProp } = gridPropsStateSelector(apiRef.current.state);
+  const rowId = getRowId(row, getRowIdProp);
   throwIfNotDateObject({ value, columnType: 'date', rowId, field: column.field });
   return value.toLocaleDateString();
 };
@@ -44,7 +47,8 @@ export const gridDateTimeFormatter: GridValueFormatter = (
   if (!value) {
     return '';
   }
-  const rowId = apiRef.current.getRowId(row);
+  const { getRowId: getRowIdProp } = gridPropsStateSelector(apiRef.current.state);
+  const rowId = getRowId(row, getRowIdProp);
   throwIfNotDateObject({ value, columnType: 'dateTime', rowId, field: column.field });
   return value.toLocaleString();
 };

packages/x-data-grid/src/colDef/gridSingleSelectColDef.tsx

@@ -7,6 +7,8 @@ import {
   isSingleSelectColDef,
 } from '../components/panel/filterPanel/filterPanelUtils';
 import { isObject } from '../utils/utils';
+import { gridPropsStateSelector } from '../hooks/core/useGridProps';
+import { getRowId } from '../hooks/features/rows/gridRowsUtils';
 
 const isArrayOfObjects = (options: any): options is Array<Record<string, any>> => {
   return typeof options[0] === 'object';
@@ -26,8 +28,8 @@ export const GRID_SINGLE_SELECT_COL_DEF: Omit<GridSingleSelectColDef, 'field'> =
   getOptionLabel: defaultGetOptionLabel,
   getOptionValue: defaultGetOptionValue,
   valueFormatter(value, row, colDef, apiRef) {
-    // const { id, field, value, api } = params;
-    const rowId = apiRef.current.getRowId(row);
+    const { getRowId: getRowIdProp } = gridPropsStateSelector(apiRef.current.state);
+    const rowId = getRowId(row, getRowIdProp);
 
     if (!isSingleSelectColDef(colDef)) {
       return '';

packages/x-data-grid/src/hooks/core/useGridInitialization.ts

@@ -9,6 +9,7 @@ import { useGridLocaleText } from './useGridLocaleText';
 import { useGridPipeProcessing } from './pipeProcessing';
 import { useGridStrategyProcessing } from './strategyProcessing';
 import { useGridStateInitialization } from './useGridStateInitialization';
+import { useGridProps } from './useGridProps';
 
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs
@@ -23,6 +24,7 @@ export const useGridInitialization = <
   const privateApiRef = useGridApiInitialization<PrivateApi, Api>(inputApiRef, props);
 
   useGridRefs(privateApiRef);
+  useGridProps(privateApiRef, props);
   useGridIsRtl(privateApiRef);
   useGridLoggerFactory(privateApiRef, props);
   useGridStateInitialization(privateApiRef);