fix: no rect render on scroll, more frequent axis measuring

Author: tannerlinsley

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])
+  })
 }

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 }
 }