fix: Broken effect in useCSSTextTruncation hook (#22324)

apache · Dec 7, 2022 · 2731cba · 2731cba
1 parent ff1d29c
commit 2731cba
Showing 1 changed file with 10 additions and 13 deletions.
diff --git a/superset-frontend/src/hooks/useTruncation/useCSSTextTruncation.ts b/superset-frontend/src/hooks/useTruncation/useCSSTextTruncation.ts
@@ -42,21 +42,18 @@ const useCSSTextTruncation = <T extends HTMLElement>(): [
 ] => {
   const [isTruncated, setIsTruncated] = useState(true);
   const ref = useRef<T>(null);
-  const { offsetWidth, scrollWidth } = ref.current ?? {};
-  const prevWidths = useRef({ offsetWidth, scrollWidth });
-  const { offsetWidth: prevOffsetWidth, scrollWidth: prevScrollWidth } =
-    prevWidths.current;
+  const [offsetWidth, setOffsetWidth] = useState(0);
+  const [scrollWidth, setScrollWidth] = useState(0);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
-    if (
-      offsetWidth &&
-      scrollWidth &&
-      (offsetWidth !== prevOffsetWidth || scrollWidth !== prevScrollWidth)
-    ) {
-      prevWidths.current = { offsetWidth, scrollWidth };
-      setIsTruncated(offsetWidth < scrollWidth);
-    }
-  }, [offsetWidth, prevOffsetWidth, prevScrollWidth, scrollWidth]);
+    setOffsetWidth(ref.current?.offsetWidth ?? 0);
+    setScrollWidth(ref.current?.scrollWidth ?? 0);
+  });
+
+  useEffect(() => {
+    setIsTruncated(offsetWidth < scrollWidth);
+  }, [offsetWidth, scrollWidth]);
 
   return [ref, isTruncated];
 };