[DataGrid] Experiment without raf

mui · Oct 28, 2020 · 2ce1ac9 · 2ce1ac9
1 parent f1835be
commit 2ce1ac9
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 19 deletions.
diff --git a/packages/grid/_modules_/grid/hooks/features/core/useGridState.ts b/packages/grid/_modules_/grid/hooks/features/core/useGridState.ts
@@ -1,15 +1,13 @@
 import * as React from 'react';
 import { ApiRef } from '../../../models/api/apiRef';
-import { useRafUpdate } from '../../utils/useRafUpdate';
 import { GridState } from './gridState';
 import { useGridApi } from './useGridApi';
 
 export const useGridState = (
   apiRef: ApiRef,
 ): [GridState, (stateUpdaterFn: (oldState: GridState) => GridState) => void, () => void] => {
   const api = useGridApi(apiRef);
-  const [, forceUpdate] = React.useState();
-  const [rafUpdate] = useRafUpdate(() => forceUpdate((p: any) => !p));
+  const [, forceUpdate] = React.useReducer((acc) => acc + 1, 0);
 
   const setGridState = React.useCallback(
     (stateUpdaterFn: (oldState: GridState) => GridState) => {
@@ -18,5 +16,5 @@ export const useGridState = (
     [api],
   );
 
-  return [api.state, setGridState, rafUpdate];
+  return [api.state, setGridState, forceUpdate];
 };
diff --git a/packages/grid/_modules_/grid/hooks/utils/index.ts b/packages/grid/_modules_/grid/hooks/utils/index.ts
@@ -1,3 +1,2 @@
 export * from './useLogger';
-export * from './useRafUpdate';
 export * from './useScrollFn';
diff --git a/packages/grid/_modules_/grid/hooks/utils/useScrollFn.ts b/packages/grid/_modules_/grid/hooks/utils/useScrollFn.ts
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { debounce } from '@material-ui/core/utils';
 import { useLogger } from './useLogger';
-import { useRafUpdate } from './useRafUpdate';
 
 export interface ScrollParams {
   left: number;
@@ -14,18 +13,15 @@ export function useScrollFn(
   onScroll?: ScrollFn,
 ): [ScrollFn, ScrollFn] {
   const logger = useLogger('useScrollFn');
-  const rafResetPointerRef = React.useRef(0);
   const previousValue = React.useRef<ScrollParams>();
-  const [restorePointerEvents] = useRafUpdate(() => {
-    if (scrollingElementRef && scrollingElementRef.current) {
-      scrollingElementRef.current!.style.pointerEvents = 'unset';
-    }
-    rafResetPointerRef.current = 0;
-  });
 
-  const debouncedResetPointerEvents = React.useMemo(() => debounce(restorePointerEvents, 300), [
-    restorePointerEvents,
-  ]);
+  const debouncedResetPointerEvents = React.useMemo(
+    () =>
+      debounce(() => {
+        scrollingElementRef.current!.style.pointerEvents = 'unset';
+      }, 300),
+    [scrollingElementRef],
+  );
 
   const scrollTo: (v: ScrollParams) => void = React.useCallback(
     (v) => {
@@ -50,13 +46,11 @@ export function useScrollFn(
     [scrollingElementRef, debouncedResetPointerEvents, logger, onScroll],
   );
 
-  const [runScroll] = useRafUpdate(scrollTo);
-
   React.useEffect(() => {
     return () => {
       debouncedResetPointerEvents.clear();
     };
   }, [scrollingElementRef, debouncedResetPointerEvents]);
 
-  return [runScroll, scrollTo];
+  return [scrollTo, scrollTo];
 }