diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx index b80f77d6d34db..9d0f6f94273c8 100644 --- a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollbar.tsx +++ b/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 { 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 { 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 { + useEnhancedEffect(() => { const scroller = apiRef.current.virtualScrollerRef.current!; const scrollbar = scrollbarRef.current!; scroller.addEventListener('scroll', onScrollerScroll, { capture: true }); @@ -142,7 +136,8 @@ const GridVirtualScrollbar = forwardRef { const content = contentRef.current!; diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx index 948450691a821..f66a97db1fc96 100644 --- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/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; diff --git a/packages/x-data-grid/src/hooks/utils/useTimeout.ts b/packages/x-data-grid/src/hooks/utils/useTimeout.ts index ebd97b60880a4..dce3e3fc6f9bb 100644 --- a/packages/x-data-grid/src/hooks/utils/useTimeout.ts +++ b/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 | 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; +} diff --git a/packages/x-tree-view/src/internals/hooks/useTimeout.ts b/packages/x-tree-view/src/internals/hooks/useTimeout.ts deleted file mode 100644 index ebd97b60880a4..0000000000000 --- a/packages/x-tree-view/src/internals/hooks/useTimeout.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as useTimeout } from '@mui/utils/useTimeout';