fix(react-hook-form): initialize useFieldArray via reset on first data load (fixes #7401)

[Woutuuur]

Fixes #7401.

PR Checklist

• The commit message follows our guidelines:
  https://refine.dev/docs/guides-concepts/contributing/#commit-convention

Bugs / Features

• Related issue(s) linked
• Tests for the changes have been added
• Docs have been added / updated
• Changesets have been added https://refine.dev/docs/guides-concepts/contributing/#creating-a-changeset

What is the current behavior?

When using useFieldArray inside a form powered by useForm, the fields array is empty on render even though the API response contains data. This happens consistentlyin cases where the component is retriggered when React Query has cached data.

This seems to mostly affect cases where the useFieldArray render depends on formLoading, e.g.:

const { refineCore: { formLoading } } = useForm(...);
{formLoading && <ComponentContainingUseFieldArray />}

See https://codesandbox.io/p/sandbox/t6pxft for a minimal replication.

What is the new behavior?

useFieldArray.fields correctly reflects the array data from the API response.

Notes for reviewers

useFieldArray must be mounted and initialized before setValue calls can populate it. With cached React Query data, the response is served immediately while also starting a background refetch, so query.data is already set when the component mounts, but formLoading is true (driven by isFetching). The [query.data] effect fires right away, but if useFieldArray is behind a loading guard based on formLoading at that point, the setValue calls from applyValuesToFields are a no-op. When formLoading turns false, query.data is the same object reference and the effect does not re-fire. In the end, useFieldArray mounts but fields stays empty.

The fix calls reset({ ...getValues(), ...data }, { keepDirtyValues: true }) on the first data laod. Unlike setValue, reset sets the form's default values directly, so useFieldArray can initialize from them whenever. Merging with getValues() preserves any fields present in the form but absent from the API response. keepDirtyValues: true preserves values the user has already edited. Subsequent data loads use the existing applyValuesToFields.

[changeset-bot]

🦋 Changeset detected

Latest commit: ddb047b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@refinedev/react-hook-form	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[sgmeligmeyling]

There's still an issue with this PR unfortunately where the form is now reset with all the fields of a record instead of only the registered fields. I've made a fix here: athenagroup@8ce02c4