[core] Isolate selectors called without useGridSelector (#3774)

mui · Feb 1, 2022 · b249cbd · b249cbd
1 parent 9aea23b
commit b249cbd
Show file tree

Hide file tree

Showing 73 changed files with 531 additions and 255 deletions.
diff --git a/docs/pages/api-docs/data-grid/selectors.json b/docs/pages/api-docs/data-grid/selectors.json
diff --git a/docs/scripts/api/buildSelectorsDocumentation.ts b/docs/scripts/api/buildSelectorsDocumentation.ts
@@ -19,6 +19,7 @@ interface Selector {
   category?: string;
   deprecated?: string;
   description?: string;
+  supportsApiRef?: boolean;
 }
 
 export default function buildSelectorsDocumentation(options: BuildSelectorsDocumentationOptions) {
@@ -45,6 +46,7 @@ export default function buildSelectorsDocumentation(options: BuildSelectorsDocum
       const parameterSymbol = signature.getParameters()[0];
 
       let isSelector = false;
+      let supportsApiRef = false;
 
       if (
         project.checker.getTypeOfSymbolAtLocation(
@@ -59,6 +61,7 @@ export default function buildSelectorsDocumentation(options: BuildSelectorsDocum
         type.symbol.name === 'OutputSelector'
       ) {
         isSelector = true;
+        supportsApiRef = true;
       }
 
       if (!isSelector) {
@@ -82,6 +85,7 @@ export default function buildSelectorsDocumentation(options: BuildSelectorsDocum
         category,
         deprecated,
         description,
+        supportsApiRef,
       };
     })
     .filter((el): el is Selector => !!el)

diff --git a/docs/src/modules/components/SelectorsDocs.js b/docs/src/modules/components/SelectorsDocs.js
@@ -32,13 +32,27 @@ export const SelectorExample = styled(HighlightedCode)(({ theme }) => ({
 const SELECTOR_NAME_PATTERN = /^grid(.*)Selector/;
 
 const SelectorAccordion = ({ selector }) => {
-  const signature = `${selector.name}: (apiRef: GridApiRef) => ${selector.returnType}`;
+  let signature = `${selector.name}: (state: GridState) => ${selector.returnType}`;
+  if (selector.supportsApiRef) {
+    signature = [
+      `${selector.name}: (apiRef: GridApiRef) => ${selector.returnType}`,
+      '// or',
+      `${selector.name}: (state: GridState, instanceId?: number) => ${selector.returnType}`,
+    ].join('\n');
+  }
 
   const match = selector.name.match(SELECTOR_NAME_PATTERN);
   const valueName =
     match == null ? 'value' : `${match[1][0].toLocaleLowerCase()}${match[1].slice(1)}`;
 
-  const example = `const ${valueName} = ${selector.name}(apiRef);`;
+  let example = `const ${valueName} = ${selector.name}(apiRef.current.state);`;
+  if (selector.supportsApiRef) {
+    example = [
+      `${selector.name}(apiRef)`,
+      '// or',
+      `${selector.name}(state, apiRef.current.instanceId)`,
+    ].join('\n');
+  }
 
   return (
     <Accordion>

diff --git a/docs/src/pages/components/data-grid/export/CsvGetRowsToExport.js b/docs/src/pages/components/data-grid/export/CsvGetRowsToExport.js
@@ -12,13 +12,11 @@ import {
 } from '@mui/x-data-grid';
 
 const getRowsFromCurrentPage = ({ apiRef }) =>
-  gridPaginatedVisibleSortedGridRowIdsSelector(apiRef.current.state);
+  gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
 
-const getUnfilteredRows = ({ apiRef }) =>
-  gridSortedRowIdsSelector(apiRef.current.state);
+const getUnfilteredRows = ({ apiRef }) => gridSortedRowIdsSelector(apiRef);
 
-const getFilteredRows = ({ apiRef }) =>
-  gridVisibleSortedRowIdsSelector(apiRef.current.state);
+const getFilteredRows = ({ apiRef }) => gridVisibleSortedRowIdsSelector(apiRef);
 
 const ExportIcon = createSvgIcon(
   <path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z" />,

diff --git a/docs/src/pages/components/data-grid/export/CsvGetRowsToExport.tsx b/docs/src/pages/components/data-grid/export/CsvGetRowsToExport.tsx
@@ -14,13 +14,13 @@ import {
 } from '@mui/x-data-grid';
 
 const getRowsFromCurrentPage = ({ apiRef }: GridCsvGetRowsToExportParams) =>
-  gridPaginatedVisibleSortedGridRowIdsSelector(apiRef.current.state);
+  gridPaginatedVisibleSortedGridRowIdsSelector(apiRef);
 
 const getUnfilteredRows = ({ apiRef }: GridCsvGetRowsToExportParams) =>
-  gridSortedRowIdsSelector(apiRef.current.state);
+  gridSortedRowIdsSelector(apiRef);
 
 const getFilteredRows = ({ apiRef }: GridCsvGetRowsToExportParams) =>
-  gridVisibleSortedRowIdsSelector(apiRef.current.state);
+  gridVisibleSortedRowIdsSelector(apiRef);
 
 const ExportIcon = createSvgIcon(
   <path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z" />,

diff --git a/docs/src/pages/components/data-grid/export/CsvGetRowsToExportRowGrouping.js b/docs/src/pages/components/data-grid/export/CsvGetRowsToExportRowGrouping.js
@@ -10,12 +10,11 @@ import {
   useGridApiContext,
 } from '@mui/x-data-grid-pro';
 
-const getRowsWithGroups = ({ apiRef }) =>
-  gridFilteredSortedRowIdsSelector(apiRef.current.state);
+const getRowsWithGroups = ({ apiRef }) => gridFilteredSortedRowIdsSelector(apiRef);
 
 const getRowsWithoutGroups = ({ apiRef }) => {
-  const rows = gridFilteredSortedRowIdsSelector(apiRef.current.state);
-  const tree = gridRowTreeSelector(apiRef.current.state);
+  const rows = gridFilteredSortedRowIdsSelector(apiRef);
+  const tree = gridRowTreeSelector(apiRef);
 
   return rows.filter((rowId) => !tree[rowId].isAutoGenerated);
 };

diff --git a/docs/src/pages/components/data-grid/export/CsvGetRowsToExportRowGrouping.tsx b/docs/src/pages/components/data-grid/export/CsvGetRowsToExportRowGrouping.tsx
@@ -13,11 +13,11 @@ import {
 } from '@mui/x-data-grid-pro';
 
 const getRowsWithGroups = ({ apiRef }: GridCsvGetRowsToExportParams) =>
-  gridFilteredSortedRowIdsSelector(apiRef.current.state);
+  gridFilteredSortedRowIdsSelector(apiRef);
 
 const getRowsWithoutGroups = ({ apiRef }: GridCsvGetRowsToExportParams) => {
-  const rows = gridFilteredSortedRowIdsSelector(apiRef.current.state);
-  const tree = gridRowTreeSelector(apiRef.current.state);
+  const rows = gridFilteredSortedRowIdsSelector(apiRef);
+  const tree = gridRowTreeSelector(apiRef);
 
   return rows.filter((rowId) => !tree[rowId].isAutoGenerated);
 };

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingBasicExample.js b/docs/src/pages/components/data-grid/group-pivot/RowGroupingBasicExample.js
@@ -15,7 +15,7 @@ const useKeepGroupingColumnsHidden = (apiRef, columns, initialModel, leafField)
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
 
       newModel.forEach((field) => {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingBasicExample.tsx b/docs/src/pages/components/data-grid/group-pivot/RowGroupingBasicExample.tsx
@@ -23,7 +23,7 @@ const useKeepGroupingColumnsHidden = (
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
       newModel.forEach((field) => {
         if (!prevModel.current.includes(field)) {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingColDefCanBeGrouped.js b/docs/src/pages/components/data-grid/group-pivot/RowGroupingColDefCanBeGrouped.js
@@ -15,7 +15,7 @@ const useKeepGroupingColumnsHidden = (apiRef, columns, initialModel, leafField)
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
 
       newModel.forEach((field) => {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingColDefCanBeGrouped.tsx b/docs/src/pages/components/data-grid/group-pivot/RowGroupingColDefCanBeGrouped.tsx
@@ -23,7 +23,7 @@ const useKeepGroupingColumnsHidden = (
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
       newModel.forEach((field) => {
         if (!prevModel.current.includes(field)) {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingCustomGroupingColDefCallback.js b/docs/src/pages/components/data-grid/group-pivot/RowGroupingCustomGroupingColDefCallback.js
@@ -18,7 +18,7 @@ const useKeepGroupingColumnsHidden = (apiRef, columns, initialModel, leafField)
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
 
       newModel.forEach((field) => {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingCustomGroupingColDefCallback.tsx b/docs/src/pages/components/data-grid/group-pivot/RowGroupingCustomGroupingColDefCallback.tsx
@@ -26,7 +26,7 @@ const useKeepGroupingColumnsHidden = (
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
       newModel.forEach((field) => {
         if (!prevModel.current.includes(field)) {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingCustomGroupingColDefObject.js b/docs/src/pages/components/data-grid/group-pivot/RowGroupingCustomGroupingColDefObject.js
@@ -15,7 +15,7 @@ const useKeepGroupingColumnsHidden = (apiRef, columns, initialModel, leafField)
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
 
       newModel.forEach((field) => {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingCustomGroupingColDefObject.tsx b/docs/src/pages/components/data-grid/group-pivot/RowGroupingCustomGroupingColDefObject.tsx
@@ -23,7 +23,7 @@ const useKeepGroupingColumnsHidden = (
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
       newModel.forEach((field) => {
         if (!prevModel.current.includes(field)) {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingDefaultExpansionDepth.js b/docs/src/pages/components/data-grid/group-pivot/RowGroupingDefaultExpansionDepth.js
@@ -15,7 +15,7 @@ const useKeepGroupingColumnsHidden = (apiRef, columns, initialModel, leafField)
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
 
       newModel.forEach((field) => {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingDefaultExpansionDepth.tsx b/docs/src/pages/components/data-grid/group-pivot/RowGroupingDefaultExpansionDepth.tsx
@@ -23,7 +23,7 @@ const useKeepGroupingColumnsHidden = (
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
       newModel.forEach((field) => {
         if (!prevModel.current.includes(field)) {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingFullExample.js b/docs/src/pages/components/data-grid/group-pivot/RowGroupingFullExample.js
@@ -15,7 +15,7 @@ const useKeepGroupingColumnsHidden = (apiRef, columns, initialModel, leafField)
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
 
       newModel.forEach((field) => {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingFullExample.tsx b/docs/src/pages/components/data-grid/group-pivot/RowGroupingFullExample.tsx
@@ -23,7 +23,7 @@ const useKeepGroupingColumnsHidden = (
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
       newModel.forEach((field) => {
         if (!prevModel.current.includes(field)) {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingGroupingValueGetter.js b/docs/src/pages/components/data-grid/group-pivot/RowGroupingGroupingValueGetter.js
@@ -15,7 +15,7 @@ const useKeepGroupingColumnsHidden = (apiRef, columns, initialModel, leafField)
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
 
       newModel.forEach((field) => {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingGroupingValueGetter.tsx b/docs/src/pages/components/data-grid/group-pivot/RowGroupingGroupingValueGetter.tsx
@@ -25,7 +25,7 @@ const useKeepGroupingColumnsHidden = (
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
       newModel.forEach((field) => {
         if (!prevModel.current.includes(field)) {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingHideDescendantCount.js b/docs/src/pages/components/data-grid/group-pivot/RowGroupingHideDescendantCount.js
@@ -15,7 +15,7 @@ const useKeepGroupingColumnsHidden = (apiRef, columns, initialModel, leafField)
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
 
       newModel.forEach((field) => {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingHideDescendantCount.tsx b/docs/src/pages/components/data-grid/group-pivot/RowGroupingHideDescendantCount.tsx
@@ -23,7 +23,7 @@ const useKeepGroupingColumnsHidden = (
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
       newModel.forEach((field) => {
         if (!prevModel.current.includes(field)) {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingIsGroupExpandedByDefault.js b/docs/src/pages/components/data-grid/group-pivot/RowGroupingIsGroupExpandedByDefault.js
@@ -15,7 +15,7 @@ const useKeepGroupingColumnsHidden = (apiRef, columns, initialModel, leafField)
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
 
       newModel.forEach((field) => {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingIsGroupExpandedByDefault.tsx b/docs/src/pages/components/data-grid/group-pivot/RowGroupingIsGroupExpandedByDefault.tsx
@@ -24,7 +24,7 @@ const useKeepGroupingColumnsHidden = (
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
       newModel.forEach((field) => {
         if (!prevModel.current.includes(field)) {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingLeafWithValue.js b/docs/src/pages/components/data-grid/group-pivot/RowGroupingLeafWithValue.js
@@ -15,7 +15,7 @@ const useKeepGroupingColumnsHidden = (apiRef, columns, initialModel, leafField)
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
 
       newModel.forEach((field) => {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingLeafWithValue.tsx b/docs/src/pages/components/data-grid/group-pivot/RowGroupingLeafWithValue.tsx
@@ -23,7 +23,7 @@ const useKeepGroupingColumnsHidden = (
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
       newModel.forEach((field) => {
         if (!prevModel.current.includes(field)) {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingMultipleGroupingCol.js b/docs/src/pages/components/data-grid/group-pivot/RowGroupingMultipleGroupingCol.js
@@ -15,7 +15,7 @@ const useKeepGroupingColumnsHidden = (apiRef, columns, initialModel, leafField)
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
 
       newModel.forEach((field) => {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingMultipleGroupingCol.tsx b/docs/src/pages/components/data-grid/group-pivot/RowGroupingMultipleGroupingCol.tsx
@@ -23,7 +23,7 @@ const useKeepGroupingColumnsHidden = (
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
       newModel.forEach((field) => {
         if (!prevModel.current.includes(field)) {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingRowsWithMissingGroups.js b/docs/src/pages/components/data-grid/group-pivot/RowGroupingRowsWithMissingGroups.js
@@ -15,7 +15,7 @@ const useKeepGroupingColumnsHidden = (apiRef, columns, initialModel, leafField)
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
 
       newModel.forEach((field) => {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingRowsWithMissingGroups.tsx b/docs/src/pages/components/data-grid/group-pivot/RowGroupingRowsWithMissingGroups.tsx
@@ -23,7 +23,7 @@ const useKeepGroupingColumnsHidden = (
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
       newModel.forEach((field) => {
         if (!prevModel.current.includes(field)) {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingSetChildrenExpansion.js b/docs/src/pages/components/data-grid/group-pivot/RowGroupingSetChildrenExpansion.js
@@ -18,7 +18,7 @@ const useKeepGroupingColumnsHidden = (apiRef, columns, initialModel, leafField)
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
 
       newModel.forEach((field) => {
@@ -59,7 +59,7 @@ export default function RowGroupingSetChildrenExpansion() {
   );
 
   const toggleSecondRow = () => {
-    const rowIds = gridVisibleSortedRowIdsSelector(apiRef.current.state);
+    const rowIds = gridVisibleSortedRowIdsSelector(apiRef);
 
     if (rowIds.length > 1) {
       const rowId = rowIds[1];

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingSetChildrenExpansion.tsx b/docs/src/pages/components/data-grid/group-pivot/RowGroupingSetChildrenExpansion.tsx
@@ -26,7 +26,7 @@ const useKeepGroupingColumnsHidden = (
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
       newModel.forEach((field) => {
         if (!prevModel.current.includes(field)) {
@@ -66,7 +66,7 @@ export default function RowGroupingSetChildrenExpansion() {
   );
 
   const toggleSecondRow = () => {
-    const rowIds = gridVisibleSortedRowIdsSelector(apiRef.current.state);
+    const rowIds = gridVisibleSortedRowIdsSelector(apiRef);
 
     if (rowIds.length > 1) {
       const rowId = rowIds[1];

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingSingleGroupingCol.js b/docs/src/pages/components/data-grid/group-pivot/RowGroupingSingleGroupingCol.js
@@ -15,7 +15,7 @@ const useKeepGroupingColumnsHidden = (apiRef, columns, initialModel, leafField)
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
 
       newModel.forEach((field) => {

diff --git a/docs/src/pages/components/data-grid/group-pivot/RowGroupingSingleGroupingCol.tsx b/docs/src/pages/components/data-grid/group-pivot/RowGroupingSingleGroupingCol.tsx
@@ -23,7 +23,7 @@ const useKeepGroupingColumnsHidden = (
   React.useEffect(() => {
     apiRef.current.subscribeEvent(GridEvents.rowGroupingModelChange, (newModel) => {
       const columnVisibilityModel = {
-        ...gridColumnVisibilityModelSelector(apiRef.current.state),
+        ...gridColumnVisibilityModelSelector(apiRef),
       };
       newModel.forEach((field) => {
         if (!prevModel.current.includes(field)) {