Performance problems due to validations when having much fields

[Benadev]

Are you submitting a bug report or a feature request?

Performance-Issue

What is the current behavior?

Thanks for building and maintaining such an amazing lib. We already ported a bunch of redux-forms to final-form without any issues. Hacky solutions in redux-form are becoming really straight on and simple.

Now we stumbled over a strong performance issue which sometimes crashes the browser. If a form with many fields (eg. 100+) renders first time, the function passed to validate-prop of the Form-Component gets called more than 100 times. The problem seems to be, that preparing data which is passed to the validate-function seems to be quite expensive (see screenshot, getIn). An idea: A few weeks ago I read an issue in react itself which shows that usage of Object.assign seems to be quite expensive. In older browsers where methods like Object.assign gets polyfilled the performace seems to be even worse.

It does not depend on using field-arrays or normal fields. It seems to depend only on the count of fields itself.

What is the expected behavior?

Blazing fast! ;)

Sandbox Link

We made an example where you can reproduce it easily, and see the number of validations.
Take care that a large number of rows will crash your browser :-).
You can control the test-app by setting the following two values:
let noSideEffects = false; // if true no extra logic, only prints to console, if false it shows a counter
let rowCount = 40; // count of rows which get passed to initialValues-prop.

Here is the sandbox-link:
https://codesandbox.io/s/nw9zm0yykj

What's your environment?

any browser, most actual versions of all libs

Other information

Furthermore we analyzed it a little bit:
It seems that a function called "getIn" is mainly responsible for the large duration, see attached Screenshot.

[erikras]

This is exactly the sort of optimization limits that 🏁 RFF was designed to address.

I've upped it to 100 customers and actually iterated through them to validate. Check out lines 55 and 79. It helps a lot. Still not speedy in CodeSandbox, but faster outside of CodeSandbox.

Even so, I'd recommend against having 400 inputs on a page. 😄 Hope that helps?

[Benadev]

Thanks for your blazing fast response. As I can see, your recommended changes only optimizes behavior on rerenders. But our problem is the initial-render-time of the first render-process of the complete form with all 100 rows. On initial render the whole validate-procedure is called 400 times, although it needs to be called only once, isn`t it? When I increase rowCount in your CodeSandbox from 50 to 51 it takes nearly 5 seconds to render, from 80 to 81 nearly 10 seconds.

[erikras]

Ahhh.... 💡

Validation is paused during initial render to avoid calling validation so much for every field rendered, but that seems to not be true for array fields, where a Field (FieldArray is more or less the same thing as Field) is rendering other Fields. Let me look into also pausing it during a FieldArray's first render...

[Benadev]

I'm sorry, but I have to say that in my opinion it seems not to depend on FieldArray.

I build a new CodeSandbox without FieldArray:

The delay on initial render is the same as before.
For 81 rows it takes 10 seconds too.

[erikras]

Confirmed. You are correct. I've written a test that proves it. 👍

Let me see what I can do...

Nevermind. Test is actually working as expected. This passes:

    const validate = jest.fn(values => ({}))
    const renderFields = num => {
      const fields = []
      for (let i = 0; i < num; i++) {
        fields.push(<Field name={`foo${i}`} component="input" />)
      }
      return fields
    }
    TestUtils.renderIntoDocument(
      <Form
        onSubmit={onSubmitMock}
        subscription={{ submitting: true }}
        initialValues={{ submitting: true }}
        validate={validate}
        validateOnBlur
        render={() => <form>{renderFields(50)}</form>}
      />
    )

    expect(validate).toHaveBeenCalled()
    // once on form register, and again on field register
    expect(validate).toHaveBeenCalledTimes(2)

[erikras]

FYI, I have a failing test now. Working on it...

[erikras]

Published fix in final-form@4.3.0 and react-final-form@3.4.0.

[Benadev]

Thank you :)

[erikras]

@Benadev Did it fix your issues?

[Benadev]

Yes, it does! Thank you very much!! :) And sorry for the late answer.

[romeovs]

I'm having these issues with final-form@4.6.1, final-form-arrays@1.0.4 and react-final-form@3.4.2. I'm building nested forms based on json schema's and have a lot of fields (100+) in some cases when arrays come into play. How would you solve this? Can we talk on a private channel so I can show you some examples?

I notice that the throughout the rendering of each of the fields, notifySubscriber from final-form.esm.js is taking more and more time (around 1.2ms for the first fields and 20ms for latter fields). This makes me think that adding n fields is somehow not O(n) because each field needs to notify all other fields it's there.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.