[CP Staging] fix: frequent component re-mount

src/libs/freezeScreenWithLazyLoading.tsx

@@ -1,3 +1,4 @@
+import memoize from 'lodash/memoize';
 import React from 'react';
 import FreezeWrapper from './Navigation/FreezeWrapper';
 
@@ -13,8 +14,8 @@ function FrozenScreen<TProps extends React.JSX.IntrinsicAttributes>(WrappedCompo
 }
 
 export default function freezeScreenWithLazyLoading(lazyComponent: () => React.ComponentType) {
-    return () => {
+    return memoize(() => {
         const Component = lazyComponent();
         return FrozenScreen(Component);
-    };
+    });
 }

src/pages/home/report/ReportActionCompose/SendButton.tsx

@@ -10,6 +10,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
+import useFreezeId from './useFreezeId';
 
 type SendButtonProps = {
     /** Whether the button is disabled */
@@ -24,6 +25,8 @@ function SendButton({isDisabled: isDisabledProp, handleSendMessage}: SendButtonP
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isSmallScreenWidth} = useResponsiveLayout();
+    const freezeId = useFreezeId();
+
     const Tap = Gesture.Tap().onEnd(() => {
         handleSendMessage();
     });
@@ -37,7 +40,9 @@ function SendButton({isDisabled: isDisabledProp, handleSendMessage}: SendButtonP
             <GestureDetector
                 // A new GestureDetector instance must be created when switching from a large screen to a small screen
                 // if not, the GestureDetector may not function correctly.
-                key={`send-button-${isSmallScreenWidth ? 'small-screen' : 'normal-screen'}`}
+                // The same is applicable when parent enables/disables freeze - after that we need to re-create
+                // the gesture detector. Otherwise `onEnd` will not be
+                key={`send-button-${isSmallScreenWidth ? 'small-screen' : 'normal-screen'}-${freezeId}`}
                 gesture={Tap}
             >
                 <Tooltip text={translate('common.send')}>

src/pages/home/report/ReportActionCompose/useFreezeId/index.native.ts

@@ -0,0 +1,16 @@
+import {useFocusEffect} from '@react-navigation/native';
+import {useCallback, useState} from 'react';
+
+const useFreezeId = () => {
+    const [uniqueRenderId, setUniqueRenderId] = useState(0);
+
+    useFocusEffect(
+        useCallback(() => {
+            setUniqueRenderId((c) => c + 1);
+        }, []),
+    );
+
+    return uniqueRenderId;
+};
+
+export default useFreezeId;

src/pages/home/report/ReportActionCompose/useFreezeId/index.ts

@@ -0,0 +1,3 @@
+const useFreezeId = () => 0;
+
+export default useFreezeId;

tests/perf-test/ReportActionCompose.perf-test.tsx

@@ -34,6 +34,7 @@ jest.mock('@react-navigation/native', () => {
             navigate: jest.fn(),
             addListener: () => jest.fn(),
         }),
+        useFocusEffect: jest.fn(),
         useIsFocused: () => true,
         useNavigationState: () => {},
     };