Field value within a re-indexed parent array item (keyed by UUID) temporarily becomes `undefined` on preceding item removal.

[rishitells]

Describe the bug

In TanStack Form, when managing an array of objects where each object uses a unique React key (e.g., a uuid), a specific re-render issue can occur. If an item is removed from this array, and that item is not the last one, fields within the item that shifts to take the removed item's place can have their form.Field instance report state.value as undefined for a transient period during the re-render.

This behavior is unexpected because fields, especially those initialized with default values or specific types (like strings or other arrays), are generally assumed to consistently provide a value of that type, not undefined.

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-form-7wb235yh?file=src%2Fcollapsible-item.tsx

Steps to reproduce

1. Setup: The example form contains a sections array. Each item in sections is an object with a unique uuid (used as its React key) and a sectionTitle string field (initialized with a default string). An invariant checks if sectionTitle's value is a string.
2. Add Items: Click "Add Section" twice to create two distinct section items in the form.
3. Remove Preceding Item: Click "Remove Section" for the first of the two section items.
4. Observe Error: The application will throw an error, caught by the Error Boundary, for the remaining section item (which was previously the second). The error message will indicate that the sectionTitle field's value was undefined, failing the invariant check: Invariant failed: Expected sectionTitle field value to be a string! Received: undefined. (See attached screenshot).

Expected behavior

The state.value of any field (e.g., sectionTitle) within an array item should consistently maintain its correct type and initialized value throughout all re-render cycles. This includes re-renders that occur after removing a preceding item from the parent array and the subsequent re-indexing of items. A field initialized as a string should not temporarily become undefined.

How often does this bug happen?

Every time

Screenshots or Videos

https://github.com/user-attachments/assets/8fd533a5-2ab6-4d78-a11f-a6db69a1980a

Platform

• Macos, Chrome browser

TanStack Form adapter

react-form

TanStack Form version

1.11.1

TypeScript version

No response

Additional context

No response

[tmarnet]

Hi 🙂

Could it be the same issue reported by @juanvilladev in https://github.com/TanStack/form/issues/1363 / https://github.com/TanStack/form/issues/1439 and possibly fixed by https://github.com/TanStack/form/pull/1440?

I am seeing the same issue on my end as well!

[ckoca]

The issue persists in @tanstack/react-form version 1.23.7.