Skip to content

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

Open
Woutuuur wants to merge 2 commits into
refinedev:mainfrom
Woutuuur:fix/useform-broken-usefieldarray
Open

fix(react-hook-form): initialize useFieldArray via reset on first data load (fixes #7401)#7402
Woutuuur wants to merge 2 commits into
refinedev:mainfrom
Woutuuur:fix/useform-broken-usefieldarray

Conversation

@Woutuuur

@Woutuuur Woutuuur commented Apr 20, 2026

Copy link
Copy Markdown

Fixes #7401.

PR Checklist

Bugs / Features

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-bot Bot commented Apr 20, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 4cf635b

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] useFieldArray fields empty on second visit when using useForm

1 participant