react-hook-form 7.19.5 → 7.20.3

package/dist/index.esm.js

@@ -12,7 +12,7 @@ var isObject = (value) => !isNullOrUndefined(value) &&
     isObjectType(value) &&
     !isDateObject(value);
 
-var getControllerValue = (event) => isObject(event) && event.target
+var getEventValue = (event) => isObject(event) && event.target
     ? isCheckBoxInput(event.target)
         ? event.target.checked
         : event.target.value
@@ -103,49 +103,35 @@ var shouldRenderFormState = (formStateData, _proxyFormState, isRoot) => {
 
 var convertToArrayPayload = (value) => (Array.isArray(value) ? value : [value]);
 
-var shouldSubscribeByName = (name, signalName) => !name ||
-    !signalName ||
-    name === signalName ||
-    convertToArrayPayload(name).some((currentName) => currentName &&
-        (currentName.startsWith(signalName) ||
-            signalName.startsWith(currentName)));
-
-const tearDown = (_subscription) => {
-    if (_subscription.current) {
-        _subscription.current.unsubscribe();
-        _subscription.current = undefined;
-    }
-};
-const updateSubscriptionProps = ({ _subscription, _props }) => {
-    if (_props.current.disabled) {
-        tearDown(_subscription);
-    }
-    else if (!_subscription.current) {
-        _subscription.current = _props.current.subject.subscribe({
-            next: _props.current.callback,
-        });
-    }
-};
+var shouldSubscribeByName = (name, signalName, exact) => exact && signalName
+    ? name === signalName
+    : !name ||
+        !signalName ||
+        name === signalName ||
+        convertToArrayPayload(name).some((currentName) => currentName &&
+            (currentName.startsWith(signalName) ||
+                signalName.startsWith(currentName)));
+
 function useSubscribe(props) {
-    const _subscription = React.useRef();
     const _props = React.useRef(props);
     _props.current = props;
-    updateSubscriptionProps({
-        _subscription,
-        _props,
-    });
     React.useEffect(() => {
-        updateSubscriptionProps({
-            _subscription,
-            _props,
-        });
-        return () => tearDown(_subscription);
-    }, []);
+        const tearDown = (subscription) => {
+            if (subscription) {
+                subscription.unsubscribe();
+            }
+        };
+        const subscription = !props.disabled &&
+            _props.current.subject.subscribe({
+                next: _props.current.callback,
+            });
+        return () => tearDown(subscription);
+    }, [props.disabled]);
 }
 
 function useFormState(props) {
     const methods = useFormContext();
-    const { control = methods.control, disabled, name } = props || {};
+    const { control = methods.control, disabled, name, exact } = props || {};
     const [formState, updateFormState] = React.useState(control._formState);
     const _localProxyFormState = React.useRef({
         isDirty: false,
@@ -159,9 +145,9 @@ function useFormState(props) {
     _name.current = name;
     useSubscribe({
         disabled,
-        callback: (formState) => shouldSubscribeByName(_name.current, formState.name) &&
-            shouldRenderFormState(formState, _localProxyFormState.current) &&
-            updateFormState(Object.assign(Object.assign({}, control._formState), formState)),
+        callback: (value) => shouldSubscribeByName(_name.current, value.name, exact) &&
+            shouldRenderFormState(value, _localProxyFormState.current) &&
+            updateFormState(Object.assign(Object.assign({}, control._formState), value)),
         subject: control._subjects.state,
     });
     return getProxyFormState(formState, control._proxyFormState, _localProxyFormState.current, false);
@@ -169,7 +155,7 @@ function useFormState(props) {
 
 var isString = (value) => typeof value === 'string';
 
-function generateWatchOutput(names, _names, formValues, isGlobal) {
+var generateWatchOutput = (names, _names, formValues, isGlobal) => {
     const isArray = Array.isArray(names);
     if (isString(names)) {
         isGlobal && _names.watch.add(names);
@@ -181,20 +167,32 @@ function generateWatchOutput(names, _names, formValues, isGlobal) {
     }
     isGlobal && (_names.watchAll = true);
     return formValues;
-}
+};
+
+var isFunction = (value) => typeof value === 'function';
+
+var objectHasFunction = (data) => {
+    for (const key in data) {
+        if (isFunction(data[key])) {
+            return true;
+        }
+    }
+    return false;
+};
 
 function useWatch(props) {
     const methods = useFormContext();
-    const { control = methods.control, name, defaultValue, disabled, } = props || {};
+    const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
     const _name = React.useRef(name);
     _name.current = name;
     useSubscribe({
         disabled,
         subject: control._subjects.watch,
         callback: (formState) => {
-            if (shouldSubscribeByName(_name.current, formState.name)) {
+            if (shouldSubscribeByName(_name.current, formState.name, exact)) {
                 const fieldValues = generateWatchOutput(_name.current, control._names, formState.values || control._formValues);
-                updateValue(isUndefined(_name.current)
+                updateValue(isUndefined(_name.current) ||
+                    (isObject(fieldValues) && !objectHasFunction(fieldValues))
                     ? Object.assign({}, fieldValues) : Array.isArray(fieldValues)
                     ? [...fieldValues]
                     : fieldValues);
@@ -213,10 +211,12 @@ function useWatch(props) {
 function useController(props) {
     const methods = useFormContext();
     const { name, control = methods.control, shouldUnregister } = props;
+    const isArrayField = isNameInFieldArray(control._names.array, name);
     const value = useWatch({
         control,
         name,
         defaultValue: get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)),
+        exact: !isArrayField,
     });
     const formState = useFormState({
         control,
@@ -235,7 +235,7 @@ function useController(props) {
         updateMounted(name, true);
         return () => {
             const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
-            if (isNameInFieldArray(control._names.array, name)
+            if (isArrayField
                 ? _shouldUnregisterField && !control._stateFlags.action
                 : _shouldUnregisterField) {
                 control.unregister(name, { keepDefaultValue: true });
@@ -244,13 +244,13 @@ function useController(props) {
                 updateMounted(name, false);
             }
         };
-    }, [name, control, shouldUnregister]);
+    }, [name, control, isArrayField, shouldUnregister]);
     return {
         field: {
             onChange: (event) => {
                 registerProps.onChange({
                     target: {
-                        value: getControllerValue(event),
+                        value: getEventValue(event),
                         name: name,
                     },
                     type: EVENTS.CHANGE,
@@ -259,7 +259,7 @@ function useController(props) {
             onBlur: () => {
                 registerProps.onBlur({
                     target: {
-                        value,
+                        value: get(control._formValues, name),
                         name: name,
                     },
                     type: EVENTS.BLUR,
@@ -347,6 +347,12 @@ var getFocusFieldName = (name, index, options = {}) => options.shouldFocus || is
         `${name}.${isUndefined(options.focusIndex) ? index : options.focusIndex}.`
     : '';
 
+var isWatched = (name, _names, isBlurEvent) => !isBlurEvent &&
+    (_names.watchAll ||
+        _names.watch.has(name) ||
+        [..._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] } : {}));
@@ -442,44 +448,44 @@ const useFieldArray = (props) => {
     const append$1 = (value, options) => {
         const appendValue = convertToArrayPayload(value);
         const updatedFieldArrayValuesWithKey = append(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), mapIds(appendValue, keyName));
+        setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, append, {
             argA: fillEmptyArray(value),
         }, updateValues(updatedFieldArrayValuesWithKey));
-        setFields(updatedFieldArrayValuesWithKey);
         control._names.focus = getFocusFieldName(name, updatedFieldArrayValuesWithKey.length - appendValue.length, options);
     };
     const prepend$1 = (value, options) => {
         const updatedFieldArrayValuesWithKey = prepend(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), mapIds(convertToArrayPayload(value), keyName));
+        setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, prepend, {
             argA: fillEmptyArray(value),
         }, updateValues(updatedFieldArrayValuesWithKey));
-        setFields(updatedFieldArrayValuesWithKey);
         control._names.focus = getFocusFieldName(name, 0, options);
     };
     const remove = (index) => {
         const updatedFieldArrayValuesWithKey = removeArrayAt(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), index);
+        setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, removeArrayAt, {
             argA: index,
         }, updateValues(updatedFieldArrayValuesWithKey));
-        setFields(updatedFieldArrayValuesWithKey);
     };
     const insert$1 = (index, value, options) => {
         const updatedFieldArrayValuesWithKey = insert(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), index, mapIds(convertToArrayPayload(value), keyName));
+        setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, insert, {
             argA: index,
             argB: fillEmptyArray(value),
         }, updateValues(updatedFieldArrayValuesWithKey));
-        setFields(updatedFieldArrayValuesWithKey);
         control._names.focus = getFocusFieldName(name, index, options);
     };
     const swap = (indexA, indexB) => {
         const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
         swapArrayAt(updatedFieldArrayValuesWithKey, indexA, indexB);
+        setFields(updatedFieldArrayValuesWithKey);
         control._updateFieldArray(name, swapArrayAt, {
             argA: indexA,
             argB: indexB,
         }, updateValues(updatedFieldArrayValuesWithKey), false);
-        setFields(updatedFieldArrayValuesWithKey);
     };
     const move = (from, to) => {
         const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
@@ -494,30 +500,20 @@ const useFieldArray = (props) => {
         const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
         const updatedFieldArrayValues = updateAt(updatedFieldArrayValuesWithKey, index, value);
         _fieldIds.current = mapIds(updatedFieldArrayValues, keyName);
+        setFields(_fieldIds.current);
         control._updateFieldArray(name, updateAt, {
             argA: index,
             argB: value,
         }, updateValues(_fieldIds.current), true, false);
-        setFields(_fieldIds.current);
     };
     const replace = (value) => {
         const updatedFieldArrayValuesWithKey = mapIds(convertToArrayPayload(value), keyName);
-        control._updateFieldArray(name, () => updatedFieldArrayValuesWithKey, {}, updateValues(updatedFieldArrayValuesWithKey), true, false);
         setFields(updatedFieldArrayValuesWithKey);
+        control._updateFieldArray(name, () => updatedFieldArrayValuesWithKey, {}, updateValues(updatedFieldArrayValuesWithKey), true, false);
     };
     React.useEffect(() => {
         control._stateFlags.action = false;
-        if (control._names.watchAll) {
-            control._subjects.state.next({});
-        }
-        else {
-            for (const watchField of control._names.watch) {
-                if (name.startsWith(watchField)) {
-                    control._subjects.state.next({});
-                    break;
-                }
-            }
-        }
+        isWatched(name, control._names) && control._subjects.state.next({});
         if (_actioned.current) {
             control._executeSchema([name]).then((result) => {
                 const error = get(result.errors, name);
@@ -559,8 +555,6 @@ const useFieldArray = (props) => {
     };
 };
 
-var isFunction = (value) => typeof value === 'function';
-
 function cloneObject(data) {
     let copy;
     const isArray = Array.isArray(data);
@@ -620,6 +614,9 @@ function deepEqual(object1, object2) {
     if (isPrimitive(object1) || isPrimitive(object2)) {
         return object1 === object2;
     }
+    if (!isNaN(object1) || !isNaN(object2)) {
+        return +object1 === +object2;
+    }
     if (isDateObject(object1) && isDateObject(object2)) {
         return object1.getTime() === object2.getTime();
     }
@@ -712,6 +709,47 @@ function unset(object, path) {
     return object;
 }
 
+function markFieldsDirty(data, fields = {}) {
+    const isParentNodeArray = Array.isArray(data);
+    if (isObject(data) || isParentNodeArray) {
+        for (const key in data) {
+            if (Array.isArray(data[key]) ||
+                (isObject(data[key]) && !objectHasFunction(data[key]))) {
+                fields[key] = Array.isArray(data[key]) ? [] : {};
+                markFieldsDirty(data[key], fields[key]);
+            }
+            else if (!isNullOrUndefined(data[key])) {
+                fields[key] = true;
+            }
+        }
+    }
+    return fields;
+}
+function getDirtyFieldsFromDefaultValues(data, formValues, dirtyFieldsFromValues) {
+    const isParentNodeArray = Array.isArray(data);
+    if (isObject(data) || isParentNodeArray) {
+        for (const key in data) {
+            if (Array.isArray(data[key]) ||
+                (isObject(data[key]) && !objectHasFunction(data[key]))) {
+                if (isUndefined(formValues) ||
+                    isPrimitive(dirtyFieldsFromValues[key])) {
+                    dirtyFieldsFromValues[key] = Array.isArray(data[key])
+                        ? markFieldsDirty(data[key], [])
+                        : Object.assign({}, markFieldsDirty(data[key]));
+                }
+                else {
+                    getDirtyFieldsFromDefaultValues(data[key], isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
+                }
+            }
+            else {
+                dirtyFieldsFromValues[key] = !deepEqual(data[key], formValues[key]);
+            }
+        }
+    }
+    return dirtyFieldsFromValues;
+}
+var getDirtyFields = (defaultValues, formValues) => getDirtyFieldsFromDefaultValues(defaultValues, formValues, markFieldsDirty(formValues));
+
 const defaultResult = {
     value: false,
     isValid: false,
@@ -834,49 +872,6 @@ function schemaErrorLookup(errors, _fields, name) {
     };
 }
 
-function deepMerge(target, source) {
-    if (isPrimitive(target) || isPrimitive(source)) {
-        return source;
-    }
-    for (const key in source) {
-        const targetValue = target[key];
-        const sourceValue = source[key];
-        try {
-            target[key] =
-                (isObject(targetValue) && isObject(sourceValue)) ||
-                    (Array.isArray(targetValue) && Array.isArray(sourceValue))
-                    ? deepMerge(targetValue, sourceValue)
-                    : sourceValue;
-        }
-        catch (_a) { }
-    }
-    return target;
-}
-
-function setDirtyFields(values, defaultValues, dirtyFields, parentNode, parentName) {
-    let index = -1;
-    while (++index < values.length) {
-        for (const key in values[index]) {
-            if (Array.isArray(values[index][key])) {
-                !dirtyFields[index] && (dirtyFields[index] = {});
-                dirtyFields[index][key] = [];
-                setDirtyFields(values[index][key], get(defaultValues[index] || {}, key, []), dirtyFields[index][key], dirtyFields[index], key);
-            }
-            else {
-                !isNullOrUndefined(defaultValues) &&
-                    deepEqual(get(defaultValues[index] || {}, key), values[index][key])
-                    ? set(dirtyFields[index] || {}, key)
-                    : (dirtyFields[index] = Object.assign(Object.assign({}, dirtyFields[index]), { [key]: true }));
-            }
-        }
-        parentNode &&
-            !dirtyFields.length &&
-            delete parentNode[parentName];
-    }
-    return dirtyFields;
-}
-var setFieldArrayDirtyFields = (values, defaultValues, dirtyFields) => deepMerge(setDirtyFields(values, defaultValues, dirtyFields.slice(0, values.length)), setDirtyFields(defaultValues, values, dirtyFields.slice(0, values.length)));
-
 var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode) => {
     if (mode.isOnAll) {
         return false;
@@ -893,8 +888,6 @@ var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode)
     return true;
 };
 
-var unsetEmptyArray = (ref, name) => !compact(get(ref, name, [])).length && unset(ref, name);
-
 var isMessage = (value) => isString(value) || React.isValidElement(value);
 
 var isRegex = (value) => value instanceof RegExp;
@@ -924,7 +917,7 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
         return {};
     }
     const inputRef = refs ? refs[0] : ref;
-    const setCustomValidty = (message) => {
+    const setCustomValidity = (message) => {
         if (shouldUseNativeValidation && inputRef.reportValidity) {
             inputRef.setCustomValidity(isBoolean(message) ? '' : message || ' ');
             inputRef.reportValidity();
@@ -954,7 +947,7 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
         if (value) {
             error[name] = Object.assign({ type: INPUT_VALIDATION_RULES.required, message, ref: inputRef }, appendErrorsCurry(INPUT_VALIDATION_RULES.required, message));
             if (!validateAllFieldCriteria) {
-                setCustomValidty(message);
+                setCustomValidity(message);
                 return error;
             }
         }
@@ -985,7 +978,7 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
         if (exceedMax || exceedMin) {
             getMinMaxMessage(!!exceedMax, maxOutput.message, minOutput.message, INPUT_VALIDATION_RULES.max, INPUT_VALIDATION_RULES.min);
             if (!validateAllFieldCriteria) {
-                setCustomValidty(error[name].message);
+                setCustomValidity(error[name].message);
                 return error;
             }
         }
@@ -1000,7 +993,7 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
         if (exceedMax || exceedMin) {
             getMinMaxMessage(exceedMax, maxLengthOutput.message, minLengthOutput.message);
             if (!validateAllFieldCriteria) {
-                setCustomValidty(error[name].message);
+                setCustomValidity(error[name].message);
                 return error;
             }
         }
@@ -1011,7 +1004,7 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
             error[name] = Object.assign({ type: INPUT_VALIDATION_RULES.pattern, message,
                 ref }, appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message));
             if (!validateAllFieldCriteria) {
-                setCustomValidty(message);
+                setCustomValidity(message);
                 return error;
             }
         }
@@ -1023,7 +1016,7 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
             if (validateError) {
                 error[name] = Object.assign(Object.assign({}, validateError), appendErrorsCurry(INPUT_VALIDATION_RULES.validate, validateError.message));
                 if (!validateAllFieldCriteria) {
-                    setCustomValidty(validateError.message);
+                    setCustomValidity(validateError.message);
                     return error;
                 }
             }
@@ -1037,7 +1030,7 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
                 const validateError = getValidateError(await validate[key](inputValue), inputRef, key);
                 if (validateError) {
                     validationResult = Object.assign(Object.assign({}, validateError), appendErrorsCurry(key, validateError.message));
-                    setCustomValidty(validateError.message);
+                    setCustomValidity(validateError.message);
                     if (validateAllFieldCriteria) {
                         error[name] = validationResult;
                     }
@@ -1051,7 +1044,7 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
             }
         }
     }
-    setCustomValidty(true);
+    setCustomValidity(true);
     return error;
 };
 
@@ -1114,10 +1107,6 @@ function createFormControl(props = {}) {
         clearTimeout(timer);
         timer = window.setTimeout(() => callback(...args), wait);
     };
-    const isFieldWatched = (name, isBlurEvent) => !isBlurEvent &&
-        (_names.watchAll ||
-            _names.watch.has(name) ||
-            _names.watch.has((name.match(/\w+/) || [])[0]));
     const _updateValid = async (shouldSkipRender) => {
         let isValid = false;
         if (_proxyFormState.isValid) {
@@ -1142,16 +1131,14 @@ function createFormControl(props = {}) {
         if (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)) {
             const touchedFields = method(get(_formState.touchedFields, name), args.argA, args.argB);
             shouldSetValues &&
                 set(_formState.touchedFields, name, touchedFields);
-            unsetEmptyArray(_formState.touchedFields, name);
         }
         if (_proxyFormState.dirtyFields || _proxyFormState.isDirty) {
-            updateFieldArrayDirty(name, values);
+            _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
         }
         _subjects.state.next({
             isDirty: _getDirty(name, values),
@@ -1209,8 +1196,6 @@ function createFormControl(props = {}) {
         isFieldDirty && shouldRender && _subjects.state.next(output);
         return isFieldDirty ? output : {};
     };
-    const updateFieldArrayDirty = (name, value) => (set(_formState.dirtyFields, name, setFieldArrayDirtyFields(value, get(_defaultValues, name, []), get(_formState.dirtyFields, name, []))),
-        unsetEmptyArray(_formState.dirtyFields, name));
     const shouldRenderByError = async (shouldSkipRender, name, isValid, error, fieldState) => {
         const previousFieldError = get(_formState.errors, name);
         const shouldUpdateValid = _proxyFormState.isValid && _formState.isValid !== isValid;
@@ -1322,10 +1307,7 @@ function createFormControl(props = {}) {
                     isWeb && isHTMLElement(fieldReference.ref) && isNullOrUndefined(value)
                         ? ''
                         : value;
-                if (isFileInput(fieldReference.ref) && !isString(fieldValue)) {
-                    fieldReference.ref.files = fieldValue;
-                }
-                else if (isMultipleSelect(fieldReference.ref)) {
+                if (isMultipleSelect(fieldReference.ref)) {
                     [...fieldReference.ref.options].forEach((selectRef) => (selectRef.selected = fieldValue.includes(selectRef.value)));
                 }
                 else if (fieldReference.refs) {
@@ -1340,7 +1322,7 @@ function createFormControl(props = {}) {
                         fieldReference.refs.forEach((radioRef) => (radioRef.checked = radioRef.value === fieldValue));
                     }
                 }
-                else {
+                else if (!isFileInput(fieldReference.ref)) {
                     fieldReference.ref.value = fieldValue;
                 }
             }
@@ -1373,7 +1355,7 @@ function createFormControl(props = {}) {
             });
             if ((_proxyFormState.isDirty || _proxyFormState.dirtyFields) &&
                 options.shouldDirty) {
-                updateFieldArrayDirty(name, value);
+                _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
                 _subjects.state.next({
                     name,
                     dirtyFields: _formState.dirtyFields,
@@ -1386,7 +1368,7 @@ function createFormControl(props = {}) {
                 ? setValues(name, value, options)
                 : setFieldValue(name, value, options);
         }
-        isFieldWatched(name) && _subjects.state.next({});
+        isWatched(name, _names) && _subjects.state.next({});
         _subjects.watch.next({
             name,
         });
@@ -1398,14 +1380,16 @@ function createFormControl(props = {}) {
         if (field) {
             let error;
             let isValid;
-            const fieldValue = target.type ? getFieldValue(field._f) : target.value;
+            const fieldValue = target.type
+                ? getFieldValue(field._f)
+                : getEventValue(event);
             const isBlurEvent = event.type === EVENTS.BLUR;
             const shouldSkipValidation = (!hasValidation(field._f) &&
                 !_options.resolver &&
                 !get(_formState.errors, name) &&
                 !field._f.deps) ||
                 skipValidation(isBlurEvent, get(_formState.touchedFields, name), _formState.isSubmitted, validationModeAfterSubmit, validationModeBeforeSubmit);
-            const isWatched = isFieldWatched(name, isBlurEvent);
+            const watched = isWatched(name, _names, isBlurEvent);
             if (isBlurEvent) {
                 field._f.onBlur && field._f.onBlur(event);
             }
@@ -1414,7 +1398,7 @@ function createFormControl(props = {}) {
             }
             set(_formValues, name, fieldValue);
             const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent, false);
-            const shouldRender = !isEmptyObject(fieldState) || isWatched;
+            const shouldRender = !isEmptyObject(fieldState) || watched;
             !isBlurEvent &&
                 _subjects.watch.next({
                     name,
@@ -1422,9 +1406,9 @@ function createFormControl(props = {}) {
                 });
             if (shouldSkipValidation) {
                 return (shouldRender &&
-                    _subjects.state.next(Object.assign({ name }, (isWatched ? {} : fieldState))));
+                    _subjects.state.next(Object.assign({ name }, (watched ? {} : fieldState))));
             }
-            !isBlurEvent && isWatched && _subjects.state.next({});
+            !isBlurEvent && watched && _subjects.state.next({});
             validateFields[name] = validateFields[name] ? +1 : 1;
             _proxyFormState.isValidating &&
                 _subjects.state.next({
@@ -1838,9 +1822,9 @@ function useForm(props = {}) {
     const control = _formControl.current.control;
     useSubscribe({
         subject: control._subjects.state,
-        callback: (formState) => {
-            if (shouldRenderFormState(formState, control._proxyFormState, true)) {
-                control._formState = Object.assign(Object.assign({}, control._formState), formState);
+        callback: (value) => {
+            if (shouldRenderFormState(value, control._proxyFormState, true)) {
+                control._formState = Object.assign(Object.assign({}, control._formState), value);
                 updateFormState(Object.assign({}, control._formState));
             }
         },