Weird behaviour of trigger in useEffect

[mic4ael]

CodeSandbox: https://codesandbox.io/s/condescending-grothendieck-pzpqq?file=/src/App.js

So in the above code sandbox there are two useEffects - one with async/await and the other one without it. If I enable the one without async/await I experience an issue in which resetting (then triggering validation) the form with correct values causes the errors to be displayed next to the fields (even though the current values are valid). Only if I use async/await (the second useEffect) can I experience the expected behaviour (no error messages). What is even funnier is that the 7.13.0-next.3 version fixes that but I still can't wrap my head around why async/await makes the issue go away. I would be very grateful if someone could help me understand this.

[JamesWong1999]

I think the problem is due to calling reset and trigger at the same time.

related example:

import React from "react";
import { useForm, useFieldArray, Controller } from "./src";

function App() {
  const {
    register,
    handleSubmit,
    reset,
    formState: { isSubmitSuccessful }
  } = useForm({ defaultValues: { something: "anything" } });

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

  React.useEffect(() => {
    if (formState.isSubmitSuccessful) {
      reset({ something: '' });
    }
  }, [formState, submittedData, reset]);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("something")} />
      <input type="submit" />
    </form>
  );
}

[mic4ael]

So I found which line actually fixes the issue - https://github.com/react-hook-form/react-hook-form/pull/6201/files#diff-5a85c1643c71f45e050ce584d7c0db2bdf2e56f8a7dae86d74fedf01be2d2cabR1088. I am still not really sure why await before reset & trigger prevents the issue from happening. I am sure that for some reason formValues has incorrect value if I don't use await thus the validation errors.

[bluebill1049]

You mean that in that case register will be called before reset, right?

yes

[mic4ael]

trigger should/always executed after useEffect which means all inputs have been registered after the reset

so in a normal case register should be called after trigger or before it?

[bluebill1049]

trigger should always called after inputs mounted (registered)

[mic4ael]

Also, the beta version is probably troublesome as well because it set value before reset (include native reset) action

Why can it be problematic?

[mic4ael]

trigger should always called after inputs mounted (registered)

How can I do that? Can I somehow use useEffect to make sure trigger is triggerred only after register?