react-hook-form 6.9.2 → 6.9.5

package/dist/index.cjs.development.js

@@ -40,27 +40,23 @@ function attachEventListeners({ ref }, shouldAttachChangeEvent, handleChange) {
 
 var isNullOrUndefined = (value) => value == null;
 
-var isArray = (value) => Array.isArray(value);
-
 const isObjectType = (value) => typeof value === 'object';
 var isObject = (value) => !isNullOrUndefined(value) &&
-    !isArray(value) &&
+    !Array.isArray(value) &&
     isObjectType(value) &&
     !(value instanceof Date);
 
-var isKey = (value) => !isArray(value) &&
+var isKey = (value) => !Array.isArray(value) &&
     (/^\w*$/.test(value) ||
         !/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/.test(value));
 
-var stringToPath = (input) => {
-    const result = [];
-    input.replace(/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g, (match, mathNumber, mathQuote, originalString) => {
-        result.push(mathQuote
-            ? originalString.replace(/\\(\\)?/g, '$1')
-            : mathNumber || match);
-    });
-    return result;
-};
+var compact = (value) => value.filter(Boolean);
+
+var stringToPath = (input) => compact(input
+    .replace(/["|']/g, '')
+    .replace(/\[/g, '.')
+    .replace(/\]/g, '')
+    .split('.'));
 
 function set(object, path, value) {
     let index = -1;
@@ -73,7 +69,7 @@ function set(object, path, value) {
         if (index !== lastIndex) {
             const objValue = object[key];
             newValue =
-                isObject(objValue) || isArray(objValue)
+                isObject(objValue) || Array.isArray(objValue)
                     ? objValue
                     : !isNaN(+tempPath[index + 1])
                         ? []
@@ -85,20 +81,17 @@ function set(object, path, value) {
     return object;
 }
 
-var transformToNestObject = (data) => Object.entries(data).reduce((previous, [key, value]) => {
-    if (!isKey(key)) {
-        set(previous, key, value);
-        return previous;
+var transformToNestObject = (data, value = {}) => {
+    for (const key in data) {
+        !isKey(key) ? set(value, key, data[key]) : (value[key] = data[key]);
     }
-    return Object.assign(Object.assign({}, previous), { [key]: value });
-}, {});
+    return value;
+};
 
 var isUndefined = (val) => val === undefined;
 
-var filterOutFalsy = (value) => value.filter(Boolean);
-
 var get = (obj, path, defaultValue) => {
-    const result = filterOutFalsy(path.split(/[,[\].]+?/)).reduce((result, key) => (isNullOrUndefined(result) ? result : result[key]), obj);
+    const result = compact(path.split(/[,[\].]+?/)).reduce((result, key) => (isNullOrUndefined(result) ? result : result[key]), obj);
     return isUndefined(result) || result === obj
         ? isUndefined(obj[path])
             ? defaultValue
@@ -136,7 +129,7 @@ const defaultReturn = {
     isValid: false,
     value: '',
 };
-var getRadioValue = (options) => isArray(options)
+var getRadioValue = (options) => Array.isArray(options)
     ? options.reduce((previous, option) => option && option.ref.checked
         ? {
             isValid: true,
@@ -163,7 +156,7 @@ const defaultResult = {
 };
 const validResult = { value: true, isValid: true };
 var getCheckboxValue = (options) => {
-    if (isArray(options)) {
+    if (Array.isArray(options)) {
         if (options.length > 1) {
             const values = options
                 .filter((option) => option && option.ref.checked)
@@ -253,7 +246,7 @@ function unset(object, path) {
             objectRef = objectRef ? objectRef[item] : object[item];
             if (currentPathsLength === index &&
                 ((isObject(objectRef) && isEmptyObject(objectRef)) ||
-                    (isArray(objectRef) &&
+                    (Array.isArray(objectRef) &&
                         !objectRef.filter((data) => (isObject(data) && !isEmptyObject(data)) || isBoolean(data)).length))) {
                 previousObjRef ? delete previousObjRef[item] : delete object[item];
             }
@@ -279,15 +272,15 @@ function findRemovedFieldAndRemoveListener(fieldsRef, handleChange, field, shall
     }
     if ((isRadioInput(ref) || isCheckBoxInput(ref)) && fieldRef) {
         const { options } = fieldRef;
-        if (isArray(options) && options.length) {
-            filterOutFalsy(options).forEach((option, index) => {
+        if (Array.isArray(options) && options.length) {
+            compact(options).forEach((option, index) => {
                 const { ref } = option;
                 if ((ref && isDetached(ref) && isSameRef(option, ref)) || forceDelete) {
                     removeAllEventListeners(ref, handleChange);
                     unset(options, `[${index}]`);
                 }
             });
-            if (options && !filterOutFalsy(options).length) {
+            if (options && !compact(options).length) {
                 delete fieldsRef.current[name];
             }
         }
@@ -305,7 +298,7 @@ function setFieldArrayDirtyFields(values, defaultValues, dirtyFields, parentNode
     let index = -1;
     while (++index < values.length) {
         for (const key in values[index]) {
-            if (isArray(values[index][key])) {
+            if (Array.isArray(values[index][key])) {
                 !dirtyFields[index] && (dirtyFields[index] = {});
                 dirtyFields[index][key] = [];
                 setFieldArrayDirtyFields(values[index][key], get(defaultValues[index] || {}, key, []), dirtyFields[index][key], dirtyFields[index], key);
@@ -335,13 +328,11 @@ function deepMerge(target, source) {
         const targetValue = target[key];
         const sourceValue = source[key];
         try {
-            if ((isObject(targetValue) && isObject(sourceValue)) ||
-                (isArray(targetValue) && isArray(sourceValue))) {
-                target[key] = deepMerge(targetValue, sourceValue);
-            }
-            else {
-                target[key] = sourceValue;
-            }
+            target[key] =
+                (isObject(targetValue) && isObject(sourceValue)) ||
+                    (Array.isArray(targetValue) && Array.isArray(sourceValue))
+                    ? deepMerge(targetValue, sourceValue)
+                    : sourceValue;
         }
         catch (_a) { }
     }
@@ -354,7 +345,7 @@ var getFieldsValues = (fieldsRef, shallowFieldsStateRef, excludeDisabled, search
         if (isUndefined(search) ||
             (isString(search)
                 ? name.startsWith(search)
-                : isArray(search) && search.find((data) => name.startsWith(data)))) {
+                : Array.isArray(search) && search.find((data) => name.startsWith(data)))) {
             output[name] = getFieldValue(fieldsRef, name, undefined, excludeDisabled);
         }
     }
@@ -371,7 +362,8 @@ function deepEqual(object1 = [], object2 = [], isErrorObject) {
         if (!(isErrorObject && ['ref', 'context'].includes(key))) {
             const val1 = object1[key];
             const val2 = object2[key];
-            if ((isObject(val1) || isArray(val1)) && (isObject(val2) || isArray(val2))
+            if ((isObject(val1) || Array.isArray(val1)) &&
+                (isObject(val2) || Array.isArray(val2))
                 ? !deepEqual(val1, val2, isErrorObject)
                 : val1 !== val2) {
                 return false;
@@ -563,7 +555,7 @@ var assignWatchFields = (fieldValues, fieldName, watchFields, inputValue, isSing
     }
     else {
         value = get(fieldValues, fieldName);
-        if (isObject(value) || isArray(value)) {
+        if (isObject(value) || Array.isArray(value)) {
             getPath(fieldName, value).forEach((name) => watchFields.add(name));
         }
     }
@@ -619,6 +611,22 @@ function onDomRemove(fieldsRef, removeFieldEventListenerAndRef) {
     return observer;
 }
 
+function cloneObject(object) {
+    let copy;
+    if (isPrimitive(object)) {
+        return object;
+    }
+    if (object instanceof Date) {
+        copy = new Date(object.getTime());
+        return copy;
+    }
+    copy = Array.isArray(object) ? [] : {};
+    for (const key in object) {
+        copy[key] = cloneObject(object[key]);
+    }
+    return copy;
+}
+
 var modeChecker = (mode) => ({
     isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
     isOnBlur: mode === VALIDATION_MODE.onBlur,
@@ -647,7 +655,7 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
     const isUnMount = React.useRef(false);
     const isWatchAllRef = React.useRef(false);
     const handleChangeRef = React.useRef();
-    const shallowFieldsStateRef = React.useRef(shouldUnregister ? {} : Object.assign({}, defaultValues));
+    const shallowFieldsStateRef = React.useRef(shouldUnregister ? {} : cloneObject(defaultValues));
     const resetFieldArrayFunctionRef = React.useRef({});
     const contextRef = React.useRef(context);
     const resolverRef = React.useRef(resolver);
@@ -727,7 +735,7 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         }
         else if (isCheckBoxInput(ref) && options) {
             options.length > 1
-                ? options.forEach(({ ref: checkboxRef }) => (checkboxRef.checked = isArray(value)
+                ? options.forEach(({ ref: checkboxRef }) => (checkboxRef.checked = Array.isArray(value)
                     ? !!value.find((data) => data === checkboxRef.value)
                     : value === checkboxRef.value))
                 : (options[0].ref.checked = !!value);
@@ -738,7 +746,7 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
     }, []);
     const isFormDirty = () => !deepEqual(getValues(), isEmptyObject(defaultValuesRef.current)
         ? defaultValuesAtRenderRef.current
-        : defaultValuesRef.current) || !isEmptyObject(formStateRef.current.dirtyFields);
+        : defaultValuesRef.current);
     const updateAndGetDirtyState = React.useCallback((name, shouldRender = true) => {
         if (readFormStateRef.current.isDirty ||
             readFormStateRef.current.dirtyFields) {
@@ -776,7 +784,7 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
     const executeSchemaOrResolverValidation = React.useCallback(async (names) => {
         const { errors } = await resolverRef.current(getValues(), contextRef.current, isValidateAllFieldCriteria);
         const previousFormIsValid = formStateRef.current.isValid;
-        if (isArray(names)) {
+        if (Array.isArray(names)) {
             const isInputsValid = names
                 .map((name) => {
                 const error = get(errors, name);
@@ -803,7 +811,7 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         if (resolverRef.current) {
             return executeSchemaOrResolverValidation(fields);
         }
-        if (isArray(fields)) {
+        if (Array.isArray(fields)) {
             const result = await Promise.all(fields.map(async (data) => await executeValidation(data, null)));
             updateFormState();
             return result.every(Boolean);
@@ -833,8 +841,9 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
                 resetFieldArrayFunctionRef.current[name]({
                     [name]: value,
                 });
-                if (readFormStateRef.current.isDirty ||
-                    readFormStateRef.current.dirtyFields) {
+                if ((readFormStateRef.current.isDirty ||
+                    readFormStateRef.current.dirtyFields) &&
+                    config.shouldDirty) {
                     set(formStateRef.current.dirtyFields, name, setFieldArrayDirtyFields(value, get(defaultValuesRef.current, name, []), get(formStateRef.current.dirtyFields, name, [])));
                     updateFormState({
                         isDirty: !deepEqual(Object.assign(Object.assign({}, getValues()), { [name]: value }), defaultValuesRef.current),
@@ -912,11 +921,13 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         };
     function setFieldArrayDefaultValues(data) {
         if (!shouldUnregister) {
+            let copy = cloneObject(data);
             for (const value of fieldArrayNamesRef.current) {
-                if (isKey(value) && !data[value]) {
-                    data = Object.assign(Object.assign({}, data), { [value]: [] });
+                if (isKey(value) && !copy[value]) {
+                    copy = Object.assign(Object.assign({}, copy), { [value]: [] });
                 }
             }
+            return copy;
         }
         return data;
     }
@@ -924,7 +935,7 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         if (isString(payload)) {
             return getFieldValue(fieldsRef, payload, shallowFieldsStateRef);
         }
-        if (isArray(payload)) {
+        if (Array.isArray(payload)) {
             const data = {};
             for (const name of payload) {
                 set(data, name, getFieldValue(fieldsRef, name, shallowFieldsStateRef));
@@ -942,10 +953,26 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
             });
     }, [isValidateAllFieldCriteria]);
     const removeFieldEventListener = React.useCallback((field, forceDelete) => findRemovedFieldAndRemoveListener(fieldsRef, handleChangeRef.current, field, shallowFieldsStateRef, shouldUnregister, forceDelete), [shouldUnregister]);
+    const updateWatchedValue = (name) => {
+        if (isWatchAllRef.current) {
+            updateFormState();
+        }
+        else if (watchFieldsRef) {
+            let shouldRenderUseWatch = true;
+            for (const watchField of watchFieldsRef.current) {
+                if (watchField.startsWith(name)) {
+                    updateFormState();
+                    shouldRenderUseWatch = false;
+                    break;
+                }
+            }
+            shouldRenderUseWatch && renderWatchedInputs(name);
+        }
+    };
     const removeFieldEventListenerAndRef = React.useCallback((field, forceDelete) => {
         if (field) {
             removeFieldEventListener(field, forceDelete);
-            if (shouldUnregister && !filterOutFalsy(field.options || []).length) {
+            if (shouldUnregister && !compact(field.options || []).length) {
                 unset(defaultValuesAtRenderRef.current, field.ref.name);
                 unset(validFieldsRef.current, field.ref.name);
                 unset(fieldsWithValidationRef.current, field.ref.name);
@@ -957,12 +984,13 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
                     dirtyFields: formStateRef.current.dirtyFields,
                 });
                 resolverRef.current && validateResolver();
+                updateWatchedValue(field.ref.name);
             }
         }
     }, [validateResolver, removeFieldEventListener]);
     function clearErrors(name) {
         name &&
-            (isArray(name) ? name : [name]).forEach((inputName) => fieldsRef.current[inputName]
+            (Array.isArray(name) ? name : [name]).forEach((inputName) => fieldsRef.current[inputName]
                 ? isKey(inputName)
                     ? delete formStateRef.current.errors[inputName]
                     : set(formStateRef.current.errors, inputName, undefined)
@@ -993,7 +1021,7 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
                 ? get(combinedDefaultValues, fieldNames)
                 : defaultValue, true);
         }
-        if (isArray(fieldNames)) {
+        if (Array.isArray(fieldNames)) {
             return fieldNames.reduce((previous, name) => (Object.assign(Object.assign({}, previous), { [name]: assignWatchFields(fieldValues, name, watchFields, combinedDefaultValues) })), {});
         }
         isWatchAllRef.current = isUndefined(watchId);
@@ -1004,7 +1032,7 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         return watchInternal(fieldNames, defaultValue);
     }
     function unregister(name) {
-        for (const fieldName of isArray(name) ? name : [name]) {
+        for (const fieldName of Array.isArray(name) ? name : [name]) {
             removeFieldEventListenerAndRef(fieldsRef.current[fieldName], true);
         }
     }
@@ -1031,8 +1059,8 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         let defaultValue;
         if (field &&
             (isRadioOrCheckbox
-                ? isArray(field.options) &&
-                    filterOutFalsy(field.options).find((option) => {
+                ? Array.isArray(field.options) &&
+                    compact(field.options).find((option) => {
                         return value === option.ref.value && compareRef(option.ref);
                     })
                 : compareRef(field.ref))) {
@@ -1042,7 +1070,7 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         if (type) {
             field = isRadioOrCheckbox
                 ? Object.assign({ options: [
-                        ...filterOutFalsy((field && field.options) || []),
+                        ...compact((field && field.options) || []),
                         {
                             ref,
                         },
@@ -1112,16 +1140,14 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         }
         let fieldErrors = {};
         let fieldValues = setFieldArrayDefaultValues(getFieldsValues(fieldsRef, shallowFieldsStateRef, true));
-        if (readFormStateRef.current.isSubmitting) {
+        readFormStateRef.current.isSubmitting &&
             updateFormState({
                 isSubmitting: true,
             });
-        }
         try {
             if (resolverRef.current) {
                 const { errors, values } = await resolverRef.current(fieldValues, contextRef.current, isValidateAllFieldCriteria);
-                formStateRef.current.errors = errors;
-                fieldErrors = errors;
+                formStateRef.current.errors = fieldErrors = errors;
                 fieldValues = values;
             }
             else {
@@ -1190,7 +1216,7 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
             for (const field of Object.values(fieldsRef.current)) {
                 if (field) {
                     const { ref, options } = field;
-                    const inputRef = isRadioOrCheckboxFunction(ref) && isArray(options)
+                    const inputRef = isRadioOrCheckboxFunction(ref) && Array.isArray(options)
                         ? options[0].ref
                         : ref;
                     if (isHTMLElement(inputRef)) {
@@ -1204,21 +1230,21 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
             }
         }
         fieldsRef.current = {};
-        defaultValuesRef.current = Object.assign({}, (values || defaultValuesRef.current));
-        if (values) {
-            renderWatchedInputs('');
-        }
-        shallowFieldsStateRef.current = shouldUnregister ? {} : Object.assign({}, values) || {};
+        defaultValuesRef.current = cloneObject(values || defaultValuesRef.current);
+        values && renderWatchedInputs('');
         Object.values(resetFieldArrayFunctionRef.current).forEach((resetFieldArray) => isFunction(resetFieldArray) && resetFieldArray());
+        shallowFieldsStateRef.current = shouldUnregister
+            ? {}
+            : cloneObject(values) || {};
         resetRefs(omitResetState);
     };
-    observerRef.current =
-        observerRef.current || !isWeb
-            ? observerRef.current
-            : onDomRemove(fieldsRef, removeFieldEventListenerAndRef);
     React.useEffect(() => {
         isUnMount.current = false;
         resolver && readFormStateRef.current.isValid && validateResolver();
+        observerRef.current =
+            observerRef.current || !isWeb
+                ? observerRef.current
+                : onDomRemove(fieldsRef, removeFieldEventListenerAndRef);
         return () => {
             isUnMount.current = true;
             observerRef.current && observerRef.current.disconnect();
@@ -1240,15 +1266,13 @@ function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_
         register: React.useCallback(register, [defaultValuesRef.current]),
         unregister: React.useCallback(unregister, []),
     };
-    const control = Object.assign({ renderWatchedInputs,
+    const control = Object.assign({ updateWatchedValue,
         shouldUnregister,
         removeFieldEventListener,
         watchInternal, mode: modeRef.current, reValidateMode: {
             isReValidateOnBlur,
             isReValidateOnChange,
         }, fieldsRef,
-        isWatchAllRef,
-        watchFieldsRef,
         resetFieldArrayFunctionRef,
         useWatchFieldsRef,
         useWatchRenderFunctionsRef,
@@ -1334,16 +1358,16 @@ function removeAtIndexes(data, index) {
             delete data[k];
         }
     }
-    return filterOutFalsy(data);
+    return compact(data);
 }
 var removeArrayAt = (data, index) => isUndefined(index)
     ? []
-    : isArray(index)
+    : Array.isArray(index)
         ? removeAtIndexes(data, index)
         : removeAt(data, index);
 
 var moveArrayAt = (data, from, to) => {
-    if (isArray(data)) {
+    if (Array.isArray(data)) {
         if (isUndefined(data[to])) {
             data[to] = undefined;
         }
@@ -1360,18 +1384,18 @@ var swapArrayAt = (data, indexA, indexB) => {
 };
 
 function prepend(data, value) {
-    return [...(isArray(value) ? value : [value || undefined]), ...data];
+    return [...(Array.isArray(value) ? value : [value || undefined]), ...data];
 }
 
 function insert(data, index, value) {
     return [
         ...data.slice(0, index),
-        ...(isArray(value) ? value : [value || undefined]),
+        ...(Array.isArray(value) ? value : [value || undefined]),
         ...data.slice(index),
     ];
 }
 
-var fillEmptyArray = (value) => isArray(value) ? Array(value.length).fill(undefined) : undefined;
+var fillEmptyArray = (value) => Array.isArray(value) ? Array(value.length).fill(undefined) : undefined;
 
 function mapValueToBoolean(value) {
     if (isObject(value)) {
@@ -1383,10 +1407,11 @@ function mapValueToBoolean(value) {
     }
     return [true];
 }
-var filterBooleanArray = (value) => (isArray(value) ? value : [value]).map(mapValueToBoolean).flat();
+var fillBooleanArray = (value) => (Array.isArray(value) ? value : [value])
+    .map(mapValueToBoolean)
+    .flat();
 
-const appendId = (value, keyName) => (Object.assign({ [keyName]: generateId() }, value));
-const mapIds = (data, keyName) => (isArray(data) ? data : []).map((value) => appendId(value, keyName));
+const mapIds = (values, keyName) => values.map((value) => (Object.assign({ [keyName]: generateId() }, value)));
 const useFieldArray = ({ control, name, keyName = 'id', }) => {
     const methods = useFormContext();
     {
@@ -1395,25 +1420,23 @@ const useFieldArray = ({ control, name, keyName = 'id', }) => {
         }
     }
     const focusIndexRef = React.useRef(-1);
-    const { isWatchAllRef, resetFieldArrayFunctionRef, fieldArrayNamesRef, fieldsRef, defaultValuesRef, removeFieldEventListener, formStateRef, formStateRef: { current: { dirtyFields, touched }, }, shallowFieldsStateRef, updateFormState, readFormStateRef, watchFieldsRef, validFieldsRef, fieldsWithValidationRef, fieldArrayDefaultValuesRef, validateResolver, renderWatchedInputs, getValues, shouldUnregister, } = control || methods.control;
+    const { updateWatchedValue, resetFieldArrayFunctionRef, fieldArrayNamesRef, fieldsRef, defaultValuesRef, removeFieldEventListener, formStateRef, shallowFieldsStateRef, updateFormState, readFormStateRef, validFieldsRef, fieldsWithValidationRef, fieldArrayDefaultValuesRef, validateResolver, getValues, shouldUnregister, } = control || methods.control;
     const fieldArrayParentName = getFieldArrayParentName(name);
-    const getDefaultValues = () => [
+    const memoizedDefaultValues = React.useRef([
         ...(get(fieldArrayDefaultValuesRef.current, fieldArrayParentName)
             ? get(fieldArrayDefaultValuesRef.current, name, [])
             : get(shouldUnregister
                 ? defaultValuesRef.current
                 : shallowFieldsStateRef.current, name, [])),
-    ];
-    const memoizedDefaultValues = React.useRef(getDefaultValues());
+    ]);
     const [fields, setFields] = React.useState(mapIds(memoizedDefaultValues.current, keyName));
     const allFields = React.useRef(fields);
-    const getCurrentFieldsValues = () => get(getValues() || {}, name, allFields.current).map((item, index) => (Object.assign(Object.assign({}, allFields.current[index]), item)));
+    const getCurrentFieldsValues = () => get(getValues(), name, allFields.current).map((item, index) => (Object.assign(Object.assign({}, allFields.current[index]), item)));
     allFields.current = fields;
     fieldArrayNamesRef.current.add(name);
     if (!get(fieldArrayDefaultValuesRef.current, fieldArrayParentName)) {
         set(fieldArrayDefaultValuesRef.current, fieldArrayParentName, get(defaultValuesRef.current, fieldArrayParentName));
     }
-    const appendValueWithKey = (values) => values.map((value) => appendId(value, keyName));
     const setFieldAndValidState = (fieldsValues) => {
         setFields(fieldsValues);
         if (readFormStateRef.current.isValid && validateResolver) {
@@ -1431,13 +1454,31 @@ const useFieldArray = ({ control, name, keyName = 'id', }) => {
             }), get(defaultValuesRef.current, name)));
     const resetFields = () => {
         for (const key in fieldsRef.current) {
-            if (isMatchFieldArrayName(key, name) && fieldsRef.current[key]) {
+            isMatchFieldArrayName(key, name) &&
                 removeFieldEventListener(fieldsRef.current[key], true);
+        }
+    };
+    const cleanup = (ref) => !compact(get(ref, name, [])).length && unset(ref, name);
+    const updateDirtyFieldsWithDefaultValues = (updatedFieldArrayValues) => {
+        const defaultFieldArrayValues = get(defaultValuesRef.current, name, []);
+        const updateDirtyFieldsBaseOnDefaultValues = (base, target) => {
+            for (const key in base) {
+                for (const innerKey in base[key]) {
+                    if (innerKey !== keyName &&
+                        (!target[key] ||
+                            !base[key] ||
+                            base[key][innerKey] !== target[key][innerKey])) {
+                        set(formStateRef.current.dirtyFields, `${name}[${key}]`, Object.assign(Object.assign({}, get(formStateRef.current.dirtyFields, `${name}[${key}]`, {})), { [innerKey]: true }));
+                    }
+                }
             }
+        };
+        if (updatedFieldArrayValues) {
+            updateDirtyFieldsBaseOnDefaultValues(defaultFieldArrayValues, updatedFieldArrayValues);
+            updateDirtyFieldsBaseOnDefaultValues(updatedFieldArrayValues, defaultFieldArrayValues);
         }
     };
-    const cleanup = (ref) => !filterOutFalsy(get(ref, name, [])).length && unset(ref, name);
-    const batchStateUpdate = (method, args, isDirty = true, shouldSet = true, shouldUpdateValid = false) => {
+    const batchStateUpdate = (method, args, updatedFieldValues, isDirty = true, shouldSet = true, shouldUpdateValid = false) => {
         if (get(shallowFieldsStateRef.current, name)) {
             const output = method(get(shallowFieldsStateRef.current, name), args.argA, args.argB);
             shouldSet && set(shallowFieldsStateRef.current, name, output);
@@ -1447,21 +1488,23 @@ const useFieldArray = ({ control, name, keyName = 'id', }) => {
             shouldSet && set(fieldArrayDefaultValuesRef.current, name, output);
             cleanup(fieldArrayDefaultValuesRef.current);
         }
-        if (isArray(get(formStateRef.current.errors, name))) {
+        if (Array.isArray(get(formStateRef.current.errors, name))) {
             const output = method(get(formStateRef.current.errors, name), args.argA, args.argB);
             shouldSet && set(formStateRef.current.errors, name, output);
             cleanup(formStateRef.current.errors);
         }
-        if (readFormStateRef.current.touched && get(touched, name)) {
-            const output = method(get(touched, name), args.argA, args.argB);
-            shouldSet && set(touched, name, output);
-            cleanup(touched);
+        if (readFormStateRef.current.touched &&
+            get(formStateRef.current.touched, name)) {
+            const output = method(get(formStateRef.current.touched, name), args.argA, args.argB);
+            shouldSet && set(formStateRef.current.touched, name, output);
+            cleanup(formStateRef.current.touched);
         }
         if (readFormStateRef.current.dirtyFields ||
             readFormStateRef.current.isDirty) {
-            const output = method(get(dirtyFields, name, []), args.argC, args.argD);
-            shouldSet && set(dirtyFields, name, output);
-            cleanup(dirtyFields);
+            const output = method(get(formStateRef.current.dirtyFields, name, []), args.argC, args.argD);
+            shouldSet && set(formStateRef.current.dirtyFields, name, output);
+            updateDirtyFieldsWithDefaultValues(updatedFieldValues);
+            cleanup(formStateRef.current.dirtyFields);
         }
         if (shouldUpdateValid &&
             readFormStateRef.current.isValid &&
@@ -1473,30 +1516,23 @@ const useFieldArray = ({ control, name, keyName = 'id', }) => {
         }
         updateFormState({
             errors: formStateRef.current.errors,
-            dirtyFields,
+            dirtyFields: formStateRef.current.dirtyFields,
             isDirty,
-            touched,
+            touched: formStateRef.current.touched,
         });
     };
     const append = (value, shouldFocus = true) => {
-        setFieldAndValidState([
+        const updateFormValues = [
             ...allFields.current,
-            ...(isArray(value)
-                ? appendValueWithKey(value)
-                : [appendId(value, keyName)]),
-        ]);
+            ...mapIds(Array.isArray(value) ? value : [value], keyName),
+        ];
+        setFieldAndValidState(updateFormValues);
         if (readFormStateRef.current.dirtyFields ||
             readFormStateRef.current.isDirty) {
-            const dirtyInputs = get(dirtyFields, name, []);
-            set(dirtyFields, name, [
-                ...(allFields.current.length > dirtyInputs.length
-                    ? (fillEmptyArray(allFields.current) || []).map((_, index) => dirtyInputs[index])
-                    : dirtyInputs),
-                ...filterBooleanArray(value),
-            ]);
+            updateDirtyFieldsWithDefaultValues(updateFormValues);
             updateFormState({
                 isDirty: true,
-                dirtyFields,
+                dirtyFields: formStateRef.current.dirtyFields,
             });
         }
         if (!shouldUnregister) {
@@ -1509,34 +1545,37 @@ const useFieldArray = ({ control, name, keyName = 'id', }) => {
     };
     const prepend$1 = (value, shouldFocus = true) => {
         const emptyArray = fillEmptyArray(value);
-        setFieldAndValidState(prepend(getCurrentFieldsValues(), isArray(value) ? appendValueWithKey(value) : [appendId(value, keyName)]));
+        const updatedFieldArrayValues = prepend(getCurrentFieldsValues(), mapIds(Array.isArray(value) ? value : [value], keyName));
+        setFieldAndValidState(updatedFieldArrayValues);
         resetFields();
         batchStateUpdate(prepend, {
             argA: emptyArray,
-            argC: filterBooleanArray(value),
-        });
+            argC: fillBooleanArray(value),
+        }, updatedFieldArrayValues);
         focusIndexRef.current = shouldFocus ? 0 : -1;
     };
     const remove = (index) => {
         const fieldValues = getCurrentFieldsValues();
-        setFieldAndValidState(removeArrayAt(fieldValues, index));
+        const updatedFieldValues = removeArrayAt(fieldValues, index);
+        setFieldAndValidState(updatedFieldValues);
         resetFields();
         batchStateUpdate(removeArrayAt, {
             argA: index,
             argC: index,
-        }, getIsDirtyState(removeArrayAt(fieldValues, index)), true, true);
+        }, updatedFieldValues, getIsDirtyState(removeArrayAt(fieldValues, index)), true, true);
     };
     const insert$1 = (index, value, shouldFocus = true) => {
         const emptyArray = fillEmptyArray(value);
         const fieldValues = getCurrentFieldsValues();
-        setFieldAndValidState(insert(fieldValues, index, isArray(value) ? appendValueWithKey(value) : [appendId(value, keyName)]));
+        const updatedFieldArrayValues = insert(fieldValues, index, mapIds(Array.isArray(value) ? value : [value], keyName));
+        setFieldAndValidState(updatedFieldArrayValues);
         resetFields();
         batchStateUpdate(insert, {
             argA: index,
             argB: emptyArray,
             argC: index,
-            argD: filterBooleanArray(value),
-        }, getIsDirtyState(insert(fieldValues, index)));
+            argD: fillBooleanArray(value),
+        }, updatedFieldArrayValues, getIsDirtyState(insert(fieldValues, index)));
         focusIndexRef.current = shouldFocus ? index : -1;
     };
     const swap = (indexA, indexB) => {
@@ -1549,7 +1588,7 @@ const useFieldArray = ({ control, name, keyName = 'id', }) => {
             argB: indexB,
             argC: indexA,
             argD: indexB,
-        }, getIsDirtyState(fieldValues), false);
+        }, undefined, getIsDirtyState(fieldValues), false);
     };
     const move = (from, to) => {
         const fieldValues = getCurrentFieldsValues();
@@ -1561,7 +1600,7 @@ const useFieldArray = ({ control, name, keyName = 'id', }) => {
             argB: to,
             argC: from,
             argD: to,
-        }, getIsDirtyState(fieldValues), false);
+        }, undefined, getIsDirtyState(fieldValues), false);
     };
     const reset = (data) => {
         resetFields();
@@ -1581,20 +1620,7 @@ const useFieldArray = ({ control, name, keyName = 'id', }) => {
             defaultValues.pop();
             set(fieldArrayDefaultValuesRef.current, name, defaultValues);
         }
-        if (isWatchAllRef.current) {
-            updateFormState();
-        }
-        else if (watchFieldsRef) {
-            let shouldRenderUseWatch = true;
-            for (const watchField of watchFieldsRef.current) {
-                if (watchField.startsWith(name)) {
-                    updateFormState();
-                    shouldRenderUseWatch = false;
-                    break;
-                }
-            }
-            shouldRenderUseWatch && renderWatchedInputs(name);
-        }
+        updateWatchedValue(name);
         if (focusIndexRef.current > -1) {
             for (const key in fieldsRef.current) {
                 const field = fieldsRef.current[key];
@@ -1641,7 +1667,7 @@ function useWatch({ control, name, defaultValue, }) {
     const [value, setValue] = React.useState(isUndefined(defaultValue)
         ? isString(name)
             ? get(defaultValuesRef.current, name)
-            : isArray(name)
+            : Array.isArray(name)
                 ? name.reduce((previous, inputName) => (Object.assign(Object.assign({}, previous), { [inputName]: get(defaultValuesRef.current, inputName) })), {})
                 : defaultValuesRef.current
         : defaultValue);
@@ -1649,7 +1675,10 @@ function useWatch({ control, name, defaultValue, }) {
     const defaultValueRef = React.useRef(defaultValue);
     const updateWatchValue = React.useCallback(() => {
         const value = watchInternal(name, defaultValueRef.current, idRef.current);
-        setValue(isObject(value) ? Object.assign({}, value) : isArray(value) ? [...value] : value);
+        setValue(isObject(value)
+            ? Object.assign({}, value) : Array.isArray(value)
+            ? [...value]
+            : value);
     }, [setValue, watchInternal, defaultValueRef, name, idRef]);
     React.useEffect(() => {
         {
@@ -1736,9 +1765,7 @@ const Controller = (_a) => {
             }
         }
     }, [rules, name, register]);
-    React.useEffect(() => () => {
-        !isNameInFieldArray(fieldArrayNamesRef.current, name) && unregister(name);
-    }, [unregister, name, fieldArrayNamesRef]);
+    React.useEffect(() => () => unregister(name), [unregister, name]);
     React.useEffect(() => {
         {
             if (isUndefined(value)) {