When i try to give the chekcboxSelectionn a default value, React is throwing the error: Cannot update a component (`ControlledSelectionGrid`) while rendering a different component (`ForwardRef(DataGrid)`). To locate the bad setState()...

[john1625b]

When i try to give the chekcboxSelectionn a default value, React is throwing the error: Cannot update a component (`ControlledSelectionGrid`) while rendering a different component (`ForwardRef(DataGrid)`). To locate the bad setState()...

[m4theushw]

This error occurs because we have a special logic to remove, from the specified selection model, those rows that are not in the rows prop. This logic, in the first render, is triggered during the render phrase because it listens to the sortedRowsSet event.

mui-x/packages/grid/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts

Lines 319 to 340 in bb73767

	const removeOutdatedSelection = React.useCallback(() => {
	if (props.keepNonExistentRowsSelected) {
	return;
	}
	const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
	const rowsLookup = gridRowsLookupSelector(apiRef);
	// We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
	const selectionLookup = { ...selectedIdsLookupSelector(apiRef) };
	let hasChanged = false;
	currentSelection.forEach((id: GridRowId) => {
	if (!rowsLookup[id]) {
	delete selectionLookup[id];
	hasChanged = true;
	}
	});
	if (hasChanged) {
	apiRef.current.setRowSelectionModel(Object.values(selectionLookup));
	}
	}, [apiRef, props.keepNonExistentRowsSelected]);

I tried to fix below this error by not updating the state during the render phase. It's not very elegant because it relays on an effect.

diff --git a/packages/grid/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts b/packages/grid/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts
index baa86964e..5babb09d3 100644
--- a/packages/grid/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts
+++ b/packages/grid/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts
@@ -526,11 +526,17 @@ export const useGridRowSelection = (
     [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection],
   );
 
-  useGridApiEventHandler(
-    apiRef,
-    'sortedRowsSet',
-    runIfRowSelectionIsEnabled(removeOutdatedSelection),
-  );
+  const [sortedRowsSet, setSortedRowsSet] = React.useState([]);
+
+  const handleSortedRowsSet = React.useCallback((sortedRows) => {
+    setSortedRowsSet(sortedRows);
+  }, []);
+
+  React.useEffect(() => {
+    removeOutdatedSelection();
+  }, [sortedRowsSet, removeOutdatedSelection]);
+
+  useGridApiEventHandler(apiRef, 'sortedRowsSet', runIfRowSelectionIsEnabled(handleSortedRowsSet));
   useGridApiEventHandler(apiRef, 'rowClick', runIfRowSelectionIsEnabled(handleRowClick));
   useGridApiEventHandler(
     apiRef,
diff --git a/packages/grid/x-data-grid/src/hooks/features/sorting/useGridSorting.ts b/packages/grid/x-data-grid/src/hooks/features/sorting/useGridSorting.ts
index a5847ddb7..f55a4c1ef 100644
--- a/packages/grid/x-data-grid/src/hooks/features/sorting/useGridSorting.ts
+++ b/packages/grid/x-data-grid/src/hooks/features/sorting/useGridSorting.ts
@@ -166,7 +166,7 @@ export const useGridSorting = (
       };
     });
 
-    apiRef.current.publishEvent('sortedRowsSet');
+    apiRef.current.publishEvent('sortedRowsSet', apiRef.current.state.sorting.sortedRows);
     apiRef.current.forceUpdate();
   }, [apiRef, logger, props.sortingMode]);

A workaround for now is to enable the keepNonExistentRowsSelected prop. The drawback is that the selected row count in the footer will include non-existent rows.

[john1625b]

ok keepNonExistentRowsSelected works for me as an interim solution. I don't think I'll close the issue since there's still work to be done.