Merge pull request Expensify#76216 from software-mansion-labs/war-in/remove-modal-dependency-from-ActiveHoverable

refactor: remove MODAL dependency from ActiveHoverable - limit rerenders

Author: mollfpr

src/components/Hoverable/ActiveHoverable.tsx

@@ -1,12 +1,9 @@
 /* eslint-disable react-compiler/react-compiler */
 import {cloneElement, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {DeviceEventEmitter} from 'react-native';
-import useOnyx from '@hooks/useOnyx';
-import usePrevious from '@hooks/usePrevious';
 import mergeRefs from '@libs/mergeRefs';
 import {getReturnValue} from '@libs/ValueUtils';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import type HoverableProps from './types';
 
 type ActiveHoverableProps = Omit<HoverableProps, 'disabled'>;
@@ -15,7 +12,7 @@ type MouseEvents = 'onMouseEnter' | 'onMouseLeave' | 'onMouseMove';
 
 type OnMouseEvents = Record<MouseEvents, (e: React.MouseEvent) => void>;
 
-function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, shouldFreezeCapture, children, ref}: ActiveHoverableProps) {
+function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, isFocused = true, shouldFreezeCapture, children, ref}: ActiveHoverableProps) {
     const [isHovered, setIsHovered] = useState(false);
     const elementRef = useRef<HTMLElement | null>(null);
     const isScrollingRef = useRef(false);
@@ -81,16 +78,12 @@ function ActiveHoverable({onHoverIn, onHoverOut, shouldHandleScroll, shouldFreez
         return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
     }, []);
 
-    const [modal] = useOnyx(ONYXKEYS.MODAL, {canBeMissing: true});
-    const isModalVisible = modal?.isVisible;
-    const prevIsModalVisible = usePrevious(isModalVisible);
-
     useEffect(() => {
-        if (!isModalVisible || prevIsModalVisible) {
+        if (isFocused) {
             return;
         }
         setIsHovered(false);
-    }, [isModalVisible, prevIsModalVisible]);
+    }, [isFocused]);
 
     const handleMouseEvents = useCallback(
         (type: 'enter' | 'leave') => () => {

src/components/Hoverable/types.ts

@@ -14,6 +14,9 @@ type HoverableProps = {
     /** Whether to disable the hover action */
     isDisabled?: boolean;
 
+    /** Whether the screen containing the element is focused */
+    isFocused?: boolean;
+
     /** Function that executes when the mouse moves over the children. */
     onHoverIn?: () => void;
 

src/components/MenuItem.tsx

@@ -390,6 +390,9 @@ type MenuItemBaseProps = {
 
     /** Whether the menu item contains nested submenu items. */
     hasSubMenuItems?: boolean;
+
+    /** Whether the screen containing the item is focused */
+    isFocused?: boolean;
 };
 
 type MenuItemProps = (IconProps | AvatarProps | NoIcon) & MenuItemBaseProps;
@@ -516,6 +519,7 @@ function MenuItem({
     copyable = false,
     hasSubMenuItems = false,
     ref,
+    isFocused,
 }: MenuItemProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -683,7 +687,7 @@ function MenuItem({
                 shouldHideOnScroll={shouldHideOnScroll}
             >
                 <View>
-                    <Hoverable>
+                    <Hoverable isFocused={isFocused}>
                         {(isHovered) => (
                             <PressableWithSecondaryInteraction
                                 onPress={shouldCheckActionAllowedOnPress ? callFunctionIfActionIsAllowed(onPressAction, isAnonymousAction) : onPressAction}

src/components/MenuItemList.tsx

@@ -1,3 +1,4 @@
+import {useIsFocused} from '@react-navigation/native';
 import React, {useRef} from 'react';
 import type {GestureResponderEvent, StyleProp, View, ViewStyle} from 'react-native';
 import useSingleExecution from '@hooks/useSingleExecution';
@@ -55,6 +56,7 @@ type MenuItemListProps = {
 function MenuItemList({menuItems = [], shouldUseSingleExecution = false, wrapperStyle = {}, icon = undefined, iconWidth = undefined, iconHeight = undefined}: MenuItemListProps) {
     const popoverAnchor = useRef<View>(null);
     const {isExecuting, singleExecution} = useSingleExecution();
+    const isFocused = useIsFocused();
 
     /**
      * Handle the secondary interaction for a menu item.
@@ -106,6 +108,7 @@ function MenuItemList({menuItems = [], shouldUseSingleExecution = false, wrapper
                     {...menuItemProps}
                     disabled={!!menuItemProps.disabled || isExecuting}
                     onPress={shouldUseSingleExecution ? singleExecution(menuItemProps.onPress) : menuItemProps.onPress}
+                    isFocused={isFocused}
                 />
             </OfflineWithFeedback>
         ))