diff --git a/packages/x-data-grid/src/hooks/utils/useGridSelector.ts b/packages/x-data-grid/src/hooks/utils/useGridSelector.ts
index 6680e010ecb..217d27ecf6b 100644
--- a/packages/x-data-grid/src/hooks/utils/useGridSelector.ts
+++ b/packages/x-data-grid/src/hooks/utils/useGridSelector.ts
@@ -1,34 +1,12 @@
+'use client';
 import * as React from 'react';
-import { RefObject } from '@mui/x-internals/types';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import type { RefObject } from '@mui/x-internals/types';
 import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import { warnOnce } from '@mui/x-internals/warning';
 import type { GridApiCommon } from '../../models/api/gridApiCommon';
-import type { OutputSelector } from '../../utils/createSelector';
+import type { GridStateCommunity } from '../../models/gridStateCommunity';
 import { useLazyRef } from './useLazyRef';
-import { useOnMount } from './useOnMount';
-import type { GridCoreApi } from '../../models/api/gridCoreApi';
-
-function isOutputSelector<Api extends GridApiCommon, Args, T>(
-  selector: any,
-): selector is OutputSelector<Api['state'], Args, T> {
-  return selector.acceptsApiRef;
-}
-
-type Selector<Api extends GridApiCommon, Args, T> =
-  | ((state: Api['state']) => T)
-  | OutputSelector<Api['state'], Args, T>;
-
-function applySelector<Api extends GridApiCommon, Args, T>(
-  apiRef: RefObject<Api>,
-  selector: Selector<Api, Args, T>,
-  args: Args,
-  instanceId: GridCoreApi['instanceId'],
-) {
-  if (isOutputSelector(selector)) {
-    return selector(apiRef, args);
-  }
-  return selector(apiRef.current.state, args, instanceId);
-}
 
 const defaultCompare = Object.is;
 export const objectShallowCompare = fastObjectShallowCompare as (a: unknown, b: unknown) => boolean;
@@ -40,7 +18,7 @@ const arrayShallowCompare = (a: any[], b: any[]) => {
   return a.length === b.length && a.every((v, i) => v === b[i]);
 };
 
-export const argsEqual = (prev: any, curr: any) => {
+const argsEqual = (prev: any, curr: any) => {
   let fn = Object.is;
   if (curr instanceof Array) {
     fn = arrayShallowCompare;
@@ -50,72 +28,96 @@ export const argsEqual = (prev: any, curr: any) => {
   return fn(prev, curr);
 };
 
-const createRefs = () => ({ state: null, equals: null, selector: null, args: null }) as any;
+const createRefs = () =>
+  ({ state: null, equals: null, selector: null, args: undefined, storeState: null }) as any;
+
+const EMPTY = [] as unknown[];
 
-export const useGridSelector = <Api extends GridApiCommon, Args, T>(
+type Refs<T> = {
+  // `state` stores the selected value returned by this hook. `storeState` stores the
+  // grid store object that produced it, so the mounted-phase catch-up can detect updates
+  // that happened before the subscription was attached without subscribing during render.
+  state: T;
+  storeState: GridStateCommunity | null;
+  equals: <U = T>(a: U, b: U) => boolean;
+  selector: Function;
+  args: any;
+};
+
+export function useGridSelector<Api extends GridApiCommon, T>(
+  apiRef: RefObject<Api>,
+  selector: (apiRef: RefObject<Api>) => T,
+  args?: undefined,
+  equals?: <U = T>(a: U, b: U) => boolean,
+): T;
+export function useGridSelector<Api extends GridApiCommon, T, Args>(
   apiRef: RefObject<Api>,
-  selector: Selector<Api, Args, T>,
+  selector: (apiRef: RefObject<Api>, a1: Args) => T,
+  args: Args,
+  equals?: <U = T>(a: U, b: U) => boolean,
+): T;
+export function useGridSelector<Api extends GridApiCommon, Args, T>(
+  apiRef: RefObject<Api>,
+  selector: Function,
   args: Args = undefined as Args,
   equals: <U = T>(a: U, b: U) => boolean = defaultCompare,
-) => {
-  if (process.env.NODE_ENV !== 'production') {
-    if (!apiRef.current.state) {
-      warnOnce([
-        'MUI X: `useGridSelector` has been called before the initialization of the state.',
-        'This hook can only be used inside the context of the grid.',
-      ]);
-    }
+) {
+  if (!apiRef.current.state) {
+    warnOnce([
+      'MUI X: `useGridSelector` has been called before the initialization of the state.',
+      'This hook can only be used inside the context of the grid.',
+    ]);
   }
 
-  const refs = useLazyRef<
-    {
-      state: T;
-      equals: typeof equals;
-      selector: typeof selector;
-      args: typeof args;
-    },
-    never
-  >(createRefs);
+  const refs = useLazyRef<Refs<T>, never>(createRefs);
   const didInit = refs.current.selector !== null;
 
   const [state, setState] = React.useState<T>(
     // We don't use an initialization function to avoid allocations
-    (didInit ? null : applySelector(apiRef, selector, args, apiRef.current.instanceId)) as T,
+    (didInit ? null : selector(apiRef, args)) as T,
   );
 
   refs.current.state = state;
+  if (!didInit) {
+    refs.current.storeState = apiRef.current.store.state;
+  }
   refs.current.equals = equals;
   refs.current.selector = selector;
   const prevArgs = refs.current.args;
   refs.current.args = args;
 
   if (didInit && !argsEqual(prevArgs, args)) {
-    const newState = applySelector(
-      apiRef,
-      refs.current.selector,
-      refs.current.args,
-      apiRef.current.instanceId,
-    ) as T;
+    const newState = refs.current.selector(apiRef, refs.current.args) as T;
     if (!refs.current.equals(refs.current.state, newState)) {
       refs.current.state = newState;
       setState(newState);
     }
+    refs.current.storeState = apiRef.current.store.state;
   }
 
-  useOnMount(() => {
-    return apiRef.current.store.subscribe(() => {
-      const newState = applySelector(
-        apiRef,
-        refs.current.selector,
-        refs.current.args,
-        apiRef.current.instanceId,
-      ) as T;
-      if (!refs.current.equals(refs.current.state, newState)) {
-        refs.current.state = newState;
-        setState(newState);
+  const updateState = React.useCallback(
+    () => {
+      const storeState = apiRef.current.store.state;
+
+      if (refs.current.storeState !== storeState) {
+        const newState = refs.current.selector(apiRef, refs.current.args) as T;
+        refs.current.storeState = storeState;
+
+        if (!refs.current.equals(refs.current.state, newState)) {
+          refs.current.state = newState;
+          setState(newState);
+        }
       }
-    });
-  });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    EMPTY,
+  );
+
+  useEnhancedEffect(() => {
+    updateState();
+    return apiRef.current.store.subscribe(updateState);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, EMPTY);
 
   return state;
-};
+}