Calculated fields

[Dragomir-Ivanov]

Hi there,
I have a simple form with 3 input fields:

{
    value: "123",
    discountPercent: "16",
    discountValue: "19,68"
}

I want to be able to change discountPercent or discountValue, and the form will update the other field, based on a calculation.
Currently, I am trying:

  useEffect(() => {
   const subscription = watch((values) => {
      const newValues = recalc(values)
      reset(newValues)
   })
    return () => subscription.unsubscribe()
  }, [watch])

But react-hook-form enters a recursion loop. I believe each reset triggers another watch callback execution. I guess checking for stable newValues===values will do the trick.
Is there any plan, to introduce some kind of middleware that can update the form values before the form commits its changes to the DOM.

Thank you!

[ritikbanger]

Why are you recalculating and reseting in useEffect and that without a proper dependency array?

Add subscription, values, recalc, reset in your dependency array and it won't go in infinite loop, the problem is with the implementation and not with RHF.

[Dragomir-Ivanov]

I have made Codesandbox in order to express my issue clearly.
There is one line commented in the third useEffect that will trigger the hole app in an infinte loop.

Thank you

[ritikbanger]

You are using useEffect in incorrect way. Example by @Moshyfawn is perfect -> Codesandbox

[Moshyfawn]

Here's a working example based on your provided CSB.

Check it out and see if it fits your use-case.

Basically, instead of subscribing to the values update, you can setValue on the input's onChange

[Dragomir-Ivanov]

Thanks a ton @Moshyfawn , @ritikbanger ! It works perfectly.
Let me digest what is going on.

[vinothvk]

Another way to avoid the infinite re-rendering is making sure discountPercent field value is not updated when value field changes. This will stop the re rendering

https://codesandbox.io/s/cool-bird-5ski53?file=/src/App.tsx

[d-lach-aliz]

@vinothvk great example, thanks.

as for the other answers, I would argue they miss the point.
The question asked was about using useEffect to update the value in response to changes in the form.
With current implementation it is not possible as the form watch returns different values (array or object) on each render. Because of that the form stucks in the infinite loop each time you update the value in the useEffect which depends on the watched values.
Of course consumer can assure that update is not triggered if value has not really changed, but that's not the point.

For me this is clearly an issue with the react-hook-form implementation. I would expect a watch to return updated values only when they really change.

edit:
after further testing, turns out that updating some fields values in the use effect dependent on watched values is supported and works as expected but only when using useWatch, while watch triggers infinite loop.
Looks even more like a bug/inconsistency to me

[Mouerr]

Hi @vinothvk i have the same issue, could you please take a look to my case?
Thanks

[borispoehland]

Hey guys,

we have a zod schema that we pass to react-hook-form. Inside a refinement, we want to have access to a variable max, which is itself computed from other variables of the schema, but also the surrounding component. I solved it for now by adding _max to the schema, then using useEffect to sync them via form.setValue(„_max“, max). I wonder if there is a more elegant way to provide a value that is computed. Thanks for any advice

[ritikbanger]

Please share a codesandbox or minimal code to reproduce what you are looking for

[borispoehland]

I was wondering if there is a more elegant way to inject the max into the schema than useEffect. While doing the repro I think I discovered a way I like more, namely directly injecting it as hidden input: <input type="hidden" value={max} {...form.register('max')} />

Here is the CodeSandbox. If you have a more elegant or recommended way, feel free to let me know. Thanks!

https://codesandbox.io/p/devbox/m8tpcp?file=%2Fsrc%2FApp.tsx

[ritikbanger]

This looks a valid approach, a more elegant approach could be calculating the max within the schema itself.

import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { useForm, FormProvider } from 'react-hook-form';

const formSchema = z.object({
  number: z.number(),
  otherNumber: z.number(),
}).refine((data) => {
  const max = data.otherNumber * propMultiplier; // Assuming propMultiplier is defined somewhere, (2 as its value in your case)
  return data.number <= max;
}, {
  message: 'Number must not be larger than max',
  path: ['number']
});

export default function App({ propMultiplier = 2 }) {
  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {
      number: 10,
      otherNumber: 1,
    },
  });

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

  const errors = Object.entries(form.formState.errors).map(([key, value]) => {
    return [key, value.message];
  });

  return (
    <FormProvider {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <input {...form.register('number')} />
        <input {...form.register('otherNumber')} />
        <input type="submit" />
        <p style={{ color: errors.length ? 'red' : undefined }}>
          {JSON.stringify(Object.fromEntries(errors))}
        </p>
      </form>
    </FormProvider>
  );
}