TanStack
Extremely low performance with large nested fields.
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
- 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
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