I have 3 field that are being watched

const watchAmount = watch('amount')

const watchRate = watch('rate')

const watchTotal = watch('total')

Also, for each pair of watched field I have one useEffect

useEffect(() => {
  const [rawAmount, rawRate] = getValues(['amount', 'rate'])

  // ...

  setValue('total', total, { shouldTouch: false })
}, [watchAmount, watchRate])

useEffect(() => {
  const [rawRate, rawTotal] = getValues(['rate', 'total'])

  // ...

  setValue('amount', amount, { shouldTouch: false })
}, [watchRate, watchTotal])

useEffect(() => {
  const [rawAmount, rawTotal] = getValues(['amount', 'total'])

  // ...

  setValue('rate', rate, { shouldTouch: false })
}, [watchAmount, watchTotal])

When the user fill the first field (anyone of them), everithing is ok, the problem is: After one field populated, when the user is going to fill the second, because the cyclic dependency of the others watched variables, the events are dispatched and called so many times, because is like the user filling the form

Even with shouldTouch set to false the behavior happens.

Is there some way to fill the values of the fields without triggering the event?