👯‍♂️ support async defaultValues and form values update

[bluebill1049]

Context

This PR is aimed to improve both UX and DX with form values update.

• To improve DX by removing redundant useEffect and reset combination, eg:

useEffect(() => {
  reset(defaultValues)
}, [reset, defaultValues])

• To promote better UX with server state updates.

Proposal Syntax

👉 NEW values props

The following syntax will react to values prop update/changes.

• values will be reactive to update/change and reset accordingly
• provide a reset option to keep dirty/touched values potentially

const values = await fetch('API')

useForm({
  values, // will reset the form when values updates
  // resetOptions: {
  //   keepDirtyValues: true
  // }
})

---

👉 NEW async defaultValues props

The following syntax will support async defaultValues, so we will manage the reset form internally and update formState accordingly.

• promise will only be resolved once during useForm() call
• It's possible to supply resetOptions as well

useForm({
  defaultValues: fetch('API')
  // resetOptions: {
  //   keepDirtyValues: true
  // }
})

React use API

useForm({
  defaultValues: use(fetch('API'))
  // resetOptions: {
  //   keepDirtyValues: true
  // }
})

RFC

• RFC: async defaultValues #9046

🙋 What's the difference between values and defaultValues

values will react to changes and reflect on the form values, and defaultValues is cached for once and will never re-run the promise or react to defaultValues changes.

TODO:

• type inference for async defaultValues
• documentation update
• testing in real app

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[github-actions]

Size Change: +148 B (+1%)

Total Size: 18.7 kB

Filename	Size	Change
dist/index.cjs.js	9.28 kB	+72 B (+1%)
dist/index.umd.js	9.38 kB	+76 B (+1%)

_{compressed-size-action}

[juliaschiller150]

@bluebill1049 Thanks so much for this! We have a great use case for this.

I'm running the canary and having trouble getting this working with Apollo's useQuery. We need to massage the incoming data first, too, before passing it along to useForm, and I'm not sure how to do that with this interface which runs the defaultValues function once.

Can we explore Apollo use cases as part of this effort?

[bluebill1049]

@bluebill1049 Thanks so much for this! We have a great use case for this.

I'm running the canary and having trouble getting this working with Apollo's useQuery. We need to massage the incoming data first, too, before passing it along to useForm, and I'm not sure how to do that with this interface which runs the defaultValues function once.

Can we explore Apollo use cases as part of this effort?

hey @tcschiller you can use values props

https://twitter.com/HookForm/status/1593066930579333120

Going to release another patch to improve type inference and improve resetOptions

resetOptions: https://twitter.com/HookForm/status/1593130527292542976