Slow array fields performance on 100+ fields

[kendoka]

Hello everyone,

maybe someone could advice or explain a strange behaviour on large list, noticed on 100+ lines.

Here is CSB link

https://codesandbox.io/s/rough-meadow-t9nb7?file=/src/App.js

if you press add 100 you will see 100 rows appended, then if you start editing last inputs from length, quantity or width, a noticeable delay is visible like few ms, even if a value is selected from dropdown it also shows ms delay before closing dropdown.

Same is pasting 100 lines from spreadsheet, but i commented out for simplicity. Any advice or help is much appreciated.

[Moshyfawn]

You're subscribing to the form state at the root of your form component

const { errors } = useFormState({
  control
});

and passing it down to your input components. Changing a field updates different form states like dirtyFields state, which would cause your whole form to re-render due to that update subscription you made in the parent component.

To optimize your form, I'd advise you to subscribe to your form state down in your components where you actually need it.
For example, for that errors[fieldName] error message, you can create it's own component and call useFormState inside it, so that only your error component is subscribed and re-rendering on form state change. Additionally, you can look into the @hookform/error-message package.

[kendoka]

i added some basic yup validation in my CSB and also noticing same slow behaviour, basically on row field length change i would like to trigger width validation also. I suspect trigger(['arrayfieldnama']) causes whole form to be validated? What would you advice to do in those cases?

[bluebill1049]

Things you can consider to improve perf

1. use native input instead of wrapped with useController, avoid react-select if you can to improve performance, it's an awesome and super powerful component but it does carry a lot of tools and weight with it.
2. do not trigger validation with an array, at the moment, we don't do optimized on an array of the field with the trigger. so it's either single field or entire form level. let react hook form handle the validation, instead of calling it each onChange, all the optimization inside the library is not leveraged. If you want to fire validation on each keystroke with state update, there will be a price to pay for, even with subscription and state update optimsation.
3. consider virtualizing your fields when they grow way too big 1000+

[bluebill1049]

here is a quick example with 1,000 * 4 = 4,000 inputs: https://codesandbox.io/s/fervent-chebyshev-glhk6?file=/src/App.js notice even the formState update is at the root, it doesn't lag much.

[kendoka]

Thank you for ideas, i experimented a bit, and looks like using setError, solves this matter, so maybe instead of onChange triggering fields i could validate on place using combination of useWatch(otherField) in case i need to take into account another field and use setError(fieldNameToTrigger, { type, message }) i know it is not maybe very pretty but at least it performs.

[oslyvtc]

suppose i have a lot of fields (1000+) and use virtualizing. How can i trigger all fields validation? It seems that trigger() works only on rendered fields
https://codesandbox.io/s/react-hook-form-with-react-window-forked-k4hhd7?file=/src/index.js