useFormContext + useFieldArray fields have not changed

[SturdyCat]

Version Number

7.18.0

Codesandbox/Expo snack

https://codesandbox.io/s/react-hook-form-v7-bug-06vmyz

Steps to reproduce

1. Click on 'click append‘ button
2. See error
   

Expected behaviour

useFieldArray fields synchronize changes

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[bluebill1049]

hi there, the name is unique we don't support multiple useFieldArray with the same name. there is a feature PR, which may help your use case: #7544

here is a codesandbox with the above PR: https://codesandbox.io/s/cocky-franklin-sn0vn?file=/src/App.js:1373-1383

[isnifer]

I think the suggestion even wrong, lines (13-17):

const { control } = useFormContext()
const { fields } = useFieldArray({
    control, // control props comes from useForm (optional: if you are using FormContext)
    name: "data" // unique name for your Field Array
});

should be replaced with:

const { watch } = useFormContext()
const fields = watch('data')

And then everything works fine:

[Moshyfawn]

If the OP just wants to watch the fields's values, then, yea, sure, you can simply use the watch method instead.

The OG CSB includes useFieldArray hook call to get the fields, which might mean, that they want to also manipulate the field array data in multiple places. This behavior is not supported by RHF at this time, hence the suggestion with the CSB. The provided CSB contains the unreleased RHF bundle with the proposed field array Context changes, which would solve the OP's issue

[bluebill1049]

yes, the watch works for value render, I think if the user does want to sync field array. the FormContext with field array is a good utility to be included which is currently in PR.

[Moshyfawn]

I'll give the feature another thought, 'cuz I don't exactly like how it clutters the component body, but we might wanna just move ahead with it

[bluebill1049]

I think having form context is just a convenient syntax (with a bit performance sacrifc) ofc users should always measure against their app, they can do the same with props anyhow, but keen to hear everyone's thoughts on that PR. as it only changes with type without adding more bytes.

[Moshyfawn]

Maybe move the issue to discussion?

[bluebill1049]

yea move to discussion.