Describe the bug

useFieldArray.fields is empty when navigating back to an edit form that uses useForm in a SPA. On the first visit the fields populate correctly, but on every subsequent visit they do not.

Potential fix:

- applyValuesToFields(getRegisteredFields(), data, false);
+ reset(data, { keepDirtyValues: true });

Here: https://github.com/refinedev/refine/blob/main/packages/react-hook-form/src/useForm/index.ts#L271

Steps To Reproduce

Minimal reproducible example on codesandbox here: https://codesandbox.io/p/sandbox/t6pxft.

1. Go to the edit page -> useFieldArray.fields is populated properly
2. Go back to the list page
3. Go back to the edit page -> no fields returned by useFieldArray
4. Repeat steps 2 and 3 notice how it is consistently reproducible.
5. Perform a full page refresh -> form works again (one time)

Expected behavior

fields should reflect the array returned by getOne

Packages

• @refinedev/core: 5.0.12
• @refinedev/react-hook-form: 5.0.4

Additional Context

The issue seems to be specifically when the useFieldArray is guarded behind the useForm's formLoading value, indicating a possible race condition.

Workaround

Do not guard components containing useFieldArray by formLoading. Prevent guarding at all or guard with query.data, e.g.:

- {formLoading && <ComponentContainingUseFieldArray />}
+ {query?.data && <ComponentContainingUseFieldArray />}

Additional comments

Update 29-04: the same root issue seems to cause an issue when useFieldArray is used with useForm on a MUI Grid. See https://codesandbox.io/p/sandbox/refine-fieldarray-datagrid-2-76m996. The currently open PR appears to fix both (at least in our environment).