register as a function, vs. called without arguments

[dandv]

I've noticed that in the nested fields example, register() needs to be called without arguments. In most other examples, I see it called either with specific arguments, or just left as a function parameter:

If I remove the () from the nested fields example, I get this error if I append 2 nested fields then delete them both:

data.slice is not a function or its return value is not iterable

Just wanted to understand this register vs register() situation. Thanks!

[bluebill1049]

This problem haunting us for a long time. Going register() is our last option on the table.

Ref gets invoked after input finished mount, and invoked again when it gets removed. However, during .map React reconcile kicks in and optimize when to remove/append a real Node, so when input shuffle and swap we want the correct input to get re-register again. register() will force that to call as it's a new anonymous callback.

[bluebill1049]

i missed the register()

https://codesandbox.io/s/react-hook-form-usefieldarray-error-on-removal-ci33u?file=/src/DeletableField.js

[dandv]

That worked with v5, but after upgrading to v6, fails with the same error.

https://codesandbox.io/s/react-hook-form-usefieldarray-error-on-removal-rqnml

[bluebill1049]

what's the steps to reproduce?

[dandv]

Turns out error was on my side (sorry), but in your code, without changing anything, I notice onSubmit appears to be called every time I click on ADD, in addition to when I click SUBMIT. Not very important, just FYI.

[bluebill1049]

i think one of the buttons, i must forget to include type="button"