Switched to @mpenney99's solution

Author: erikras

src/useConstantCallback.js

@@ -2,29 +2,15 @@
 import * as React from 'react'
 
 /**
- * Creates a callback, with dependencies, that will be
- * instance === for the lifetime of the component.
+ * Creates a callback, even with closures, that will be
+ * instance === for the lifetime of the component, always
+ * calling the most recent version of the function and its
+ * closures.
  */
-export default function useConstantCallback(callback, deps) {
-  // initialize refs on first render
-  const refs = deps.map(React.useRef)
-  // update refs on each additional render
-  deps.forEach((dep, index) => (refs[index].current = dep))
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const constant = React.useRef((...args) => {
-    // This if seems weird, but if args is [], then the
-    // first param will be the refs.map()
-    if (args && args.length) {
-      callback(
-        ...args,
-        refs.map(ref => ref.current)
-      )
-    } else {
-      callback(
-        undefined,
-        refs.map(ref => ref.current)
-      )
-    }
-  }, [])
-  return constant.current
+export default function useConstantCallback(callback) {
+  const ref = React.useRef(callback)
+  React.useEffect(() => {
+    ref.current = callback
+  })
+  return React.useCallback((...args) => ref.current.apply(null, args), [])
 }

src/useConstantCallback.test.js

@@ -14,13 +14,10 @@ describe('useConstantCallback', () => {
       const [name, setName] = React.useState('John')
       const [age, setAge] = React.useState(20)
       const [isAdmin, setAdmin] = React.useState(false)
-      const constantCallback = useConstantCallback(
-        (time, [name, age, isAdmin]) => {
-          expect(typeof time).toBe('number')
-          callback(name, age, isAdmin)
-        },
-        [name, age, isAdmin]
-      )
+      const constantCallback = useConstantCallback(time => {
+        expect(typeof time).toBe('number')
+        callback(name, age, isAdmin)
+      })
       const callbackRef = React.useRef(constantCallback)
       expect(callbackRef.current).toBe(constantCallback)
       return (

src/useField.js

@@ -168,64 +168,52 @@ function useField<FormValues: FormValuesShape>(
       }
       return undefined
     },
-    onBlur: useConstantCallback(
-      (event: ?SyntheticFocusEvent<*>, [form, format, formatOnBlur, state]) => {
-        state.blur()
-        if (formatOnBlur) {
-          /**
-           * Here we must fetch the value directly from Final Form because we cannot
-           * trust that our `state` closure has the most recent value. This is a problem
-           * if-and-only-if the library consumer has called `onChange()` immediately
-           * before calling `onBlur()`, but before the field has had a chance to receive
-           * the value update from Final Form.
-           */
-          const fieldState: any = form.getFieldState(state.name)
-          state.change(format(fieldState.value, state.name))
-        }
-      },
-      [form, format, formatOnBlur, state]
-    ),
-    onChange: useConstantCallback(
-      (
-        event: SyntheticInputEvent<*> | any,
-        [component, name, parse, state, type, _value]
-      ) => {
-        // istanbul ignore next
-        if (process.env.NODE_ENV !== 'production' && event && event.target) {
-          const targetType = event.target.type
-          const unknown =
-            ~['checkbox', 'radio', 'select-multiple'].indexOf(targetType) &&
-            !type &&
-            component !== 'select'
-
-          const value: any =
-            targetType === 'select-multiple' ? state.value : _value
-
-          if (unknown) {
-            console.error(
-              `You must pass \`type="${
-                targetType === 'select-multiple' ? 'select' : targetType
-              }"\` prop to your Field(${name}) component.\n` +
-                `Without it we don't know how to unpack your \`value\` prop - ${
-                  Array.isArray(value) ? `[${value}]` : `"${value}"`
-                }.`
-            )
-          }
-        }
+    onBlur: useConstantCallback((event: ?SyntheticFocusEvent<*>) => {
+      state.blur()
+      if (formatOnBlur) {
+        /**
+         * Here we must fetch the value directly from Final Form because we cannot
+         * trust that our `state` closure has the most recent value. This is a problem
+         * if-and-only-if the library consumer has called `onChange()` immediately
+         * before calling `onBlur()`, but before the field has had a chance to receive
+         * the value update from Final Form.
+         */
+        const fieldState: any = form.getFieldState(state.name)
+        state.change(format(fieldState.value, state.name))
+      }
+    }),
+    onChange: useConstantCallback((event: SyntheticInputEvent<*> | any) => {
+      // istanbul ignore next
+      if (process.env.NODE_ENV !== 'production' && event && event.target) {
+        const targetType = event.target.type
+        const unknown =
+          ~['checkbox', 'radio', 'select-multiple'].indexOf(targetType) &&
+          !type &&
+          component !== 'select'
 
         const value: any =
-          event && event.target
-            ? getValue(event, state.value, _value, isReactNative)
-            : event
-        state.change(parse(value, name))
-      },
-      [component, name, parse, state, type, _value]
-    ),
-    onFocus: useConstantCallback(
-      (event: ?SyntheticFocusEvent<*>, [state]) => {
-        state.focus()
-      },
-      [state]
+          targetType === 'select-multiple' ? state.value : _value
+
+        if (unknown) {
+          console.error(
+            `You must pass \`type="${
+              targetType === 'select-multiple' ? 'select' : targetType
+            }"\` prop to your Field(${name}) component.\n` +
+              `Without it we don't know how to unpack your \`value\` prop - ${
+                Array.isArray(value) ? `[${value}]` : `"${value}"`
+              }.`
+          )
+        }
+      }
+
+      const value: any =
+        event && event.target
+          ? getValue(event, state.value, _value, isReactNative)
+          : event
+      state.change(parse(value, name))
+    }),
+    onFocus: useConstantCallback((event: ?SyntheticFocusEvent<*>) =>
+      state.focus()
     )
   }