What is correct way to use same useFieldArray multiple times

[tparvi]

Codesandbox: https://codesandbox.io/s/rhf-use-field-array-twice-dqh44l

In the code I am using useFieldArray twice: once to render read only view and once to render edit view where you can add new person by clicking the button.

Problem: When I click Add person only the edit view updates. I have added console.log to display the contents and you can see that useWatch returns the updated list but useFieldArray does not.

My understanding is that this is by design because useFieldArray only contains the id of the item and some kind of link to the actual list. Sorry I don't know the technical details but I am interested in how this works.

Question: Is the correct way to implement this to use setValue or is there better way to handle this?

[Sajarin-M]

Hi @tparvi 👋
I don't know the technical details of useFieldArray,
but in this case, if you define fieldArray in your parent component and pass it as a prop to both ReadOnlyList and EditList, it will work as expected.
I hope someone else can clarify the technical details for you.
Please refer this sandbox

[BaileyMillerSSI]

I think this is one way to solve this but I would like to hear from the author if this behavior is expected? It seems like each call to useFieldArray creates it's own connection to the array and doesn't update the other instances when changes occur.

[tyler-dot-earth]

Old thread, just sharing that I agree that this feels like unintuitive/undocumented behavior.

[carlos7ags]

I have the same question as @BaileyMillerSSI. There are scenarios where you cannot pass it as prop.