From 1ea1f7a0863ddd3efed8d69abb979f462f82d500 Mon Sep 17 00:00:00 2001
From: David Bondy <dbondy@expensify.com>
Date: Fri, 14 Apr 2023 16:50:50 -0600
Subject: [PATCH 01/16] import hook methods and create new state/ref variables

---
 .../Profile/Contacts/NewContactMethodPage.js  | 22 +++++--------------
 1 file changed, 5 insertions(+), 17 deletions(-)

diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
index 70e0860feb95..e32380f08015 100644
--- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
+++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {useCallback, useRef, useState} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import {ScrollView} from 'react-native-gesture-handler';
@@ -52,22 +52,10 @@ const defaultProps = {
     loginList: {},
 };
 
-class NewContactMethodPage extends Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            login: '',
-            password: '',
-        };
-        this.onLoginChange = this.onLoginChange.bind(this);
-        this.validateForm = this.validateForm.bind(this);
-        this.submitForm = this.submitForm.bind(this);
-    }
-
-    onLoginChange(login) {
-        this.setState({login});
-    }
+function NewContactMethodPage(props) {
+    const [login, setLogin] = useState('');
+    const [password, setPassword] = useState('');
+    const loginInputRef = useRef(null);
 
     /**
     * Determine whether the form is valid

From 2cd76d101abbd2ab191c198d5d6f1dba72d3dc9a Mon Sep 17 00:00:00 2001
From: David Bondy <dbondy@expensify.com>
Date: Fri, 14 Apr 2023 16:52:13 -0600
Subject: [PATCH 02/16] port methods to new format

---
 .../Profile/Contacts/NewContactMethodPage.js    | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
index e32380f08015..dd3d6e377801 100644
--- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
+++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
@@ -62,22 +62,21 @@ function NewContactMethodPage(props) {
     *
     * @returns {Boolean}
     */
-    validateForm() {
-        const login = this.state.login.trim();
-        const phoneLogin = LoginUtils.getPhoneNumberWithoutSpecialChars(login);
+    const validateForm = useCallback(() => {
+        const phoneLogin = LoginUtils.getPhoneNumberWithoutSpecialChars(login.trim());
 
-        return (Permissions.canUsePasswordlessLogins(this.props.betas) || this.state.password)
+        return (Permissions.canUsePasswordlessLogins(props.betas) || this.state.password)
             && (Str.isValidEmail(login) || Str.isValidPhone(phoneLogin));
-    }
+    }, [login, password, props.betas]);
 
-    submitForm() {
+    const submitForm = useCallback(() => {
         // If this login already exists, just go back.
-        if (lodashGet(this.props.loginList, this.state.login)) {
+        if (lodashGet(props.loginList, login)) {
             Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS);
             return;
         }
-        User.addNewContactMethodAndNavigate(this.state.login, this.state.password);
-    }
+        User.addNewContactMethodAndNavigate(login, password);
+    }, [login, props.loginList, password]);
 
     render() {
         return (

From a7768f0b478f3215727da871f34068c410a394c8 Mon Sep 17 00:00:00 2001
From: David Bondy <dbondy@expensify.com>
Date: Fri, 14 Apr 2023 16:52:50 -0600
Subject: [PATCH 03/16] update remaining component body to work with functional
 component

---
 .../Profile/Contacts/NewContactMethodPage.js  | 104 +++++++++---------
 1 file changed, 51 insertions(+), 53 deletions(-)

diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
index dd3d6e377801..582ff07cbbb8 100644
--- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
+++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
@@ -78,60 +78,58 @@ function NewContactMethodPage(props) {
         User.addNewContactMethodAndNavigate(login, password);
     }, [login, props.loginList, password]);
 
-    render() {
-        return (
-            <ScreenWrapper
-                onTransitionEnd={() => {
-                    if (!this.loginInputRef) {
-                        return;
-                    }
-                    this.loginInputRef.focus();
-                }}
-            >
-                <HeaderWithCloseButton
-                    title={this.props.translate('contacts.newContactMethod')}
-                    shouldShowBackButton
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS)}
-                    onCloseButtonPress={() => Navigation.dismissModal(true)}
-                />
-                <ScrollView>
-                    <Text style={[styles.ph5, styles.mb5]}>
-                        {this.props.translate('common.pleaseEnterEmailOrPhoneNumber')}
-                    </Text>
-                    <View style={[styles.ph5, styles.mb6]}>
-                        <TextInput
-                            label={`${this.props.translate('common.email')}/${this.props.translate('common.phoneNumber')}`}
-                            ref={el => this.loginInputRef = el}
-                            value={this.state.login}
-                            onChangeText={this.onLoginChange}
-                            autoCapitalize="none"
-                            returnKeyType={Permissions.canUsePasswordlessLogins(this.props.betas) ? 'done' : 'next'}
-                        />
-                    </View>
-                    {!Permissions.canUsePasswordlessLogins(this.props.betas)
-                        && (
-                            <View style={[styles.ph5, styles.mb6]}>
-                                <TextInput
-                                    label={this.props.translate('common.password')}
-                                    value={this.state.password}
-                                    onChangeText={password => this.setState({password})}
-                                    returnKeyType="done"
-                                />
-                            </View>
-                        )}
-                </ScrollView>
-                <FixedFooter style={[styles.flexGrow0]}>
-                    <Button
-                        success
-                        isDisabled={!this.validateForm()}
-                        text={this.props.translate('common.add')}
-                        onPress={this.submitForm}
-                        pressOnEnter
+    return (
+        <ScreenWrapper
+            onTransitionEnd={() => {
+                if (!loginInputRef.current) {
+                    return;
+                }
+                loginInputRef.current.focus();
+            }}
+        >
+            <HeaderWithCloseButton
+                title={props.translate('contacts.newContactMethod')}
+                shouldShowBackButton
+                onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_CONTACT_METHODS)}
+                onCloseButtonPress={() => Navigation.dismissModal(true)}
+            />
+            <ScrollView>
+                <Text style={[styles.ph5, styles.mb5]}>
+                    {props.translate('common.pleaseEnterEmailOrPhoneNumber')}
+                </Text>
+                <View style={[styles.ph5, styles.mb6]}>
+                    <TextInput
+                        label={`${props.translate('common.email')}/${props.translate('common.phoneNumber')}`}
+                        ref={loginInputRef}
+                        value={login}
+                        onChangeText={value => setLogin(value)}
+                        autoCapitalize="none"
+                        returnKeyType={Permissions.canUsePasswordlessLogins(props.betas) ? 'done' : 'next'}
                     />
-                </FixedFooter>
-            </ScreenWrapper>
-        );
-    }
+                </View>
+                {!Permissions.canUsePasswordlessLogins(props.betas)
+                    && (
+                        <View style={[styles.ph5, styles.mb6]}>
+                            <TextInput
+                                label={props.translate('common.password')}
+                                value={password}
+                                onChangeText={password => setPassword(password)}
+                                returnKeyType="done"
+                            />
+                        </View>
+                    )}
+            </ScrollView>
+            <FixedFooter style={[styles.flexGrow0]}>
+                <Button
+                    success
+                    isDisabled={!validateForm()}
+                    text={props.translate('common.add')}
+                    onPress={submitForm}
+                    pressOnEnter
+                />
+            </FixedFooter>
+        </ScreenWrapper>
+    );
 }
 
 NewContactMethodPage.propTypes = propTypes;

