search

final-form / react-final-form-arrays

A component for rendering and editing arrays 🏁 React Final Form
MIT License
205 stars 70 forks source link

FieldArray in FieldArray is super slow in large forms #119

Open vinczemarton opened 5 years ago

vinczemarton commented 5 years ago

Are you submitting a bug report or a feature request?

Bug Report

What is the current behavior?

I'm using the form to create a large form (the size is mimics a real-life example form), that has a list of groups and elements in groups (Companies and Customers in each company).

Form significantly slows down with a large amount of elements.

  1. The initial render is very slow (shows up fast, but is unresponsive for some time)
  2. Typing is very slow
  3. Removing elements (Customers) are slow
  4. Removing outer elements (Companies) are over 10 seconds

What is the expected behavior?

  1. The initial render should be much faster

  2. Having a way to optimize the form so typing in fields is much faster (using DebounceInput is a possible hack)

Typing should not affect other fields (validateFields={[]}), therefore be fast.

3./4. Having a way to making this significantly faster.

Removing a group should not even affect other groups, but since index is part of the key, every index shifts. Maybe I should skip using arrays and use opjects like:

{ 
  companies: { comp_123: { ... }, comp_234: { ... } },
  companyOrder: [ "comp_123", "comp_234" ]
 }

Where 123 and 234 are generated keys that should not change between renders.

But this would require me to rewrite most array manipulations that is provided by final-form-arrays.

Sandbox Link

https://codesandbox.io/s/react-final-form-nested-arrays-validation-0bg0n

Original experiment contained a 20 Companies and 20 Customers in each but was reduced as it was starting to freeze and crash the browser.

What's your environment?

Chrome latest, newest available final-form packages in codesandbox.

Other information

Please help me optimize this simple example as much as possible, it would be a very good experiment in finding bottlenecks and best practices regarding final-form.

I'm also experimenting with collapsing certain sections of the form but that has other issues that I'm going to explain in an other ticket.

ElliottRoche commented 3 years ago

For what it's worth, setting the subscription prop on FieldArray to an empty object helped me tremendously with this.

<FieldArray name="items" subscription={{}}>

This stackoverflow issue was what clued me in to this even being an option: https://stackoverflow.com/questions/53573160/performance-trouble-with-fieldarray-in-react-final-form

cristian-sima commented 9 months ago

Any idea on this?