Form performance optimisation

Expensify · Sep 21, 2023 · ce80fef · ce80fef
1 parent 106afb7
commit ce80fef
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 31 deletions.
diff --git a/src/hooks/useForm/FormContext.js → src/components/Form/FormContext.js b/src/hooks/useForm/FormContext.js → src/components/Form/FormContext.js
diff --git a/src/hooks/useForm/FormProvider.js → src/components/Form/FormProvider.js b/src/hooks/useForm/FormProvider.js → src/components/Form/FormProvider.js
@@ -1,4 +1,4 @@
-import React, {createRef, useCallback, useRef, useState} from 'react';
+import React, {createRef, useCallback, useMemo, useRef, useState} from 'react';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
@@ -8,9 +8,9 @@ import * as FormActions from '../../libs/actions/FormActions';
 import FormContext from './FormContext';
 import FormWrapper from './FormWrapper';
 import compose from '../../libs/compose';
-import {withNetwork} from '../../components/OnyxProvider';
+import {withNetwork} from '../OnyxProvider';
 import stylePropTypes from '../../styles/stylePropTypes';
-import networkPropTypes from '../../components/networkPropTypes';
+import networkPropTypes from '../networkPropTypes';
 
 const propTypes = {
     /** A unique Onyx key identifying the form */
@@ -229,9 +229,10 @@ function FormProvider({validate, shouldValidateOnBlur, shouldValidateOnChange, c
         },
         [errors, formState, inputValues, onValidate, setTouchedInput, shouldValidateOnBlur, shouldValidateOnChange],
     );
+    const value = useMemo(() => ({registerInput}), [registerInput]);
 
     return (
-        <FormContext.Provider value={{registerInput}}>
+        <FormContext.Provider value={value}>
             {/* eslint-disable react/jsx-props-no-spreading */}
             <FormWrapper
                 {...rest}

diff --git a/src/hooks/useForm/FormWrapper.js → src/components/Form/FormWrapper.js b/src/hooks/useForm/FormWrapper.js → src/components/Form/FormWrapper.js
@@ -4,11 +4,11 @@ import _ from 'underscore';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import * as ErrorUtils from '../../libs/ErrorUtils';
-import FormSubmit from '../../components/FormSubmit';
-import FormAlertWithSubmitButton from '../../components/FormAlertWithSubmitButton';
+import FormSubmit from '../FormSubmit';
+import FormAlertWithSubmitButton from '../FormAlertWithSubmitButton';
 import styles from '../../styles/styles';
-import SafeAreaConsumer from '../../components/SafeAreaConsumer';
-import ScrollViewWithContext from '../../components/ScrollViewWithContext';
+import SafeAreaConsumer from '../SafeAreaConsumer';
+import ScrollViewWithContext from '../ScrollViewWithContext';
 
 import stylePropTypes from '../../styles/stylePropTypes';
 

diff --git a/src/hooks/useForm/InputWrapper.js → src/components/Form/InputWrapper.js b/src/hooks/useForm/InputWrapper.js → src/components/Form/InputWrapper.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import FormContext from './FormContext';
 
 const propTypes = {
-    RenderInput: PropTypes.oneOfType([PropTypes.func, PropTypes.elementType]).isRequired,
+    InputComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.elementType]).isRequired,
     inputID: PropTypes.string.isRequired,
     valueType: PropTypes.string,
     forwardedRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({current: PropTypes.instanceOf(React.Component)})]),
@@ -15,10 +15,10 @@ const defaultProps = {
 };
 
 function InputWrapper(props) {
-    const {RenderInput, inputID, forwardedRef, ...rest} = props;
+    const {InputComponent, inputID, forwardedRef, ...rest} = props;
     const {registerInput} = useContext(FormContext);
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <RenderInput {...registerInput(inputID, {ref: forwardedRef, ...rest})} />;
+    return <InputComponent {...registerInput(inputID, {ref: forwardedRef, ...rest})} />;
 }
 
 InputWrapper.propTypes = propTypes;

diff --git a/src/hooks/useForm/index.js b/src/hooks/useForm/index.js
diff --git a/src/pages/settings/Profile/DisplayNamePage.js b/src/pages/settings/Profile/DisplayNamePage.js
@@ -16,7 +16,8 @@ import compose from '../../../libs/compose';
 import * as ErrorUtils from '../../../libs/ErrorUtils';
 import ROUTES from '../../../ROUTES';
 import Navigation from '../../../libs/Navigation/Navigation';
-import useForm from '../../../hooks/useForm';
+import FormProvider from "../../../components/Form/FormProvider";
+import InputWrapper from "../../../components/Form/InputWrapper";
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -64,8 +65,6 @@ function DisplayNamePage(props) {
         return errors;
     };
 
-    const {Form, Input} = useForm();
-
     return (
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
@@ -75,7 +74,7 @@ function DisplayNamePage(props) {
                 title={props.translate('displayNamePage.headerTitle')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_PROFILE)}
             />
-            <Form
+            <FormProvider
                 style={[styles.flexGrow1, styles.ph5]}
                 formID={ONYXKEYS.FORMS.DISPLAY_NAME_FORM}
                 validate={validate}
@@ -87,8 +86,8 @@ function DisplayNamePage(props) {
             >
                 <Text style={[styles.mb6]}>{props.translate('displayNamePage.isShownOnProfile')}</Text>
                 <View style={styles.mb4}>
-                    <Input
-                        RenderInput={TextInput}
+                    <InputWrapper
+                        InputComponent={TextInput}
                         inputID="firstName"
                         name="fname"
                         label={props.translate('common.firstName')}
@@ -100,8 +99,8 @@ function DisplayNamePage(props) {
                     />
                 </View>
                 <View>
-                    <Input
-                        RenderInput={TextInput}
+                    <InputWrapper
+                        InputComponent={TextInput}
                         inputID="lastName"
                         name="lname"
                         label={props.translate('common.lastName')}
@@ -112,7 +111,7 @@ function DisplayNamePage(props) {
                         spellCheck={false}
                     />
                 </View>
-            </Form>
+            </FormProvider>
         </ScreenWrapper>
     );
 }