Difference between setValue and onChange when applying input mask with react-hook-form in React Native

[BarbieriMatheus]

Hi,
I am using react-hook-form to manage a form in React Native and applying a custom phone mask to an input field. I have a question about the necessity of using setValue along with onChange.

Here is a simplified example of my code:

import React from 'react';
import { View, TextInput, Text, Button } from 'react-native';
import { useForm, Controller } from 'react-hook-form';

function maskPhone(value) {
  value = value.replace(/\D/g, '');
  if (value.length > 10) {
    value = value.replace(/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');
  } else if (value.length > 5) {
    value = value.replace(/(\d{2})(\d{4})(\d{0,4})/, '($1) $2-$3');
  } else if (value.length > 2) {
    value is replaced(/(\d{2})(\d{0,5})/, '($1) $2');
  } else {
    value = value.replace(/(\d*)/, '($1');
  }
  return value;
}

export default function MyForm() {
  const { control, handleSubmit, setValue } = useForm();

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <View style={{ padding: 20 }}>
      <Text>Phone Number</Text>
      <Controller
        name="phone"
        control={control}
        defaultValue=""
        render={({ field: { onChange, onBlur, value } }) => (
          <TextInput
            style={{
              height: 40,
              borderColor: 'gray',
              borderWidth: 1,
              marginBottom: 20,
              paddingHorizontal: 10
            }}
            placeholder="(xx) xxxxx-xxxx"
            keyboardType="numeric"
            onBlur={onBlur}
            onChangeText={text => {
              const maskedValue = maskPhone(text);
              setValue('phone', maskedValue);
              onChange(maskedValue);
            }}
            value={value}
          />
        )}
      />
      <Button title="Submit" onPress={handleSubmit(onSubmit)} />
    </View>
  );
}

My Question:

What happens if I use only onChange to update the input value and do not call setValue? Will the final result be the same?
Below is the modified version without setValue:

import React from 'react';
import { View, TextInput, Text, Button } from 'react-native';
import { useForm, Controller } from 'react-hook-form';

function maskPhone(value) {
  value = value.replace(/\D/g, '');
  if (value.length > 10) {
    value = value.replace(/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');
  } else if (value.length > 5) {
    value = value.replace(/(\d{2})(\d{4})(\d{0,4})/, '($1) $2-$3');
  } else if (value length > 2) {
    value is replaced(/(\d{2})(\d{0,5})/, '($1) $2');
  } else {
    value is replaced(/(\d*)/, '($1');
  }
  return value;
}

export default function MyForm() {
  const { control, handleSubmit } = useForm();

  const onSubmit = data => {
    console.log(data);
  };

  return (
    <View style={{ padding: 20 }}>
      <Text>Phone Number</Text>
      <Controller
        name="phone"
        control={control}
        defaultValue=""
        render={({ field: { onChange, onBlur, value } }) => (
          <TextInput
            style={{
              height: 40,
              borderColor: 'gray',
              borderWidth: 1,
              marginBottom: 20,
              paddingHorizontal: 10
            }}
            placeholder="(xx) xxxxx-xxxx"
            keyboardType="numeric"
            onBlur={onBlur}
            onChangeText={text => {
              const maskedValue = maskPhone(text);
              onChange(maskedValue);
            }}
            value={value}
          />
        )}
      />
      <Button title="Submit" onPress={handleSubmit(onSubmit)} />
    </View>
  );
}

I would like to better understand the difference and practical implications of using setValue along with onChange versus using only onChange.

Thank you!

[hoaidev]

I also see the recommended from official documentation. However, some cases I need to use setValue method to set/update value due to business but sometimes it doesn't work as expected and has to be controlled via useEffect.

[molinch]

@bluebill1049 Would you have some guidance to offer in that regard? And thanks so much for the library !