Resetting array fields does not trigger full re-render

[phb-ig]

Describe the bug

When using form.reset({ fieldName: arr }) to set the state of an array mode field to an array with fewer elements than the field's defaultValue, the elements defaultValue[arr.length] through defaultValue[defaultValue.length - 1] will still render.

Example:

• defaultValue = [1, 2, 3]
• form.reset({ fieldName: [4] })
• rendered values: 4, 2, 3.

Notes:

• This only applies if the value of fieldName has not been altered since the initial page load. If you alter the value (e.g. by adding another element) before resetting, the reset value will be properly rendered.
• The actual state of the form is correctly updated by the reset. You can see in my provided code that if you click reset, then submit, the submitted value is as expected (and the form re-renders to show the correct state).

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/36vt5h

Steps to reproduce

In the example sandbox, click the reset button and observe that 3 elements are still rendered instead of one.

Expected behavior

Only the elements present in the value passed to reset should render.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: chrome

TanStack Form adapter

No response

TanStack Form version

1.33.0

TypeScript version

No response

Additional context

No response