Bad performance with 100+ rows in an array field

[pedro757]

Describe the bug

Bad performance with 100+ rows in an array field

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/broken-silence-cwwxtp

Steps to reproduce

1. Click add 200 button
2. Click submit

Expected behavior

I expect it to be faster, and not to see the page unresponsive alert of google chrome

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

TanStack Form adapter

react-form

TanStack Form version

0.19.4

TypeScript version

No response

Additional context

No response

[pedro757]

This happens even without validations and many other stuff

this is a simpler code sandbox
https://codesandbox.io/p/sandbox/xenodochial-cloud-87fvfz

[crutchcorn]

Can you provide us an example of, say, React Hook Form / Formik with the same rough setup so we can compare performance heuristics/comparison?

[pedro757]

@crutchcorn I'm currently using react-hook-form, I managed to make it work with 999+ without virtualization, but with a few caveats:

1. Cannot access the formState: { error }, it slows down everything.
2. Cannot use any kind of validation of the library, No <Controller /> with the rules prop and No form.register(name, { validation: () => string})
3. So I ended up just using form.setValue() and form.getValues() like this <input value={form.getValues("name")} onChange={v => form.setValue("name", v)} />
4. I do all validations when submitting the form manually, form.handleSubmit(data => { // HERE })

It feels slow with 999+, maybe virtualizing will improve that as this comment suggests

I can create a code sandbox this weekend.

[crutchcorn]

Well, to be fair that's not a very apt comparison, then. Controller is the headless comparison to <form.Field>. Moreover, formState: {error} is always the case with TanStack Form. There's no in-between state internally like there is with react-hook-form