If a React Hook Form field array seems to stop updating when a wizard moves to another step, first identify what is stale: the rendered rows, the input values, or the submitted data. Those symptoms have different causes. Check whether the step unmounts the array, how shouldUnregister is configured, whether rows use field.id as their React key, and whether more than one useFieldArray instance controls the same array.
First identify what “not updating” means
Do not use fields, watch, and final submission as interchangeable measures. useFieldArray returns fields for the array’s rendering structure, default-value information, and generated keys; it is not a live replacement for every current input value. Use the form’s value APIs to inspect what the inputs currently hold.
As an Amazon Associate I earn from qualifying purchases.
- A row is missing or stale in the rendered list: inspect the
fieldsreturned by the hook, its instance and name, and the row keys. - A value changes in
watchbut the rendered rows do not: the form value and the array’s rendered structure may be out of sync. Check how the array is managed and the installed release. - A value disappears after changing steps or from submission: investigate whether the step unmounts the input and what unregister behavior applies.
These are diagnostic distinctions, not proof of one universal defect. The exact cause depends on the component structure and React Hook Form version.
Check whether changing steps unmounts the array
A wizard may remove an inactive step’s component from the React tree, or it may merely hide the component while leaving it mounted. That difference matters: an unmounted input can be unregistered depending on configuration, while a still-mounted input does not undergo that unmount lifecycle.
#1 Best Overall
- Inspect the step-switching code and determine whether the component containing
useFieldArrayand its inputs is actually removed from the tree. - Check
shouldUnregisterat theuseFormlevel, onuseFieldArray, and on individual registered inputs. These options apply at different levels; do not assume one setting describes the whole form. - If values must persist across steps, choose and test a configuration that retains them for your form’s mounting pattern. The API describes the field-array option as controlling whether the array is unregistered after unmount. Individual input registration can also remove an input and its default value after unmount.
React Hook Form’s maintainers’ discussion of wizard and multi-component forms provides historical context for value retention choices. Treat it as design discussion, not a substitute for checking the API and behavior of the version you use.
Verify the array name, row key, and registered paths
The official API guidance for useFieldArray says its name is required and dynamic names are unsupported. Keep the name stable for the lifetime of the hook. When rendering rows, use the generated field.id as the React key rather than the array index; React Hook Form documents this as important to avoid field-breaking re-renders.
{fields.map((field, index) => (
<input
key={field.id}
{...register(`items.${index}.label`)}
/>
))}For registered array paths, use dot-and-index notation such as items.0.label. The register documentation discourages bracket syntax for consistency with TypeScript. Confirm that the field path’s array name and index match the array being rendered.
Check how rows are changed
The array methods have lifecycle implications, so match the operation to the intended change.
append,prepend,insert, andupdate: pass complete row objects, not partial objects, as required by the API documentation.update(index, object): the targeted row unmounts and remounts. If that remount is undesirable, the documentation recommends usingsetValueinstead.remove,move, andreplace: ensure the operation is called on the array instance whose returnedfieldsyou render.
Review the full field-array API for the supported methods and their behavior.
Look for multiple hooks managing the same array
If separate components each call useFieldArray with the same control and array name, inspect whether both instances are expected to manage and render the array. A report for React Hook Form 7.54.2 described a specific setup where a second instance’s changes appeared in watch but did not refresh the first instance’s rendered fields. That issue is a version-specific report, not evidence that every current multi-component form has this problem. See the reported reproduction and test your own structure and installed version.
Check the installed version before applying an old workaround
Field-array behavior and notifications have received fixes across releases. The official React Hook Form changelog lists version 7.89.0 dated September 26, 2026. It records a version 7.88.0 fix dated September 12, 2026, for setValues not notifying useFieldArray subscribers, which could leave rendered fields stale.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteCompare your installed version with the changelog entries relevant to your code path, then reproduce the issue on that release before adopting a workaround based on an older report. A stale-value report associated with shouldUnregister: true in a particular older reproduction is also not proof of a current, universal bug; see the issue report.
Quick Recap
Best Value
A practical debugging sequence
- Record the installed React Hook Form version and the exact symptom: stale rows, an input value that differs from
watch, or data missing from submission. - Inspect the wizard’s render logic to confirm whether the step containing the array unmounts or remains mounted.
- Review form-, field-array-, and input-level
shouldUnregistersettings against the intended value-retention behavior. - Confirm the hook has a stable name, each row uses
field.idas its React key, and registered paths use dot-and-index notation. - Check whether more than one hook instance manages the same array, and whether the instance whose
fieldsyou render is the one receiving array operations. - Check whether an operation such as
updateis remounting a row, or whether insertion/update calls are passing incomplete objects. - Compare the version with the official changelog and make a minimal reproduction before treating an issue report as applicable.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
