FieldArray re-renders even if the subscription prop is set, the subscription prop is ignored

[hvician]

Bug report

What is the current behavior?

FieldArray re-renders on any Field event even when the FieldArray subscription={{}} prop is set, seems like the subscription prop is ignored.
This happens when using react-final-form-arrays 3 and react-final-form 6
when I downgrade to react-final-form-arrays 2 and react-final-form 4 everything works as expected

What is the expected behavior?

FieldArray should not re-render on Field change event when the subscription prop is set to {{}}

Sandbox Link

https://codesandbox.io/embed/react-final-form-field-arrays-mblll

What's your environment?

{
    "final-form": "4.16.1",
    "final-form-arrays": "1.1.2",
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "react-final-form": "6.3.0",
    "react-final-form-arrays": "3.1.0",
}

Other information

Use the linked sandbox and see the console log comment that runs in the FieldArray component when the FieldArray re-renders on each key type in any FieldArray input. Than downgrade to react-final-form-arrays 2 and react-final-form 4 and the log will print only when the FieldArray mounts and not on every key press in the input field

[oliverlaz]

Is there any update on this issue? This behavior causes huge performance drop in our application.
Downgrade to an older version of the library isn't an option for us.
Can we help somehow with its resolution?

[hvician]

Is there any update on this issue? This behavior causes huge performance drop in our application.
Downgrade to an older version of the library isn't an option for us.
Can we help somehow with its resolution?

yes you can wrap the FieldArray component with React.memo and compare the props in the comperator like this

const areEqual = (prevProps, nextProps) => {
  return (prevProps.fieldArrayProp === nextProps.fieldArrayProp)
};

const WrappedComponent = React.memo(FieldArrayComponent, areEqual);

<FieldArray
name="faName"
component={WrappedComponent}
/>

[SoonDead]

@erikras When are you planning on releasing a new version for this? This change pretty much mitigates the performance issue I'm struggling with.

Since there is a close deadline when we I'm expected to fix this, my options are:

• waiting for this fix to be released
• copy the package locally temporarily, make the fix there
• do not use final-form-arrays but try to implement functionality without it.

Can you give a ballpark estimation on when you will release this fix on npm? It would really help me to estimate my workload.

[erikras]

Published fix in v3.1.1.

[SoonDead]

Thats even better than an estimation, thanks! 😄