Outlaw subscription changes (#497)

Author: erikras

src/FormSpy.test.js

@@ -97,7 +97,7 @@ describe('FormSpy', () => {
     expect(spy.mock.calls[2][0].values).toEqual({ name: 'erikras' })
   })
 
-  it('should resubscribe if subscription changes', () => {
+  it('should NOT resubscribe if subscription changes', () => {
     const firstSubscription = { values: true, pristine: true }
     const secondSubscription = { dirty: true, submitting: true }
     const spy = jest.fn()
@@ -165,19 +165,8 @@ describe('FormSpy', () => {
 
     fireEvent.click(getByText('Toggle'))
 
-    // one for new prop, and again after reregistering
-    expect(spy).toHaveBeenCalledTimes(4)
-    hasFormApi(spy.mock.calls[3][0])
-    expect(spy.mock.calls[3][0].dirty).toBe(false)
-    expect(spy.mock.calls[3][0].errors).toBeUndefined()
-    expect(spy.mock.calls[3][0].invalid).toBeUndefined()
-    expect(spy.mock.calls[3][0].pristine).toBeUndefined()
-    expect(spy.mock.calls[3][0].submitFailed).toBeUndefined()
-    expect(spy.mock.calls[3][0].submitSucceeded).toBeUndefined()
-    expect(spy.mock.calls[3][0].submitting).toBe(false)
-    expect(spy.mock.calls[3][0].valid).toBeUndefined()
-    expect(spy.mock.calls[3][0].validating).toBeUndefined()
-    expect(spy.mock.calls[3][0].values).toBeUndefined()
+    // one for new prop, and NOT again because no reregistering since v6
+    expect(spy).toHaveBeenCalledTimes(3)
   })
 
   it('should hear changes', () => {

src/ReactFinalForm.js

@@ -19,7 +19,6 @@ import useConstant from './useConstant'
 import shallowEqual from './shallowEqual'
 import isSyntheticEvent from './isSyntheticEvent'
 import type { FormRenderProps } from './types.js.flow'
-import flattenSubscription from './flattenSubscription'
 import ReactFinalFormContext from './context'
 
 export const version = '5.1.0'
@@ -79,8 +78,6 @@ const ReactFinalForm = ({
     }
   )
 
-  // In the future, changing subscriptions on the fly should be banned. ⚠️
-  const flattenedSubscription = flattenSubscription(subscription)
   React.useEffect(() => {
     // We have rendered, so all fields are no registered, so we can unpause validation
     form.isValidationPaused() && form.resumeValidation()
@@ -103,7 +100,7 @@ const ReactFinalForm = ({
       unsubscriptions.forEach(unsubscribe => unsubscribe())
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [decorators, flattenedSubscription, state])
+  }, [decorators])
 
   // warn about decorator changes
   // istanbul ignore next

src/ReactFinalForm.test.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, fireEvent, cleanup } from 'react-testing-library'
+import { render, fireEvent, cleanup, act } from 'react-testing-library'
 import 'jest-dom/extend-expect'
 import deepEqual from 'fast-deep-equal'
 import { ErrorBoundary, Toggle, wrapWith } from './testUtils'

src/flattenSubscription.js

@@ -1,7 +1,6 @@
 // @flow
 import * as React from 'react'
 import { fieldSubscriptionItems } from 'final-form'
-import flattenSubscription from './flattenSubscription'
 import type { FieldSubscription, FieldState, FormApi } from 'final-form'
 import type { UseFieldConfig, FieldInputProps, FieldRenderProps } from './types'
 import isReactNative from './isReactNative'
@@ -82,8 +81,6 @@ const useField = (
     return beforeSubmit && beforeSubmit()
   }
 
-  // In the future, changing subscriptions on the fly should be banned. ⚠️
-  const flattenedSubscription = flattenSubscription(subscription)
   React.useEffect(
     () =>
       register(state => {
@@ -102,9 +99,7 @@ const useField = (
       // validate,
       initialValue,
       isEqual,
-      validateFields,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      flattenedSubscription
+      validateFields
     ]
   )
 

src/flattenSubscription.test.js

@@ -1,6 +1,5 @@
 // @flow
 import * as React from 'react'
-import flattenSubscription from './flattenSubscription'
 import type { UseFormStateParams } from './types'
 import type { FormState, FormApi } from 'final-form'
 import { all } from './ReactFinalForm'
@@ -27,8 +26,6 @@ const useFormState = ({
     }
   )
 
-  // In the future, changing subscriptions on the fly should be banned. ⚠️
-  const flattenedSubscription = flattenSubscription(subscription)
   React.useEffect(
     () =>
       form.subscribe(newState => {
@@ -42,7 +39,7 @@ const useFormState = ({
         }
       }, subscription),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [flattenedSubscription]
+    []
   )
   return state
 }