From f48653309526f06c4ac099c67b6a8bae49a39f75 Mon Sep 17 00:00:00 2001
From: Marcos Rodriguez Velez <marcospr@pm.me>
Date: Sat, 18 May 2024 12:56:57 -0400
Subject: [PATCH] REF: useMemo

---
 components/TooltipMenu.android.tsx |  29 +++---
 components/TooltipMenu.ios.tsx     | 143 ++++++++++++++---------------
 2 files changed, 85 insertions(+), 87 deletions(-)

diff --git a/components/TooltipMenu.android.tsx b/components/TooltipMenu.android.tsx
index fe8aeb732..225c9d658 100644
--- a/components/TooltipMenu.android.tsx
+++ b/components/TooltipMenu.android.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, forwardRef, Ref } from 'react';
+import React, { useRef, useEffect, forwardRef, Ref, useMemo, useCallback } from 'react';
 import { Pressable, View } from 'react-native';
 import showPopupMenu, { OnPopupMenuItemSelect, PopupMenuItem } from '../blue_modules/showPopupMenu.android';
 import { ToolTipMenuProps } from './types';
@@ -17,23 +17,27 @@ const BaseToolTipMenu = (props: ToolTipMenuProps, ref: Ref<{ dismissMenu?: () =>
     ...restProps
   } = props;
 
-  const handleToolTipSelection: OnPopupMenuItemSelect = (selection: PopupMenuItem) => {
-    if (selection.id) {
-      onPressMenuItem(selection.id);
-    }
-  };
+  const handleToolTipSelection = useCallback<OnPopupMenuItemSelect>(
+    (selection: PopupMenuItem) => {
+      if (selection.id) {
+        onPressMenuItem(selection.id);
+      }
+    },
+    [onPressMenuItem],
+  );
 
   useEffect(() => {
     if (ref && menuRef.current) {
       (ref as React.MutableRefObject<{ dismissMenu?: () => void }>).current.dismissMenu = dismissMenu;
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ref]);
 
-  const dismissMenu = () => {
+  const dismissMenu = useCallback(() => {
     console.log('dismissMenu Not implemented');
-  };
+  }, []);
 
-  const showMenu = () => {
+  const menuItems = useMemo(() => {
     const menu: { id: string; label: string }[] = [];
     actions.forEach(action => {
       if (Array.isArray(action)) {
@@ -44,9 +48,12 @@ const BaseToolTipMenu = (props: ToolTipMenuProps, ref: Ref<{ dismissMenu?: () =>
         menu.push({ id: action.id.toString(), label: action.text });
       }
     });
+    return menu;
+  }, [actions]);
 
-    showPopupMenu(menu, handleToolTipSelection, menuRef.current);
-  };
+  const showMenu = useCallback(() => {
+    showPopupMenu(menuItems, handleToolTipSelection, menuRef.current);
+  }, [menuItems, handleToolTipSelection]);
 
   return (
     <Pressable
diff --git a/components/TooltipMenu.ios.tsx b/components/TooltipMenu.ios.tsx
index 03c2f4aae..6d985d351 100644
--- a/components/TooltipMenu.ios.tsx
+++ b/components/TooltipMenu.ios.tsx
@@ -1,11 +1,23 @@
-// ToolTipMenu.ios.tsx
-import React, { forwardRef, Ref } from 'react';
+import React, { forwardRef, Ref, useMemo, useCallback } from 'react';
 import { ContextMenuView, ContextMenuButton, RenderItem } from 'react-native-ios-context-menu';
 import { TouchableOpacity } from 'react-native';
 import { ToolTipMenuProps, Action } from './types';
 
 const BaseToolTipMenu = (props: ToolTipMenuProps, ref: Ref<any>) => {
-  const menuItemMapped = ({ action, menuOptions }: { action: Action; menuOptions?: string[] }) => {
+  const {
+    title = '',
+    isButton = false,
+    isMenuPrimaryAction = false,
+    renderPreview,
+    disabled = false,
+    onPress,
+    onMenuWillShow,
+    onMenuWillHide,
+    buttonStyle,
+    onPressMenuItem,
+  } = props;
+
+  const menuItemMapped = useCallback(({ action, menuOptions }: { action: Action; menuOptions?: string[] }) => {
     const item: any = {
       actionKey: action.id.toString(),
       actionTitle: action.text,
@@ -19,61 +31,56 @@ const BaseToolTipMenu = (props: ToolTipMenuProps, ref: Ref<any>) => {
       item.menuAttributes = ['disabled'];
     }
     return item;
-  };
+  }, []);
 
-  const menuItems = props.actions.map(action => {
-    if (Array.isArray(action)) {
-      const mapped = action.map(actionToMap => menuItemMapped({ action: actionToMap }));
-      return {
-        menuOptions: ['displayInline'],
-        menuItems: mapped,
-        menuTitle: '',
-      };
-    } else {
-      return menuItemMapped({ action });
-    }
-  });
+  const menuItems = useMemo(
+    () =>
+      props.actions.map(action => {
+        if (Array.isArray(action)) {
+          const mapped = action.map(actionToMap => menuItemMapped({ action: actionToMap }));
+          return {
+            menuOptions: ['displayInline'],
+            menuItems: mapped,
+            menuTitle: '',
+          };
+        } else {
+          return menuItemMapped({ action });
+        }
+      }),
+    [props.actions, menuItemMapped],
+  );
 
-  const {
-    title = '',
-    isButton = false,
-    isMenuPrimaryAction = false,
-    renderPreview,
-    disabled = false,
-    onPress,
-    onMenuWillShow,
-    onMenuWillHide,
-    buttonStyle,
-  } = props;
+  const handlePressMenuItem = useCallback(
+    ({ nativeEvent }: { nativeEvent: { actionKey: string } }) => {
+      onPressMenuItem(nativeEvent.actionKey);
+    },
+    [onPressMenuItem],
+  );
 
-  return isButton ? (
-    <TouchableOpacity onPress={onPress} disabled={disabled} accessibilityRole="button" style={buttonStyle}>
-      <ContextMenuButton
-        ref={ref}
-        onMenuWillShow={onMenuWillShow}
-        onMenuWillHide={onMenuWillHide}
-        useActionSheetFallback={false}
-        onPressMenuItem={({ nativeEvent }) => {
-          props.onPressMenuItem(nativeEvent.actionKey);
-        }}
-        isMenuPrimaryAction={isMenuPrimaryAction}
-        menuConfig={{
-          menuTitle: title,
-          menuItems,
-        }}
-      >
-        {props.children}
-      </ContextMenuButton>
-    </TouchableOpacity>
-  ) : props.onPress ? (
+  const renderContextMenuButton = () => (
+    <ContextMenuButton
+      ref={ref}
+      onMenuWillShow={onMenuWillShow}
+      onMenuWillHide={onMenuWillHide}
+      useActionSheetFallback={false}
+      onPressMenuItem={handlePressMenuItem}
+      isMenuPrimaryAction={isMenuPrimaryAction}
+      menuConfig={{
+        menuTitle: title,
+        menuItems,
+      }}
+    >
+      {props.children}
+    </ContextMenuButton>
+  );
+
+  const renderContextMenuView = () => (
     <ContextMenuView
       ref={ref}
       lazyPreview
       shouldEnableAggressiveCleanup
       internalCleanupMode="automatic"
-      onPressMenuItem={({ nativeEvent }) => {
-        props.onPressMenuItem(nativeEvent.actionKey);
-      }}
+      onPressMenuItem={handlePressMenuItem}
       useActionSheetFallback={false}
       menuConfig={{
         menuTitle: title,
@@ -89,36 +96,20 @@ const BaseToolTipMenu = (props: ToolTipMenuProps, ref: Ref<any>) => {
           }
         : {})}
     >
-      <TouchableOpacity accessibilityRole="button" onPress={props.onPress}>
+      <TouchableOpacity accessibilityRole="button" onPress={onPress}>
         {props.children}
       </TouchableOpacity>
     </ContextMenuView>
+  );
+
+  return isButton ? (
+    <TouchableOpacity onPress={onPress} disabled={disabled} accessibilityRole="button" style={buttonStyle}>
+      {renderContextMenuButton()}
+    </TouchableOpacity>
+  ) : props.onPress ? (
+    renderContextMenuView()
   ) : (
-    <ContextMenuView
-      ref={ref}
-      internalCleanupMode="viewController"
-      onPressMenuItem={({ nativeEvent }) => {
-        props.onPressMenuItem(nativeEvent.actionKey);
-      }}
-      lazyPreview
-      shouldEnableAggressiveCleanup
-      useActionSheetFallback={false}
-      menuConfig={{
-        menuTitle: title,
-        menuItems,
-      }}
-      {...(renderPreview
-        ? {
-            previewConfig: {
-              previewType: 'CUSTOM',
-              backgroundColor: 'white',
-            },
-            renderPreview: renderPreview as RenderItem,
-          }
-        : {})}
-    >
-      {props.children}
-    </ContextMenuView>
+    renderContextMenuView()
   );
 };