From 64c0f0ff9d3d411bacf9fa808f4ba59bb604c33f Mon Sep 17 00:00:00 2001
From: David Bondy <dbondy@expensify.com>
Date: Fri, 14 Apr 2023 16:53:21 -0600
Subject: [PATCH 04/16] i think fix error related to ref being an object not a
 function

---
 src/components/TextInput/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
index 4cbed48ce314..9d632030ab42 100644
--- a/src/components/TextInput/index.js
+++ b/src/components/TextInput/index.js
@@ -51,5 +51,5 @@ TextInput.defaultProps = baseTextInputPropTypes.defaultProps;
 
 export default React.forwardRef((props, ref) => (
     /* eslint-disable-next-line react/jsx-props-no-spreading */
-    <TextInput {...props} innerRef={ref} />
+    <TextInput {...props} ref={ref} />
 ));

From b55028de79ff2f90e76c196bc982b7cce09b5e07 Mon Sep 17 00:00:00 2001
From: David Bondy <dbondy@expensify.com>
Date: Fri, 14 Apr 2023 17:07:58 -0600
Subject: [PATCH 05/16] undo because it breaks everything

---
 src/components/TextInput/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TextInput/index.js b/src/components/TextInput/index.js
index 9d632030ab42..4cbed48ce314 100644
--- a/src/components/TextInput/index.js
+++ b/src/components/TextInput/index.js
@@ -51,5 +51,5 @@ TextInput.defaultProps = baseTextInputPropTypes.defaultProps;
 
 export default React.forwardRef((props, ref) => (
     /* eslint-disable-next-line react/jsx-props-no-spreading */
-    <TextInput {...props} ref={ref} />
+    <TextInput {...props} innerRef={ref} />
 ));

