Performance trouble with FieldArray in react-final-form

Question

I make an application where I use FieldArray component from react-final-form. I have performance troubles with my components of Array. Each component also contains for about 8 Fields (each of them contain validation rule) (from react-final-form too) and when I add 50+ elements application's lagging (while rendering ALL components into virtual DOM and compare it with current DOM). Anyone had this trouble?

How can I avoid this?

score 2 · Accepted Answer · answered Jan 09 '19 at 19:03

To prevent the entire list from re-rendering you can clear out all subscriptions in the FieldArray component.

 <FieldArray
      name="myList"
      subscription={{}} // This is required so that the whole array does not re-render on any change.
      render={(fieldsProps) => (fieldsProps.fields.map((name, index) =>
            { (...your function here...) })
  />

Performance trouble with FieldArray in react-final-form

1 Answers1