Extremely low performance with large nested fields.

[IvanKalinin]

Describe the bug

When the form contains large nested arrays, it works extremely slowly.

Here is the link to replicate the issue

Uncomment line 56 // return <p>{barItem.name}</p>; to see the tree renders fast without form.Field wrapper

Your minimal, reproducible example

ttps://codesandbox.io/p/sandbox/cjs7rm

Steps to reproduce

Render a form with large nested fields.

Expected behavior

The fields are expected to be rendered without the unresponsive delay.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• Any OS
• Any browser

TanStack Form adapter

None

TanStack Form version

1.23.6

TypeScript version

No response

Additional context

No response

[LeCarbonator]

• Neither of the internal React fragments in the arrays are keyed
• You have a field in there that is a static "field[index]". I doubt it relates to the performance here, but it seems accidental.
• There are 800 fields, each tracking their validation state, identity and value

Could you elaborate on what your intended use case is? There's likely better ways to go about this than to have one field per element

[IvanKalinin]

The keys is not the main issue here. And like I said earlier, 800 lines render with no issues, when it is just a paragraph, not the <form.Field

The use case is the complex form with nested dnd elements, like a tree view

Previously, it was implemented with Formik, and it did not have any performance problems. But right now, it blocks migrating all of the forms from Formik to Tanstack forms

You have a field in there that is a static "field[index]"

I just implemented a minimal reproduction code. So technically, it should not have any performance issues, especially since they are static elements