From 2ce1ac9d5f7d547df65c24ba87de48db949e6783 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 28 Oct 2020 13:55:40 +0100
Subject: [PATCH] [DataGrid] Experiment without raf

---
 .../grid/hooks/features/core/useGridState.ts  |  6 ++---
 .../grid/_modules_/grid/hooks/utils/index.ts  |  1 -
 .../_modules_/grid/hooks/utils/useScrollFn.ts | 22 +++++++------------
 3 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/packages/grid/_modules_/grid/hooks/features/core/useGridState.ts b/packages/grid/_modules_/grid/hooks/features/core/useGridState.ts
index c4c5d9f09949f..e4563fb3aba04 100644
--- a/packages/grid/_modules_/grid/hooks/features/core/useGridState.ts
+++ b/packages/grid/_modules_/grid/hooks/features/core/useGridState.ts
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { ApiRef } from '../../../models/api/apiRef';
-import { useRafUpdate } from '../../utils/useRafUpdate';
 import { GridState } from './gridState';
 import { useGridApi } from './useGridApi';
 
@@ -8,8 +7,7 @@ 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
index 92e941a3e2bc4..5b442a078204f 100644
--- 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
index d60e1b2142768..6a5746be33d7d 100644
--- 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];
 }