Fix #3296 - Log warning if conflicting keyName is used

src/useFieldArray.test.tsx

@@ -202,6 +202,40 @@ describe('useFieldArray', () => {
       expect(console.warn).not.toBeCalled();
     });
 
+    it('should output error message when a conflicting fieldArray keyName is found in the fieldValues in development mode', () => {
+      jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+      process.env.NODE_ENV = 'development';
+
+      renderHook(() => {
+        const { control } = useForm({
+          defaultValues: {
+            test: [{ id: '123' }],
+          },
+        });
+        useFieldArray({ control, name: 'test' });
+      });
+
+      expect(console.warn).toBeCalledTimes(1);
+    });
+
+    it('should not output error message when a conflicting fieldArray keyName is found in the fieldValues in production mode', () => {
+      jest.spyOn(console, 'warn').mockImplementation(() => {});
+
+      process.env.NODE_ENV = 'production';
+
+      renderHook(() => {
+        const { control } = useForm({
+          defaultValues: {
+            test: [{ id: '123' }],
+          },
+        });
+        useFieldArray({ control, name: 'test' });
+      });
+
+      expect(console.warn).toBeCalledTimes(0);
+    });
+
     it('should throw custom error when control is not defined in development mode', () => {
       process.env.NODE_ENV = 'development';
 

src/useFieldArray.ts

@@ -33,11 +33,26 @@ const mapIds = <
 >(
   values: Partial<TFieldArrayValues>[] = [],
   keyName: TKeyName,
-): Partial<ArrayField<TFieldArrayValues, TKeyName>>[] =>
-  values.map((value: Partial<TFieldArrayValues>) => ({
-    [keyName]: generateId(),
-    ...value,
-  }));
+): Partial<ArrayField<TFieldArrayValues, TKeyName>>[] => {
+  let reservedKeyUsed = false;
+  const result = values.map((value: Partial<TFieldArrayValues>) => {
+    if (keyName in value) {
+      reservedKeyUsed = true;
+    }
+    return {
+      [keyName]: generateId(),
+      ...value,
+    };
+  });
+
+  if (process.env.NODE_ENV !== 'production' && reservedKeyUsed) {
+    console.warn(
+      `📋 useFieldArray fieldValues contain the keyName \`${keyName}\` which is reserved for use by useFieldArray. https://react-hook-form.com/api#useFieldArray`,
+    );
+  }
+
+  return result;
+};
 
 export const useFieldArray = <
   TFieldArrayValues extends FieldValues = FieldValues,