perf(useResizeColumns): optimize dispatch count (#3231)

* perf(useResizeColumns): optimize dispatch count for #3165 * console log demo * Revert "console log demo" 37a69f5 * test(useResizeColumns): update tests
TanStack · Apr 8, 2022 · f2e8827 · f2e8827
1 parent 05ed37c
commit f2e8827
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 5 deletions.
diff --git a/src/plugin-hooks/tests/useResizeColumns.test.js b/src/plugin-hooks/tests/useResizeColumns.test.js
@@ -167,6 +167,14 @@ const sizesAfter = [
   '179.26829268292684px',
 ]
 
+beforeEach(() => {
+  jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => cb())
+})
+
+afterEach(() => {
+  window.requestAnimationFrame.mockRestore()
+})
+
 test('table can be resized by a mouse', () => {
   const rtl = render(<App />)
 

diff --git a/src/plugin-hooks/useResizeColumns.js b/src/plugin-hooks/useResizeColumns.js
@@ -49,15 +49,31 @@ const defaultGetResizerProps = (props, { instance, header }) => {
 
     const clientX = isTouchEvent ? Math.round(e.touches[0].clientX) : e.clientX
 
-    const dispatchMove = clientXPos => {
-      dispatch({ type: actions.columnResizing, clientX: clientXPos })
+    let raf
+    let mostRecentClientX
+
+    const dispatchEnd = () => {
+      window.cancelAnimationFrame(raf)
+      raf = null
+      dispatch({ type: actions.columnDoneResizing })
+    }
+    const dispatchMove = () => {
+      window.cancelAnimationFrame(raf)
+      raf = null
+      dispatch({ type: actions.columnResizing, clientX: mostRecentClientX })
+    }
+
+    const scheduleDispatchMoveOnNextAnimationFrame = clientXPos => {
+      mostRecentClientX = clientXPos
+      if (!raf) {
+        raf = window.requestAnimationFrame(dispatchMove)
+      }
     }
-    const dispatchEnd = () => dispatch({ type: actions.columnDoneResizing })
 
     const handlersAndEvents = {
       mouse: {
         moveEvent: 'mousemove',
-        moveHandler: e => dispatchMove(e.clientX),
+        moveHandler: e => scheduleDispatchMoveOnNextAnimationFrame(e.clientX),
         upEvent: 'mouseup',
         upHandler: e => {
           document.removeEventListener(
@@ -78,7 +94,7 @@ const defaultGetResizerProps = (props, { instance, header }) => {
             e.preventDefault()
             e.stopPropagation()
           }
-          dispatchMove(e.touches[0].clientX)
+          scheduleDispatchMoveOnNextAnimationFrame(e.touches[0].clientX)
           return false
         },
         upEvent: 'touchend',