onValueChange - a cleaner alternative to useEffect

[codelover2k]

In my forms I have a lot of fields, that should change other fields, if they are changed.
For example I have a field called reference number and date.
If my date changes, the reference number with some extra characters should change as well.
There are many other fields that should automatically change depending on other field values.

one way to accomplish that is to use useEffect, that looks like this:

useEffect(() => {
  const date = watch('date');

  if (isDirty) {
    setValue("referenceNumber", `${prefix}-${date}`);
  }
}, [date]);

useEffect(() => {
  const recommendedPrice = watch('recommendedPrice');

  if (isDirty) {
    setValue("salePrice", recommendedPrice);
  }
}, [recommendedPrice]);

I wrote an abstraction that looks like this and reduces the noise:

onValueChange('date', (date) => {
    setValue("referenceNumber", `${prefix}-${date}`);
});

onValueChange('recommendedPrice', (recommendedPrice) => {
    setValue("salePrice", recommendedPrice);
});

Would be great to have such a function that I named onValueChange to make things readable and less noisy

[bluebill1049]

I wouldn't use useEffect for such a task, as the origin of input update is coming from the user's action, so having onChange to update other input values is the preferred option from my point of view.

[codelover2k]

makes sense to me
thanks for response!