Merge pull request #65 from codeacme17/fix

fix: update `useResizeObserver` hook to fix issue(#64)

Author: codeacme17

packages/components/controller/Envelope/Envelope.tsx

@@ -67,11 +67,18 @@ export const Envelope = forwardRef<EnvelopeRef, EnvelopeProps>((props, ref) => {
     return res
   }, [_limits])
 
-  const dimensions = useResizeObserver<EnvelopeRef>(envelopeRef, WIDTH, HEIGHT, () => {
-    generateScales()
-    generateLine()
-    generateNodes()
-  })
+  const dimensions = useResizeObserver<EnvelopeRef>(
+    envelopeRef,
+    WIDTH,
+    HEIGHT,
+    () => {
+      generateScales()
+      generateLine()
+      generateNodes()
+    },
+    true,
+    data,
+  )
 
   useEffect(() => {
     updateData()

packages/lib/hooks/useResizeObserver.ts

@@ -8,6 +8,7 @@ import { useEffect, RefObject, useRef } from 'react'
  * @param {number} defaultHeight - The default height to return if the ref is not yet defined.
  * @param {() => void} callback - The callback function to run when the dimensions change.
  * @param {boolean} toggleThrottle - Whether to throttle the callback function.
+ * @param {any} data - The data to watch for changes.
  * @returns {{ width: number, height: number }} - The dimensions of the element.
  *
  * @example
@@ -20,6 +21,7 @@ export const useResizeObserver = <T extends HTMLElement | SVGSVGElement>(
   defaultHeight: number,
   callback: () => void,
   toggleThrottle: boolean = true,
+  data: any = null,
 ) => {
   const dimensions = useRef({ width: defaultWidth, height: defaultHeight })
 
@@ -33,10 +35,9 @@ export const useResizeObserver = <T extends HTMLElement | SVGSVGElement>(
         toggleThrottle ? throttledCallback() : callback()
       }
     })
-
     if (ref.current) observer.observe(ref.current)
     return () => observer.disconnect()
-  }, [ref, toggleThrottle, defaultWidth, defaultHeight])
+  }, [ref, toggleThrottle, defaultWidth, defaultHeight, data])
 
   return dimensions
 }