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

[busy-mango]

I have the same problem.