Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bad performance with 100+ rows in an array field #695

Open
pedro757 opened this issue May 2, 2024 · 5 comments
Open

Bad performance with 100+ rows in an array field #695

pedro757 opened this issue May 2, 2024 · 5 comments

Comments

@pedro757
Copy link

pedro757 commented May 2, 2024

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 pedro757 changed the title Bad performance with more than 100+ rows in an array field Bad performance with 100+ rows in an array field May 2, 2024
@pedro757
Copy link
Author

pedro757 commented May 2, 2024

This happens even without validations and many other stuff

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

@crutchcorn
Copy link
Member

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
Copy link
Author

pedro757 commented May 2, 2024

@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
Copy link
Member

crutchcorn commented May 2, 2024

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
Copy link

I have the same problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants