fix(useForm): Sync options with form. (#20)

Author: avocadowastaken

src/index.d.ts

@@ -16,6 +16,7 @@ export interface FormRenderProps extends FormState {
 
 interface FormConfig extends Config {
   subscription?: FormSubscription
+  initialValuesEqual?: (a: object, b: object) => boolean
 }
 
 type NonFunctionPropertyNames<T> = {

src/internal/shallowEqual.js

@@ -0,0 +1,23 @@
+const shallowEqual = (a, b) => {
+  if (a === b) {
+    return true
+  }
+  if (typeof a !== 'object' || !a || typeof b !== 'object' || !b) {
+    return false
+  }
+  const keysA = Object.keys(a)
+  const keysB = Object.keys(b)
+  if (keysA.length !== keysB.length) {
+    return false
+  }
+  const bHasOwnProperty = Object.prototype.hasOwnProperty.bind(b)
+  for (let idx = 0; idx < keysA.length; idx++) {
+    const key = keysA[idx]
+    if (!bHasOwnProperty(key) || a[key] !== b[key]) {
+      return false
+    }
+  }
+  return true
+}
+
+export default shallowEqual

src/useForm.js

@@ -1,9 +1,16 @@
-import { useCallback, useRef } from 'react'
-import { createForm } from 'final-form'
+import { useCallback, useRef, useEffect } from 'react'
+import { createForm, configOptions } from 'final-form'
 import useFormState from './useFormState'
+import shallowEqual from './internal/shallowEqual'
 
-const useForm = ({ subscription, ...config }) => {
+const useForm = ({
+  subscription,
+  initialValuesEqual = shallowEqual,
+  ...config
+}) => {
   const form = useRef()
+  const prevConfig = useRef(config)
+
   // https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
   const getForm = () => {
     if (!form.current) {
@@ -25,6 +32,30 @@ const useForm = ({ subscription, ...config }) => {
     return getForm().submit()
   }, [])
 
+  useEffect(() => {
+    if (config === prevConfig.current) {
+      return
+    }
+
+    if (
+      config.initialValues &&
+      !initialValuesEqual(
+        config.initialValues,
+        prevConfig.current.initialValues
+      )
+    ) {
+      form.initialize(config.initialValues)
+    }
+
+    configOptions.forEach(key => {
+      if (key !== 'initialValues' && config[key] !== prevConfig.current[key]) {
+        form.setConfig(key, config[key])
+      }
+    })
+
+    prevConfig.current = config
+  })
+
   return { ...state, form: getForm(), handleSubmit }
 }