issue: useFieldArray gets reinitialised and IDs get reassigned on any change to the "values" prop

[rishitells]

Version Number

7.47.0

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/wizardly-bird-y9f9pq?file=%2Fapp%2Froutes%2F_index.tsx%3A20%2C2

Steps to reproduce

I have a form with mix of single fields and list (array) fields, and I am trying to update the form values with the fresh server data after a submission, by passing the values prop to useForm(). However, I see that even if the array field values are unchanged from server data (only the single field value is changed), the array fields also get reinitialised and the IDs get changed, which causes the fields inside the array to lose all local state. This does not happen if all values are unchanged.

1. Set up a form with useForm and include two fields -
   1. A number field whose value changes after submission.
   2. A list field created using useFieldArray() whose value never changes.
2. Initialize the form with values.
3. Submit the form.
4. When the unrelated field's value is changed, observe that useFieldArray assigns new IDs to the list fields.

I see that react-hook-form just resets the whole form if current values are not deeply equal to previous values -

control._reset(props.values, control._options.resetOptions);

But is there a reason for this hard reset even when there is only one changed field out of, say 10 fields?

Expected behaviour

When submitting the form and updating the useForm values with fresh server data where array field values remain the same, useFieldArray should not reinitialize the list items. The IDs for list items should remain consistent if their corresponding data has not changed, preserving their internal state.

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]

you shouldn't relay on those id, they are made for rendering array fields.

[rishitells]

By not relying on those IDs, you mean I should not use the IDs from the fields array for the key(s) to the mapped elements? And instead give a more stable key to prevent unmounting and remounting of array elements because of the key change that is happening in my example (because of fresh values from server data)?

The docs actually give an impression that the ID from the fields array has to be used for the key.

in the first example

 return (
    {fields.map((field, index) => (
      <input
        key={field.id} // important to include key with field's id
        {...register(`test.${index}.value`)} 
      />
    ))}
  );

in the return section

Name	Type	Description
fields	object & { id: string }	This object contains the defaultValue and key for your component.

in the rules section
"The field.id (and not index) must be added as the component key to prevent re-renders breaking the fields".

Would appreciate the inputs here. I still think react-hook-form shouldn't just reset the whole form even if just 1 out of 10 fields in the form has a new value. Also it would be great to document this reset behaviour in the useFieldArray() documentation with the recommended solution i.e. using more stable keys instead of IDs from the fields.

[m0sth8]

I have the same issue. In my case I have a fieldArray with autocomplete inputs and autosave enabled for the whole form.
So when user adds a new item and starts to type in autocomplete, when autosave happens -> all the data are gone.
This happens because autocomplete doesn't update value until user chooses to Add an new value. (it's called free solo mode in mui framework)

[fire332]

I have a similar issue with useFieldArray's replace. Since the IDs are completely different on every replace, that makes Framer Motion's Reorder components unusable since Framer Motion needs the IDs to be stable to track where each item has moved to. This issue looks similar to #3795

[jessecoleman]

I also just ran into this issue. Anyone found a solution?

[rishitells]

@jessecoleman We resorted to using a generated uuid as the key instead of RHF's id for the individual items in the fields array, so across form submissions the key remains stable and internal state of items is not lost as they are not unmounted.