How to change other input value properly

[pimmee]

Hello! First of all, thanks for a great package. I really like the API.

I have a few questions.

1. What's the best way to change an other input's value? I've tried doing it in onChange / validate, but don't know if this is correct.
2. How can you invalidate an input field, without showing error message? My use case is that I conditionally display an input, and I want the isValid state to turn false if this input should be displayed, but I don't want to trigger a validation because this displays an error message.
3. Why does 2 renders occur when I enter a letter into the textbox?
4. Why does 4 renders occur when I enter a value into radio buttons?

I have a pretty complex form that I'm working on, and the number of renders with this package is only really decreasing compared to controlled validation when entering long texts into text inputs, so I must be doing something horribly wrong! Some pointers would be really appreciated!

Here's a codesandbox

[keiya01]

Thank you for using react-hook-form.

About 1, 2:

1. I think you don't need to invoke setValue in roles props.(https://codesandbox.io/s/reverent-proskuriakova-5u4sx)
2. I think this issue is resolved by above solution

[bluebill1049]

Even when not usingformState, 2 renders occur when I enter a letter. By reading the docs my impression is that rerenders should only occur when:

1. you are watching a value: first render.
2. you are watching formState, why formState trigger a separate re-render? because validation can be async

[pimmee]

I have removed watch and formState from this example and 2 renders still occur whenever I enter a letter into the text input. Does 2 renders occur simply if an input is required in onChange mode?
This causes 2 renders when I enter a letter:

<input name="name" ref={register({ required: "Error name" })} />

And this causes 0 renders:

<input name="name" ref={register} />

I'm not watching any value or formState in this example and this still occur.

  const { handleSubmit, register, getValues } = useForm({
    mode: "onChange",
    reValidateMode: "onChange",
    defaultValues: {
      name: "",
    }
  });

[pimmee]

Should I create an issue for this? Or is this the expected behavior?

Thank you.

[bluebill1049]

Ok, take a closer look I see the reason, this not a bug. This is due to isValid.

because react hook form is uncontrolled which means we wouldn't know the input value until the render phase, so the first phase we have to assume the form is true, then set isValid to false (if any) and skip the rest of the re-rendering. if we still initial to false, then it will trigger multiple re-render, because then it will need to set to true and then next input false again and etc. hope this make a bit more sense.

[pimmee]

Intuitively I don't understand why it should happen, but I'm sure you know what you're talking about. Unfortunately react-hook-form is not fitting for my use case then. Thanks for the quick responses!