From ce78bac0cf46bea45af4320ed05af6b38435dde5 Mon Sep 17 00:00:00 2001
From: Tanner Linsley <tannerlinsley@gmail.com>
Date: Thu, 1 Oct 2020 07:14:53 -0600
Subject: [PATCH] fix: no rect render on scroll, more frequent axis measuring

---
 src/components/AxisLinear.useMeasure.js |  5 ++---
 src/hooks/useHyperResponsive.js         | 13 +++++++++++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/AxisLinear.useMeasure.js b/src/components/AxisLinear.useMeasure.js
index e41954a3..b90d93ec 100644
--- a/src/components/AxisLinear.useMeasure.js
+++ b/src/components/AxisLinear.useMeasure.js
@@ -1,7 +1,6 @@
 import React from 'react'
 import useChartState from '../hooks/useChartState'
 import useIsomorphicLayoutEffect from '../hooks/useIsomorphicLayoutEffect'
-import { round } from '../utils/Utils'
 
 const getElBox = el => {
   var rect = el.getBoundingClientRect()
@@ -218,7 +217,7 @@ export default function useMeasure({
   ])
 
   // Measure after if needed
-  React.useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     measureDimensions()
-  }, [measureDimensions])
+  })
 }
diff --git a/src/hooks/useHyperResponsive.js b/src/hooks/useHyperResponsive.js
index 9060d9cc..a9c7b6c9 100644
--- a/src/hooks/useHyperResponsive.js
+++ b/src/hooks/useHyperResponsive.js
@@ -6,9 +6,18 @@ import useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'
 
 export default function useRect(nodeRef) {
   const [element, setElement] = React.useState(nodeRef.current?.parentElement)
-  const [rect, setRect] = React.useState({ width: 0, height: 0 })
+  const [rect, _setRect] = React.useState({ width: 0, height: 0 })
   const initialRectSet = React.useRef(false)
 
+  const setRect = React.useCallback(value => {
+    _setRect(old => {
+      if (old.width !== value.width || old.height !== value.height) {
+        return value
+      }
+      return old
+    })
+  }, [])
+
   useIsomorphicLayoutEffect(() => {
     if (nodeRef.current?.parentElement !== element) {
       setElement(nodeRef.current?.parentElement)
@@ -34,7 +43,7 @@ export default function useRect(nodeRef) {
     return () => {
       observer.unobserve()
     }
-  }, [element])
+  }, [element, setRect])
 
   return { width: rect.width, height: rect.height }
 }