Skip to content

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

Open
@rishitells

Description

@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

2025-05-18.22.10.52.mp4

Platform

  • Macos, Chrome browser

TanStack Form adapter

react-form

TanStack Form version

1.11.1

TypeScript version

No response

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions