react-hook-form 7.22.5 → 7.24.0

package/dist/index.esm.mjs

@@ -2,7 +2,7 @@ import React from 'react';
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
-var isDateObject = (data) => data instanceof Date;
+var isDateObject = (value) => value instanceof Date;
 
 var isNullOrUndefined = (value) => value == null;
 
@@ -22,20 +22,20 @@ var getNodeParentName = (name) => name.substring(0, name.search(/.\d/)) || name;
 
 var isNameInFieldArray = (names, name) => [...names].some((current) => getNodeParentName(name) === current);
 
-var compact = (value) => (value || []).filter(Boolean);
+var compact = (value) => value.filter(Boolean);
 
 var isUndefined = (val) => val === undefined;
 
 var get = (obj, path, defaultValue) => {
-    if (isObject(obj) && path) {
-        const result = compact(path.split(/[,[\].]+?/)).reduce((result, key) => (isNullOrUndefined(result) ? result : result[key]), obj);
-        return isUndefined(result) || result === obj
-            ? isUndefined(obj[path])
-                ? defaultValue
-                : obj[path]
-            : result;
+    if (!path || !isObject(obj)) {
+        return defaultValue;
     }
-    return undefined;
+    const result = compact(path.split(/[,[\].]+?/)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], obj);
+    return isUndefined(result) || result === obj
+        ? isUndefined(obj[path])
+            ? defaultValue
+            : obj[path]
+        : result;
 };
 
 const EVENTS = {
@@ -142,14 +142,20 @@ function useFormState(props) {
         errors: false,
     });
     const _name = React.useRef(name);
+    const _mounted = React.useRef(true);
     _name.current = name;
+    const callback = React.useCallback((value) => _mounted.current &&
+        shouldSubscribeByName(_name.current, value.name, exact) &&
+        shouldRenderFormState(value, _localProxyFormState.current) &&
+        updateFormState(Object.assign(Object.assign({}, control._formState), value)), [control, exact]);
     useSubscribe({
         disabled,
-        callback: (value) => shouldSubscribeByName(_name.current, value.name, exact) &&
-            shouldRenderFormState(value, _localProxyFormState.current) &&
-            updateFormState(Object.assign(Object.assign({}, control._formState), value)),
+        callback,
         subject: control._subjects.state,
     });
+    React.useEffect(() => () => {
+        _mounted.current = false;
+    }, []);
     return getProxyFormState(formState, control._proxyFormState, _localProxyFormState.current, false);
 }
 
@@ -185,21 +191,22 @@ function useWatch(props) {
     const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
     const _name = React.useRef(name);
     _name.current = name;
+    const callback = React.useCallback((formState) => {
+        if (shouldSubscribeByName(_name.current, formState.name, exact)) {
+            const fieldValues = generateWatchOutput(_name.current, control._names, formState.values || control._formValues);
+            updateValue(isUndefined(_name.current) ||
+                (isObject(fieldValues) && !objectHasFunction(fieldValues))
+                ? Object.assign({}, fieldValues) : Array.isArray(fieldValues)
+                ? [...fieldValues]
+                : isUndefined(fieldValues)
+                    ? defaultValue
+                    : fieldValues);
+        }
+    }, [control, exact, defaultValue]);
     useSubscribe({
         disabled,
         subject: control._subjects.watch,
-        callback: (formState) => {
-            if (shouldSubscribeByName(_name.current, formState.name, exact)) {
-                const fieldValues = generateWatchOutput(_name.current, control._names, formState.values || control._formValues);
-                updateValue(isUndefined(_name.current) ||
-                    (isObject(fieldValues) && !objectHasFunction(fieldValues))
-                    ? Object.assign({}, fieldValues) : Array.isArray(fieldValues)
-                    ? [...fieldValues]
-                    : isUndefined(fieldValues)
-                        ? defaultValue
-                        : fieldValues);
-            }
-        },
+        callback,
     });
     const [value, updateValue] = React.useState(isUndefined(defaultValue)
         ? control._getWatch(name)
@@ -224,9 +231,7 @@ function useController(props) {
         control,
         name,
     });
-    const _name = React.useRef(name);
-    _name.current = name;
-    const registerProps = control.register(name, Object.assign(Object.assign({}, props.rules), { value }));
+    const _registerProps = React.useRef(control.register(name, Object.assign(Object.assign({}, props.rules), { value })));
     React.useEffect(() => {
         const updateMounted = (name, value) => {
             const field = get(control._fields, name);
@@ -246,27 +251,27 @@ function useController(props) {
     }, [name, control, isArrayField, shouldUnregister]);
     return {
         field: {
-            onChange: (event) => {
-                registerProps.onChange({
+            name,
+            value,
+            onChange: React.useCallback((event) => {
+                _registerProps.current.onChange({
                     target: {
                         value: getEventValue(event),
                         name: name,
                     },
                     type: EVENTS.CHANGE,
                 });
-            },
-            onBlur: () => {
-                registerProps.onBlur({
+            }, [name]),
+            onBlur: React.useCallback(() => {
+                _registerProps.current.onBlur({
                     target: {
                         value: get(control._formValues, name),
                         name: name,
                     },
                     type: EVENTS.BLUR,
                 });
-            },
-            name,
-            value,
-            ref: (elm) => {
+            }, [name, control]),
+            ref: React.useCallback((elm) => {
                 const field = get(control._fields, name);
                 if (elm && field && elm.focus) {
                     field._f.ref = {
@@ -275,7 +280,7 @@ function useController(props) {
                         reportValidity: () => elm.reportValidity(),
                     };
                 }
-            },
+            }, [name, control]),
         },
         formState,
         fieldState: {
@@ -341,6 +346,14 @@ const focusFieldBy = (fields, callback, fieldsNames) => {
     }
 };
 
+var generateId = () => {
+    const d = typeof performance === 'undefined' ? Date.now() : performance.now() * 1000;
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+        const r = (Math.random() * 16 + d) % 16 | 0;
+        return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16);
+    });
+};
+
 var getFocusFieldName = (name, index, options = {}) => options.shouldFocus || isUndefined(options.shouldFocus)
     ? options.focusName ||
         `${name}.${isUndefined(options.focusIndex) ? index : options.focusIndex}.`
@@ -352,23 +365,8 @@ var isWatched = (name, _names, isBlurEvent) => !isBlurEvent &&
         [..._names.watch].some((watchName) => name.startsWith(watchName) &&
             /^\.\w+/.test(name.slice(watchName.length))));
 
-var mapCurrentIds = (values, _fieldIds, keyName) => values.map((value, index) => {
-    const output = _fieldIds.current[index];
-    return Object.assign(Object.assign({}, value), (output ? { [keyName]: output[keyName] } : {}));
-});
-
-var generateId = () => {
-    const d = typeof performance === 'undefined' ? Date.now() : performance.now() * 1000;
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-        const r = (Math.random() * 16 + d) % 16 | 0;
-        return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16);
-    });
-};
-
-var mapIds = (values = [], keyName) => values.map((value) => (Object.assign(Object.assign({}, (value[keyName] ? {} : { [keyName]: generateId() })), value)));
-
 function append(data, value) {
-    return [...convertToArrayPayload(data), ...convertToArrayPayload(value)];
+    return [...data, ...convertToArrayPayload(value)];
 }
 
 function cloneObject(data) {
@@ -407,18 +405,16 @@ function insert(data, index, value) {
 }
 
 var moveArrayAt = (data, from, to) => {
-    if (Array.isArray(data)) {
-        if (isUndefined(data[to])) {
-            data[to] = undefined;
-        }
-        data.splice(to, 0, data.splice(from, 1)[0]);
-        return data;
+    if (!Array.isArray(data)) {
+        return [];
     }
-    return [];
+    if (isUndefined(data[to])) {
+        data[to] = undefined;
+    }
+    data.splice(to, 0, data.splice(from, 1)[0]);
+    return data;
 };
 
-var omitKeys = (fields, keyName) => fields.map((field = {}) => omit(field, keyName));
-
 function prepend(data, value) {
     return [...convertToArrayPayload(value), ...convertToArrayPayload(data)];
 }
@@ -448,100 +444,110 @@ var updateAt = (fieldValues, index, value) => {
 const useFieldArray = (props) => {
     const methods = useFormContext();
     const { control = methods.control, name, keyName = 'id', shouldUnregister, } = props;
-    const [fields, setFields] = React.useState(mapIds(control._getFieldArray(name), keyName));
+    const [fields, setFields] = React.useState(control._getFieldArray(name));
+    const ids = React.useRef(control._getFieldArray(name).map(generateId));
     const _fieldIds = React.useRef(fields);
     const _name = React.useRef(name);
     const _actioned = React.useRef(false);
     _name.current = name;
     _fieldIds.current = fields;
     control._names.array.add(name);
+    const callback = React.useCallback(({ values, name: fieldArrayName }) => {
+        if (fieldArrayName === _name.current || !fieldArrayName) {
+            const fieldValues = get(values, _name.current, []);
+            setFields(fieldValues);
+            ids.current = fieldValues.map(generateId);
+        }
+    }, []);
     useSubscribe({
-        callback: ({ values, name: fieldArrayName }) => {
-            if (fieldArrayName === _name.current || !fieldArrayName) {
-                setFields(mapIds(get(values, _name.current), keyName));
-            }
-        },
+        callback,
         subject: control._subjects.array,
     });
-    const updateValues = React.useCallback((updatedFieldArrayValuesWithKey) => {
-        const updatedFieldArrayValues = omitKeys(updatedFieldArrayValuesWithKey, keyName);
+    const updateValues = React.useCallback((updatedFieldArrayValues) => {
         _actioned.current = true;
         set(control._formValues, name, updatedFieldArrayValues);
-        return updatedFieldArrayValues;
-    }, [control, name, keyName]);
+    }, [control, name]);
     const append$1 = (value, options) => {
         const appendValue = convertToArrayPayload(cloneObject(value));
-        const updatedFieldArrayValuesWithKey = append(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), mapIds(appendValue, keyName));
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
-        control._names.focus = getFocusFieldName(name, fieldArrayValues.length - 1, options);
-        setFields(updatedFieldArrayValuesWithKey);
+        const updatedFieldArrayValues = append(control._getFieldArray(name), appendValue);
+        control._names.focus = getFocusFieldName(name, updatedFieldArrayValues.length - 1, options);
+        ids.current = append(ids.current, appendValue.map(generateId));
+        setFields(updatedFieldArrayValues);
+        updateValues(updatedFieldArrayValues);
         control._updateFieldArray(name, append, {
             argA: fillEmptyArray(value),
-        }, fieldArrayValues);
+        }, updatedFieldArrayValues);
     };
     const prepend$1 = (value, options) => {
-        const updatedFieldArrayValuesWithKey = prepend(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), mapIds(convertToArrayPayload(cloneObject(value)), keyName));
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
+        const prependValue = convertToArrayPayload(cloneObject(value));
+        const updatedFieldArrayValues = prepend(control._getFieldArray(name), prependValue);
         control._names.focus = getFocusFieldName(name, 0, options);
-        setFields(updatedFieldArrayValuesWithKey);
+        ids.current = prepend(ids.current, prependValue.map(generateId));
+        setFields(updatedFieldArrayValues);
+        updateValues(updatedFieldArrayValues);
         control._updateFieldArray(name, prepend, {
             argA: fillEmptyArray(value),
-        }, fieldArrayValues);
+        }, updatedFieldArrayValues);
     };
     const remove = (index) => {
-        const updatedFieldArrayValuesWithKey = removeArrayAt(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), index);
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
-        setFields(updatedFieldArrayValuesWithKey);
+        const updatedFieldArrayValues = removeArrayAt(control._getFieldArray(name), index);
+        ids.current = removeArrayAt(ids.current, index);
+        setFields(updatedFieldArrayValues);
+        updateValues(updatedFieldArrayValues);
         control._updateFieldArray(name, removeArrayAt, {
             argA: index,
-        }, fieldArrayValues);
+        }, updatedFieldArrayValues);
     };
     const insert$1 = (index, value, options) => {
-        const updatedFieldArrayValuesWithKey = insert(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), index, mapIds(convertToArrayPayload(cloneObject(value)), keyName));
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
+        const insertValue = convertToArrayPayload(cloneObject(value));
+        const updatedFieldArrayValues = insert(control._getFieldArray(name), index, insertValue);
+        updateValues(updatedFieldArrayValues);
         control._names.focus = getFocusFieldName(name, index, options);
