[core] Remove rowsCache from state

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

@@ -20,6 +20,7 @@ export function useGridApiInitialization<Api extends GridApiCommon>(
   if (!apiRef.current) {
     apiRef.current = {
       unstable_eventManager: new EventManager(),
+      unstable_caches: {},
       state: {} as Api['state'],
       instanceId: globalId,
     } as Api;

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

@@ -27,7 +27,7 @@ export interface GridRowTreeCreationValue {
 
 export type GridRowInternalCacheValue = Omit<GridRowTreeCreationParams, 'previousTree'>;
 
-export interface GridRowsInternalCacheState {
+export interface GridRowsInternalCache {
   value: GridRowInternalCacheValue;
   /**
    * The rows as they were the last time all the rows have been updated at once
@@ -36,12 +36,6 @@ export interface GridRowsInternalCacheState {
   rowsBeforePartialUpdates: GridRowsProp;
 }
 
-export interface GridRowsInternalCache {
-  state: GridRowsInternalCacheState;
-  timeout: NodeJS.Timeout | null;
-  lastUpdateMs: number;
-}
-
 export interface GridRowsState extends GridRowTreeCreationValue {
   /**
    * Matches the value of the `loading` prop.

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

@@ -25,16 +25,11 @@ import { GridStateInitializer } from '../../utils/useGridInitializeState';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridSortedRowIdsSelector } from '../sorting/gridSortingSelector';
 import { gridFilteredRowsLookupSelector } from '../filter/gridFilterSelector';
-import {
-  GridRowsInternalCacheState,
-  GridRowInternalCacheValue,
-  GridRowsInternalCache,
-  GridRowsState,
-} from './gridRowsState';
+import { GridRowInternalCacheValue, GridRowsInternalCache, GridRowsState } from './gridRowsState';
 import { checkGridRowIdIsValid, getTreeNodeDescendants } from './gridRowsUtils';
 
-interface ConvertGridRowsPropToStateParams {
-  prevState: GridRowsInternalCacheState;
+interface ConvertRowsPropToStateParams {
+  prevCache: GridRowsInternalCache;
   getRowId: DataGridProcessedProps['getRowId'];
   rows?: GridRowsProp;
 }
@@ -49,11 +44,11 @@ function getGridRowId(
   return id;
 }
 
-const convertGridRowsPropToState = ({
-  prevState,
+const convertRowsPropToState = ({
+  prevCache: prevState,
   rows,
   getRowId,
-}: ConvertGridRowsPropToStateParams): GridRowsInternalCacheState => {
+}: ConvertRowsPropToStateParams): GridRowsInternalCache => {
   let value: GridRowInternalCacheValue;
   if (rows) {
     value = {
@@ -85,7 +80,7 @@ const getRowsStateFromCache = (
   rowCountProp: number | undefined,
   loadingProp: boolean | undefined,
 ): GridRowsState => {
-  const { value } = rowsCache.state;
+  const { value } = rowsCache;
   const rowCount = rowCountProp ?? 0;
 
   const groupingResponse = apiRef.current.unstable_applyStrategyProcessor('rowTreeCreation', {
@@ -109,27 +104,28 @@ const getRowsStateFromCache = (
 export const rowsStateInitializer: GridStateInitializer<
   Pick<DataGridProcessedProps, 'rows' | 'rowCount' | 'getRowId' | 'loading'>
 > = (state, props, apiRef) => {
-  const rowsCache = {
-    state: convertGridRowsPropToState({
-      rows: props.rows,
-      getRowId: props.getRowId,
-      prevState: {
-        value: {
-          idRowsLookup: {},
-          idToIdLookup: {},
-          ids: [],
-        },
-        rowsBeforePartialUpdates: [],
+  apiRef.current.unstable_caches.rows = convertRowsPropToState({
+    rows: props.rows,
+    getRowId: props.getRowId,
+    prevCache: {
+      value: {
+        idRowsLookup: {},
+        idToIdLookup: {},
+        ids: [],
       },
-    }),
-    timeout: null,
-    lastUpdateMs: Date.now(),
-  };
+      rowsBeforePartialUpdates: [],
+    },
+  });
 
   return {
     ...state,
-    rows: getRowsStateFromCache(rowsCache, null, apiRef, props.rowCount, props.loading),
-    rowsCache, // TODO remove from state
+    rows: getRowsStateFromCache(
+      apiRef.current.unstable_caches.rows,
+      null,
+      apiRef,
+      props.rowCount,
+      props.loading,
+    ),
   };
 };
 
@@ -153,9 +149,11 @@ export const useGridRows = (
   }
 
   const logger = useGridLogger(apiRef, 'useGridRows');
-  const rowsCache = React.useRef(apiRef.current.state.rowsCache); // To avoid listing rowsCache as useEffect dep
   const currentPage = useGridVisibleRows(apiRef, props);
 
+  const lastUpdateMs = React.useRef(Date.now());
+  const timeout = React.useRef<NodeJS.Timeout | null>(null);
+
   const getRow = React.useCallback<GridRowApi['getRow']>(
     (id) => (gridRowsLookupSelector(apiRef)[id] as any) ?? null,
     [apiRef],
@@ -171,14 +169,14 @@ export const useGridRows = (
   );
 
   const throttledRowsChange = React.useCallback(
-    (newState: GridRowsInternalCacheState, throttle: boolean) => {
+    (newCache: GridRowsInternalCache, throttle: boolean) => {
       const run = () => {
-        rowsCache.current.timeout = null;
-        rowsCache.current.lastUpdateMs = Date.now();
+        timeout.current = null;
+        lastUpdateMs.current = Date.now();
         apiRef.current.setState((state) => ({
           ...state,
           rows: getRowsStateFromCache(
-            rowsCache.current,
+            apiRef.current.unstable_caches.rows!,
             gridRowTreeSelector(apiRef),
             apiRef,
             props.rowCount,
@@ -189,22 +187,21 @@ export const useGridRows = (
         apiRef.current.forceUpdate();
       };
 
-      if (rowsCache.current.timeout) {
-        clearTimeout(rowsCache.current.timeout);
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+        timeout.current = null;
       }
 
-      rowsCache.current.state = newState;
-      rowsCache.current.timeout = null;
+      apiRef.current.unstable_caches.rows = newCache;
 
       if (!throttle) {
         run();
         return;
       }
 
-      const throttleRemainingTimeMs =
-        props.throttleRowsMs - (Date.now() - rowsCache.current.lastUpdateMs);
+      const throttleRemainingTimeMs = props.throttleRowsMs - (Date.now() - lastUpdateMs.current);
       if (throttleRemainingTimeMs > 0) {
-        rowsCache.current.timeout = setTimeout(run, throttleRemainingTimeMs);
+        timeout.current = setTimeout(run, throttleRemainingTimeMs);
         return;
       }
 
@@ -220,15 +217,15 @@ export const useGridRows = (
     (rows) => {
       logger.debug(`Updating all rows, new length ${rows.length}`);
       throttledRowsChange(
-        convertGridRowsPropToState({
+        convertRowsPropToState({
           rows,
-          prevState: rowsCache.current.state,
+          prevCache: apiRef.current.unstable_caches.rows!,
           getRowId: props.getRowId,
         }),
         true,
       );
     },
-    [logger, props.getRowId, throttledRowsChange],
+    [apiRef, logger, props.getRowId, throttledRowsChange],
   );
 
   const updateRows = React.useCallback<GridRowApi['updateRows']>(
@@ -263,9 +260,9 @@ export const useGridRows = (
       const deletedRowIds: GridRowId[] = [];
 
       const newStateValue: GridRowInternalCacheValue = {
-        idRowsLookup: { ...rowsCache.current.state.value.idRowsLookup },
-        idToIdLookup: { ...rowsCache.current.state.value.idToIdLookup },
-        ids: [...rowsCache.current.state.value.ids],
+        idRowsLookup: { ...apiRef.current.unstable_caches.rows!.value.idRowsLookup },
+        idToIdLookup: { ...apiRef.current.unstable_caches.rows!.value.idToIdLookup },
+        ids: [...apiRef.current.unstable_caches.rows!.value.ids],
       };
 
       uniqUpdates.forEach((partialRow, id) => {
@@ -292,14 +289,14 @@ export const useGridRows = (
         newStateValue.ids = newStateValue.ids.filter((id) => !deletedRowIds.includes(id));
       }
 
-      const state: GridRowsInternalCacheState = {
-        ...rowsCache.current.state,
+      const state: GridRowsInternalCache = {
+        ...apiRef.current.unstable_caches.rows!,
         value: newStateValue,
       };
 
       throttledRowsChange(state, true);
     },
-    [apiRef, props.getRowId, throttledRowsChange, props.signature],
+    [props.signature, props.getRowId, throttledRowsChange, apiRef],
   );
 
   const getRowModels = React.useCallback<GridRowApi['getRowModels']>(() => {
@@ -434,7 +431,7 @@ export const useGridRows = (
     logger.info(`Row grouping pre-processing have changed, regenerating the row tree`);
 
     let rows: GridRowsProp | undefined;
-    if (rowsCache.current.state.rowsBeforePartialUpdates === props.rows) {
+    if (apiRef.current.unstable_caches.rows!.rowsBeforePartialUpdates === props.rows) {
       // The `props.rows` has not changed since the last row grouping
       // We can keep the potential updates stored in `inputRowsAfterUpdates` on the new grouping
       rows = undefined;
@@ -445,14 +442,14 @@ export const useGridRows = (
       rows = props.rows;
     }
     throttledRowsChange(
-      convertGridRowsPropToState({
+      convertRowsPropToState({
         rows,
         getRowId: props.getRowId,
-        prevState: rowsCache.current.state,
+        prevCache: apiRef.current.unstable_caches.rows!,
       }),
       false,
     );
-  }, [logger, throttledRowsChange, props.getRowId, props.rows]);
+  }, [logger, apiRef, props.rows, props.getRowId, throttledRowsChange]);
 
   const handleStrategyProcessorChange = React.useCallback<
     GridEventListener<'activeStrategyProcessorChange'>
@@ -487,9 +484,8 @@ export const useGridRows = (
    */
   React.useEffect(() => {
     return () => {
-      if (rowsCache.current.timeout !== null) {
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        clearTimeout(rowsCache.current.timeout);
+      if (timeout.current !== null) {
+        clearTimeout(timeout.current);
       }
     };
   }, []);
@@ -504,18 +500,18 @@ export const useGridRows = (
     }
 
     // The new rows have already been applied (most likely in the `'rowGroupsPreProcessingChange'` listener)
-    if (rowsCache.current.state.rowsBeforePartialUpdates === props.rows) {
+    if (apiRef.current.unstable_caches.rows!.rowsBeforePartialUpdates === props.rows) {
       return;
     }
 
     logger.debug(`Updating all rows, new length ${props.rows.length}`);
     throttledRowsChange(
-      convertGridRowsPropToState({
+      convertRowsPropToState({
         rows: props.rows,
         getRowId: props.getRowId,
-        prevState: rowsCache.current.state,
+        prevCache: apiRef.current.unstable_caches.rows!,
       }),
       false,
     );
-  }, [props.rows, props.rowCount, props.getRowId, logger, throttledRowsChange]);
+  }, [props.rows, props.rowCount, props.getRowId, logger, throttledRowsChange, apiRef]);
 };

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

@@ -1,6 +1,12 @@
 import * as React from 'react';
 import { GridEventPublisher, GridEventListener, GridEventsStr } from '../events';
 import { EventManager, EventListenerOptions } from '../../utils/EventManager';
+import { GridRowsInternalCache } from '../../hooks/features/rows/gridRowsState';
+
+// TODO: Export and make it augmentable
+interface Caches {
+  rows?: GridRowsInternalCache;
+}
 
 /**
  * The core API interface that is available in the grid `apiRef`.
@@ -46,6 +52,11 @@ export interface GridCoreApi {
    * @ignore - do not document
    */
   unstable_eventManager: EventManager;
+  /**
+   * The caches used by hooks and state initializers.
+   * @ignore - do not document.
+   */
+  unstable_caches: Caches;
   /**
    * Registers a handler for an event.
    * @param {string} event The name of the event.

packages/grid/x-data-grid/src/models/gridStateCommunity.ts

@@ -16,7 +16,6 @@ import type {
   GridTabIndexState,
 } from '../hooks';
 import type { GridRowsMetaState } from '../hooks/features/rows/gridRowsMetaState';
-import type { GridRowsInternalCache } from '../hooks/features/rows/gridRowsState';
 import type { GridEditRowsModel } from './gridEditRowModel';
 import type { GridSelectionModel } from './gridSelectionModel';
 
@@ -25,7 +24,6 @@ import type { GridSelectionModel } from './gridSelectionModel';
  */
 export interface GridStateCommunity {
   rows: GridRowsState;
-  rowsCache: GridRowsInternalCache;
   rowsMeta: GridRowsMetaState;
   editRows: GridEditRowsModel;
   pagination: GridPaginationState;