refactor(utils): remove use of lodash/throttle

lumapps · Jan 31, 2025 · 96daa21 · 96daa21
1 parent b0fe136
commit 96daa21
Showing 1 changed file with 14 additions and 10 deletions.
diff --git a/packages/lumx-react/src/hooks/useSizeOnWindowResize.ts b/packages/lumx-react/src/hooks/useSizeOnWindowResize.ts
@@ -1,7 +1,6 @@
 import React from 'react';
 
-import throttle from 'lodash/throttle';
-import { RectSize } from '@lumx/react/utils/type';
+import type { RectSize } from '@lumx/react/utils/type';
 
 /**
  * Observe element size (only works if it's size depends on the window size).
@@ -13,14 +12,19 @@ import { RectSize } from '@lumx/react/utils/type';
  */
 export function useSizeOnWindowResize(elementRef: React.RefObject<HTMLElement>): [RectSize | null, () => void] {
     const [size, setSize] = React.useState<null | RectSize>(null);
-    const updateSize = React.useMemo(
-        () =>
-            throttle(() => {
-                const newSize = elementRef.current?.getBoundingClientRect();
-                if (newSize) setSize(newSize);
-            }, 10),
-        [elementRef],
-    );
+    const updateSize = React.useMemo(() => {
+        let prevTimeout: ReturnType<typeof setTimeout> | undefined;
+        function update() {
+            const newSize = elementRef.current?.getBoundingClientRect();
+            if (newSize) setSize(newSize);
+            prevTimeout = undefined;
+        }
+        return () => {
+            if (!prevTimeout) {
+                prevTimeout = setTimeout(update, 10);
+            }
+        };
+    }, [elementRef]);
     React.useEffect(() => {
         updateSize();
         window.addEventListener('resize', updateSize);