issue: update from useFieldArray causes a different id being generated

[iurietarlev]

Version Number

7.45.4

Codesandbox/Expo snack

https://codesandbox.io/s/usefieldarray-with-preview-forked-wjrwm6?file=/src/App.js

Steps to reproduce

1. Go to main page of the App
2. Click Append
3. Enter first name John
4. Click Submit
5. See isEdit has not changed to FALSE.

Expected behaviour

The submit function is supposed to set edit state to false. However due to a different field.id that gets generated every time we run the update a different instance of <Edit/> component is mounted.

So instead of re-render of one instance, we get a completely different instance of the component. Hence all the state from within the first component instance is lost. That will include all the items from within formState of the child form in<Edit/>.

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

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

[bluebill1049]

This is expected behaviour for update.

[iurietarlev]

@bluebill1049 thanks for your response. Are there any potential problems with using a custom ids (from within our db) for keys of the field components?

Is there a strong technical reason why the id on fields change every time? Using keys in React helps prevent unnecessary re-renders usually, but having them changed all the time just leads to a complete re-render.

[bluebill1049]

Is there a strong technical reason why the id on fields change every time? Using keys in React helps prevent unnecessary re-renders usually, but having them changed all the time just leads to a complete re-render.

Yes, we need to unmount and remount the component to render the updated input value.

[milansav]

But this then causes array field inputs to lose focus (for example native time input's dropdown collapses), is there a way to avoid that?

[Pipe-Runner]

This is the same problem I am running into, changes using the value API which leads to a different ID, which in turn drops on the focus on the input field, this makes auto save impossible to implement.