Interesting. It'd be awesome to have a test that demonstrated the problem.

Hi, @erikras. I am doing optimization on the forms in our project, The thinking from final-form is awesome, but I found it is kind of hard to leverage React.memo to do a deeper optimization. i.e. the helper function in fields props of FieldArray is always different in each render time. That leads to another kind of wasting rerender.

For now, a workaround for the FieldArray is used to handle wasting rerender.

const MyComponent = React.memo(
 (props) => {
 return () // sth
 },
 (prevProps, nextProps) => {
 // all props are immutable, except fields and meta. shallowEqual is enough.
 const ret = shallowEqual(
 _omit(prevProps, ['fields', 'meta']),
 _omit(nextProps, ['fields', 'meta'])
 );
 if (!ret) {
 return false;
 }
 // value should be cared
 if (prevProps.fields.value !== nextProps.fields.value) {
 return false;
 }
 // all meta changes should be cared
 return deepEqual(prevProps.meta, nextProps.meta);
 }
)
<FieldArray>{props => <MyComponent {...props} />}</FieldArray>

Do you think immutability can be used inside final-form to target this kind of shallowEqual optimization?
And the helper function such as push, pop, etc. should be always the same, till name or other field props dependencies change.

Here is an example to demonstrate the wasting render

Edit 🏁 React Final Form - Field Arrays

log out meta.error right now. You can see when the error occurs, it comes to undefined, then [Object]

2019年06月04日 at 09 52

@kimochg That sandbox link is not the right one.

correct link (updated at last comment as well)

Edit 🏁 React Final Form - Field Arrays

I found the change causes a bug, which is the error can not be cleared via array item validation,I decide to close this PR now.