react-hook-form

👉 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

const { formState: { isLoading } } = useForm({
  defaultValues: fetch('API')
  // resetOptions: {
  //   keepDirtyValues: true
  // }
})

React use API

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

https://user-images.githubusercontent.com/10513364/208200735-6248b069-9b7d-4bd1-9742-55d1ef8d238a.mov

🙋 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.

⏳ close #9525 add isLoading state for async defaultValues (#9526) 🐞 fix #9581 incorrect type for array of string for message (#9584) 🐞 fix #9571 validation issue with unregister input with valueAsNumber (#9572) 🐞 fix(useWatch): default value for array of inputs (#9555) 📔 fix Controller example using deprecated as prop (#9535) 🐞 fix #9521 isValidting property stuck (#9523) 🔨 feat: Migrate to pnpm (#9516) 🎹 fix #9509 incorrect type for WatchObserver (#9510) 🌳 include flush root render method to createFormControl (#9479)

Huge thanks goes to @nvh95's work on PNPM and also thanks to @bell-steven's contribution