Fixed FieldArray re-render on every change when subscription is empty object (#100)

Author: jdimovska

src/FieldArray.test.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { render, fireEvent, cleanup } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 import arrayMutators from 'final-form-arrays'
-import { ErrorBoundary, Toggle } from './testUtils'
+import { ErrorBoundary, Toggle, wrapWith } from './testUtils'
 import { Form, Field } from 'react-final-form'
 import { FieldArray, version } from '.'
 
@@ -129,7 +129,7 @@ describe('FieldArray', () => {
     const renderArray = jest.fn(() => <div />)
     class Container extends React.Component {
       state = { name: 'dogs' }
-      
+
       render() {
         return (
           <form>
@@ -149,10 +149,10 @@ describe('FieldArray', () => {
     expect(renderArray).toHaveBeenCalled()
     expect(renderArray).toHaveBeenCalledTimes(1)
     expect(renderArray.mock.calls[0][0].value).toBeUndefined()
-    
+
     const button = TestUtils.findRenderedDOMComponentWithTag(dom, 'button')
     TestUtils.Simulate.click(button)
-    
+
     expect(renderArray).toHaveBeenCalledTimes(2)
     expect(renderArray.mock.calls[1][0].value).toBeUndefined()
   })
@@ -445,6 +445,60 @@ describe('FieldArray', () => {
     expect(queryByTestId('names[1]')).not.toBe(null)
   })
 
+  it('should not re-render Field when subscription is empty object', () => {
+    const nameFieldRender = jest.fn()
+    const surnameFieldRender = jest.fn()
+
+    const { getByTestId } = render(
+      <Form
+        onSubmit={onSubmitMock}
+        mutators={arrayMutators}
+        subscription={{}}
+        initialValues={{
+          names: [{ id: 1, name: 'John', surname: 'Doe' }]
+        }}
+      >
+        {({ handleSubmit }) => (
+          <form onSubmit={handleSubmit} data-testid="form">
+            <FieldArray name="names" subscription={{}}>
+              {({ fields }) =>
+                fields.map(field => {
+                  return (
+                    <div key={`${field}.id`}>
+                      <Field name={`${field}.name`}>
+                        {wrapWith(nameFieldRender, ({ input }) => (
+                          <input data-testid={`${field}.name`} {...input} />
+                        ))}
+                      </Field>
+                      <Field name={`${field}.surname`}>
+                        {wrapWith(surnameFieldRender, ({ input }) => (
+                          <input data-testid={`${field}.surname`} {...input} />
+                        ))}
+                      </Field>
+                    </div>
+                  )
+                })
+              }
+            </FieldArray>
+          </form>
+        )}
+      </Form>
+    )
+
+    fireEvent.change(getByTestId('names[0].name'), {
+      target: { value: 'Sue' }
+    })
+    expect(getByTestId('names[0].name').value).toBe('Sue')
+
+    fireEvent.change(getByTestId('names[0].name'), {
+      target: { value: 'Paul' }
+    })
+    expect(getByTestId('names[0].name').value).toBe('Paul')
+
+    expect(nameFieldRender).toHaveBeenCalledTimes(3)
+    expect(surnameFieldRender).toHaveBeenCalledTimes(1)
+  })
+
   it('should allow Fields to be rendered for complex objects', () => {
     const onSubmit = jest.fn()
     const { getByTestId, getByText, queryByTestId } = render(

src/testUtils.js

@@ -1,5 +1,10 @@
 import React from 'react'
 
+export const wrapWith = (mock, fn) => (...args) => {
+  mock(...args)
+  return fn(...args)
+}
+
 /** A simple container component that allows boolean to be toggled with a button */
 export function Toggle({ children }) {
   const [on, setOn] = React.useState(false)

src/useFieldArray.js

@@ -57,7 +57,7 @@ const useFieldArray = (
     input,
     ...fieldState
   } = useField(name, {
-    subscription: { ...subscription, value: true, length: true },
+    subscription: { ...subscription, length: true },
     isEqual,
     validate,
     format: v => v