[core][data grid] Fix useTimeout clear lifecycle

packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx

@@ -6,7 +6,7 @@ import {
   unstable_useEventCallback as useEventCallback,
 } from '@mui/utils';
 import { forwardRef } from '@mui/x-internals/forwardRef';
-import { useOnMount } from '../../hooks/utils/useOnMount';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
 import { gridDimensionsSelector, useGridSelector } from '../../hooks';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -95,10 +95,7 @@ const GridVirtualScrollbar = forwardRef<HTMLDivElement, GridVirtualScrollbarProp
 
     const onScrollerScroll = useEventCallback(() => {
       const scroller = apiRef.current.virtualScrollerRef.current!;
-      const scrollbar = scrollbarRef.current;
-      if (!scrollbar) {
-        return;
-      }
+      const scrollbar = scrollbarRef.current!;
 
       if (scroller[propertyScroll] === lastPosition.current) {
         return;
@@ -118,10 +115,7 @@ const GridVirtualScrollbar = forwardRef<HTMLDivElement, GridVirtualScrollbarProp
 
     const onScrollbarScroll = useEventCallback(() => {
       const scroller = apiRef.current.virtualScrollerRef.current!;
-      const scrollbar = scrollbarRef.current;
-      if (!scrollbar) {
-        return;
-      }
+      const scrollbar = scrollbarRef.current!;
 
       if (isLocked.current) {
         isLocked.current = false;
@@ -133,7 +127,7 @@ const GridVirtualScrollbar = forwardRef<HTMLDivElement, GridVirtualScrollbarProp
       scroller[propertyScroll] = value * contentSize;
     });
 
-    useOnMount(() => {
+    useEnhancedEffect(() => {
       const scroller = apiRef.current.virtualScrollerRef.current!;
       const scrollbar = scrollbarRef.current!;
       scroller.addEventListener('scroll', onScrollerScroll, { capture: true });
@@ -142,7 +136,8 @@ const GridVirtualScrollbar = forwardRef<HTMLDivElement, GridVirtualScrollbarProp
         scroller.removeEventListener('scroll', onScrollerScroll, { capture: true });
         scrollbar.removeEventListener('scroll', onScrollbarScroll, { capture: true });
       };
-    });
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
     React.useEffect(() => {
       const content = contentRef.current!;

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

@@ -5,12 +5,12 @@ import {
   unstable_useEventCallback as useEventCallback,
 } from '@mui/utils';
 import useLazyRef from '@mui/utils/useLazyRef';
-import useTimeout from '@mui/utils/useTimeout';
 import { useRtl } from '@mui/system/RtlProvider';
 import reactMajor from '@mui/x-internals/reactMajor';
 import type { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
+import { useTimeout } from '../../utils/useTimeout';
 import { useGridSelector } from '../../utils/useGridSelector';
 import { useRunOnce } from '../../utils/useRunOnce';
 import {
@@ -262,14 +262,9 @@ export const useGridVirtualScroller = () => {
   );
 
   const triggerUpdateRenderContext = useEventCallback(() => {
-    const scroller = scrollerRef.current;
-    if (!scroller) {
-      return undefined;
-    }
-
     const newScroll = {
-      top: scroller.scrollTop,
-      left: scroller.scrollLeft,
+      top: scrollerRef.current!.scrollTop,
+      left: scrollerRef.current!.scrollLeft,
     };
 
     const dx = newScroll.left - scrollPosition.current.left;

packages/x-data-grid/src/hooks/utils/useTimeout.ts

@@ -1 +1,47 @@
-export { default as useTimeout } from '@mui/utils/useTimeout';
+'use client';
+/**
+ * TODO, remove this file, have dependents import from:
+ * import useTimeout from '@mui/utils/useTimeout';
+ * directly.
+ */
+import useLazyRef from '@mui/utils/useLazyRef';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+
+class Timeout {
+  static create() {
+    return new Timeout();
+  }
+
+  currentId: ReturnType<typeof setTimeout> | null = null;
+
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  start(delay: number, fn: Function) {
+    this.clear();
+    this.currentId = setTimeout(() => {
+      this.currentId = null;
+      fn();
+    }, delay);
+  }
+
+  clear = () => {
+    if (this.currentId !== null) {
+      clearTimeout(this.currentId);
+      this.currentId = null;
+    }
+  };
+
+  disposeEffect = () => {
+    return this.clear;
+  };
+}
+
+export function useTimeout() {
+  const timeout = useLazyRef(Timeout.create).current;
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEnhancedEffect(timeout.disposeEffect, []);
+
+  return timeout;
+}