react-hook-form 7.16.0 → 7.17.1

package/dist/index.esm.js

@@ -65,10 +65,9 @@ var omit = (source, key) => {
     return copy;
 };
 
-const FormContext = React.createContext(null);
-FormContext.displayName = 'RHFContext';
-const useFormContext = () => React.useContext(FormContext);
-const FormProvider = (props) => (React.createElement(FormContext.Provider, { value: omit(props, 'children') }, props.children));
+const HookFormContext = React.createContext(null);
+const useFormContext = () => React.useContext(HookFormContext);
+const FormProvider = (props) => (React.createElement(HookFormContext.Provider, { value: omit(props, 'children') }, props.children));
 
 var getProxyFormState = (formState, _proxyFormState, localProxyFormState, isRoot = true) => {
     function createGetter(prop) {
@@ -104,10 +103,33 @@ var shouldRenderFormState = (formStateData, _proxyFormState, isRoot) => {
 
 var convertToArrayPayload = (value) => Array.isArray(value) ? value : [value];
 
+function useSubscribe({ disabled, subject, callback }) {
+    const _subscription = React.useRef(subject);
+    const _unSubscribe = React.useRef();
+    if (disabled) {
+        if (_subscription.current) {
+            _unSubscribe.current && _unSubscribe.current.unsubscribe();
+            _subscription.current = _unSubscribe.current = undefined;
+        }
+    }
+    else {
+        if (!_subscription.current) {
+            _subscription.current = subject;
+        }
+        if (!_unSubscribe.current && _subscription.current) {
+            _unSubscribe.current = _subscription.current.subscribe({
+                next: callback,
+            });
+        }
+    }
+    React.useEffect(() => () => {
+        _unSubscribe.current && _unSubscribe.current.unsubscribe();
+    }, []);
+}
+
 function useFormState(props) {
     const methods = useFormContext();
     const { control = methods.control, disabled, name } = props || {};
-    const nameRef = React.useRef(name);
     const [formState, updateFormState] = React.useState(control._formState);
     const _localProxyFormState = React.useRef({
         isDirty: false,
@@ -117,18 +139,17 @@ function useFormState(props) {
         isValid: false,
         errors: false,
     });
-    nameRef.current = name;
-    React.useEffect(() => {
-        const formStateSubscription = control._subjects.state.subscribe({
-            next: (formState) => (!nameRef.current ||
-                !formState.name ||
-                convertToArrayPayload(nameRef.current).includes(formState.name)) &&
-                shouldRenderFormState(formState, _localProxyFormState.current) &&
-                updateFormState(Object.assign(Object.assign({}, control._formState), formState)),
-        });
-        disabled && formStateSubscription.unsubscribe();
-        return () => formStateSubscription.unsubscribe();
-    }, [disabled, control]);
+    const _name = React.useRef(name);
+    _name.current = name;
+    useSubscribe({
+        disabled,
+        callback: (formState) => (!_name.current ||
+            !formState.name ||
+            convertToArrayPayload(_name.current).includes(formState.name)) &&
+            shouldRenderFormState(formState, _localProxyFormState.current) &&
+            updateFormState(Object.assign(Object.assign({}, control._formState), formState)),
+        subject: control._subjects.state,
+    });
     return getProxyFormState(formState, control._proxyFormState, _localProxyFormState.current, false);
 }
 
@@ -140,6 +161,13 @@ function useController(props) {
         control: control || methods.control,
         name,
     });
+    const _name = React.useRef(name);
+    _name.current = name;
+    useSubscribe({
+        subject: control._subjects.control,
+        callback: (data) => (!data.name || _name.current === data.name) &&
+            setInputStateValue(get(data.values, name)),
+    });
     const registerProps = control.register(name, Object.assign(Object.assign({}, props.rules), { value }));
     const updateMounted = React.useCallback((name, value) => {
         const field = get(control._fields, name);
@@ -148,14 +176,9 @@ function useController(props) {
         }
     }, [control]);
     React.useEffect(() => {
-        const controllerSubscription = control._subjects.control.subscribe({
-            next: (data) => (!data.name || name === data.name) &&
-                setInputStateValue(get(data.values, name)),
-        });
         updateMounted(name, true);
         return () => {
-            controllerSubscription.unsubscribe();
-            const _shouldUnregisterField = control._shouldUnregister || shouldUnregister;
+            const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
             if (isNameInFieldArray(control._names.array, name)
                 ? _shouldUnregisterField && !control._stateFlags.action
                 : _shouldUnregisterField) {
@@ -265,9 +288,10 @@ const focusFieldBy = (fields, callback, fieldsNames) => {
     }
 };
 
-var getFocusFieldName = (name, index, options) => options && !options.shouldFocus
-    ? options.focusName || `${name}.${options.focusIndex}.`
-    : `${name}.${index}.`;
+var getFocusFieldName = (name, index, options = {}) => options.shouldFocus || isUndefined(options.shouldFocus)
+    ? options.focusName ||
+        `${name}.${isUndefined(options.focusIndex) ? index : options.focusIndex}.`
+    : '';
 
 var mapCurrentIds = (values, _fieldIds, keyName) => values.map((value, index) => {
     const output = _fieldIds.current[index];
@@ -309,7 +333,7 @@ var moveArrayAt = (data, from, to) => {
     return [];
 };
 
-var omitKey = (fields, keyName) => fields.map((field = {}) => omit(field, keyName));
+var omitKeys = (fields, keyName) => fields.map((field = {}) => omit(field, keyName));
 
 function prepend(data, value) {
     return [...convertToArrayPayload(value), ...convertToArrayPayload(data)];
@@ -340,73 +364,81 @@ 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._getFieldArrayValue(name), keyName));
+    const [fields, setFields] = React.useState(mapIds(control._getFieldArray(name), keyName));
     const _fieldIds = React.useRef(fields);
     _fieldIds.current = fields;
     control._names.array.add(name);
+    useSubscribe({
+        callback: ({ values, name: fieldArrayName }) => {
+            if (fieldArrayName === name || !fieldArrayName) {
+                setFields(mapIds(get(values, name), keyName));
+            }
+        },
+        subject: control._subjects.array,
+    });
     const updateValues = React.useCallback((updatedFieldArrayValuesWithKey) => {
-        const updatedFieldArrayValues = omitKey(updatedFieldArrayValuesWithKey, keyName);
+        const updatedFieldArrayValues = omitKeys(updatedFieldArrayValuesWithKey, keyName);
         set(control._formValues, name, updatedFieldArrayValues);
         setFields(updatedFieldArrayValuesWithKey);
         return updatedFieldArrayValues;
     }, [control, name, keyName]);
     const append$1 = (value, options) => {
         const appendValue = convertToArrayPayload(value);
-        const updatedFieldArrayValuesWithKey = append(mapCurrentIds(control._getFieldArrayValue(name), _fieldIds, keyName), mapIds(appendValue, keyName));
-        control._updateFieldArray(keyName, name, append, {
+        const updatedFieldArrayValuesWithKey = append(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), mapIds(appendValue, keyName));
+        control._updateFieldArray(name, append, {
             argA: fillEmptyArray(value),
         }, updateValues(updatedFieldArrayValuesWithKey));
         control._names.focus = getFocusFieldName(name, updatedFieldArrayValuesWithKey.length - appendValue.length, options);
     };
     const prepend$1 = (value, options) => {
-        const updatedFieldArrayValuesWithKey = prepend(mapCurrentIds(control._getFieldArrayValue(name), _fieldIds, keyName), mapIds(convertToArrayPayload(value), keyName));
-        control._updateFieldArray(keyName, name, prepend, {
+        const updatedFieldArrayValuesWithKey = prepend(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), mapIds(convertToArrayPayload(value), keyName));
+        control._updateFieldArray(name, prepend, {
             argA: fillEmptyArray(value),
         }, updateValues(updatedFieldArrayValuesWithKey));
         control._names.focus = getFocusFieldName(name, 0, options);
     };
     const remove = (index) => {
-        const updatedFieldArrayValuesWithKey = removeArrayAt(mapCurrentIds(control._getFieldArrayValue(name), _fieldIds, keyName), index);
-        control._updateFieldArray(keyName, name, removeArrayAt, {
+        const updatedFieldArrayValuesWithKey = removeArrayAt(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), index);
+        control._updateFieldArray(name, removeArrayAt, {
             argA: index,
         }, updateValues(updatedFieldArrayValuesWithKey));
     };
     const insert$1 = (index, value, options) => {
-        const updatedFieldArrayValuesWithKey = insert(mapCurrentIds(control._getFieldArrayValue(name), _fieldIds, keyName), index, mapIds(convertToArrayPayload(value), keyName));
-        control._updateFieldArray(keyName, name, insert, {
+        const updatedFieldArrayValuesWithKey = insert(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), index, mapIds(convertToArrayPayload(value), keyName));
+        control._updateFieldArray(name, insert, {
             argA: index,
             argB: fillEmptyArray(value),
         }, updateValues(updatedFieldArrayValuesWithKey));
         control._names.focus = getFocusFieldName(name, index, options);
     };
     const swap = (indexA, indexB) => {
-        const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArrayValue(name), _fieldIds, keyName);
+        const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
         swapArrayAt(updatedFieldArrayValuesWithKey, indexA, indexB);
-        control._updateFieldArray(keyName, name, swapArrayAt, {
+        control._updateFieldArray(name, swapArrayAt, {
             argA: indexA,
             argB: indexB,
         }, updateValues(updatedFieldArrayValuesWithKey), false);
     };
     const move = (from, to) => {
-        const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArrayValue(name), _fieldIds, keyName);
+        const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
         moveArrayAt(updatedFieldArrayValuesWithKey, from, to);
-        control._updateFieldArray(keyName, name, moveArrayAt, {
+        control._updateFieldArray(name, moveArrayAt, {
             argA: from,
             argB: to,
         }, updateValues(updatedFieldArrayValuesWithKey), false);
     };
     const update = (index, value) => {
-        const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArrayValue(name), _fieldIds, keyName);
+        const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
         const updatedFieldArrayValues = updateAt(updatedFieldArrayValuesWithKey, index, value);
         _fieldIds.current = mapIds(updatedFieldArrayValues, keyName);
-        control._updateFieldArray(keyName, name, updateAt, {
+        control._updateFieldArray(name, updateAt, {
             argA: index,
             argB: value,
         }, updateValues(_fieldIds.current), true, false);
     };
     const replace = (value) => {
         const updatedFieldArrayValuesWithKey = mapIds(convertToArrayPayload(value), keyName);
-        control._updateFieldArray(keyName, name, () => updatedFieldArrayValuesWithKey, {}, updateValues(updatedFieldArrayValuesWithKey), true, false);
+        control._updateFieldArray(name, () => updatedFieldArrayValuesWithKey, {}, updateValues(updatedFieldArrayValuesWithKey), true, false);
     };
     React.useEffect(() => {
         control._stateFlags.action = false;
@@ -431,17 +463,9 @@ const useFieldArray = (props) => {
         control._proxyFormState.isValid && control._updateValid();
     }, [fields, name, control, keyName]);
     React.useEffect(() => {
-        const fieldArraySubscription = control._subjects.array.subscribe({
-            next({ values, name: fieldArrayName }) {
-                if (fieldArrayName === name || !fieldArrayName) {
-                    setFields(mapIds(get(values, name), keyName));
-                }
-            },
-        });
         !get(control._formValues, name) && set(control._formValues, name, []);
         return () => {
-            fieldArraySubscription.unsubscribe();
-            if (control._shouldUnregister || shouldUnregister) {
+            if (control._options.shouldUnregister || shouldUnregister) {
                 control.unregister(name);
             }
         };
@@ -483,12 +507,12 @@ function cloneObject(data) {
 var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
 
 function deepEqual(object1, object2) {
-    if (isPrimitive(object1) ||
-        isPrimitive(object2) ||
-        isDateObject(object1) ||
-        isDateObject(object2)) {
+    if (isPrimitive(object1) || isPrimitive(object2)) {
         return object1 === object2;
     }
+    if (isDateObject(object1) && isDateObject(object2)) {
+        return object1.getTime() === object2.getTime();
+    }
     const keys1 = Object.keys(object1);
     const keys2 = Object.keys(object2);
     if (keys1.length !== keys2.length) {
@@ -501,8 +525,9 @@ function deepEqual(object1, object2) {
         }
         if (key !== 'ref') {
             const val2 = object2[key];
-            if ((isObject(val1) || Array.isArray(val1)) &&
-                (isObject(val2) || Array.isArray(val2))
+            if ((isDateObject(val1) && isDateObject(val2)) ||
+                (isObject(val1) && isObject(val2)) ||
+                (Array.isArray(val1) && Array.isArray(val2))
                 ? !deepEqual(val1, val2)
                 : val1 !== val2) {
                 return false;
@@ -522,8 +547,6 @@ var getValidationModes = (mode) => ({
 
 var isBoolean = (value) => typeof value === 'boolean';
 
-var isFileInput = (element) => element.type === 'file';
-
 var isFunction = (value) => typeof value === 'function';
 
 var isHTMLElement = (value) => value instanceof HTMLElement;
@@ -627,6 +650,8 @@ function unset(object, path) {
     return object;
 }
 
+var isFileInput = (element) => element.type === 'file';
+
 const defaultResult = {
     value: false,
     isValid: false,
@@ -664,10 +689,6 @@ var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isU
                 ? setValueAs(value)
                 : value;
 
-var getMultipleSelectValue = (options) => [...options]
-    .filter(({ selected }) => selected)
-    .map(({ value }) => value);
-
 const defaultReturn = {
     isValid: false,
     value: null,
@@ -693,7 +714,7 @@ function getFieldValue(_f) {
         return getRadioValue(_f.refs).value;
     }
     if (isMultipleSelect(ref)) {
-        return getMultipleSelectValue(ref.options);
+        return [...ref.selectedOptions].map(({ value }) => value);
     }
     if (isCheckBoxInput(ref)) {
         return getCheckboxValue(_f.refs).value;
@@ -952,8 +973,7 @@ const defaultOptions = {
 };
 const isWindowUndefined = typeof window === 'undefined';
 function createFormControl(props = {}) {
-    let formOptions = Object.assign(Object.assign({}, defaultOptions), props);
-    let _delayCallback;
+    let _options = Object.assign(Object.assign({}, defaultOptions), props);
     let _formState = {
         isDirty: false,
         isValidating: false,
@@ -967,8 +987,8 @@ function createFormControl(props = {}) {
         errors: {},
     };
     let _fields = {};
-    let _defaultValues = formOptions.defaultValues || {};
-    let _formValues = formOptions.shouldUnregister
+    let _defaultValues = _options.defaultValues || {};
+    let _formValues = _options.shouldUnregister
         ? {}
         : cloneObject(_defaultValues);
     let _stateFlags = {
@@ -976,14 +996,15 @@ function createFormControl(props = {}) {
         mount: false,
         watch: false,
     };
-    let _timer = 0;
     let _names = {
         mount: new Set(),
         unMount: new Set(),
         array: new Set(),
         watch: new Set(),
     };
-    let _validateCount = {};
+    let delayErrorCallback;
+    let timer = 0;
+    let validateFields = {};
     const _proxyFormState = {
         isDirty: false,
         dirtyFields: false,
@@ -998,37 +1019,125 @@ function createFormControl(props = {}) {
         array: new Subject(),
         state: new Subject(),
     };
-    const validationMode = getValidationModes(formOptions.mode);
-    const reValidateMode = getValidationModes(formOptions.reValidateMode);
-    const isValidateAllFieldCriteria = formOptions.criteriaMode === VALIDATION_MODE.all;
+    const validationModeBeforeSubmit = getValidationModes(_options.mode);
+    const validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
+    const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
     const debounce = (callback, wait) => (...args) => {
-        clearTimeout(_timer);
-        _timer = window.setTimeout(() => callback(...args), wait);
+        clearTimeout(timer);
+        timer = window.setTimeout(() => callback(...args), wait);
     };
-    const isFieldWatched = (name) => _names.watchAll ||
-        _names.watch.has(name) ||
-        _names.watch.has((name.match(/\w+/) || [])[0]);
-    const updateErrorState = (name, error) => {
-        set(_formState.errors, name, error);
+    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) {
+            isValid = _options.resolver
+                ? isEmptyObject((await executeResolver()).errors)
+                : await executeBuildInValidation(_fields, true);
+            if (!shouldSkipRender && isValid !== _formState.isValid) {
+                _formState.isValid = isValid;
+                _subjects.state.next({
+                    isValid,
+                });
+            }
+        }
+        return isValid;
+    };
+    const _updateFieldArray = (name, method, args, values = [], shouldSetValues = true, shouldSetFields = true) => {
+        _stateFlags.action = true;
+        if (shouldSetFields && get(_fields, name)) {
+            const fieldValues = method(get(_fields, name), args.argA, args.argB);
+            shouldSetValues && set(_fields, name, fieldValues);
+        }
+        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);
+        }
         _subjects.state.next({
+            isDirty: _getDirty(name, values),
+            dirtyFields: _formState.dirtyFields,
             errors: _formState.errors,
+            isValid: _formState.isValid,
         });
     };
-    const shouldRenderBaseOnError = async (shouldSkipRender, name, isValid, error, fieldState) => {
-        const previousError = get(_formState.errors, name);
+    const updateErrors = (name, error) => (set(_formState.errors, name, error),
+        _subjects.state.next({
+            errors: _formState.errors,
+        }));
+    const updateValidAndValue = (name, shouldSkipSetValueAs, ref) => {
+        const field = get(_fields, name);
+        if (field) {
+            const defaultValue = get(_formValues, name, get(_defaultValues, name));
+            isUndefined(defaultValue) ||
+                (ref && ref.defaultChecked) ||
+                shouldSkipSetValueAs
+                ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f))
+                : setFieldValue(name, defaultValue);
+        }
+        _stateFlags.mount && _updateValid();
+    };
+    const updateTouchAndDirty = (name, fieldValue, isCurrentTouched, shouldRender = true) => {
+        let isFieldDirty = false;
+        const output = {
+            name,
+        };
+        const isPreviousFieldTouched = get(_formState.touchedFields, name);
+        if (_proxyFormState.isDirty) {
+            const isPreviousFormDirty = _formState.isDirty;
+            _formState.isDirty = output.isDirty = _getDirty();
+            isFieldDirty = isPreviousFormDirty !== output.isDirty;
+        }
+        if (_proxyFormState.dirtyFields && !isCurrentTouched) {
+            const isPreviousFieldDirty = get(_formState.dirtyFields, name);
+            const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
+            isCurrentFieldPristine
+                ? unset(_formState.dirtyFields, name)
+                : set(_formState.dirtyFields, name, true);
+            output.dirtyFields = _formState.dirtyFields;
+            isFieldDirty =
+                isFieldDirty ||
+                    isPreviousFieldDirty !== get(_formState.dirtyFields, name);
+        }
+        if (isCurrentTouched && !isPreviousFieldTouched) {
+            set(_formState.touchedFields, name, isCurrentTouched);
+            output.touchedFields = _formState.touchedFields;
+            isFieldDirty =
+                isFieldDirty ||
+                    (_proxyFormState.touchedFields &&
+                        isPreviousFieldTouched !== isCurrentTouched);
+        }
+        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;
         if (props.delayError && error) {
-            _delayCallback =
-                _delayCallback || debounce(updateErrorState, props.delayError);
-            _delayCallback(name, error);
+            delayErrorCallback =
+                delayErrorCallback || debounce(updateErrors, props.delayError);
+            delayErrorCallback(name, error);
         }
         else {
-            clearTimeout(_timer);
+            clearTimeout(timer);
             error
                 ? set(_formState.errors, name, error)
                 : unset(_formState.errors, name);
         }
-        if (((error ? !deepEqual(previousError, error) : previousError) ||
+        if (((error ? !deepEqual(previousFieldError, error) : previousFieldError) ||
             !isEmptyObject(fieldState) ||
             shouldUpdateValid) &&
             !shouldSkipRender) {
@@ -1036,138 +1145,169 @@ function createFormControl(props = {}) {
             _formState = Object.assign(Object.assign({}, _formState), updatedFormState);
             _subjects.state.next(updatedFormState);
         }
-        _validateCount[name]--;
-        if (_proxyFormState.isValidating && !_validateCount[name]) {
+        validateFields[name]--;
+        if (_proxyFormState.isValidating && !validateFields[name]) {
             _subjects.state.next({
                 isValidating: false,
             });
-            _validateCount = {};
+            validateFields = {};
         }
     };
+    const executeResolver = async (name) => _options.resolver
+        ? await _options.resolver(Object.assign({}, _formValues), _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation))
+        : {};
+    const executeResolverValidation = async (names) => {
+        const { errors } = await executeResolver();
+        if (names) {
+            for (const name of names) {
+                const error = get(errors, name);
+                error
+                    ? set(_formState.errors, name, error)
+                    : unset(_formState.errors, name);
+            }
+        }
+        else {
+            _formState.errors = errors;
+        }
+        return errors;
+    };
+    const executeBuildInValidation = async (fields, shouldOnlyCheckValid, context = {
+        valid: true,
+    }) => {
+        for (const name in fields) {
+            const field = fields[name];
+            if (field) {
+                const fieldReference = field._f;
+                const fieldValue = omit(field, '_f');
+                if (fieldReference) {
+                    const fieldError = await validateField(field, get(_formValues, fieldReference.name), shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation);
+                    if (fieldError[fieldReference.name]) {
+                        context.valid = false;
+                        if (shouldOnlyCheckValid) {
+                            break;
+                        }
+                    }
+                    if (!shouldOnlyCheckValid) {
+                        fieldError[fieldReference.name]
+                            ? set(_formState.errors, fieldReference.name, fieldError[fieldReference.name])
+                            : unset(_formState.errors, fieldReference.name);
+                    }
+                }
+                fieldValue &&
+                    (await executeBuildInValidation(fieldValue, shouldOnlyCheckValid, context));
+            }
+        }
+        return context.valid;
+    };
+    const _removeUnmounted = () => {
+        for (const name of _names.unMount) {
+            const field = get(_fields, name);
+            field &&
+                (field._f.refs ? field._f.refs.every(live) : live(field._f.ref)) &&
+                unregister(name);
+        }
+        _names.unMount = new Set();
+    };
+    const _getDirty = (name, data) => (name && data && set(_formValues, name, data),
+        !deepEqual(getValues(), _defaultValues));
+    const _getWatch = (names, defaultValue, isGlobal) => {
+        const fieldValues = Object.assign({}, (_stateFlags.mount
+            ? _formValues
+            : isUndefined(defaultValue)
+                ? _defaultValues
+                : isString(names)
+                    ? { [names]: defaultValue }
+                    : defaultValue));
+        if (names) {
+            const result = convertToArrayPayload(names).map((fieldName) => (isGlobal && _names.watch.add(fieldName),
+                get(fieldValues, fieldName)));
+            return Array.isArray(names) ? result : result[0];
+        }
+        isGlobal && (_names.watchAll = true);
+        return fieldValues;
+    };
+    const _getFieldArray = (name) => get(_stateFlags.mount ? _formValues : _defaultValues, name, []);
     const setFieldValue = (name, value, options = {}, shouldRender) => {
         const field = get(_fields, name);
         let fieldValue = value;
         if (field) {
-            const _f = field._f;
-            if (_f) {
-                set(_formValues, name, getFieldValueAs(value, _f));
+            const fieldReference = field._f;
+            if (fieldReference) {
+                set(_formValues, name, getFieldValueAs(value, fieldReference));
                 fieldValue =
-                    isWeb && isHTMLElement(_f.ref) && isNullOrUndefined(value)
+                    isWeb && isHTMLElement(fieldReference.ref) && isNullOrUndefined(value)
                         ? ''
                         : value;
-                if (isFileInput(_f.ref) && !isString(fieldValue)) {
-                    _f.ref.files = fieldValue;
-                }
-                else if (isMultipleSelect(_f.ref)) {
-                    [..._f.ref.options].forEach((selectRef) => (selectRef.selected = fieldValue.includes(selectRef.value)));
+                if (isMultipleSelect(fieldReference.ref)) {
+                    [...fieldReference.ref.options].forEach((selectRef) => (selectRef.selected = fieldValue.includes(selectRef.value)));
                 }
-                else if (_f.refs) {
-                    if (isCheckBoxInput(_f.ref)) {
-                        _f.refs.length > 1
-                            ? _f.refs.forEach((checkboxRef) => (checkboxRef.checked = Array.isArray(fieldValue)
+                else if (fieldReference.refs) {
+                    if (isCheckBoxInput(fieldReference.ref)) {
+                        fieldReference.refs.length > 1
+                            ? fieldReference.refs.forEach((checkboxRef) => (checkboxRef.checked = Array.isArray(fieldValue)
                                 ? !!fieldValue.find((data) => data === checkboxRef.value)
                                 : fieldValue === checkboxRef.value))
-                            : (_f.refs[0].checked = !!fieldValue);
+                            : (fieldReference.refs[0].checked = !!fieldValue);
                     }
                     else {
-                        _f.refs.forEach((radioRef) => (radioRef.checked = radioRef.value === fieldValue));
+                        fieldReference.refs.forEach((radioRef) => (radioRef.checked = radioRef.value === fieldValue));
                     }
                 }
                 else {
-                    _f.ref.value = fieldValue;
+                    fieldReference.ref.value = fieldValue;
                 }
-                if (shouldRender) {
+                shouldRender &&
                     _subjects.control.next({
                         values: _formValues,
                         name,
                     });
-                }
             }
         }
         (options.shouldDirty || options.shouldTouch) &&
-            updateTouchAndDirtyState(name, fieldValue, options.shouldTouch);
+            updateTouchAndDirty(name, fieldValue, options.shouldTouch);
         options.shouldValidate && trigger(name);
     };
-    const updateTouchAndDirtyState = (name, inputValue, isCurrentTouched, shouldRender = true) => {
-        const state = {
-            name,
-        };
-        let isChanged = false;
-        if (_proxyFormState.isDirty) {
-            const previousIsDirty = _formState.isDirty;
-            _formState.isDirty = _getIsDirty();
-            state.isDirty = _formState.isDirty;
-            isChanged = previousIsDirty !== state.isDirty;
-        }
-        if (_proxyFormState.dirtyFields && !isCurrentTouched) {
-            const isPreviousFieldDirty = get(_formState.dirtyFields, name);
-            const isCurrentFieldDirty = !deepEqual(get(_defaultValues, name), inputValue);
-            isCurrentFieldDirty
-                ? set(_formState.dirtyFields, name, true)
-                : unset(_formState.dirtyFields, name);
-            state.dirtyFields = _formState.dirtyFields;
-            isChanged =
-                isChanged || isPreviousFieldDirty !== get(_formState.dirtyFields, name);
-        }
-        const isPreviousFieldTouched = get(_formState.touchedFields, name);
-        if (isCurrentTouched && !isPreviousFieldTouched) {
-            set(_formState.touchedFields, name, isCurrentTouched);
-            state.touchedFields = _formState.touchedFields;
-            isChanged =
-                isChanged ||
-                    (_proxyFormState.touchedFields &&
-                        isPreviousFieldTouched !== isCurrentTouched);
+    const setValues = (name, value, options) => {
+        for (const fieldKey in value) {
+            const fieldValue = value[fieldKey];
+            const fieldName = `${name}.${fieldKey}`;
+            const field = get(_fields, fieldName);
+            (_names.array.has(name) ||
+                !isPrimitive(fieldValue) ||
+                (field && !field._f)) &&
+                !isDateObject(fieldValue)
+                ? setValues(fieldName, fieldValue, options)
+                : setFieldValue(fieldName, fieldValue, options, true);
         }
-        isChanged && shouldRender && _subjects.state.next(state);
-        return isChanged ? state : {};
     };
-    const executeResolver = async (name) => {
-        return formOptions.resolver
-            ? await formOptions.resolver(Object.assign({}, _formValues), formOptions.context, getResolverOptions(name || _names.mount, _fields, formOptions.criteriaMode, formOptions.shouldUseNativeValidation))
-            : {};
-    };
-    const executeResolverValidation = async (names) => {
-        const { errors } = await executeResolver();
-        if (names) {
-            for (const name of names) {
-                const error = get(errors, name);
-                error
-                    ? set(_formState.errors, name, error)
-                    : unset(_formState.errors, name);
+    const setValue = (name, value, options = {}) => {
+        const field = get(_fields, name);
+        const isFieldArray = _names.array.has(name);
+        set(_formValues, name, value);
+        if (isFieldArray) {
+            _subjects.array.next({
+                name,
+                values: _formValues,
+            });
+            if ((_proxyFormState.isDirty || _proxyFormState.dirtyFields) &&
+                options.shouldDirty) {
+                updateFieldArrayDirty(name, value);
+                _subjects.state.next({
+                    name,
+                    dirtyFields: _formState.dirtyFields,
+                    isDirty: _getDirty(name, value),
+                });
             }
         }
         else {
-            _formState.errors = errors;
-        }
-        return errors;
-    };
-    const validateForm = async (_fields, shouldCheckValid, context = {
-        valid: true,
-    }) => {
-        for (const name in _fields) {
-            const field = _fields[name];
-            if (field) {
-                const _f = field._f;
-                const fieldValue = omit(field, '_f');
-                if (_f) {
-                    const fieldError = await validateField(field, get(_formValues, _f.name), isValidateAllFieldCriteria, formOptions.shouldUseNativeValidation);
-                    if (fieldError[_f.name]) {
-                        context.valid = false;
-                        if (shouldCheckValid) {
-                            break;
-                        }
-                    }
-                    if (!shouldCheckValid) {
-                        fieldError[_f.name]
-                            ? set(_formState.errors, _f.name, fieldError[_f.name])
-                            : unset(_formState.errors, _f.name);
-                    }
-                }
-                fieldValue &&
-                    (await validateForm(fieldValue, shouldCheckValid, context));
-            }
+            field && !field._f && !isNullOrUndefined(value)
+                ? setValues(name, value, options)
+                : setFieldValue(name, value, options, true);
         }
-        return context.valid;
+        isFieldWatched(name) && _subjects.state.next({});
+        _subjects.watch.next({
+            name,
+        });
     };
     const handleChange = async (event) => {
         const target = event.target;
@@ -1176,22 +1316,22 @@ function createFormControl(props = {}) {
         if (field) {
             let error;
             let isValid;
-            const inputValue = target.type ? getFieldValue(field._f) : target.value;
+            const fieldValue = target.type ? getFieldValue(field._f) : target.value;
             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);
             if (isBlurEvent && field._f.onBlur) {
                 field._f.onBlur(event);
             }
             else if (field._f.onChange) {
                 field._f.onChange(event);
             }
-            const shouldSkipValidation = (!hasValidation(field._f) &&
-                !formOptions.resolver &&
-                !get(_formState.errors, name) &&
-                !field._f.deps) ||
-                skipValidation(isBlurEvent, get(_formState.touchedFields, name), _formState.isSubmitted, reValidateMode, validationMode);
-            const isWatched = !isBlurEvent && isFieldWatched(name);
-            set(_formValues, name, inputValue);
-            const fieldState = updateTouchAndDirtyState(name, inputValue, isBlurEvent, false);
+            set(_formValues, name, fieldValue);
+            const fieldState = updateTouchAndDirty(name, fieldValue, isBlurEvent, false);
             const shouldRender = !isEmptyObject(fieldState) || isWatched;
             !isBlurEvent &&
                 _subjects.watch.next({
@@ -1203,12 +1343,12 @@ function createFormControl(props = {}) {
                     _subjects.state.next(Object.assign({ name }, (isWatched ? {} : fieldState))));
             }
             !isBlurEvent && isWatched && _subjects.state.next({});
-            _validateCount[name] = _validateCount[name] ? +1 : 1;
+            validateFields[name] = validateFields[name] ? +1 : 1;
             _proxyFormState.isValidating &&
                 _subjects.state.next({
                     isValidating: true,
                 });
-            if (formOptions.resolver) {
+            if (_options.resolver) {
                 const { errors } = await executeResolver([name]);
                 error = get(errors, name);
                 if (isCheckBoxInput(target) && !error) {
@@ -1224,170 +1364,42 @@ function createFormControl(props = {}) {
                 isValid = isEmptyObject(errors);
             }
             else {
-                error = (await validateField(field, get(_formValues, name), isValidateAllFieldCriteria, formOptions.shouldUseNativeValidation))[name];
+                error = (await validateField(field, get(_formValues, name), shouldDisplayAllAssociatedErrors, _options.shouldUseNativeValidation))[name];
                 isValid = await _updateValid(true);
             }
-            if (field._f.deps) {
-                trigger(field._f.deps);
-            }
-            shouldRenderBaseOnError(false, name, isValid, error, fieldState);
-        }
-    };
-    const _updateValidAndInputValue = (name, shouldSkipValueAs, ref) => {
-        const field = get(_fields, name);
-        if (field) {
-            const fieldValue = get(_formValues, name);
-            const defaultValue = isUndefined(fieldValue)
-                ? get(_defaultValues, name)
-                : fieldValue;
-            if (isUndefined(defaultValue) ||
-                (ref && ref.defaultChecked) ||
-                shouldSkipValueAs) {
-                set(_formValues, name, shouldSkipValueAs ? defaultValue : getFieldValue(field._f));
-            }
-            else {
-                setFieldValue(name, defaultValue);
-            }
-        }
-        _stateFlags.mount && _updateValid();
-    };
-    const _getIsDirty = (name, data) => {
-        name && data && set(_formValues, name, data);
-        return !deepEqual(Object.assign({}, getValues()), _defaultValues);
-    };
-    const _updateValid = async (skipRender) => {
-        let isValid = false;
-        if (_proxyFormState.isValid) {
-            isValid = formOptions.resolver
-                ? isEmptyObject((await executeResolver()).errors)
-                : await validateForm(_fields, true);
-            if (!skipRender && isValid !== _formState.isValid) {
-                _formState.isValid = isValid;
-                _subjects.state.next({
-                    isValid,
-                });
-            }
-        }
-        return isValid;
-    };
-    const setValues = (name, value, options) => Object.entries(value).forEach(([fieldKey, fieldValue]) => {
-        const fieldName = `${name}.${fieldKey}`;
-        const field = get(_fields, fieldName);
-        (_names.array.has(name) ||
-            !isPrimitive(fieldValue) ||
-            (field && !field._f)) &&
-            !isDateObject(fieldValue)
-            ? setValues(fieldName, fieldValue, options)
-            : setFieldValue(fieldName, fieldValue, options, true);
-    });
-    const _getWatch = (fieldNames, defaultValue, isMounted, isGlobal) => {
-        const fieldValues = Object.assign({}, (isMounted || _stateFlags.mount
-            ? _formValues
-            : isUndefined(defaultValue)
-                ? _defaultValues
-                : isString(fieldNames)
-                    ? { [fieldNames]: defaultValue }
-                    : defaultValue));
-        if (!fieldNames) {
-            isGlobal && (_names.watchAll = true);
-            return fieldValues;
-        }
-        const result = [];
-        for (const fieldName of convertToArrayPayload(fieldNames)) {
-            isGlobal && _names.watch.add(fieldName);
-            result.push(get(fieldValues, fieldName));
-        }
-        return Array.isArray(fieldNames) ? result : result[0];
-    };
-    const _updateFieldArray = (keyName, name, method, args, values = [], shouldSet = true, shouldSetFields = true) => {
-        let output;
-        _stateFlags.action = true;
-        if (shouldSetFields && get(_fields, name)) {
-            output = method(get(_fields, name), args.argA, args.argB);
-            shouldSet && set(_fields, name, output);
-        }
-        if (Array.isArray(get(_formState.errors, name))) {
-            const output = method(get(_formState.errors, name), args.argA, args.argB);
-            shouldSet && set(_formState.errors, name, output);
-            unsetEmptyArray(_formState.errors, name);
-        }
-        if (_proxyFormState.touchedFields && get(_formState.touchedFields, name)) {
-            const output = method(get(_formState.touchedFields, name), args.argA, args.argB);
-            shouldSet && set(_formState.touchedFields, name, output);
-            unsetEmptyArray(_formState.touchedFields, name);
-        }
-        if (_proxyFormState.dirtyFields || _proxyFormState.isDirty) {
-            set(_formState.dirtyFields, name, setFieldArrayDirtyFields(omitKey(values, keyName), get(_defaultValues, name, []), get(_formState.dirtyFields, name, [])));
-            values &&
-                set(_formState.dirtyFields, name, setFieldArrayDirtyFields(omitKey(values, keyName), get(_defaultValues, name, []), get(_formState.dirtyFields, name, [])));
-            unsetEmptyArray(_formState.dirtyFields, name);
-        }
-        _subjects.state.next({
-            isDirty: _getIsDirty(name, omitKey(values, keyName)),
-            dirtyFields: _formState.dirtyFields,
-            errors: _formState.errors,
-            isValid: _formState.isValid,
-        });
-    };
-    const _getFieldArrayValue = (name) => get(_stateFlags.mount ? _formValues : _defaultValues, name, []);
-    const setValue = (name, value, options = {}) => {
-        const field = get(_fields, name);
-        const isFieldArray = _names.array.has(name);
-        set(_formValues, name, value);
-        if (isFieldArray) {
-            _subjects.array.next({
-                name,
-                values: _formValues,
-            });
-            if ((_proxyFormState.isDirty || _proxyFormState.dirtyFields) &&
-                options.shouldDirty) {
-                set(_formState.dirtyFields, name, setFieldArrayDirtyFields(value, get(_defaultValues, name, []), get(_formState.dirtyFields, name, [])));
-                _subjects.state.next({
-                    name,
-                    dirtyFields: _formState.dirtyFields,
-                    isDirty: _getIsDirty(name, value),
-                });
-            }
+            field._f.deps && trigger(field._f.deps);
+            shouldRenderByError(false, name, isValid, error, fieldState);
         }
-        else {
-            field && !field._f && !isNullOrUndefined(value)
-                ? setValues(name, value, options)
-                : setFieldValue(name, value, options, true);
-        }
-        isFieldWatched(name) && _subjects.state.next({});
-        _subjects.watch.next({
-            name,
-        });
     };
     const trigger = async (name, options = {}) => {
-        const fieldNames = convertToArrayPayload(name);
         let isValid;
+        let validationResult;
+        const fieldNames = convertToArrayPayload(name);
         _subjects.state.next({
             isValidating: true,
         });
-        if (formOptions.resolver) {
-            const schemaResult = await executeResolverValidation(isUndefined(name) ? name : fieldNames);
-            isValid = name
-                ? fieldNames.every((name) => !get(schemaResult, name))
-                : isEmptyObject(schemaResult);
+        if (_options.resolver) {
+            const errors = await executeResolverValidation(isUndefined(name) ? name : fieldNames);
+            isValid = isEmptyObject(errors);
+            validationResult = name
+                ? !fieldNames.some((name) => get(errors, name))
+                : isValid;
+        }
+        else if (name) {
+            validationResult = (await Promise.all(fieldNames.map(async (fieldName) => {
+                const field = get(_fields, fieldName);
+                return await executeBuildInValidation(field && field._f ? { [fieldName]: field } : field);
+            }))).every(Boolean);
+            _updateValid();
         }
         else {
-            if (name) {
-                isValid = (await Promise.all(fieldNames.map(async (fieldName) => {
-                    const field = get(_fields, fieldName);
-                    return await validateForm(field && field._f ? { [fieldName]: field } : field);
-                }))).every(Boolean);
-                _updateValid();
-            }
-            else {
-                isValid = await validateForm(_fields);
-            }
+            validationResult = isValid = await executeBuildInValidation(_fields);
         }
-        _subjects.state.next(Object.assign(Object.assign({}, (isString(name) ? { name } : {})), { errors: _formState.errors, isValid, isValidating: false }));
-        if (options.shouldFocus && !isValid) {
+        _subjects.state.next(Object.assign(Object.assign({}, (!isString(name) || isValid !== _formState.isValid ? {} : { name })), { errors: _formState.errors, isValid, isValidating: false }));
+        options.shouldFocus &&
+            !validationResult &&
             focusFieldBy(_fields, (key) => get(_formState.errors, key), name ? fieldNames : _names.mount);
-        }
-        return isValid;
+        return validationResult;
     };
     const getValues = (fieldNames) => {
         const values = Object.assign(Object.assign({}, _defaultValues), (_stateFlags.mount ? _formValues : {}));
@@ -1415,88 +1427,83 @@ function createFormControl(props = {}) {
         });
         options && options.shouldFocus && ref && ref.focus && ref.focus();
     };
-    const watch = (fieldName, defaultValue) => isFunction(fieldName)
+    const watch = (name, defaultValue) => isFunction(name)
         ? _subjects.watch.subscribe({
-            next: (info) => fieldName(_getWatch(undefined, defaultValue), info),
+            next: (info) => name(_getWatch(undefined, defaultValue), info),
         })
-        : _getWatch(fieldName, defaultValue, false, true);
+        : _getWatch(name, defaultValue, true);
     const unregister = (name, options = {}) => {
-        for (const inputName of name ? convertToArrayPayload(name) : _names.mount) {
-            _names.mount.delete(inputName);
-            _names.array.delete(inputName);
-            if (get(_fields, inputName)) {
+        for (const fieldName of name ? convertToArrayPayload(name) : _names.mount) {
+            _names.mount.delete(fieldName);
+            _names.array.delete(fieldName);
+            if (get(_fields, fieldName)) {
                 if (!options.keepValue) {
-                    unset(_fields, inputName);
-                    unset(_formValues, inputName);
+                    unset(_fields, fieldName);
+                    unset(_formValues, fieldName);
                 }
-                !options.keepError && unset(_formState.errors, inputName);
-                !options.keepDirty && unset(_formState.dirtyFields, inputName);
-                !options.keepTouched && unset(_formState.touchedFields, inputName);
-                !formOptions.shouldUnregister &&
+                !options.keepError && unset(_formState.errors, fieldName);
+                !options.keepDirty && unset(_formState.dirtyFields, fieldName);
+                !options.keepTouched && unset(_formState.touchedFields, fieldName);
+                !_options.shouldUnregister &&
                     !options.keepDefaultValue &&
-                    unset(_defaultValues, inputName);
+                    unset(_defaultValues, fieldName);
             }
         }
         _subjects.watch.next({});
-        _subjects.state.next(Object.assign(Object.assign({}, _formState), (!options.keepDirty ? {} : { isDirty: _getIsDirty() })));
+        _subjects.state.next(Object.assign(Object.assign({}, _formState), (!options.keepDirty ? {} : { isDirty: _getDirty() })));
         !options.keepIsValid && _updateValid();
     };
-    const registerFieldRef = (name, fieldRef, options) => {
-        register(name, options);
-        let field = get(_fields, name);
-        const ref = isUndefined(fieldRef.value)
-            ? fieldRef.querySelectorAll
-                ? fieldRef.querySelectorAll('input,select,textarea')[0] ||
-                    fieldRef
-                : fieldRef
-            : fieldRef;
-        const isRadioOrCheckbox = isRadioOrCheckboxFunction(ref);
-        if (ref === field._f.ref ||
-            (isRadioOrCheckbox &&
-                compact(field._f.refs || []).find((option) => option === ref))) {
-            return;
-        }
-        field = {
-            _f: isRadioOrCheckbox
-                ? Object.assign(Object.assign({}, field._f), { refs: [
-                        ...compact(field._f.refs || []).filter((ref) => isHTMLElement(ref) && document.contains(ref)),
-                        ref,
-                    ], ref: { type: ref.type, name } }) : Object.assign(Object.assign({}, field._f), { ref }),
-        };
-        set(_fields, name, field);
-        (!options || !options.disabled) &&
-            _updateValidAndInputValue(name, false, ref);
-    };
     const register = (name, options = {}) => {
         const field = get(_fields, name);
         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);
-        if (!isUndefined(options.value)) {
-            set(_formValues, name, options.value);
-        }
-        if (field && isBoolean(options.disabled)) {
-            set(_formValues, name, options.disabled
-                ? undefined
-                : get(_formValues, name, getFieldValue(field._f)));
-        }
-        !field && _updateValidAndInputValue(name, true);
+        !isUndefined(options.value) && set(_formValues, name, options.value);
+        field
+            ? isBoolean(options.disabled) &&
+                set(_formValues, name, options.disabled
+                    ? undefined
+                    : get(_formValues, name, getFieldValue(field._f)))
+            : updateValidAndValue(name, true);
         return isWindowUndefined
             ? { name: name }
             : Object.assign(Object.assign({ name }, (isBoolean(options.disabled)
                 ? { disabled: options.disabled }
                 : {})), { onChange: handleChange, onBlur: handleChange, ref: (ref) => {
                     if (ref) {
-                        registerFieldRef(name, ref, options);
+                        register(name, options);
+                        let field = get(_fields, name);
+                        const fieldRef = isUndefined(ref.value)
+                            ? ref.querySelectorAll
+                                ? ref.querySelectorAll('input,select,textarea')[0] ||
+                                    ref
+                                : ref
+                            : ref;
+                        const isRadioOrCheckbox = isRadioOrCheckboxFunction(fieldRef);
+                        if (fieldRef === field._f.ref ||
+                            (isRadioOrCheckbox &&
+                                compact(field._f.refs || []).find((option) => option === fieldRef))) {
+                            return;
+                        }
+                        field = {
+                            _f: isRadioOrCheckbox
+                                ? Object.assign(Object.assign({}, field._f), { refs: [
+                                        ...compact(field._f.refs || []).filter((ref) => isHTMLElement(ref) && document.contains(ref)),
+                                        fieldRef,
+                                    ], ref: { type: fieldRef.type, name } }) : Object.assign(Object.assign({}, field._f), { ref: fieldRef }),
+                        };
+                        set(_fields, name, field);
+                        (!options || !options.disabled) &&
+                            updateValidAndValue(name, false, fieldRef);
                     }
                     else {
                         const field = get(_fields, name, {});
-                        const _shouldUnregister = formOptions.shouldUnregister || options.shouldUnregister;
+                        const shouldUnregister = _options.shouldUnregister || options.shouldUnregister;
                         if (field._f) {
                             field._f.mount = false;
                         }
-                        _shouldUnregister &&
+                        shouldUnregister &&
                             !(isNameInFieldArray(_names.array, name) && _stateFlags.action) &&
                             _names.unMount.add(name);
                     }
@@ -1513,13 +1520,13 @@ function createFormControl(props = {}) {
             isSubmitting: true,
         });
         try {
-            if (formOptions.resolver) {
+            if (_options.resolver) {
                 const { errors, values } = await executeResolver();
                 _formState.errors = errors;
                 fieldValues = values;
             }
             else {
-                await validateForm(_fields);
+                await executeBuildInValidation(_fields);
             }
             if (isEmptyObject(_formState.errors) &&
                 Object.keys(_formState.errors).every((name) => get(fieldValues, name))) {
@@ -1531,7 +1538,7 @@ function createFormControl(props = {}) {
             }
             else {
                 onInvalid && (await onInvalid(_formState.errors, e));
-                formOptions.shouldFocusError &&
+                _options.shouldFocusError &&
                     focusFieldBy(_fields, (key) => get(_formState.errors, key), _names.mount);
             }
         }
@@ -1552,22 +1559,23 @@ function createFormControl(props = {}) {
     };
     const reset = (formValues, keepStateOptions = {}) => {
         const updatedValues = formValues || _defaultValues;
-        const values = cloneObject(updatedValues);
+        const cloneUpdatedValues = cloneObject(updatedValues);
         if (!keepStateOptions.keepValues) {
-            _formValues = props.shouldUnregister ? {} : values;
-        }
-        if (isWeb && !keepStateOptions.keepValues) {
-            for (const name of _names.mount) {
-                const field = get(_fields, name);
-                if (field && field._f) {
-                    const inputRef = Array.isArray(field._f.refs)
-                        ? field._f.refs[0]
-                        : field._f.ref;
-                    try {
-                        isHTMLElement(inputRef) && inputRef.closest('form').reset();
-                        break;
+            _formValues = props.shouldUnregister ? {} : cloneUpdatedValues;
+            if (isWeb) {
+                for (const name of _names.mount) {
+                    const field = get(_fields, name);
+                    if (field && field._f) {
+                        const fieldReference = Array.isArray(field._f.refs)
+                            ? field._f.refs[0]
+                            : field._f.ref;
+                        try {
+                            isHTMLElement(fieldReference) &&
+                                fieldReference.closest('form').reset();
+                            break;
+                        }
+                        catch (_a) { }
                     }
-                    catch (_a) { }
                 }
             }
         }
@@ -1583,7 +1591,7 @@ function createFormControl(props = {}) {
             });
             _subjects.watch.next({});
             _subjects.array.next({
-                values,
+                values: cloneUpdatedValues,
             });
         }
         _names = {
@@ -1623,27 +1631,17 @@ function createFormControl(props = {}) {
         _stateFlags.watch = !!props.shouldUnregister;
     };
     const setFocus = (name) => get(_fields, name)._f.ref.focus();
-    const _removeFields = () => {
-        for (const name of _names.unMount) {
-            const field = get(_fields, name);
-            field &&
-                (field._f.refs ? field._f.refs.every(live) : live(field._f.ref)) &&
-                unregister(name);
-        }
-        _names.unMount = new Set();
-    };
     return {
         control: {
             register,
             unregister,
             _getWatch,
-            _getIsDirty,
+            _getDirty,
             _updateValid,
-            _removeFields,
+            _removeUnmounted,
             _updateFieldArray,
-            _getFieldArrayValue,
+            _getFieldArray,
             _subjects,
-            _shouldUnregister: formOptions.shouldUnregister,
             _proxyFormState,
             get _fields() {
                 return _fields;
@@ -1681,8 +1679,11 @@ function createFormControl(props = {}) {
             set _formState(value) {
                 _formState = value;
             },
-            _updateProps: (options) => {
-                formOptions = Object.assign(Object.assign({}, defaultOptions), options);
+            get _options() {
+                return _options;
+            },
+            set _options(value) {
+                _options = Object.assign(Object.assign({}, _options), value);
             },
         },
         trigger,
@@ -1714,25 +1715,21 @@ function useForm(props = {}) {
         errors: {},
     });
     if (_formControl.current) {
-        _formControl.current.control._updateProps(props);
+        _formControl.current.control._options = props;
     }
     else {
         _formControl.current = Object.assign(Object.assign({}, createFormControl(props)), { formState });
     }
     const control = _formControl.current.control;
-    React.useEffect(() => {
-        const formStateSubscription = control._subjects.state.subscribe({
-            next(formState) {
-                if (shouldRenderFormState(formState, control._proxyFormState, true)) {
-                    control._formState = Object.assign(Object.assign({}, control._formState), formState);
-                    updateFormState(Object.assign({}, control._formState));
-                }
-            },
-        });
-        return () => {
-            formStateSubscription.unsubscribe();
-        };
-    }, [control]);
+    useSubscribe({
+        subject: control._subjects.state,
+        callback: (formState) => {
+            if (shouldRenderFormState(formState, control._proxyFormState, true)) {
+                control._formState = Object.assign(Object.assign({}, control._formState), formState);
+                updateFormState(Object.assign({}, control._formState));
+            }
+        },
+    });
     React.useEffect(() => {
         if (!control._stateFlags.mount) {
             control._proxyFormState.isValid && control._updateValid();
@@ -1742,7 +1739,7 @@ function useForm(props = {}) {
             control._stateFlags.watch = false;
             control._subjects.state.next({});
         }
-        control._removeFields();
+        control._removeUnmounted();
     });
     _formControl.current.formState = getProxyFormState(formState, control._proxyFormState);
     return _formControl.current;
@@ -1753,31 +1750,30 @@ function useWatch(props) {
     const { control = methods.control, name, defaultValue, disabled, } = props || {};
     const _name = React.useRef(name);
     _name.current = name;
+    useSubscribe({
+        disabled,
+        subject: control._subjects.watch,
+        callback: ({ name }) => {
+            if (!_name.current ||
+                !name ||
+                convertToArrayPayload(_name.current).some((currentName) => name &&
+                    currentName &&
+                    (name.startsWith(currentName) ||
+                        currentName.startsWith(name)))) {
+                control._stateFlags.mount = true;
+                const fieldValues = control._getWatch(_name.current, defaultValue);
+                updateValue(isObject(fieldValues)
+                    ? Object.assign({}, fieldValues) : Array.isArray(fieldValues)
+                    ? [...fieldValues]
+                    : fieldValues);
+            }
+        },
+    });
     const [value, updateValue] = React.useState(isUndefined(defaultValue)
         ? control._getWatch(name)
         : defaultValue);
     React.useEffect(() => {
-        const watchSubscription = control._subjects.watch.subscribe({
-            next: ({ name }) => {
-                if (!_name.current ||
-                    !name ||
-                    convertToArrayPayload(_name.current).some((fieldName) => name &&
-                        fieldName &&
-                        (fieldName.startsWith(name) ||
-                            name.startsWith(fieldName)))) {
-                    const result = control._getWatch(_name.current, defaultValue, true);
-                    updateValue(isObject(result)
-                        ? Object.assign({}, result) : Array.isArray(result)
-                        ? [...result]
-                        : result);
-                }
-            },
-        });
-        disabled && watchSubscription.unsubscribe();
-        return () => watchSubscription.unsubscribe();
-    }, [disabled, control, defaultValue]);
-    React.useEffect(() => {
-        control._removeFields();
+        control._removeUnmounted();
     });
     return value;
 }