From 77e3595b3151df18b15d5f274b3a08498962b7f7 Mon Sep 17 00:00:00 2001
From: AGarciaNY <aldairgarcia360@gmail.com>
Date: Fri, 14 Jul 2023 15:03:27 -0400
Subject: [PATCH 1/2] Migrate FloatingMessageCounter to function component

---
 .../report/FloatingMessageCounter/index.js    | 122 ++++++++----------
 1 file changed, 57 insertions(+), 65 deletions(-)

diff --git a/src/pages/home/report/FloatingMessageCounter/index.js b/src/pages/home/report/FloatingMessageCounter/index.js
index 9ba153ae48dd..406347ffb2fc 100644
--- a/src/pages/home/report/FloatingMessageCounter/index.js
+++ b/src/pages/home/report/FloatingMessageCounter/index.js
@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import {Animated, View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../../../../styles/styles';
@@ -7,7 +7,7 @@ import Text from '../../../../components/Text';
 import Icon from '../../../../components/Icon';
 import * as Expensicons from '../../../../components/Icon/Expensicons';
 import themeColors from '../../../../styles/themes/default';
-import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
+import useLocalize from '../../../../hooks/useLocalize';
 import FloatingMessageCounterContainer from './FloatingMessageCounterContainer';
 
 const propTypes = {
@@ -16,8 +16,6 @@ const propTypes = {
 
     /** Callback to be called when user clicks the New Messages indicator */
     onClick: PropTypes.func,
-
-    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
@@ -28,73 +26,67 @@ const defaultProps = {
 const MARKER_INACTIVE_TRANSLATE_Y = -40;
 const MARKER_ACTIVE_TRANSLATE_Y = 10;
 
-class FloatingMessageCounter extends PureComponent {
-    constructor(props) {
-        super(props);
-        this.translateY = new Animated.Value(MARKER_INACTIVE_TRANSLATE_Y);
-        this.show = this.show.bind(this);
-        this.hide = this.hide.bind(this);
-    }
+function FloatingMessageCounter(props) {
+    const {translate} = useLocalize();
+    const translateY = useMemo(() => new Animated.Value(MARKER_INACTIVE_TRANSLATE_Y), []);
 
-    componentDidUpdate() {
-        if (this.props.isActive) {
-            this.show();
-        } else {
-            this.hide();
-        }
-    }
+    useEffect(() => {
+        const show = () => {
+            Animated.spring(translateY, {
+                toValue: MARKER_ACTIVE_TRANSLATE_Y,
+                duration: 80,
+                useNativeDriver: true,
+            }).start();
+        };
 
-    show() {
-        Animated.spring(this.translateY, {
-            toValue: MARKER_ACTIVE_TRANSLATE_Y,
-            duration: 80,
-            useNativeDriver: true,
-        }).start();
-    }
+        const hide = () => {
+            Animated.spring(translateY, {
+                toValue: MARKER_INACTIVE_TRANSLATE_Y,
+                duration: 80,
+                useNativeDriver: true,
+            }).start();
+        };
 
-    hide() {
-        Animated.spring(this.translateY, {
-            toValue: MARKER_INACTIVE_TRANSLATE_Y,
-            duration: 80,
-            useNativeDriver: true,
-        }).start();
-    }
+        if (props.isActive) {
+            show();
+        } else {
+            hide();
+        }
+    }, [props.isActive, translateY]);
 
-    render() {
-        return (
-            <FloatingMessageCounterContainer
-                accessibilityHint={this.props.translate('accessibilityHints.scrollToNewestMessages')}
-                containerStyles={[styles.floatingMessageCounterTransformation(this.translateY)]}
-            >
-                <View style={styles.floatingMessageCounter}>
-                    <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
-                        <Button
-                            success
-                            small
-                            onPress={this.props.onClick}
-                        >
-                            <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                <Icon
-                                    small
-                                    src={Expensicons.DownArrow}
-                                    fill={themeColors.textLight}
-                                />
-                                <Text
-                                    selectable={false}
-                                    style={[styles.ml2, styles.buttonSmallText, styles.textWhite]}
-                                >
-                                    {this.props.translate('newMessages')}
-                                </Text>
-                            </View>
-                        </Button>
-                    </View>
+    return (
+        <FloatingMessageCounterContainer
+            accessibilityHint={translate('accessibilityHints.scrollToNewestMessages')}
+            containerStyles={[styles.floatingMessageCounterTransformation(translateY)]}
+        >
+            <View style={styles.floatingMessageCounter}>
+                <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
+                    <Button
+                        success
+                        small
+                        onPress={props.onClick}
+                    >
+                        <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                            <Icon
+                                small
+                                src={Expensicons.DownArrow}
+                                fill={themeColors.textLight}
+                            />
+                            <Text
+                                selectable={false}
+                                style={[styles.ml2, styles.buttonSmallText, styles.textWhite]}
+                            >
+                                {translate('newMessages')}
+                            </Text>
+                        </View>
+                    </Button>
                 </View>
-            </FloatingMessageCounterContainer>
-        );
-    }
+            </View>
+        </FloatingMessageCounterContainer>
+    );
 }
 
 FloatingMessageCounter.propTypes = propTypes;
 FloatingMessageCounter.defaultProps = defaultProps;
-
-export default withLocalize(FloatingMessageCounter);
+FloatingMessageCounter.displayName = 'FloatingMessageCounter';
+export default React.memo(FloatingMessageCounter);

From aa582d87542765cc6dd520e60cf1a29bb9e10bed Mon Sep 17 00:00:00 2001
From: AGarciaNY <aldairgarcia360@gmail.com>
Date: Sun, 16 Jul 2023 12:33:10 -0400
Subject: [PATCH 2/2] improved FloatingMessageCounter performance by using
 useCallback

---
 .../report/FloatingMessageCounter/index.js    | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/pages/home/report/FloatingMessageCounter/index.js b/src/pages/home/report/FloatingMessageCounter/index.js
index 406347ffb2fc..73fe02df129b 100644
--- a/src/pages/home/report/FloatingMessageCounter/index.js
+++ b/src/pages/home/report/FloatingMessageCounter/index.js
@@ -1,4 +1,4 @@
-import React, {useEffect, useMemo} from 'react';
+import React, {useEffect, useMemo, useCallback} from 'react';
 import {Animated, View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../../../../styles/styles';
@@ -30,29 +30,29 @@ function FloatingMessageCounter(props) {
     const {translate} = useLocalize();
     const translateY = useMemo(() => new Animated.Value(MARKER_INACTIVE_TRANSLATE_Y), []);
 
-    useEffect(() => {
-        const show = () => {
-            Animated.spring(translateY, {
-                toValue: MARKER_ACTIVE_TRANSLATE_Y,
-                duration: 80,
-                useNativeDriver: true,
-            }).start();
-        };
+    const show = useCallback(() => {
+        Animated.spring(translateY, {
+            toValue: MARKER_ACTIVE_TRANSLATE_Y,
+            duration: 80,
+            useNativeDriver: true,
+        }).start();
+    }, [translateY]);
 
-        const hide = () => {
-            Animated.spring(translateY, {
-                toValue: MARKER_INACTIVE_TRANSLATE_Y,
-                duration: 80,
-                useNativeDriver: true,
-            }).start();
-        };
+    const hide = useCallback(() => {
+        Animated.spring(translateY, {
+            toValue: MARKER_INACTIVE_TRANSLATE_Y,
+            duration: 80,
+            useNativeDriver: true,
+        }).start();
+    }, [translateY]);
 
+    useEffect(() => {
         if (props.isActive) {
             show();
         } else {
             hide();
         }
-    }, [props.isActive, translateY]);
+    }, [props.isActive, show, hide]);
 
     return (
         <FloatingMessageCounterContainer