issue: fieldArray.fields out of sync with form.watch() after reset

[BrendanC23]

Version Number

7.51.3

Codesandbox/Expo snack

https://stackblitz.com/edit/vitejs-vite-bxk6hl?file=src%2FForm.tsx

Steps to reproduce

I am running into an issue where a form is being reset, causing an array in the form to be empty. However, a field array is not being set to empty immediately.

I have a form schema like the following:

export const schema = z.object({
  names: z.object({ name: z.string() }).array(),
});

The StackBlitz reproduction involves TanStack router, which stores a fillForm parameter in the URL. When this is true, the form's default values are { names: [{ name: 'Test' }] }. When this is false, the default values are { names: [] }.

When a button is clicked, there is a delay (representing a form submission to a server). After, the form is reset, making names empty. The search params are updated, setting fillForm to false. This causes the fieldArray and form.watch() values to get out of sync.

To reproduce this issue with the above StackBlitz:

1. Click on the "Form" tab. This sets the fillForm URL parameter to true, which sets the form's defaultValues to a names array with one item. There is an input filled in with test.
2. Click the button.

This does two things:

• Resets the form, making the names array empty
• Navigates to /form (the current page), setting the fillForm search parameter to false. This causes a re-render, and will change the form's default value from a filled-in array to an empty one.

There is an "Out of sync Count" section of the page which lists the number of renders that were out of sync. This is also logged to the console. Eventually, the values get back in sync.

---

In my real application, there is an id parameter in the URL that (when it is present) fills in the form based on data from a database. Once the user submits the form, the form is fully reset (not pre-filled from the id) and the URL param is cleared. This ensures refreshing the page will not use the previous id.

Instead of names being an array of strings, it is a nested object, which causes an error to be thrown because you cannot access properties of undefined.

Expected behaviour

The field array should reset at the same time that the form resets. These values should not get out of sync.

What browsers are you seeing the problem on?

Chrome

Relevant log output

Field Array Length: 0, Watch Length: 1

Code of Conduct

• I agree to follow this project's Code of Conduct

[bluebill1049]

provide an isolated codesandbox to the issue plz