-        setFields(updatedFieldArrayValuesWithKey);
+        ids.current = insert(ids.current, index, insertValue.map(generateId));
+        setFields(updatedFieldArrayValues);
         control._updateFieldArray(name, insert, {
             argA: index,
             argB: fillEmptyArray(value),
-        }, fieldArrayValues);
+        }, updatedFieldArrayValues);
     };
     const swap = (indexA, indexB) => {
-        const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
-        swapArrayAt(updatedFieldArrayValuesWithKey, indexA, indexB);
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
-        setFields(updatedFieldArrayValuesWithKey);
+        const updatedFieldArrayValues = control._getFieldArray(name);
+        swapArrayAt(updatedFieldArrayValues, indexA, indexB);
+        swapArrayAt(ids.current, indexA, indexB);
+        setFields(updatedFieldArrayValues);
+        updateValues(updatedFieldArrayValues);
         control._updateFieldArray(name, swapArrayAt, {
             argA: indexA,
             argB: indexB,
-        }, fieldArrayValues, false);
+        }, updatedFieldArrayValues, false);
     };
     const move = (from, to) => {
-        const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
-        moveArrayAt(updatedFieldArrayValuesWithKey, from, to);
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
-        setFields(updatedFieldArrayValuesWithKey);
+        const updatedFieldArrayValues = control._getFieldArray(name);
+        moveArrayAt(updatedFieldArrayValues, from, to);
+        moveArrayAt(ids.current, from, to);
+        setFields(updatedFieldArrayValues);
+        updateValues(updatedFieldArrayValues);
         control._updateFieldArray(name, moveArrayAt, {
             argA: from,
             argB: to,
-        }, fieldArrayValues, false);
+        }, updatedFieldArrayValues, false);
     };
     const update = (index, value) => {
-        const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
-        const updatedFieldArrayValues = updateAt(updatedFieldArrayValuesWithKey, index, value);
-        _fieldIds.current = mapIds(updatedFieldArrayValues, keyName);
-        const fieldArrayValues = updateValues(_fieldIds.current);
-        setFields(_fieldIds.current);
+        const updatedFieldArrayValues = updateAt(control._getFieldArray(name), index, value);
+        ids.current = [...updatedFieldArrayValues].map((item, i) => !item || i === index ? generateId() : ids.current[i]);
+        setFields([...updatedFieldArrayValues]);
+        updateValues(updatedFieldArrayValues);
         control._updateFieldArray(name, updateAt, {
             argA: index,
             argB: value,
-        }, fieldArrayValues, true, false, false);
+        }, updatedFieldArrayValues, true, false);
     };
     const replace = (value) => {
-        const updatedFieldArrayValuesWithKey = mapIds(convertToArrayPayload(value), keyName);
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
-        setFields(updatedFieldArrayValuesWithKey);
-        control._updateFieldArray(name, () => updatedFieldArrayValuesWithKey, {}, fieldArrayValues, true, false, false);
+        const updatedFieldArrayValues = convertToArrayPayload(value);
+        ids.current = updatedFieldArrayValues.map(generateId);
+        updateValues([...updatedFieldArrayValues]);
+        setFields([...updatedFieldArrayValues]);
+        control._updateFieldArray(name, () => updatedFieldArrayValues, {}, [...updatedFieldArrayValues], true, false);
     };
     React.useEffect(() => {
         control._stateFlags.action = false;
@@ -565,25 +571,24 @@ const useFieldArray = (props) => {
             focusFieldBy(control._fields, (key) => key.startsWith(control._names.focus));
         control._names.focus = '';
         control._proxyFormState.isValid && control._updateValid();
-    }, [fields, name, control, keyName]);
+    }, [fields, name, control]);
     React.useEffect(() => {
         !get(control._formValues, name) && set(control._formValues, name, []);
         return () => {
-            if (control._options.shouldUnregister || shouldUnregister) {
+            (control._options.shouldUnregister || shouldUnregister) &&
                 control.unregister(name);
-            }
         };
     }, [name, control, keyName, shouldUnregister]);
     return {
-        swap: React.useCallback(swap, [updateValues, name, control, keyName]),
-        move: React.useCallback(move, [updateValues, name, control, keyName]),
-        prepend: React.useCallback(prepend$1, [updateValues, name, control, keyName]),
-        append: React.useCallback(append$1, [updateValues, name, control, keyName]),
-        remove: React.useCallback(remove, [updateValues, name, control, keyName]),
-        insert: React.useCallback(insert$1, [updateValues, name, control, keyName]),
-        update: React.useCallback(update, [updateValues, name, control, keyName]),
-        replace: React.useCallback(replace, [updateValues, name, control, keyName]),
-        fields: fields,
+        swap: React.useCallback(swap, [updateValues, name, control]),
+        move: React.useCallback(move, [updateValues, name, control]),
+        prepend: React.useCallback(prepend$1, [updateValues, name, control]),
+        append: React.useCallback(append$1, [updateValues, name, control]),
+        remove: React.useCallback(remove, [updateValues, name, control]),
+        insert: React.useCallback(insert$1, [updateValues, name, control]),
+        update: React.useCallback(update, [updateValues, name, control]),
+        replace: React.useCallback(replace, [updateValues, name, control]),
+        fields: React.useMemo(() => fields.map((field, index) => (Object.assign(Object.assign({}, field), { [keyName]: ids.current[index] || generateId() }))), [fields, keyName]),
     };
 };
 
