How do I set up defaultValues with async?

[Zcehtro]

I'm using RHF in React Native Expo. Currently, there's a screen where I want to load initial values using RHF's defaultValues, and then check if these values were modified with isDirty (haven't gotten that far because I'm still having trouble implemented defaultValues wiht async). However, until now I've been using a workaround by using useEffect and setValue() after getting data from the backend.

I'd like to use RHF's features as much as possible. I imagine that if defaultValues was loaded correctly, I wouldn't have to rely on useEffect and thus not have to wrap onGetPhones in a useCallback... but I can't get it to work.

How should I set up defaultValues properly?

This is my code so far:

type TFormPhoneData = {
  phone1: string;
  phone2: string;
};

export const ProfilePhones = () => {
  const [isLoaded, setIsLoaded] = useState(false);
  const authContext = useContext(AuthContext);
  const username = authContext?.authState.username!;
  const [initialFormData, setInitialFormData] = useState<TFormPhoneData>({
    phone1: '1',
    phone2: '0',
  });

  const { control, handleSubmit, getValues, watch, reset } = useForm({
    defaultValues: async () => onGetPhones(),
  });

  const onGetPhones = useCallback(async () => {
    console.log('onGetPhones');
    console.log('initialFormData', isLoaded, initialFormData);
    if (!username) {
      return;
    }

    const { data, request } = await getPhones(username);
    if (request.status !== 200) {
      verifyResponseCode(request.status, data.message);
    } else {
      const { phone1, phone2 } = data;
      setInitialFormData({ phone1, phone2 });
      setIsLoaded(true);
      Log(false, 'info', 'getPhones', 'data', data);
    }
    return { phone1: data.phone1, phone2: data.phone2 };

  }, [username, isLoaded, initialFormData]);

  const onSubmit: SubmitHandler<TFormPhoneData> = async (formData) => {
    try {
      const { data, request } = await patchPhones(formData, username);
      Log(false, 'Phones', 'onSubmit', 'data', data);

      if (request.status === 200) {
        Alert(ALERT_TITLE_SUCCESS, texts.submitSuccess);
      } else {
        Alert(ALERT_TITLE_ERROR, request.data.message);
      }
    } catch (error) {
      Log(true, '[ERROR] patchPhones', 'error: ', error);
    }

    onGetPhones();
  };

  const onError = (error: any) => {
    alertFormErrors(error);
  };

  useEffect(() => {
    if (isLoaded) {
      return;
    }

    onGetPhones();
  }, [isLoaded, onGetPhones]);

  return (
    <ErrorHandler
      onReset={() => {
        reset();
        setIsLoaded(false);
      }}
    >
      <GeneralLayout fullView>
        {isLoaded && (
          <View style={styles.mainContainer}>
            <CustomInput
              formHandlers={{ handleSubmit, onSubmit, onError, control, watch }}
              phoneTitle={getValues('phone1' as never)}
              labels={[texts.phoneTexts[0][0], texts.phoneTexts[0][1]]}
              message={texts.phoneTexts[0][2]}
              phoneKey={'phone1'}
            />
            <CustomInput
              formHandlers={{ handleSubmit, onSubmit, onError, control, watch }}
              phoneTitle={getValues('phone2' as never)}
              labels={[texts.phoneTexts[1][0], texts.phoneTexts[1][1]]}
              message={texts.phoneTexts[1][2]}
              phoneKey={'phone2'}
            />
          </View>
        )}
      </GeneralLayout>
    </ErrorHandler>
  );
};

type CustomInputProps = {
  formHandlers: {
    handleSubmit: any;
    onSubmit: any;
    onError: any;
    control: any;
    watch: any;
  };
  phoneTitle: string;
  labels: string[];
  message: string;
  phoneKey: string;
};

const CustomInput = ({ formHandlers, phoneTitle, labels, message, phoneKey }: CustomInputProps) => {
  return (
    <View style={styles.phoneEntry}>
      <View style={styles.phoneEntryTitle}>
        {phoneTitle && <Text style={styles.phoneEntryTitleNumber}>{phoneTitle}</Text>}
        {!phoneTitle && (
          <Text style={styles.phoneEntryTitleNumber}>{texts.noNumberSpecifiedTitle}</Text>
        )}
        <Text style={styles.phoneEntryTitleLabel}>
          {'  '}({labels[0]})
        </Text>
      </View>
      <Text style={styles.message}>{message}</Text>
      <View style={styles.inputViewGroup}>
        <Controller
          control={formHandlers.control}
          render={({ field: { onChange, value, onBlur } }) => (
            <ProfileInputRHF
              label={`${labels[1]} ${texts.placeholderNumberPartial}`}
              inputStyle={styles.inputStyle}
              state={[value, onChange]}
              keyboardType="phone-pad"
              onBlur={onBlur}
            />
          )}
          name={phoneKey}
          rules={{
            required: {
              value: true,
              message: `${labels[0]} ${texts.formRulePhoneNumberEmpty}`,
            },
            pattern: { value: PHONE_REGEX, message: TELEPHONE_REGEX_ERROR },
          }}
        />
        <TouchableOpacity
          onPress={formHandlers.handleSubmit(formHandlers.onSubmit, formHandlers.onError)}
        >
          <Text style={styles.button}>Edit</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

And this is the code for the ProfileInputRHF:

export const ProfileInputRHF = ({
  label,
  state,
  inputStyle,
  ...textInputProps
}: TProfileInputPropsRHF) => {
  return (
    <View style={[styles.inputGroup, inputStyle]}>
      {label !== undefined && state[0] !== '' && <Text style={styles.label}>{label}</Text>}
      {label !== undefined && state[0] === '' && <View style={styles.emptyLabel} />}
      <Input
        value={state[0]}
        style={styles.input}
        placeholder={label}
        onChangeText={(nextValue) => state[1](nextValue)}
        {...textInputProps}
      />
    </View>
  );
};

[Moshyfawn]

RHF supports async defaultValues in the its latest version. Take a look at this docs section

[Zcehtro]

That's not exactly helpful... besides, I'm already using it and not having any success.

 const { control, handleSubmit, getValues, watch, reset } = useForm({
    defaultValues: async () => onGetPhones(),
  });

[Moshyfawn]

You gotta provide more info / repo with what's "not working" in order for me give you anything helpful 😉 You can't expect to dump your project on here for use to run & debug it