Request: include useEffect to reset (with new initial data) form on change of initialValue

[kwhitley]

Example

const MyComponent = () => {
  let [ item, setItem ] = useState({ foo: 'bar' })
  let [ formState ] = useFormState(item)

  setTimeout(() => {
   // this should trigger a component re-render 
   //which will fire a new "item"  value into the useFormState initialValue
   setItem({ fo: 'fum' }) 
  }, 2000)

  return (
    <pre>
     { 
       JSON.stringify(formState, null, 2)
       // this will continue to show the form state as originally 
       // set, instead of updating with new form data
     }
   </pre>
  )
}

Expected Behavior
When changing initialValue (e.g. as the product of another hook), I'd expect the form to reset itself (including untouched state) to the new base data.

Current Behavior
When changing initialValue from another hook, the form is left unchanged. This makes it difficult to dynamically load a form without using component hacks to force a re-instantiation of the useFormState hook

Workaround Hacks

1. Throwing a useEffect into your component that watches for changes to [what should be] the form initialState, that manually does setFields based on the new object structure. Risks are that if the form structure changes at all, you may carry old data values along with the new (e.g. it may have old fields that were left in the form body because the new form state didn't have those attributes), as well the fact that they'll all be marked as touched instead of untouched.

Steps Forward

• do not agree that changes to initialValue should be dynamically set form data
• agree and will modify code to match
• agree but would welcome a PR (I'd be happy to take a stab at it)

P.S. - @wsmd Love this library and the elegant interface - keep up the great work!

[kevcam4891]

Any update on this? I, too, am having a hard time updating initial data, for example, after a successful async request.

[bfillmer]

Our current workaround on this is to do our data fetching one component up the tree, and don't render the component using useFormState until after our data load is complete. Not ideal but it does work. I think what we'd like to see is the ability to just globally set all state in one go, setFields perhaps or the like.

[yanickrochon]

Similar issue #146