@@ -672,7 +677,7 @@ var isWeb = typeof window !== 'undefined' &&
     typeof window.HTMLElement !== 'undefined' &&
     typeof document !== 'undefined';
 
-var live = (ref) => isHTMLElement(ref) && document.contains(ref);
+var live = (ref) => isHTMLElement(ref) && ref.isConnected;
 
 function baseGet(object, updatePath) {
     const length = updatePath.slice(0, -1).length;
@@ -1138,24 +1143,25 @@ function createFormControl(props = {}) {
         }
         return isValid;
     };
-    const _updateFieldArray = (name, method, args, values = [], shouldSetValues = true, shouldSetFields = true, shouldSetError = true) => {
+    const _updateFieldArray = (name, method, args, values = [], shouldSetValues = true, shouldSetFields = true) => {
         _stateFlags.action = true;
-        if (shouldSetFields && get(_fields, name)) {
+        if (shouldSetFields && Array.isArray(get(_fields, name))) {
             const fieldValues = method(get(_fields, name), args.argA, args.argB);
             shouldSetValues && set(_fields, name, fieldValues);
         }
-        if (shouldSetError && Array.isArray(get(_formState.errors, name))) {
+        if (_proxyFormState.errors &&
+            shouldSetFields &&
+            Array.isArray(get(_formState.errors, name))) {
             const errors = method(get(_formState.errors, name), args.argA, args.argB);
             shouldSetValues && set(_formState.errors, name, errors);
             unsetEmptyArray(_formState.errors, name);
         }
-        if (_proxyFormState.touchedFields && get(_formState.touchedFields, name)) {
+        if (_proxyFormState.touchedFields &&
+            Array.isArray(get(_formState.touchedFields, name))) {
             const touchedFields = method(get(_formState.touchedFields, name), args.argA, args.argB);
-            shouldSetValues &&
-                set(_formState.touchedFields, name, touchedFields);
-            unsetEmptyArray(_formState.touchedFields, name);
+            shouldSetValues && set(_formState.touchedFields, name, touchedFields);
         }
-        if (_proxyFormState.dirtyFields || _proxyFormState.isDirty) {
+        if (_proxyFormState.dirtyFields) {
             _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
         }
         _subjects.state.next({
@@ -1169,19 +1175,19 @@ function createFormControl(props = {}) {
         _subjects.state.next({
             errors: _formState.errors,
         }));
-    const updateValidAndValue = (name, shouldSkipSetValueAs, ref) => {
+    const updateValidAndValue = (name, shouldSkipSetValueAs, value, ref) => {
         const field = get(_fields, name);
         if (field) {
-            const defaultValue = get(_formValues, name, get(_defaultValues, name));
+            const defaultValue = get(_formValues, name, isUndefined(value) ? get(_defaultValues, name) : value);
             isUndefined(defaultValue) ||
                 (ref && ref.defaultChecked) ||
                 shouldSkipSetValueAs
                 ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f))
                 : setFieldValue(name, defaultValue);
+            _stateFlags.mount && _updateValid();
         }
-        _stateFlags.mount && _updateValid();
     };
-    const updateTouchAndDirty = (name, fieldValue, isCurrentTouched, shouldRender = true) => {
+    const updateTouchAndDirty = (name, fieldValue, isBlurEvent, shouldDirty, shouldRender) => {
         let isFieldDirty = false;
         const output = {
             name,
@@ -1192,7 +1198,7 @@ function createFormControl(props = {}) {
             _formState.isDirty = output.isDirty = _getDirty();
             isFieldDirty = isPreviousFormDirty !== output.isDirty;
         }
-        if (_proxyFormState.dirtyFields && !isCurrentTouched) {
+        if (_proxyFormState.dirtyFields && (!isBlurEvent || shouldDirty)) {
             const isPreviousFieldDirty = get(_formState.dirtyFields, name);
             const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
             isCurrentFieldPristine
@@ -1203,13 +1209,13 @@ function createFormControl(props = {}) {
                 isFieldDirty ||
                     isPreviousFieldDirty !== get(_formState.dirtyFields, name);
         }
-        if (isCurrentTouched && !isPreviousFieldTouched) {
-            set(_formState.touchedFields, name, isCurrentTouched);
+        if (isBlurEvent && !isPreviousFieldTouched) {
+            set(_formState.touchedFields, name, isBlurEvent);
             output.touchedFields = _formState.touchedFields;
             isFieldDirty =
                 isFieldDirty ||
                     (_proxyFormState.touchedFields &&
-                        isPreviousFieldTouched !== isCurrentTouched);
+                        isPreviousFieldTouched !== isBlurEvent);
         }
         isFieldDirty && shouldRender && _subjects.state.next(output);
         return isFieldDirty ? output : {};
@@ -1335,7 +1341,8 @@ function createFormControl(props = {}) {
                             ? fieldReference.refs.forEach((checkboxRef) => (checkboxRef.checked = Array.isArray(fieldValue)
                                 ? !!fieldValue.find((data) => data === checkboxRef.value)
                                 : fieldValue === checkboxRef.value))
-                            : (fieldReference.refs[0].checked = !!fieldValue);
+                            : fieldReference.refs[0] &&
+                                (fieldReference.refs[0].checked = !!fieldValue);
                     }
                     else {
                         fieldReference.refs.forEach((radioRef) => (radioRef.checked = radioRef.value === fieldValue));
@@ -1352,7 +1359,7 @@ function createFormControl(props = {}) {
             }
         }
         (options.shouldDirty || options.shouldTouch) &&
-            updateTouchAndDirty(name, fieldValue, options.shouldTouch);
+            updateTouchAndDirty(name, fieldValue, options.shouldTouch, options.shouldDirty, true);
         options.shouldValidate && trigger(name);
     };
     const setValues = (name, value, options) => {
@@ -1414,13 +1421,13 @@ function createFormControl(props = {}) {
                 !field._f.deps) ||
                 skipValidation(isBlurEvent, get(_formState.touchedFields, name), _formState.isSubmitted, validationModeAfterSubmit, validationModeBeforeSubmit);
             const watched = isWatched(name, _names, isBlurEvent);
+            set(_formValues, name, fieldValue);
             if (isBlurEvent) {
                 field._f.onBlur && field._f.onBlur(event);
             }
             else if (field._f.onChange) {
                 field._f.onChange(event);
             }
-            set(_formValues, name, fieldValue);
             const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent, false);
             const shouldRender = !isEmptyObject(fieldState) || watched;
             !isBlurEvent &&
@@ -1501,7 +1508,6 @@ function createFormControl(props = {}) {
             : (_formState.errors = {});
         _subjects.state.next({
             errors: _formState.errors,
-            isValid: true,
         });
     };
     const setError = (name, error, options) => {
@@ -1542,20 +1548,18 @@ function createFormControl(props = {}) {
     };
     const register = (name, options = {}) => {
         let field = get(_fields, name);
+        const disabledIsDefined = isBoolean(options.disabled);
         set(_fields, name, {
             _f: Object.assign(Object.assign(Object.assign({}, (field && field._f ? field._f : { ref: { name } })), { name, mount: true }), options),
         });
         _names.mount.add(name);
-        !isUndefined(options.value) &&
-            !options.disabled &&
-            set(_formValues, name, get(_formValues, name, options.value));
         field
-            ? isBoolean(options.disabled) &&
+            ? disabledIsDefined &&
                 set(_formValues, name, options.disabled
                     ? undefined
                     : get(_formValues, name, getFieldValue(field._f)))
-            : updateValidAndValue(name, true);
-        return Object.assign(Object.assign(Object.assign({}, (isBoolean(options.disabled) ? { disabled: options.disabled } : {})), (_options.shouldUseNativeValidation
+            : updateValidAndValue(name, true, options.value);
+        return Object.assign(Object.assign(Object.assign({}, (disabledIsDefined ? { disabled: options.disabled } : {})), (_options.shouldUseNativeValidation
             ? {
                 required: !!options.required,
                 min: getRuleValue(options.min),
@@ -1575,16 +1579,21 @@ function createFormControl(props = {}) {
                             : ref
                         : ref;
                     const radioOrCheckbox = isRadioOrCheckbox(fieldRef);
-                    if (fieldRef === field._f.ref ||
-                        (radioOrCheckbox &&
-                            compact(field._f.refs).find((option) => option === fieldRef))) {
+                    const refs = field._f.refs || [];
+                    if (radioOrCheckbox
+                        ? refs.find((option) => option === fieldRef)
+                        : fieldRef === field._f.ref) {
                         return;
                     }
                     set(_fields, name, {
-                        _f: radioOrCheckbox
-                            ? Object.assign(Object.assign({}, field._f), { refs: [...compact(field._f.refs).filter(live), fieldRef], ref: { type: fieldRef.type, name } }) : Object.assign(Object.assign({}, field._f), { ref: fieldRef }),
+                        _f: Object.assign(Object.assign({}, field._f), (radioOrCheckbox
+                            ? {
+                                refs: refs.concat(fieldRef).filter(live),
+                                ref: { type: fieldRef.type, name },
+                            }
+                            : { ref: fieldRef })),
                     });
-                    updateValidAndValue(name, false, fieldRef);
+                    updateValidAndValue(name, false, undefined, fieldRef);
                 }
                 else {
                     field = get(_fields, name, {});
@@ -1648,27 +1657,29 @@ function createFormControl(props = {}) {
         }
     };
     const resetField = (name, options = {}) => {
-        if (isUndefined(options.defaultValue)) {
-            setValue(name, get(_defaultValues, name));
-        }
-        else {
-            setValue(name, options.defaultValue);
-            set(_defaultValues, name, options.defaultValue);
-        }
-        if (!options.keepTouched) {
-            unset(_formState.touchedFields, name);
-        }
-        if (!options.keepDirty) {
-            unset(_formState.dirtyFields, name);
-            _formState.isDirty = options.defaultValue
-                ? _getDirty(name, get(_defaultValues, name))
-                : _getDirty();
-        }
-        if (!options.keepError) {
-            unset(_formState.errors, name);
-            _proxyFormState.isValid && _updateValid();
+        if (get(_fields, name)) {
+            if (isUndefined(options.defaultValue)) {
+                setValue(name, get(_defaultValues, name));
+            }
+            else {
+                setValue(name, options.defaultValue);
+                set(_defaultValues, name, options.defaultValue);
+            }
+            if (!options.keepTouched) {
+                unset(_formState.touchedFields, name);
+            }
+            if (!options.keepDirty) {
+                unset(_formState.dirtyFields, name);
+                _formState.isDirty = options.defaultValue
+                    ? _getDirty(name, get(_defaultValues, name))
+                    : _getDirty();
+            }
+            if (!options.keepError) {
+                unset(_formState.errors, name);
+                _proxyFormState.isValid && _updateValid();
+            }
+            _subjects.state.next(Object.assign({}, _formState));
         }
-        _subjects.state.next(Object.assign({}, _formState));
     };
     const reset = (formValues, keepStateOptions = {}) => {
         const updatedValues = formValues || _defaultValues;
@@ -1843,14 +1854,15 @@ function useForm(props = {}) {
         _formControl.current = Object.assign(Object.assign({}, createFormControl(props)), { formState });
     }
     const control = _formControl.current.control;
+    const callback = React.useCallback((value) => {
+        if (shouldRenderFormState(value, control._proxyFormState, true)) {
+            control._formState = Object.assign(Object.assign({}, control._formState), value);
+            updateFormState(Object.assign({}, control._formState));
+        }
+    }, [control]);
     useSubscribe({
         subject: control._subjects.state,
-        callback: (value) => {
-            if (shouldRenderFormState(value, control._proxyFormState, true)) {
-                control._formState = Object.assign(Object.assign({}, control._formState), value);
-                updateFormState(Object.assign({}, control._formState));
-            }
-        },
+        callback,
     });
     React.useEffect(() => {
         if (!control._stateFlags.mount) {