fix(react-hook-form): reset form state on query data change to fix useFieldArray on revisit

[devavijha]

Problem

When navigating away from an edit form and returning to it within a SPA, useFieldArray.fields is empty on every visit after the first. The issue is in packages/react-hook-form/src/useForm/index.ts.

The existing approach calls applyValuesToFields(getRegisteredFields(), data, false) which uses setValue on individual field paths and tracks synced paths in syncedFieldsRef. On re-visit:

• syncedFieldsRef accumulates paths across mount/unmount cycles
• Fields registered by useFieldArray are not present in the set when the effect runs again on the second visit
• The guard incorrectly skips them, so useFieldArray.fields stays empty

Minimal reproduction is in the issue: https://codesandbox.io/p/sandbox/t6pxft

Fix

Replace applyValuesToFields(getRegisteredFields(), data, false) with reset(data, { keepDirtyValues: true }).

The reset API from react-hook-form re-initialises the entire form state, including all field arrays, on each new query result. The keepDirtyValues option ensures that any in-progress user edits are not discarded.

Changes:

• Added reset to the destructured result from useHookForm
• Replaced applyValuesToFields call inside applyQueryValues with reset(data, { keepDirtyValues: true })

Closes #7401

[changeset-bot]

🦋 Changeset detected

Latest commit: 8415faa

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

[AkprasadoP]

Hi @devavijha, thanks for digging into the syncedFieldsRef accumulation issue — that's a solid diagnosis of why applyValuesToFields misses array fields on re-visit.

I tried to verify the fix against a specific variant of the bug mentioned in the issue: when the component containing useFieldArray is guarded behind formLoading, e.g.

{!formLoading && <ComponentContainingUseFieldArray />}

In that case, on a second visit query.data is already cached, so reset(data, { keepDirtyValues: true }) fires immediately on mount — but a background refetch briefly flips formLoading back to true, unmounting the field-array component. By the time formLoading goes back to false and the array remounts, reset() has already run. Since RHF's reset() only populates field-array entries that are registered at call time, the array stays empty even with this fix applied.

I built a minimal repro with this guard pattern, confirmed the bug on unpatched main (field count 1 → 0 across two visits), then applied this PR's diff (verified the patched code was actually running via a marker log) and reran — same result, 1 → 0.

Not sure if this guarded case is in scope for this PR or a separate follow-up, but wanted to flag it in case it changes the approach — e.g. needing to re-trigger reset (or similar) when the array re-registers after being unmounted, rather than relying on a single reset call tied to the query-data effect. Happy to share the repro if helpful.