react-hook-form: Form onChange does not fire when useFieldArrayis used.

Describe the bug My form onChange handler does not receive events when useFieldArray is used.

To Reproduce Steps to reproduce the behavior:

  1. Use a useFieldArray.
  2. Modify said array
  3. See that onChange is not fired

Codesandbox link (Required) https://codesandbox.io/s/react-hook-form-onchange-fieldarray-zmfue?file=/src/index.js

Expected behavior I expect my onChange to fire.

Some background: I am using onChange as a way to debounce an autosave to the server. Is this the recommended approach to avoid rerenders? Do you have an autosave example?

Thank you for this really nice library and your open source contribution

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context Add any other context about the problem here.

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 23 (12 by maintainers)

Most upvoted comments

Ohh. Right.

Sure. I could debounce that. But I have hundreds of form fields. I was hoping to have a top level component <AutoSave control={control} /> that supervised the form and submitted on changes. I am working on an example in codesandbox atm. Thanks for your help.

v7 is 100% going to help you.

React.useEffect(watch(deboucne((data) => data, 1000)), [watch])

you can subscribe to the form inputs with a callback