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-dog]

I have the same problem.

[karur4n]

I had this problem too

[MinnDevelopment]

I ran into the same issue and ended up migrating to a map with an order array like this:

{
  order: [UUID_1, UUID_2, ...],
  elements: {
   UUID_1: { ... },
   UUID_2: { ... },
   ...
  }
}

With this, I was able to avoid using an index that changes for almost every field when I insert a new value in the middle.

I can insert values by using the setFieldValue update function:

  function addCopy() {
    const copy = { ...item, id: uuidv4() };
    form.setFieldValue("items", (current) => ({
      order: current.order.toSpliced(index + 1, 0, copy.id),
      elements: {
        ...current.elements,
        [copy.id]: copy,
      },
    }));
  }

The item form fields are then simply <form.AppField name={`items.elements.${id}.text`}> ..., which no longer has a changing index. This, in combination with memoized components, massively improved performance for my arrays.