final-form / final-form/react-final-form

Performance issues with large forms

Open
#336 25 comments 22 reactions 0 assignees View on GitHub
bug
Dominant language
JavaScript
Stars
7.4k
Forks
497
PR merge metrics
No merged PRs in 30d

Description

### Are you submitting a **bug report** or a **feature request**?
Bug report

### What is the current behavior?

Forms with large amount of fields (>100, as is often the case with arrays and nested subforms) take a long time to render.

The slowdown is most notable on initial render, where the form can take up to 10s of seconds to render initially. Renders after that are usually fast enough, but not super-fast, causing some input delay.

If I run the Chrome devtools, I can see that the initial render slowdown is caused by `notifySubscriber` taking more and more time as more fields are being registered, making me think that `notifySubscriber` is not `O(1)` but `O(fields already registered)`.

I'm building forms recursively from a JSON schema, maybe `react-final-form` is not the right tool for the job since all fields are know in advance, so I don't need the `notifySubscriber` at all?

### What is the expected behavior?
Speedy Gonzales!

### Sandbox Link

I'll try and put together an example soon!

### What's your environment?

```
final-form 4.6.1
final-form-arrays 1.0.4
react 16.3.2
react-final-form 3.4.2
react-final-form-arrays 1.0.4
```
### Other information

See also #230.

Here's a profile I've made with Google Chrome, you should be able to load that as well.
[profile.json.txt](https://github.com/final-form/react-final-form/files/2404890/profile.json.txt)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.