Race condition between useFieldArray and reset, useFieldArray continues to use initial defaultValues after reset

Describe the bug

My team has a collection of forms which utilise all the same data loading and submission APIs, but have slightly different form content and data transformation needs. To keep our code DRY we use 2 components to render a form:

1. a top-level “FormContainer” which calls useForm and sets up all the data fetching & submission, plus some other concerns outside the form
2. an inner “FormContent” which handles transformation of the form data and rendering of the fields.

So responsibilities are divided up like this:

• <FormContainer /> handles
  • data fetch
  • useForm (initialised with empty defaultValues)
  • <FormProvider />
  • submission
  • renders Spinner or FormContent based on loading states
• <FormContent />
  • is passed data as a prop
  • transforms data as needed
  • calls useEffect -> reset and useFieldArray
  • renders the fields.

The bug: after structuring the forms this way we found that the line items we show with useFieldArray were not updating from the original default value once the data loaded.

the workaround: it turns out that the order of useEffect->reset and useFieldArray matters when hook-form is used in this way due to how resetFieldArrayFunctionRef is initialised internally. Basically useFieldArray has to be initialised before the useEffect resets the data or else it will continue consuming the original default values.

To Reproduce

This sandbox contains both the bug and a fix (comment/uncomment the relevant lines) https://codesandbox.io/s/react-hook-form-race-condition-bug-ytly7

  // Uncomment this for bug
  useEffect(() => {
    if (data) {
      reset(data);
    }
  }, [data, reset]);

  const { fields, remove } = useFieldArray({
    control,
    name: "names.test"
  });

  // Uncomment this for fix
  // useEffect(() => {
  //   if (data) {
  //     reset(data);
  //   }
  // }, [data, reset]);

Other comments

While finding this bug was definitely developer error on my part, and the fix was fairly straight-forward, it was extremely non-obvious what was wrong, and I had to go through hook-form’s build and add logs before I realised that reset didn’t have a reference to useFieldArray’s reset method at the time of calling reset.

Ideally there would be a way to fix the race condition so that useFieldArray picks up recently reset values when its own effects run, as I can imagine there’s a useEffect internally which is getting queued by React in the order of calling and hook-form was not written with this condition in mind.

Worst case, perhaps a warning in the console or documentation would do, that reset can only be queued after all field arrays have been initialised?