From c79c808b225eadf40e1ab69006f2a82de802918a Mon Sep 17 00:00:00 2001
From: David Bondy <bondydaa@gmail.com>
Date: Mon, 17 Apr 2023 09:23:19 -0600
Subject: [PATCH 06/16] remove "this" left over from class implementation

Co-authored-by: Eugene Voloshchak <copyreading@gmail.com>
---
 src/pages/settings/Profile/Contacts/NewContactMethodPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
index 582ff07cbbb8..fedbd6ecdbf1 100644
--- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
+++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
@@ -65,7 +65,7 @@ function NewContactMethodPage(props) {
     const validateForm = useCallback(() => {
         const phoneLogin = LoginUtils.getPhoneNumberWithoutSpecialChars(login.trim());
 
-        return (Permissions.canUsePasswordlessLogins(props.betas) || this.state.password)
+        return (Permissions.canUsePasswordlessLogins(props.betas) || password)
             && (Str.isValidEmail(login) || Str.isValidPhone(phoneLogin));
     }, [login, password, props.betas]);
 

From da65870afe1cf84273b04e18e2680682a1a8556d Mon Sep 17 00:00:00 2001
From: David Bondy <bondydaa@gmail.com>
Date: Mon, 17 Apr 2023 09:32:48 -0600
Subject: [PATCH 07/16] use different name b/c password is already defined

Co-authored-by: Eugene Voloshchak <copyreading@gmail.com>
---
 src/pages/settings/Profile/Contacts/NewContactMethodPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
index fedbd6ecdbf1..971c78a834c0 100644
--- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
+++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
@@ -113,7 +113,7 @@ function NewContactMethodPage(props) {
                             <TextInput
                                 label={props.translate('common.password')}
                                 value={password}
-                                onChangeText={password => setPassword(password)}
+                                onChangeText={value => setPassword(value)}
                                 returnKeyType="done"
                             />
                         </View>

From 615c4414ae042ffba27fbe75445254082e05c4bb Mon Sep 17 00:00:00 2001
From: David Bondy <dbondy@expensify.com>
Date: Mon, 17 Apr 2023 16:12:35 -0600
Subject: [PATCH 08/16] no need for arrow functions can just call the state set
 methods directly

---
 src/pages/settings/Profile/Contacts/NewContactMethodPage.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
index 971c78a834c0..6f8301242304 100644
--- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
+++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
@@ -102,7 +102,7 @@ function NewContactMethodPage(props) {
                         label={`${props.translate('common.email')}/${props.translate('common.phoneNumber')}`}
                         ref={loginInputRef}
                         value={login}
-                        onChangeText={value => setLogin(value)}
+                        onChangeText={setLogin}
                         autoCapitalize="none"
                         returnKeyType={Permissions.canUsePasswordlessLogins(props.betas) ? 'done' : 'next'}
                     />
@@ -113,7 +113,7 @@ function NewContactMethodPage(props) {
                             <TextInput
                                 label={props.translate('common.password')}
                                 value={password}
-                                onChangeText={value => setPassword(value)}
+                                onChangeText={setPassword}
                                 returnKeyType="done"
                             />
                         </View>

From ce4ba2044bca9ee2cd368c35a2102f6b2826f609 Mon Sep 17 00:00:00 2001
From: David Bondy <dbondy@expensify.com>
Date: Mon, 17 Apr 2023 16:27:56 -0600
Subject: [PATCH 09/16] convert from method to boolean value and add useMemo to
 prevent performance hits

---
 .../settings/Profile/Contacts/NewContactMethodPage.js | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
index 6f8301242304..33a7bae6f403 100644
--- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
+++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
@@ -1,4 +1,4 @@
-import React, {useCallback, useRef, useState} from 'react';
+import React, {useCallback, useMemo, useRef, useState} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import {ScrollView} from 'react-native-gesture-handler';
@@ -57,12 +57,7 @@ function NewContactMethodPage(props) {
     const [password, setPassword] = useState('');
     const loginInputRef = useRef(null);
 
-    /**
-    * Determine whether the form is valid
-    *
-    * @returns {Boolean}
-    */
-    const validateForm = useCallback(() => {
+    const isFormValid = useMemo(() => {
         const phoneLogin = LoginUtils.getPhoneNumberWithoutSpecialChars(login.trim());
 
         return (Permissions.canUsePasswordlessLogins(props.betas) || password)
@@ -122,7 +117,7 @@ function NewContactMethodPage(props) {
             <FixedFooter style={[styles.flexGrow0]}>
                 <Button
                     success
-                    isDisabled={!validateForm()}
+                    isDisabled={!isFormValid}
                     text={props.translate('common.add')}
                     onPress={submitForm}
                     pressOnEnter

From 80b2d92eb78fdec87e69c2269670250dbae3ba96 Mon Sep 17 00:00:00 2001
From: David Bondy <dbondy@expensify.com>
Date: Mon, 17 Apr 2023 16:28:24 -0600
Subject: [PATCH 10/16] support both hook style refs and class style hooks

---
 src/components/TextInput/baseTextInputPropTypes.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/TextInput/baseTextInputPropTypes.js b/src/components/TextInput/baseTextInputPropTypes.js
index dfb90b61af98..367f1df1a627 100644
--- a/src/components/TextInput/baseTextInputPropTypes.js
+++ b/src/components/TextInput/baseTextInputPropTypes.js
@@ -47,7 +47,10 @@ const propTypes = {
     hideFocusedState: PropTypes.bool,
 
     /** Forward the inner ref */
-    innerRef: PropTypes.func,
+    innerRef: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.shape({current: PropTypes.instanceOf(Element)}),
+    ]),
 
     /** Maximum characters allowed */
     maxLength: PropTypes.number,

From d0583670612ff2d30db1272d3fe06e4c2cac268b Mon Sep 17 00:00:00 2001
From: David Bondy <bondydaa@gmail.com>
Date: Tue, 18 Apr 2023 09:41:16 -0600
Subject: [PATCH 11/16] use generic object type instead of custom shape

Co-authored-by: Fedi Rajhi <fedirjh@gmail.com>
---
 src/components/TextInput/baseTextInputPropTypes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/TextInput/baseTextInputPropTypes.js b/src/components/TextInput/baseTextInputPropTypes.js
index 367f1df1a627..4e82f0984670 100644
--- a/src/components/TextInput/baseTextInputPropTypes.js
+++ b/src/components/TextInput/baseTextInputPropTypes.js
@@ -49,7 +49,7 @@ const propTypes = {
     /** Forward the inner ref */
     innerRef: PropTypes.oneOfType([
         PropTypes.func,
-        PropTypes.shape({current: PropTypes.instanceOf(Element)}),
+        PropTypes.object,
     ]),
 
     /** Maximum characters allowed */

From 50cb6c6261ad348bf585711d61fbf6eed04bf243 Mon Sep 17 00:00:00 2001
From: David Bondy <bondydaa@gmail.com>
Date: Tue, 18 Apr 2023 09:41:44 -0600
Subject: [PATCH 12/16] fix import style

Co-authored-by: Eugene Voloshchak <copyreading@gmail.com>
---
 src/pages/settings/Profile/Contacts/NewContactMethodPage.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
index 33a7bae6f403..b0e869a4fc7c 100644
--- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
+++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
@@ -1,4 +1,6 @@
-import React, {useCallback, useMemo, useRef, useState} from 'react';
+import React, {
+    useCallback, useMemo, useRef, useState,
+} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import {ScrollView} from 'react-native-gesture-handler';

From 8adab0808def727d8ee81cf936dd31de59abf8ec Mon Sep 17 00:00:00 2001
From: David Bondy <dbondy@expensify.com>
Date: Tue, 25 Apr 2023 11:15:29 -0600
Subject: [PATCH 13/16] create handlers so we can always trim the values before
 adding them to the state

---
 .../Profile/Contacts/NewContactMethodPage.js         | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
index 9fe6dc7dfd97..c721bdbaeda1 100644
--- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
+++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
@@ -59,6 +59,14 @@ function NewContactMethodPage(props) {
     const [password, setPassword] = useState('');
     const loginInputRef = useRef(null);
 
+    const handleLoginChange = useCallback((value) => {
+        setLogin(value.trim());
+    }, [login]);
+
+    const handlePasswordChange = useCallback((value) => {
+        setPassword(value.trim());
+    }, [password]);
+
     const isFormValid = useMemo(() => {
         const phoneLogin = LoginUtils.getPhoneNumberWithoutSpecialChars(login);
 
@@ -99,7 +107,7 @@ function NewContactMethodPage(props) {
                         label={`${props.translate('common.email')}/${props.translate('common.phoneNumber')}`}
                         ref={loginInputRef}
                         value={login}
-                        onChangeText={value => setLogin(value.trim())}
+                        onChangeText={handleLoginChange}
                         autoCapitalize="none"
                         returnKeyType={Permissions.canUsePasswordlessLogins(props.betas) ? 'done' : 'next'}
                     />
@@ -110,7 +118,7 @@ function NewContactMethodPage(props) {
                             <TextInput
                                 label={props.translate('common.password')}
                                 value={password}
-                                onChangeText={setPassword}
+                                onChangeText={handlePasswordChange}
                                 returnKeyType="done"
                             />
                         </View>

From 3380130431788a542136d4a7514a2cf1c2d79a06 Mon Sep 17 00:00:00 2001
From: David Bondy <dbondy@expensify.com>
Date: Tue, 25 Apr 2023 11:23:28 -0600
Subject: [PATCH 14/16] remove unnecessary dependency

---
 src/pages/settings/Profile/Contacts/NewContactMethodPage.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
index c721bdbaeda1..33ccad107ba9 100644
--- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
+++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
@@ -61,11 +61,11 @@ function NewContactMethodPage(props) {
 
     const handleLoginChange = useCallback((value) => {
         setLogin(value.trim());
-    }, [login]);
+    });
 
     const handlePasswordChange = useCallback((value) => {
         setPassword(value.trim());
-    }, [password]);
+    });
 
     const isFormValid = useMemo(() => {
         const phoneLogin = LoginUtils.getPhoneNumberWithoutSpecialChars(login);

From a0613471e4256f77963a6008a5bfc7b2cd719bf4 Mon Sep 17 00:00:00 2001
From: David Bondy <dbondy@expensify.com>
Date: Tue, 25 Apr 2023 11:42:36 -0600
Subject: [PATCH 15/16] cant use useCallback since we dont have a dependency to
 pass it

---
 .../settings/Profile/Contacts/NewContactMethodPage.js    | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
index 33ccad107ba9..d18fe52908ed 100644
--- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
+++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
@@ -59,13 +59,8 @@ function NewContactMethodPage(props) {
     const [password, setPassword] = useState('');
     const loginInputRef = useRef(null);
 
-    const handleLoginChange = useCallback((value) => {
-        setLogin(value.trim());
-    });
-
-    const handlePasswordChange = useCallback((value) => {
-        setPassword(value.trim());
-    });
+    const handleLoginChange = value => setLogin(value.trim());
+    const handlePasswordChange = value => setPassword(value.trim());
 
     const isFormValid = useMemo(() => {
         const phoneLogin = LoginUtils.getPhoneNumberWithoutSpecialChars(login);

From 91e49c96b6947fe85afd44ae665845f3ac356685 Mon Sep 17 00:00:00 2001
From: David Bondy <dbondy@expensify.com>
Date: Tue, 25 Apr 2023 14:45:14 -0600
Subject: [PATCH 16/16] use useCallback with empty dependency array to avoid
 performance woes

---
 .../settings/Profile/Contacts/NewContactMethodPage.js    | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
index d18fe52908ed..0c59cb17ba4e 100644
--- a/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
+++ b/src/pages/settings/Profile/Contacts/NewContactMethodPage.js
@@ -59,8 +59,13 @@ function NewContactMethodPage(props) {
     const [password, setPassword] = useState('');
     const loginInputRef = useRef(null);
 
-    const handleLoginChange = value => setLogin(value.trim());
-    const handlePasswordChange = value => setPassword(value.trim());
+    const handleLoginChange = useCallback((value) => {
+        setLogin(value.trim());
+    }, []);
+
+    const handlePasswordChange = useCallback((value) => {
+        setPassword(value.trim());
+    }, []);
 
     const isFormValid = useMemo(() => {
         const phoneLogin = LoginUtils.getPhoneNumberWithoutSpecialChars(login);