Why initially isValid = false ?

[twawszczak-wr]

I am creating new from using useForm and during first render I am receiving isValid = false (and isValidating = false), regardless eventual validation rules. Basically, why?

Simple demo:
https://codesandbox.io/s/initially-form-isvalid-false-x3vqjl?file=/src/App.js

[Moshyfawn]

false is the default value for isValid form state. You see it on the first render and after the form has been evaluated, it's set to the correct value (true in your case) on the next render.

From RHF source code:

let _formState = {
  ...
  isValid: false,
  ...
};

[twawszczak-wr]

Yep @Moshyfawn , thanks, but it means that during first render I could render wrong state (if I am rendering something due to flag isValid=false) How can I prevent it? What form "evaluating" means? There is no "isEvaluating" flag actually. ;)

[Moshyfawn]

On first render, there's no way for RHF to know all the values your form inputs contain and how valid they're against your validation rules / schema. There're defaultValues on useForm, defaultValue / defaultChecked on the inputs (field level), set validation rules on register, Controller, etc. RHF needs to evaluate, to look through your form setup that is, and set values, rules and whatever else on the second render.

RHF will trigger a rerender based on the information it got from your form, so you will never get an incorrect isValid state. It's not an async operation, so there's no isEvaluating and isValidating is not set to true. See this example: UI-wise you won't even notice the isValid set from false to true.

[twawszczak-wr]

@Moshyfawn right, but there is a corner case which I am facing and which is a reason of this question. I am using hybrid rendering (with next) and server side gets only initial values, so server side returns isValid = false and a view aligned to this value. Short period of time before successful hydration affects user experience. But I understand that this is out of RHF's scope and isValid = false during init is considered as a correct approach.

BTW what is a case when after the "evaluation" isValid still equals false? As far as I understand evaluation does not trigger values validation, right?

[Moshyfawn]

BTW what is a case when after the "evaluation" isValid still equals false? As far as I understand evaluation does not trigger values validation, right?

RHF validates the default values against the validation rules / schema and sets the correct isValid state accordingly.

See this CSB. isValid will be still false on the second render because the name input field doesn't comply with the set maxLength rule as the register option. But it's not gonna emit any errors at this stage.

[twawszczak-wr]

@Moshyfawn Thank you very much for your explanation. One more question, correct me if I am wrong:

1st render:

• init form - isValid = false isValidating = false
• register inputs etc.

2nd render:

• recalculate form context isValid = true (when values are valid ofc) isValidating = false

right?

Is there any argument against returning isValidating = true in the 1st render? In fact we are waiting for initial validation and it is constant behaviour. (for me at this stage isValid is not true/false but actually not defined yet, but I understand this corner case is not worth costly interface extension)

[victoriomolina]

this sucks

[victoriomolina]

How do you handle this scenario with clean code? Assume defaultValue is valid. Getting isValid as false on first render is a problem here.

  const {
    control,
    handleSubmit,
    formState: { isValid, isDirty, isSubmitting, errors },
  } = useForm<NameFormData>({
    mode,
    defaultValues: { displayName: defaultValue },
  });
  
  const handleValidationChange = useCallback((): void => {
    if (isValid) {
      onValid?.();
    }
  }, [isValid, onValid]);

  useDidUpdate((): void => {
    handleValidationChange();
  }, [handleValidationChange]);