Fix Form useEffect

src/components/CheckboxWithLabel.js

@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react';
+import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import _ from 'underscore';
@@ -89,10 +89,6 @@ const CheckboxWithLabel = (props) => {
         setIsChecked(newState);
     };
 
-    useEffect(() => {
-        setIsChecked(props.isChecked);
-    }, [props.isChecked]);
-
     const LabelComponent = props.LabelComponent;
 
     return (

src/components/Form.js

@@ -1,4 +1,4 @@
-import React, {useState, useEffect, useCallback, useRef} from 'react';
+import React, {useState, useEffect, useCallback, useMemo, useRef} from 'react';
 import lodashGet from 'lodash/get';
 import {Keyboard, ScrollView, StyleSheet} from 'react-native';
 import PropTypes from 'prop-types';
@@ -95,6 +95,7 @@ const Form = (props) => {
     const formContentRef = useRef(null);
     const inputRefs = useRef({});
     const touchedInputs = useRef({});
+    const isFirstRender = useRef(true);
 
     const {validate, translate, onSubmit, children} = props;
 
@@ -146,12 +147,21 @@ const Form = (props) => {
     );
 
     useEffect(() => {
+        // We want to skip Form validation on initial render.
+        // This also avoids a bug where we immediately clear server errors when the loading indicator unmounts and Form remounts with server errors.
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            return;
+        }
+
         onValidate(inputValues);
-    }, [onValidate, inputValues]);
 
-    const getErrorMessage = useCallback(() => {
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- we just want to revalidate the form on update if the preferred locale changed on another device so that errors get translated
+    }, [props.preferredLocale]);
+
+    const errorMessage = useMemo(() => {
         const latestErrorMessage = ErrorUtils.getLatestErrorMessage(props.formState);
-        return props.formState.error || (typeof latestErrorMessage === 'string' ? latestErrorMessage : '');
+        return typeof latestErrorMessage === 'string' ? latestErrorMessage : '';
     }, [props.formState]);
 
     /**
@@ -325,9 +335,9 @@ const Form = (props) => {
                 {props.isSubmitButtonVisible && (
                     <FormAlertWithSubmitButton
                         buttonText={props.submitButtonText}
-                        isAlertVisible={_.size(errors) > 0 || Boolean(getErrorMessage()) || !_.isEmpty(props.formState.errorFields)}
+                        isAlertVisible={_.size(errors) > 0 || Boolean(errorMessage) || !_.isEmpty(props.formState.errorFields)}
                         isLoading={props.formState.isLoading}
-                        message={_.isEmpty(props.formState.errorFields) ? getErrorMessage() : null}
+                        message={_.isEmpty(props.formState.errorFields) ? errorMessage : null}
                         onSubmit={submit}
                         footerContent={props.footerContent}
                         onFixTheErrorsLinkPressed={() => {
@@ -363,7 +373,7 @@ const Form = (props) => {
             errors,
             formContentRef,
             formRef,
-            getErrorMessage,
+            errorMessage,
             inputRefs,
             inputValues,
             submit,

src/pages/EnablePayments/TermsStep.js

@@ -63,7 +63,6 @@ function TermsStep(props) {
                 <LongTermsForm />
                 <CheckboxWithLabel
                     style={[styles.mb4, styles.mt4]}
-                    isChecked={hasAcceptedDisclosure}
                     onInputChange={toggleDisclosure}
                     LabelComponent={() => (
                         <Text>
@@ -73,7 +72,6 @@ function TermsStep(props) {
                     )}
                 />
                 <CheckboxWithLabel
-                    isChecked={hasAcceptedPrivacyPolicyAndWalletAgreement}
                     onInputChange={togglePrivacyPolicy}
                     LabelComponent={() => (
                         <Text>