[DataGrid] Fix error caused by trying to render rows that are not in the state anymore (#17057)

Author: arminmeh

Diff for: packages/x-data-grid/src/components/GridRow.tsx

@@ -24,7 +24,10 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelection
 import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD, PinnedColumnPosition } from '../internals/constants';
 import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector';
-import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
+import {
+  gridRowMaximumTreeDepthSelector,
+  gridRowNodeSelector,
+} from '../hooks/features/rows/gridRowsSelector';
 import {
   gridEditRowsStateSelector,
   gridRowIsEditingSelector,
@@ -125,7 +128,7 @@ const GridRow = forwardRef<HTMLDivElement, GridRowProps>(function GridRow(props,
     rowReordering,
   );
   const handleRef = useForkRef(ref, refProp);
-  const rowNode = apiRef.current.getRowNode(rowId);
+  const rowNode = gridRowNodeSelector(apiRef, rowId);
   const editing = useGridSelector(apiRef, gridRowIsEditingSelector, {
     rowId,
     editMode: rootProps.editMode,
@@ -281,7 +284,7 @@ const GridRow = forwardRef<HTMLDivElement, GridRowProps>(function GridRow(props,
   }, [isNotVisible, rowHeight, styleProp, heightEntry, rootProps.rowSpacingType]);
 
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
-  const ariaAttributes = rowNode ? getRowAriaAttributes(rowNode, index) : undefined;
+  const ariaAttributes = getRowAriaAttributes(rowNode, index);
 
   if (typeof rootProps.getRowClassName === 'function') {
     const indexRelativeToCurrentPage = index - (currentPage.range?.firstRowIndex || 0);
@@ -295,11 +298,6 @@ const GridRow = forwardRef<HTMLDivElement, GridRowProps>(function GridRow(props,
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
 
-  /* Start of rendering */
-  if (!rowNode) {
-    return null;
-  }
-
   const getCell = (
     column: GridStateColDef,
     indexInSection: number,
@@ -328,7 +326,7 @@ const GridRow = forwardRef<HTMLDivElement, GridRowProps>(function GridRow(props,
       scrollbarWidth,
     );
 
-    if (rowNode?.type === 'skeletonRow') {
+    if (rowNode.type === 'skeletonRow') {
       return (
         <slots.skeletonCell
           key={column.field}

Diff for: packages/x-data-grid/src/hooks/features/columns/useGridColumns.tsx

@@ -98,7 +98,6 @@ export function useGridColumns(
 
       apiRef.current.setState(mergeColumnsState(columnsState));
       apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
-      apiRef.current.updateRenderContext?.();
     },
     [logger, apiRef],
   );

Diff for: packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx

@@ -26,7 +26,7 @@ import {
   gridColumnPositionsSelector,
   gridHasColSpanSelector,
 } from '../columns/gridColumnsSelector';
-import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
+import { gridPinnedRowsSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
 import { GridPinnedRowsPosition } from '../rows/gridRowsInterfaces';
 import { useGridVisibleRows, getVisibleRows } from '../../utils/useGridVisibleRows';
 import { useGridApiOptionHandler } from '../../utils';
@@ -397,6 +397,7 @@ export const useGridVirtualScroller = () => {
     if (!params.rows && !currentPage.range) {
       return [];
     }
+    const rowTree = gridRowTreeSelector(apiRef);
 
     let baseRenderContext = renderContext;
     if (params.renderContext) {
@@ -453,6 +454,17 @@ export const useGridVirtualScroller = () => {
 
     rowIndexes.forEach((rowIndexInPage) => {
       const { id, model } = rowModels[rowIndexInPage];
+
+      // In certain cases, the state might already be updated and `currentPage.rows` (which sets `rowModels`)
+      // contains stale data.
+      // In that case, skip any further row processing.
+      // See:
+      // - https://github.com/mui/mui-x/issues/16638
+      // - https://github.com/mui/mui-x/issues/17022
+      if (!rowTree[id]) {
+        return;
+      }
+
       const rowIndex = (currentPage?.range?.firstRowIndex || 0) + rowIndexOffset + rowIndexInPage;
 
       // NOTE: This is an expensive feature, the colSpan code could be optimized.