💪 improve watch() with useFieldArray

app/src/app.tsx

@@ -80,7 +80,7 @@ const App: React.FC = () => {
         exact
         component={WatchDefaultValues}
       />
-      <Route path="/watch-field-array" component={WatchFieldArray} />
+      <Route path="/watch-field-array/:mode" component={WatchFieldArray} />
       <Route
         path="/customSchemaValidation/:mode"
         exact

cypress/integration/watchUseFieldArray.ts

@@ -1,6 +1,6 @@
 context('watchUseFieldArray', () => {
   it('should behaviour correctly when watching the field array', () => {
-    cy.visit('http://localhost:3000/watch-field-array');
+    cy.visit('http://localhost:3000/watch-field-array/normal');
 
     cy.get('#append').click();
     cy.get('#result').contains('[{"name":"2"}]');
@@ -41,4 +41,14 @@ context('watchUseFieldArray', () => {
     cy.get('#removeAll').click();
     cy.get('#result').should('be.empty');
   });
+
+  it('should return empty when items been removed and defaultValues are supplied', () => {
+    cy.visit('http://localhost:3000/watch-field-array/default');
+
+    cy.get('#delete0').click();
+    cy.get('#delete0').click();
+    cy.get('#delete0').click();
+
+    cy.get('#result').should('be.empty');
+  });
 });

src/useFieldArray.ts

@@ -90,7 +90,7 @@ export const useFieldArray = <
     if (readFormStateRef.current.dirty) {
       isDirtyRef.current = isUndefined(flagOrFields)
         ? true
-        : getIsFieldsDifferent(flagOrFields, memoizedDefaultValues.current);
+        : getIsFieldsDifferent(flagOrFields, defaultValuesRef.current[name]);
     }
 
     for (const key in fieldsRef.current) {
@@ -183,7 +183,7 @@ export const useFieldArray = <
     }
 
     if (readFormStateRef.current.dirty) {
-      dirtyFieldsRef.current.forEach((dirtyField) => {
+      dirtyFieldsRef.current.forEach(dirtyField => {
         if (isUndefined(name) || dirtyField.startsWith(`${name}[${index}]`)) {
           dirtyFieldsRef.current.delete(dirtyField);
         }

src/useForm.ts

@@ -213,7 +213,7 @@ export function useForm<
         }
       } else if (isMultipleSelect(ref)) {
         [...ref.options].forEach(
-          (selectRef) =>
+          selectRef =>
             (selectRef.selected = (value as string).includes(selectRef.value)),
         );
       } else if (isCheckBoxInput(ref) && options) {
@@ -375,7 +375,7 @@ export function useForm<
       isValidRef.current = isEmptyObject(errors);
 
       if (isArray(payload)) {
-        payload.forEach((name) => {
+        payload.forEach(name => {
           const error = get(errors, name);
 
           if (error) {
@@ -418,7 +418,7 @@ export function useForm<
 
       if (isArray(fields)) {
         const result = await Promise.all(
-          fields.map(async (data) => await executeValidation(data, true)),
+          fields.map(async data => await executeValidation(data, true)),
         );
         reRender();
         return result.every(Boolean);
@@ -620,7 +620,7 @@ export function useForm<
         fieldsWithValidationRef,
         validFieldsRef,
         watchFieldsRef,
-      ].forEach((data) => data.current.delete(name));
+      ].forEach(data => data.current.delete(name));
 
       if (
         readFormStateRef.current.isValid ||
@@ -716,7 +716,7 @@ export function useForm<
             }),
       });
     } else if (isArray(name)) {
-      name.forEach((error) =>
+      name.forEach(error =>
         setInternalError({ ...error, preventRender: true }),
       );
       reRender();
@@ -740,7 +740,9 @@ export function useForm<
       | { nest: boolean },
     defaultValue?: string | DeepPartial<FormValues>,
   ): FieldValue<FormValues> | DeepPartial<FormValues> | string | undefined {
-    const combinedDefaultValues = isUndefined(defaultValue)
+    const combinedDefaultValues = isDirtyRef.current
+      ? {}
+      : isUndefined(defaultValue)
       ? isUndefined(defaultValuesRef.current)
         ? {}
         : defaultValuesRef.current
@@ -751,6 +753,10 @@ export function useForm<
     );
     const watchFields = watchFieldsRef.current;
 
+    if (!isEmptyObject(combinedDefaultValues)) {
+      readFormStateRef.current.dirty = true;
+    }
+
     if (isString(fieldNames)) {
       return assignWatchFields<FormValues>(
         fieldValues,
@@ -778,9 +784,7 @@ export function useForm<
     isWatchAllRef.current = true;
 
     const result =
-      (!isEmptyObject(fieldValues) && fieldValues) ||
-      defaultValue ||
-      defaultValuesRef.current;
+      (!isEmptyObject(fieldValues) && fieldValues) || combinedDefaultValues;
 
     return fieldNames && fieldNames.nest
       ? transformToNestObject(result as FieldValues)
@@ -793,7 +797,7 @@ export function useForm<
     names: FieldName<FormValues> | FieldName<FormValues>[],
   ): void {
     if (!isEmptyObject(fieldsRef.current)) {
-      (isArray(names) ? names : [names]).forEach((fieldName) =>
+      (isArray(names) ? names : [names]).forEach(fieldName =>
         removeFieldEventListenerAndRef(fieldsRef.current[fieldName], true),
       );
     }
@@ -887,7 +891,7 @@ export function useForm<
 
       if (!isOnSubmit && readFormStateRef.current.isValid) {
         validateField(fieldsRef, validateAllFieldCriteria, currentField).then(
-          (error) => {
+          error => {
             const previousFormIsValid = isValidRef.current;
             if (isEmptyObject(error)) {
               validFieldsRef.current.add(name);
@@ -1122,7 +1126,7 @@ export function useForm<
     }
 
     Object.values(resetFieldArrayFunctionRef.current).forEach(
-      (resetFieldArray) => isFunction(resetFieldArray) && resetFieldArray(),
+      resetFieldArray => isFunction(resetFieldArray) && resetFieldArray(),
     );
 
     resetRefs(omitResetState);