From 2731cbacbf5ce7220d114ac85186e27136926deb Mon Sep 17 00:00:00 2001
From: Cody Leff <cody@preset.io>
Date: Wed, 7 Dec 2022 07:51:30 -0700
Subject: [PATCH] fix: Broken effect in useCSSTextTruncation hook (#22324)

---
 .../useTruncation/useCSSTextTruncation.ts     | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/superset-frontend/src/hooks/useTruncation/useCSSTextTruncation.ts b/superset-frontend/src/hooks/useTruncation/useCSSTextTruncation.ts
index 4629331dd1..a591766fbb 100644
--- 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(() => {
+    setOffsetWidth(ref.current?.offsetWidth ?? 0);
+    setScrollWidth(ref.current?.scrollWidth ?? 0);
+  });
 
   useEffect(() => {
-    if (
-      offsetWidth &&
-      scrollWidth &&
-      (offsetWidth !== prevOffsetWidth || scrollWidth !== prevScrollWidth)
-    ) {
-      prevWidths.current = { offsetWidth, scrollWidth };
-      setIsTruncated(offsetWidth < scrollWidth);
-    }
-  }, [offsetWidth, prevOffsetWidth, prevScrollWidth, scrollWidth]);
+    setIsTruncated(offsetWidth < scrollWidth);
+  }, [offsetWidth, scrollWidth]);
 
   return [ref, isTruncated];
 };