From e8d093ebc8231c90cfbfa596c686f163d1ad60c4 Mon Sep 17 00:00:00 2001
From: Rivka Ungar <rivkaun@monday.com>
Date: Sun, 8 Dec 2024 13:36:09 +0200
Subject: [PATCH] fix(table): avoid unnecessary re-rendering if TableRowMenu
 doesn't exist (#2630)

---
 .../src/components/Table/TableRowMenu/TableRowMenu.tsx   | 1 +
 .../context/TableRowMenuContext/TableRowMenuContext.tsx  | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/Table/TableRowMenu/TableRowMenu.tsx b/packages/core/src/components/Table/TableRowMenu/TableRowMenu.tsx
index 73b8431ddb..7ff6e4ea77 100644
--- a/packages/core/src/components/Table/TableRowMenu/TableRowMenu.tsx
+++ b/packages/core/src/components/Table/TableRowMenu/TableRowMenu.tsx
@@ -47,6 +47,7 @@ const TableRowMenu = forwardRef(
             style={{ top: menuButtonPosition }}
             onMouseEnter={onMouseOverRowMenu}
             onMouseLeave={onMouseLeaveRowMenu}
+            data-row-menu-id={rowId}
           >
             <MenuButton
               id={id}
diff --git a/packages/core/src/components/Table/context/TableRowMenuContext/TableRowMenuContext.tsx b/packages/core/src/components/Table/context/TableRowMenuContext/TableRowMenuContext.tsx
index 04469afb34..6b6d8e8162 100644
--- a/packages/core/src/components/Table/context/TableRowMenuContext/TableRowMenuContext.tsx
+++ b/packages/core/src/components/Table/context/TableRowMenuContext/TableRowMenuContext.tsx
@@ -7,6 +7,7 @@ export const TableRowMenuProvider = ({ value, children }: TableRowMenuProviderPr
   const { tableRootRef, hoveredRowRef, isMenuOpen, resetHoveredRow, setHoveredRowRef, setIsMenuOpen } = value;
   const rowMouseLeaveTimeoutId = useRef<ReturnType<typeof setTimeout>>(null);
   const [menuButtonPosition, setMenuButtonPosition] = useState(0);
+  const hasMenuRef = useRef<boolean | null>(null);
 
   const resetTimeout = useCallback(() => {
     clearTimeout(rowMouseLeaveTimeoutId.current);
@@ -15,12 +16,18 @@ export const TableRowMenuProvider = ({ value, children }: TableRowMenuProviderPr
 
   const onMouseOverRow = useCallback(
     (rowRef: React.RefObject<HTMLDivElement>) => {
-      if (isMenuOpen || hoveredRowRef?.current === rowRef.current) return;
+      if (hasMenuRef.current === false || isMenuOpen || hoveredRowRef?.current === rowRef.current) return;
+
       resetTimeout();
       setHoveredRowRef(rowRef);
       const tableRootTop = tableRootRef.current.getBoundingClientRect().top;
       const rowTop = rowRef.current.getBoundingClientRect().top;
       setMenuButtonPosition(rowTop - tableRootTop);
+      if (hasMenuRef.current === null) {
+        requestAnimationFrame(() => {
+          hasMenuRef.current = !!document?.querySelector(`[data-row-menu-id]`);
+        });
+      }
     },
     [isMenuOpen, hoveredRowRef, resetTimeout, setHoveredRowRef, tableRootRef]
   );