React-final-form: Performance problem with Field or FieldArray during registration and unregistration fields

[marrkeri]

Are you submitting a bug report or a feature request?

Bug

What is the current behavior?

Check the sandbox below and click on Initialize button and then on Reset.
Slow registration and unregistration bigger amount of fields(500 rows with 3 columns = 1500 fields).
I have used subscription only to 'value' and 'submitting'.
I haven't provided any validation yet but keep in mind that it will be also included for the subscription.
I have tried also Field instead of FieldArray. In the sandbox, it is included as a comment.

What is the expected behavior?

Better performance.

Sandbox Link

https://codesandbox.io/s/youthful-morning-msnpk
https://msnpk.csb.app/

What's your environment?

"final-form": "^4.18.5",
"final-form-arrays": "^3.0.1",
"react": "16.8.6",
"react-dom": "16.8.6",
"react-scripts": "3.0.1",
"react-final-form": "^6.3.0",
"react-final-form-arrays": "^3.1.1"

Other information

<Form debug={console.log}> During initialization produce lot of records

I really love the final form. I have used redux-form, formik, react hook form and nothing is so powerful than your library. Just this performance makes me crazy. Thank you for help.

[nj314]

This issue is a major blocker for my current project. Is anyone able to suggest a workaround? My project has up to ~200 fields on the page, and the unmounting time is critical.

[ryank109]

It seems to me the notification to listeners happen per field registration and the field registration happens twice in useField hook, once for setting up the initial state, and second time for subscribing to the future changes.

I've tried to to make the registration only happen once and manually initialize the state, which did make a noticeable performance improvements.
https://github.com/ryank109/final-form/commit/0f6b989209cbee4cf7646b98a5d70cbbc39a3f52
https://github.com/ryank109/react-final-form/commit/0871e203a33f54110d46e03211885a721177d7f4

And I think there was an issue regarding removing/hiding parts of the form removes the error/touched/value state of the fields too (couldn't find it), which above will also solve. Above changes never unregister the fields and (i'm hoping) the form will clean them when the form itself is unmounted. So I guess this might have to be an opt-in thing, if you never want to unregister when the field component is unmounted?

[joni3k]

Any updates on this?

[marrkeri]

@erikras Any updates?

[coultonluke]

Also in the example given, when you type into the fields it is noticeably slow. This is a problem that I have also experienced with Formik and redux-form... more than 30 fields and it becomes slow.