Bad performance with 100+ rows in an array field about form

[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