Sync values between two fields

[chamatt]

I have an use-case in my forms where I want to partially sync one of the fields to another. Our specific case is a combo-field called MoneyInput which stores the currencyCode and the amount. We usually want to have a single field select the currency and then update all the other field to the same one and prevent them from being edited.

The two ways to do this are:
1 - Call setValue for all other field on onChange (good, but depending on how nested your fields are this may not be ergonomic)
2 - useEffect + useWatch and update the values of the other field in the root level of the form.

For the form I'm building I chose the second option, and to avoid bloating the code, I built a custom hook with working type suggestions/autocomplete. Hopefully it's useful for someone.

Usage:

useSyncFormFields({
  form,
  fromKey: "salary",
  toKey: "expenseLimit",
  merge: (fromValue, toValue) => ({ ...toValue, currencyCode: fromValue?.currencyCode }),
})

Implementation:

type UseSyncFormParams<T extends FieldValues, K1 extends keyof T, K2 extends keyof T> = {
  form: UseFormReturn<T>
  fromKey: K1
  toKey: K2
  merge?: (fromValue: T[K1], toValue: T[K2]) => T[K1] | T[K2]
}

export const useSyncFormFields = <T extends FieldValues, K1 extends keyof T, K2 extends keyof T>({
  form,
  fromKey,
  toKey,
  merge = (a, _b) => a,
}: UseSyncFormParams<T, K1, K2>) => {
  const fromValue = useWatch<T>({ control: form.control, name: fromKey as unknown as Path<T> })

  useEffect(() => {
    const toValue = form.getValues(toKey as unknown as Path<T>)

    form.setValue(
      toKey as unknown as Path<T>,
      merge(fromValue as PathValue<T, Path<T>>, toValue as PathValue<T, Path<T>>),
    )
    // merge should not be a dependency, because it is a function that is not supposed to change
    // and if we place it here, we would have to always wrap it in useCallback before passing it to this hook
    // which is not very convenient
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [fromValue, form.setValue, fromKey, toKey])
}

You can also use for fields that have derived calculated value but also allow editing the field to another custom value. For example, you could have a salary field, and a firstMonthProrated field, which would use the fromValue and some math to derive the target value.
e.g.:

useSyncFormFields({
  form,
  fromKey: "salary",
  toKey: "firstMonthProrated",
  merge: (fromValue, toValue) => fromValue.amount * (daysInMonth - startDateDay) / (daysInMonth)
})

[lamhungypl]

I'm wavering between getValues and watch for better performance.

The watch docs said
useWatch's result is optimised for render phase instead of useEffect's deps, to detect value updates you may want to use an external custom hook for value comparison.