fix(useEllipsisDetection): add debounce for window resize

softconstruct · Mar 4, 2024 · 457fd1e · 457fd1e
1 parent ed47d84
commit 457fd1e
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/src/hooks/useEllipsisDetection.js b/src/hooks/useEllipsisDetection.js
@@ -6,17 +6,26 @@ const useEllipsisDetection = (ref, externalDependencies = []) => {
     const [isTruncated, setIsTruncated] = useState(false);
 
     useEffect(() => {
+        let timeoutId;
         const handleResize = () => {
             if (!ref.current) return;
             const { scrollWidth, clientWidth, scrollHeight, clientHeight } = ref.current;
             setIsTruncated(scrollWidth > clientWidth || scrollHeight > clientHeight + EQUAL_HEIGHT_DIFF);
         };
 
-        window.addEventListener('resize', handleResize);
+        const debounceResize = () => {
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(handleResize, 100);
+        };
+
+        window.addEventListener('resize', debounceResize);
 
         handleResize();
 
-        return () => window.removeEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', debounceResize);
+            clearTimeout(timeoutId);
+        };
     }, [
         ref,
         ref?.current?.scrollWidth,