fix: validator infinite loops (#46)

* fix: validator infinite loops

fixes #44

* test: update useField test

Author: christophehurpeau

src/useField.js

@@ -1,5 +1,5 @@
-import { useState, useEffect, useRef } from 'react'
 import { fieldSubscriptionItems } from 'final-form'
+import { useEffect, useRef, useState } from 'react'
 
 export const all = fieldSubscriptionItems.reduce((result, key) => {
   result[key] = true
@@ -21,8 +21,11 @@ const eventValue = event => {
 
 const useField = (name, form, validate, subscription = all) => {
   const autoFocus = useRef(false)
+  const validatorRef = useRef(undefined)
   const [state, setState] = useState({})
 
+  validatorRef.current = validate
+
   const deps = subscriptionToInputs(subscription)
   useEffect(
     () =>
@@ -38,12 +41,12 @@ const useField = (name, form, validate, subscription = all) => {
         subscription,
         validate
           ? {
-              getValidator: () => validate
+              getValidator: () => validatorRef.current
             }
           : undefined
       ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [name, form, validate, ...deps]
+    [name, form, ...deps]
   )
   let { blur, change, focus, value, ...meta } = state
   delete meta.name // it's in input

src/useField.test.js

@@ -221,7 +221,7 @@ describe('useField()', () => {
           onSubmit,
           validate
         })
-        const firstName = useField(FIELD_NAME, form, required)
+        const firstName = useField(FIELD_NAME, form, value => required(value))
 
         return (
           <form onSubmit={handleSubmit}>