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.

[kaboofdotdev]

I'm also experiencing this issue when using the array field. I have hundreds of form.AppField elements on a page (think of a punch card), which unfortunately causes the browser tab to crash.

My current workaround is to avoid using form.AppField for those inputs and instead use a normal HTML input field mixed with the getFieldValue and setFieldValue methods from the form instance.

Before

<form.AppField
    name="..."
    children={(field) => (
        <field.NumberInput />
    )}
/>

After

<input
    type="number"
    value={form.getFieldValue("...")}
    onChange={(e) => form.setFieldValue("...", e.target.value)}
/>

Something about the form.AppField component is causing extreme performance issues.

[tzarger]

I am experiencing this issue too with form.AppField. using normal inputs for sure makes the form useable now. Is this an issue if we use the form.Field as well?

[stefan-huck]

I am experiencing this issue too with form.AppField. using normal inputs for sure makes the form useable now. Is this an issue if we use the form.Field as well?

Yap, it is.

type Person = {
  surname: string
  name: string
  age: number
  email: string
}

Adding 80 persons with field.pushValue:

<form.Field name={`people[${i}].surname`}>
  {subField => ( ... )}

causes getFieldValue to be called exponentially. See Video:

20250823-1734-18.4769898.mp4

In regard to @crutchcorn 's reddit comment there might be some perf improvements in the future

[clayyclayyarend]

What's the likelihood this will be investigated? I just ran into this problem as well

[tzarger]

Is this going to be addressed any time soon? If not, will need to revert back to react-hook-form as I don't have any performance issues there with this form. Thanks! @crutchcorn

[mlivernoche]

I was having performance issues as well. My form has 3 text fields and 67 checkboxes, and a page can have multiples of these. Here's what I did to solve my issues:

• Installed the react compiler (easy for me)
• Used React Scan, this found that the culprit was shadcn's checkbox and label component. I changed those to HTML and this had a huge effect.

On my page, I place these forms in an accordion, and the initial render on my machine went from 600+ ms to 200ms. Renders after the initial (opening and closing the accordion) went from 300+ ms down to 16-32ms.

edit: also, these checkboxes and labels are inside an AppField.