react-hook-form 7.12.1-next.0 → 7.12.1

package/dist/index.esm.js

@@ -70,46 +70,50 @@ FormContext.displayName = 'RHFContext';
 const useFormContext = () => React.useContext(FormContext);
 const FormProvider = (props) => (React.createElement(FormContext.Provider, { value: omit(props, 'children') }, props.children));
 
-var getProxyFormState = (formState, _proxyFormState, localProxyFormState, isRoot = true) => {
-    function createGetter(prop) {
-        return () => {
-            if (prop in formState) {
-                if (_proxyFormState[prop] !== VALIDATION_MODE.all) {
-                    _proxyFormState[prop] = !isRoot || VALIDATION_MODE.all;
+var getProxyFormState = (isProxyEnabled, formState, readFormStateRef, localReadFormStateRef, isRoot = true) => isProxyEnabled
+    ? new Proxy(formState, {
+        get: (obj, prop) => {
+            if (prop in obj) {
+                if (readFormStateRef.current[prop] !== VALIDATION_MODE.all) {
+                    readFormStateRef.current[prop] = isRoot
+                        ? VALIDATION_MODE.all
+                        : true;
                 }
-                localProxyFormState && (localProxyFormState[prop] = true);
-                return formState[prop];
+                localReadFormStateRef &&
+                    (localReadFormStateRef.current[prop] = true);
+                return obj[prop];
             }
             return undefined;
-        };
-    }
-    const result = {};
-    for (const key in formState) {
-        Object.defineProperty(result, key, {
-            get: createGetter(key),
-        });
-    }
-    return result;
-};
+        },
+    })
+    : formState;
 
 var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
 
-var shouldRenderFormState = (formStateData, _proxyFormState, isRoot) => {
+var shouldRenderFormState = (formStateData, readFormStateRef, isRoot) => {
     const formState = omit(formStateData, 'name');
     return (isEmptyObject(formState) ||
-        Object.keys(formState).length >= Object.keys(_proxyFormState).length ||
-        Object.keys(formState).find((key) => _proxyFormState[key] ===
-            (!isRoot || VALIDATION_MODE.all)));
+        Object.keys(formState).length >= Object.keys(readFormStateRef).length ||
+        Object.keys(formState).find((key) => readFormStateRef[key] ===
+            (isRoot ? VALIDATION_MODE.all : true)));
 };
 
 var convertToArrayPayload = (value) => Array.isArray(value) ? value : [value];
 
+var isWeb = typeof window !== 'undefined' &&
+    typeof window.HTMLElement !== 'undefined' &&
+    typeof document !== 'undefined';
+
+const isProxyEnabled = isWeb ? 'Proxy' in window : typeof Proxy !== 'undefined';
+
 function useFormState(props) {
+    const { control, name } = props || {};
     const methods = useFormContext();
-    const { control = methods.control, disabled, name } = props || {};
+    const { formStateRef, subjectsRef, readFormStateRef } = control || methods.control;
     const nameRef = React.useRef(name);
-    const [formState, updateFormState] = React.useState(control._formState.val);
-    const _localProxyFormState = React.useRef({
+    nameRef.current = name;
+    const [formState, updateFormState] = React.useState(formStateRef.current);
+    const readFormState = React.useRef({
         isDirty: false,
         dirtyFields: false,
         touchedFields: false,
@@ -117,61 +121,64 @@ function useFormState(props) {
         isValid: false,
         errors: false,
     });
-    nameRef.current = name;
     React.useEffect(() => {
-        const formStateSubscription = control._subjects.state.subscribe({
+        const formStateSubscription = subjectsRef.current.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.val), formState)),
+                shouldRenderFormState(formState, readFormState.current) &&
+                updateFormState(Object.assign(Object.assign({}, formStateRef.current), formState)),
         });
-        disabled && formStateSubscription.unsubscribe();
         return () => formStateSubscription.unsubscribe();
-    }, [disabled, control]);
-    return getProxyFormState(formState, control._proxyFormState, _localProxyFormState.current, false);
+    }, []);
+    return getProxyFormState(isProxyEnabled, formState, readFormStateRef, readFormState, false);
 }
 
-function useController(props) {
+function useController({ name, rules, defaultValue, control, shouldUnregister, }) {
     const methods = useFormContext();
-    const { name, control = methods.control, shouldUnregister } = props;
-    const [value, setInputStateValue] = React.useState(get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)));
+    const { defaultValuesRef, register, fieldsRef, unregister, namesRef, subjectsRef, shouldUnmount, inFieldArrayActionRef, } = control || methods.control;
+    const field = get(fieldsRef.current, name);
+    const [value, setInputStateValue] = React.useState(field && field._f && !isUndefined(field._f.value)
+        ? field._f.value
+        : isUndefined(get(defaultValuesRef.current, name))
+            ? defaultValue
+            : get(defaultValuesRef.current, name));
+    const { onChange, onBlur, ref } = register(name, Object.assign(Object.assign({}, rules), { value }));
     const formState = useFormState({
         control: control || methods.control,
         name,
     });
-    const registerProps = control.register(name, Object.assign(Object.assign({}, props.rules), { value }));
+    function updateIsMounted(name, value) {
+        const field = get(fieldsRef.current, name);
+        if (field && field._f) {
+            field._f.mount = value;
+        }
+    }
     React.useEffect(() => {
-        const controllerSubscription = control._subjects.control.subscribe({
+        const controllerSubscription = subjectsRef.current.control.subscribe({
             next: (data) => (!data.name || name === data.name) &&
                 setInputStateValue(get(data.values, name)),
         });
-        const field = get(control._fields, name);
-        if (field) {
-            field._f.mount = true;
-        }
+        updateIsMounted(name, true);
         return () => {
             controllerSubscription.unsubscribe();
-            const _shouldUnregisterField = control._shouldUnregister || shouldUnregister;
-            if (isNameInFieldArray(control._names.array, name)
-                ? _shouldUnregisterField && !control._isInAction.val
-                : _shouldUnregisterField) {
-                control.unregister(name);
+            const shouldUnmountField = shouldUnmount || shouldUnregister;
+            if (isNameInFieldArray(namesRef.current.array, name)
+                ? shouldUnmountField && !inFieldArrayActionRef.current
+                : shouldUnmountField) {
+                unregister(name);
             }
             else {
-                const field = get(control._fields, name);
-                if (field) {
-                    field._f.mount = false;
-                }
+                updateIsMounted(name, false);
             }
         };
-    }, [name, control, shouldUnregister]);
+    }, [name]);
     return {
         field: {
             onChange: (event) => {
                 const value = getControllerValue(event);
                 setInputStateValue(value);
-                registerProps.onChange({
+                onChange({
                     target: {
                         value,
                         name: name,
@@ -180,7 +187,7 @@ function useController(props) {
                 });
             },
             onBlur: () => {
-                registerProps.onBlur({
+                onBlur({
                     target: {
                         name: name,
                     },
@@ -190,7 +197,7 @@ function useController(props) {
             name,
             value,
             ref: (elm) => elm &&
-                registerProps.ref({
+                ref({
                     focus: () => elm.focus && elm.focus(),
                     setCustomValidity: (message) => elm.setCustomValidity(message),
                     reportValidity: () => elm.reportValidity(),
@@ -260,9 +267,27 @@ const focusFieldBy = (fields, callback, fieldsNames) => {
     }
 };
 
-var getFocusFieldName = (name, index, options) => options && !options.shouldFocus
-    ? options.focusName || `${name}.${options.focusIndex}.`
-    : `${name}.${index}.`;
+const getFieldsValues = (fieldsRef, output = {}) => {
+    for (const name in fieldsRef.current) {
+        const field = fieldsRef.current[name];
+        if (field && !isNullOrUndefined(output)) {
+            const _f = field._f;
+            const current = omit(field, '_f');
+            set(output, name, _f && _f.ref
+                ? _f.ref.disabled || (_f.refs && _f.refs.every((ref) => ref.disabled))
+                    ? undefined
+                    : _f.value
+                : Array.isArray(field)
+                    ? []
+                    : {});
+            current &&
+                getFieldsValues({
+                    current,
+                }, output[name]);
+        }
+    }
+    return output;
+};
 
 var generateId = () => {
     const d = typeof performance === 'undefined' ? Date.now() : performance.now() * 1000;
@@ -274,6 +299,80 @@ var generateId = () => {
 
 var mapIds = (values = [], keyName) => values.map((value) => (Object.assign({ [keyName]: (value && value[keyName]) || generateId() }, value)));
 
+var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
+
+function deepEqual(object1, object2, isErrorObject) {
+    if (isPrimitive(object1) ||
+        isPrimitive(object2) ||
+        isDateObject(object1) ||
+        isDateObject(object2)) {
+        return object1 === object2;
+    }
+    if (!React.isValidElement(object1)) {
+        const keys1 = Object.keys(object1);
+        const keys2 = Object.keys(object2);
+        if (keys1.length !== keys2.length) {
+            return false;
+        }
+        for (const key of keys1) {
+            const val1 = object1[key];
+            if (!(isErrorObject && key === 'ref')) {
+                const val2 = object2[key];
+                if ((isObject(val1) || Array.isArray(val1)) &&
+                    (isObject(val2) || Array.isArray(val2))
+                    ? !deepEqual(val1, val2, isErrorObject)
+                    : val1 !== val2) {
+                    return false;
+                }
+            }
+        }
+    }
+    return true;
+}
+
+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)));
+
 function append(data, value) {
     return [...convertToArrayPayload(data), ...convertToArrayPayload(value)];
 }
@@ -299,8 +398,6 @@ var moveArrayAt = (data, from, to) => {
     return [];
 };
 
-var omitKey = (fields, keyName) => fields.map((field = {}) => omit(field, keyName));
-
 function prepend(data, value) {
     return [...convertToArrayPayload(value), ...convertToArrayPayload(data)];
 }
@@ -363,247 +460,211 @@ function unset(object, path) {
     return object;
 }
 
-const useFieldArray = (props) => {
+const useFieldArray = ({ control, name, keyName = 'id', shouldUnregister, }) => {
     const methods = useFormContext();
-    const { control = methods.control, name, keyName = 'id', shouldUnregister, } = props;
-    const _focusName = React.useRef('');
-    const [fields, setFields] = React.useState(mapIds(control._getFieldArrayValue(name), keyName));
-    control._names.array.add(name);
+    const focusNameRef = React.useRef('');
+    const isMountedRef = React.useRef(false);
+    const { getIsDirty, namesRef, fieldsRef, defaultValuesRef, formStateRef, subjectsRef, readFormStateRef, updateIsValid, fieldArrayDefaultValuesRef, unregister, shouldUnmount, inFieldArrayActionRef, setValues, register, } = control || methods.control;
+    const [fields, setFields] = React.useState(mapIds((get(fieldsRef.current, name) && isMountedRef.current
+        ? get(getFieldsValues(fieldsRef), name)
+        : get(fieldArrayDefaultValuesRef.current, getNodeParentName(name))
+            ? get(fieldArrayDefaultValuesRef.current, name)
+            : get(defaultValuesRef.current, name)) || [], keyName));
+    set(fieldArrayDefaultValuesRef.current, name, [...fields]);
+    namesRef.current.array.add(name);
+    const omitKey = (fields) => fields.map((field = {}) => omit(field, keyName));
+    const getCurrentFieldsValues = () => {
+        const values = get(getFieldsValues(fieldsRef), name, []);
+        return mapIds(get(fieldArrayDefaultValuesRef.current, name, []).map((item, index) => (Object.assign(Object.assign({}, item), values[index]))), keyName);
+    };
+    const getFocusFieldName = (index, options) => options && !options.shouldFocus
+        ? options.focusName || `${name}.${options.focusIndex}.`
+        : `${name}.${index}.`;
+    const setFieldsAndNotify = (fieldsValues = []) => setFields(mapIds(fieldsValues, keyName));
+    const cleanup = (ref) => !compact(get(ref, name, [])).length && unset(ref, name);
+    const batchStateUpdate = (method, args, updatedFieldArrayValues = [], shouldSet = true) => {
+        inFieldArrayActionRef.current = true;
+        if (get(fieldsRef.current, name)) {
+            const output = method(get(fieldsRef.current, name), args.argA, args.argB);
+            shouldSet && set(fieldsRef.current, name, output);
+        }
+        if (Array.isArray(get(formStateRef.current.errors, name))) {
+            const output = method(get(formStateRef.current.errors, name), args.argA, args.argB);
+            shouldSet && set(formStateRef.current.errors, name, output);
+            cleanup(formStateRef.current.errors);
+        }
+        if (readFormStateRef.current.touchedFields &&
+            get(formStateRef.current.touchedFields, name)) {
+            const output = method(get(formStateRef.current.touchedFields, name), args.argA, args.argB);
+            shouldSet && set(formStateRef.current.touchedFields, name, output);
+            cleanup(formStateRef.current.touchedFields);
+        }
+        if (readFormStateRef.current.dirtyFields ||
+            readFormStateRef.current.isDirty) {
+            set(formStateRef.current.dirtyFields, name, setFieldArrayDirtyFields(omitKey(updatedFieldArrayValues), get(defaultValuesRef.current, name, []), get(formStateRef.current.dirtyFields, name, [])));
+            updatedFieldArrayValues &&
+                set(formStateRef.current.dirtyFields, name, setFieldArrayDirtyFields(omitKey(updatedFieldArrayValues), get(defaultValuesRef.current, name, []), get(formStateRef.current.dirtyFields, name, [])));
+            cleanup(formStateRef.current.dirtyFields);
+        }
+        subjectsRef.current.state.next({
+            dirtyFields: formStateRef.current
+                .dirtyFields,
+            isDirty: getIsDirty(name, omitKey(updatedFieldArrayValues)),
+            errors: formStateRef.current.errors,
+            isValid: formStateRef.current.isValid,
+        });
+    };
+    const registerFieldArray = (values, index = 0, parentName = '') => values.forEach((appendValueItem, valueIndex) => {
+        const rootName = `${parentName || name}.${parentName ? valueIndex : index + valueIndex}`;
+        isPrimitive(appendValueItem)
+            ? register(rootName, {
+                value: appendValueItem,
+            })
+            : Object.entries(appendValueItem).forEach(([key, value]) => {
+                const inputName = rootName + '.' + key;
+                Array.isArray(value)
+                    ? registerFieldArray(value, valueIndex, inputName)
+                    : register(inputName, { value });
+            });
+    });
     const append$1 = (value, options) => {
         const appendValue = convertToArrayPayload(value);
-        const updatedFieldArrayValues = append(control._getFieldArrayValue(name), appendValue);
-        setFields(mapIds(updatedFieldArrayValues, keyName));
-        control._bathFieldArrayUpdate(keyName, name, append, {
+        const updatedFieldArrayValues = append(getCurrentFieldsValues(), appendValue);
+        const currentIndex = updatedFieldArrayValues.length - appendValue.length;
+        setFieldsAndNotify(updatedFieldArrayValues);
+        batchStateUpdate(append, {
             argA: fillEmptyArray(value),
         }, updatedFieldArrayValues, false);
-        _focusName.current = getFocusFieldName(name, updatedFieldArrayValues.length - appendValue.length, options);
+        registerFieldArray(appendValue, currentIndex);
+        focusNameRef.current = getFocusFieldName(currentIndex, options);
     };
     const prepend$1 = (value, options) => {
-        const updatedFieldArrayValues = prepend(control._getFieldArrayValue(name), convertToArrayPayload(value));
-        setFields(mapIds(updatedFieldArrayValues, keyName));
-        control._bathFieldArrayUpdate(keyName, name, prepend, {
+        const prependValue = convertToArrayPayload(value);
+        const updatedFieldArrayValues = prepend(getCurrentFieldsValues(), prependValue);
+        setFieldsAndNotify(updatedFieldArrayValues);
+        batchStateUpdate(prepend, {
             argA: fillEmptyArray(value),
         }, updatedFieldArrayValues);
-        _focusName.current = getFocusFieldName(name, 0, options);
+        registerFieldArray(prependValue);
+        focusNameRef.current = getFocusFieldName(0, options);
     };
     const remove = (index) => {
-        const updatedFieldArrayValues = removeArrayAt(control._getFieldArrayValue(name), index);
-        setFields(mapIds(updatedFieldArrayValues, keyName));
-        control._bathFieldArrayUpdate(keyName, name, removeArrayAt, {
+        const updatedFieldArrayValues = removeArrayAt(getCurrentFieldsValues(), index);
+        setFieldsAndNotify(updatedFieldArrayValues);
+        batchStateUpdate(removeArrayAt, {
             argA: index,
         }, updatedFieldArrayValues);
     };
     const insert$1 = (index, value, options) => {
-        const updatedFieldArrayValues = insert(control._getFieldArrayValue(name), index, convertToArrayPayload(value));
-        setFields(mapIds(updatedFieldArrayValues, keyName));
-        control._bathFieldArrayUpdate(keyName, name, insert, {
+        const insertValue = convertToArrayPayload(value);
+        const updatedFieldArrayValues = insert(getCurrentFieldsValues(), index, insertValue);
+        setFieldsAndNotify(updatedFieldArrayValues);
+        batchStateUpdate(insert, {
             argA: index,
             argB: fillEmptyArray(value),
         }, updatedFieldArrayValues);
-        _focusName.current = getFocusFieldName(name, index, options);
+        registerFieldArray(insertValue, index);
+        focusNameRef.current = getFocusFieldName(index, options);
     };
     const swap = (indexA, indexB) => {
-        const fieldValues = control._getFieldArrayValue(name);
+        const fieldValues = getCurrentFieldsValues();
         swapArrayAt(fieldValues, indexA, indexB);
-        control._bathFieldArrayUpdate(keyName, name, swapArrayAt, {
+        batchStateUpdate(swapArrayAt, {
             argA: indexA,
             argB: indexB,
         }, fieldValues, false);
-        setFields(mapIds(fieldValues, keyName));
+        setFieldsAndNotify(fieldValues);
     };
     const move = (from, to) => {
-        const fieldValues = control._getFieldArrayValue(name);
+        const fieldValues = getCurrentFieldsValues();
         moveArrayAt(fieldValues, from, to);
-        setFields(mapIds(fieldValues, keyName));
-        control._bathFieldArrayUpdate(keyName, name, moveArrayAt, {
+        setFieldsAndNotify(fieldValues);
+        batchStateUpdate(moveArrayAt, {
             argA: from,
             argB: to,
         }, fieldValues, false);
     };
     const update = (index, value) => {
-        control._setValues((name + '.' + index), value, {
-            shouldValidate: !!control._proxyFormState.isValid,
-            shouldDirty: !!(control._proxyFormState.dirtyFields || control._proxyFormState.isDirty),
+        setValues((name + '.' + index), value, {
+            shouldValidate: !!readFormStateRef.current.isValid,
+            shouldDirty: !!(readFormStateRef.current.dirtyFields ||
+                readFormStateRef.current.isDirty),
         });
-        const fieldValues = control._getFieldArrayValue(name);
+        const fieldValues = getCurrentFieldsValues();
         fieldValues[index] = value;
-        setFields(mapIds(fieldValues, keyName));
+        setFieldsAndNotify(fieldValues);
     };
     React.useEffect(() => {
-        control._isInAction.val = false;
-        if (control._names.watchAll) {
-            control._subjects.state.next({});
+        inFieldArrayActionRef.current = false;
+        if (namesRef.current.watchAll) {
+            subjectsRef.current.state.next({});
         }
         else {
-            for (const watchField of control._names.watch) {
+            for (const watchField of namesRef.current.watch) {
                 if (name.startsWith(watchField)) {
-                    control._subjects.state.next({});
+                    subjectsRef.current.state.next({});
                     break;
                 }
             }
         }
-        control._subjects.watch.next({
+        subjectsRef.current.watch.next({
             name,
-            values: control._formValues,
+            values: getFieldsValues(fieldsRef),
         });
-        _focusName.current &&
-            focusFieldBy(control._fields, (key) => key.startsWith(_focusName.current));
-        _focusName.current = '';
-        control._subjects.array.next({
+        focusNameRef.current &&
+            focusFieldBy(fieldsRef.current, (key) => key.startsWith(focusNameRef.current));
+        focusNameRef.current = '';
+        subjectsRef.current.array.next({
             name,
-            values: omitKey([...fields], keyName),
+            values: omitKey([...fields]),
         });
-        control._proxyFormState.isValid && control._updateValid();
-    }, [fields, name, control, keyName]);
+        readFormStateRef.current.isValid && updateIsValid();
+    }, [fields, name]);
     React.useEffect(() => {
-        const fieldArraySubscription = control._subjects.array.subscribe({
-            next(payload) {
-                if (payload.isReset) {
-                    unset(control._fields, payload.name || name);
-                    unset(control._formValues, payload.name || name);
-                    payload.name
-                        ? set(control._formValues, payload.name, payload.values)
-                        : payload.values && (control._formValues = payload.values);
-                    setFields(mapIds(get(control._formValues, name), keyName));
+        const fieldArraySubscription = subjectsRef.current.array.subscribe({
+            next({ name: inputFieldArrayName, values, isReset }) {
+                if (isReset) {
+                    unset(fieldsRef.current, inputFieldArrayName || name);
+                    inputFieldArrayName
+                        ? set(fieldArrayDefaultValuesRef.current, inputFieldArrayName, values)
+                        : (fieldArrayDefaultValuesRef.current = values);
+                    setFieldsAndNotify(get(fieldArrayDefaultValuesRef.current, name));
                 }
             },
         });
-        !get(control._formValues, name) && set(control._formValues, name, []);
+        !get(fieldsRef.current, name) && set(fieldsRef.current, name, []);
+        isMountedRef.current = true;
         return () => {
             fieldArraySubscription.unsubscribe();
-            if (control._shouldUnregister || shouldUnregister) {
-                control.unregister(name);
-                unset(control._formValues, name);
+            if (shouldUnmount || shouldUnregister) {
+                unregister(name);
+                unset(fieldArrayDefaultValuesRef.current, name);
             }
             else {
-                const fieldArrayValues = get(control._formValues, name);
-                fieldArrayValues && set(control._formValues, name, fieldArrayValues);
+                const fieldArrayValues = get(getFieldsValues(fieldsRef), name);
+                fieldArrayValues &&
+                    set(fieldArrayDefaultValuesRef.current, name, fieldArrayValues);
             }
         };
-    }, [name, control, keyName, shouldUnregister]);
+    }, []);
     return {
-        swap: React.useCallback(swap, [name, control, keyName]),
-        move: React.useCallback(move, [name, control, keyName]),
-        prepend: React.useCallback(prepend$1, [name, control, keyName]),
-        append: React.useCallback(append$1, [name, control, keyName]),
-        remove: React.useCallback(remove, [name, control, keyName]),
-        insert: React.useCallback(insert$1, [name, control, keyName]),
-        update: React.useCallback(update, [name, control, keyName]),
+        swap: React.useCallback(swap, [name]),
+        move: React.useCallback(move, [name]),
+        prepend: React.useCallback(prepend$1, [name]),
+        append: React.useCallback(append$1, [name]),
+        remove: React.useCallback(remove, [name]),
+        insert: React.useCallback(insert$1, [name]),
+        update: React.useCallback(update, [name]),
         fields: fields,
     };
 };
 
-var debounce = (callback, wait) => {
-    let timer = 0;
-    return (...args) => {
-        clearTimeout(timer);
-        timer = setTimeout(() => callback(...args), wait);
-    };
-};
-
-var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
-
-function deepEqual(object1, object2, isErrorObject) {
-    if (isPrimitive(object1) ||
-        isPrimitive(object2) ||
-        isDateObject(object1) ||
-        isDateObject(object2)) {
-        return object1 === object2;
-    }
-    if (!React.isValidElement(object1)) {
-        const keys1 = Object.keys(object1);
-        const keys2 = Object.keys(object2);
-        if (keys1.length !== keys2.length) {
-            return false;
-        }
-        for (const key of keys1) {
-            const val1 = object1[key];
-            if (!(isErrorObject && key === 'ref')) {
-                const val2 = object2[key];
-                if ((isObject(val1) || Array.isArray(val1)) &&
-                    (isObject(val2) || Array.isArray(val2))
-                    ? !deepEqual(val1, val2, isErrorObject)
-                    : val1 !== val2) {
-                    return false;
-                }
-            }
-        }
-    }
-    return true;
-}
-
-var getValidationModes = (mode) => ({
-    isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
-    isOnBlur: mode === VALIDATION_MODE.onBlur,
-    isOnChange: mode === VALIDATION_MODE.onChange,
-    isOnAll: mode === VALIDATION_MODE.all,
-    isOnTouch: mode === VALIDATION_MODE.onTouched,
-});
-
 var isFileInput = (element) => element.type === 'file';
 
-var isFunction = (value) => typeof value === 'function';
-
-var isHTMLElement = (value) => value instanceof HTMLElement;
-
 var isMultipleSelect = (element) => element.type === `select-multiple`;
 
 var isRadioInput = (element) => element.type === 'radio';
 
-var isRadioOrCheckboxFunction = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
-
-var isString = (value) => typeof value === 'string';
-
-var isWeb = typeof window !== 'undefined' &&
-    typeof window.HTMLElement !== 'undefined' &&
-    typeof document !== 'undefined';
-
-class Subscription {
-    constructor() {
-        this.tearDowns = [];
-    }
-    add(tearDown) {
-        this.tearDowns.push(tearDown);
-    }
-    unsubscribe() {
-        for (const teardown of this.tearDowns) {
-            teardown();
-        }
-        this.tearDowns = [];
-    }
-}
-class Subscriber {
-    constructor(observer, subscription) {
-        this.observer = observer;
-        this.closed = false;
-        subscription.add(() => (this.closed = true));
-    }
-    next(value) {
-        if (!this.closed) {
-            this.observer.next(value);
-        }
-    }
-}
-class Subject {
-    constructor() {
-        this.observers = [];
-    }
-    next(value) {
-        for (const observer of this.observers) {
-            observer.next(value);
-        }
-    }
-    subscribe(observer) {
-        const subscription = new Subscription();
-        const subscriber = new Subscriber(observer, subscription);
-        this.observers.push(subscriber);
-        return subscription;
-    }
-    unsubscribe() {
-        this.observers = [];
-    }
-}
-
 const defaultResult = {
     value: false,
     isValid: false,
@@ -661,7 +722,7 @@ var getRadioValue = (options) => Array.isArray(options)
 function getFieldValue(field) {
     if (field && field._f) {
         const ref = field._f.ref;
-        if (field._f.refs ? field._f.refs.every((ref) => ref.disabled) : ref.disabled) {
+        if (ref.disabled) {
             return;
         }
         if (isFileInput(ref)) {
@@ -680,10 +741,10 @@ function getFieldValue(field) {
     }
 }
 
-var getResolverOptions = (fieldsNames, _fieldss, criteriaMode, shouldUseNativeValidation) => {
+var getResolverOptions = (fieldsNames, fieldsRefs, criteriaMode, shouldUseNativeValidation) => {
     const fields = {};
     for (const name of fieldsNames) {
-        const field = get(_fieldss, name);
+        const field = get(fieldsRefs, name);
         field && set(fields, name, field._f);
     }
     return {
@@ -704,49 +765,6 @@ var hasValidation = (options, mounted) => mounted &&
         options.pattern ||
         options.validate);
 
-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 = ({ isOnBlur, isOnChange, isOnTouch, isTouched, isReValidateOnBlur, isReValidateOnChange, isBlurEvent, isSubmitted, isOnAll, }) => {
     if (isOnAll) {
         return false;
@@ -763,7 +781,9 @@ var skipValidation = ({ isOnBlur, isOnChange, isOnTouch, isTouched, isReValidate
     return true;
 };
 
-var unsetEmptyArray = (ref, name) => !compact(get(ref, name, [])).length && unset(ref, name);
+var isFunction = (value) => typeof value === 'function';
+
+var isString = (value) => typeof value === 'string';
 
 var isMessage = (value) => isString(value) || React.isValidElement(value);
 
@@ -788,8 +808,7 @@ var getValueAndMessage = (validationData) => isObject(validationData) && !isRege
         message: '',
     };
 
-var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUseNativeValidation) => {
-    const { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, valueAsNumber, mount, } = field._f;
+var validateField = async ({ _f: { ref, refs, required, maxLength, minLength, min, max, pattern, validate, name, value: inputValue, valueAsNumber, mount, }, }, validateAllFieldCriteria, shouldUseNativeValidation) => {
     if (!mount) {
         return {};
     }
@@ -925,16 +944,75 @@ var validateField = async (field, inputValue, validateAllFieldCriteria, shouldUs
     return error;
 };
 
-const defaultOptions = {
-    mode: VALIDATION_MODE.onSubmit,
-    reValidateMode: VALIDATION_MODE.onChange,
-    shouldFocusError: true,
-};
+var debounce = (callback, wait) => {
+    let timer = 0;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => callback(...args), wait);
+    };
+};
+
+var getValidationModes = (mode) => ({
+    isOnSubmit: !mode || mode === VALIDATION_MODE.onSubmit,
+    isOnBlur: mode === VALIDATION_MODE.onBlur,
+    isOnChange: mode === VALIDATION_MODE.onChange,
+    isOnAll: mode === VALIDATION_MODE.all,
+    isOnTouch: mode === VALIDATION_MODE.onTouched,
+});
+
+var isHTMLElement = (value) => value instanceof HTMLElement;
+
+var isRadioOrCheckboxFunction = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
+
+class Subscription {
+    constructor() {
+        this.tearDowns = [];
+    }
+    add(tearDown) {
+        this.tearDowns.push(tearDown);
+    }
+    unsubscribe() {
+        for (const teardown of this.tearDowns) {
+            teardown();
+        }
+        this.tearDowns = [];
+    }
+}
+class Subscriber {
+    constructor(observer, subscription) {
+        this.observer = observer;
+        this.closed = false;
+        subscription.add(() => (this.closed = true));
+    }
+    next(value) {
+        if (!this.closed) {
+            this.observer.next(value);
+        }
+    }
+}
+class Subject {
+    constructor() {
+        this.observers = [];
+    }
+    next(value) {
+        for (const observer of this.observers) {
+            observer.next(value);
+        }
+    }
+    subscribe(observer) {
+        const subscription = new Subscription();
+        const subscriber = new Subscriber(observer, subscription);
+        this.observers.push(subscriber);
+        return subscription;
+    }
+    unsubscribe() {
+        this.observers = [];
+    }
+}
+
 const isWindowUndefined = typeof window === 'undefined';
-function createFormControl(props = {}) {
-    let formOptions = Object.assign(Object.assign({}, defaultOptions), props);
-    let _delayCallback;
-    let _formState = {
+function useForm({ mode = VALIDATION_MODE.onSubmit, reValidateMode = VALIDATION_MODE.onChange, resolver, context, defaultValues = {}, shouldFocusError = true, delayError, shouldUseNativeValidation, shouldUnregister, criteriaMode, } = {}) {
+    const [formState, updateFormState] = React.useState({
         isDirty: false,
         isValidating: false,
         dirtyFields: {},
@@ -945,172 +1023,201 @@ function createFormControl(props = {}) {
         isSubmitSuccessful: false,
         isValid: false,
         errors: {},
-    };
-    const _proxyFormState = {
-        isDirty: false,
-        dirtyFields: false,
-        touchedFields: false,
-        isValidating: false,
-        isValid: false,
-        errors: false,
-    };
-    let _fields = {};
-    let _formValues = {};
-    let _defaultValues = formOptions.defaultValues || {};
-    let _isInAction = false;
-    let _isMounted = false;
-    const _subjects = {
+    });
+    const readFormStateRef = React.useRef({
+        isDirty: !isProxyEnabled,
+        dirtyFields: !isProxyEnabled,
+        touchedFields: !isProxyEnabled,
+        isValidating: !isProxyEnabled,
+        isValid: !isProxyEnabled,
+        errors: !isProxyEnabled,
+    });
+    const resolverRef = React.useRef(resolver);
+    const formStateRef = React.useRef(formState);
+    const fieldsRef = React.useRef({});
+    const defaultValuesRef = React.useRef(defaultValues);
+    const fieldArrayDefaultValuesRef = React.useRef({});
+    const contextRef = React.useRef(context);
+    const inFieldArrayActionRef = React.useRef(false);
+    const isMountedRef = React.useRef(false);
+    const _delayCallback = React.useRef();
+    const subjectsRef = React.useRef({
         watch: new Subject(),
         control: new Subject(),
         array: new Subject(),
         state: new Subject(),
-    };
-    let _names = {
+    });
+    const namesRef = React.useRef({
         mount: new Set(),
         unMount: new Set(),
         array: new Set(),
         watch: new Set(),
         watchAll: false,
+    });
+    const validationMode = getValidationModes(mode);
+    const isValidateAllFieldCriteria = criteriaMode === VALIDATION_MODE.all;
+    resolverRef.current = resolver;
+    contextRef.current = context;
+    const isFieldWatched = (name) => namesRef.current.watchAll ||
+        namesRef.current.watch.has(name) ||
+        namesRef.current.watch.has((name.match(/\w+/) || [])[0]);
+    const updateErrorState = (name, error) => {
+        set(formStateRef.current.errors, name, error);
+        subjectsRef.current.state.next({
+            errors: formStateRef.current.errors,
+        });
     };
-    const validationMode = getValidationModes(formOptions.mode);
-    const isValidateAllFieldCriteria = formOptions.criteriaMode === VALIDATION_MODE.all;
-    const isFieldWatched = (name) => _names.watchAll ||
-        _names.watch.has(name) ||
-        _names.watch.has((name.match(/\w+/) || [])[0]);
-    const shouldRenderBaseOnError = async (shouldSkipRender, name, error, fieldState, isValidFromResolver, isWatched) => {
-        const previousError = get(_formState.errors, name);
-        const isValid = _proxyFormState.isValid
-            ? formOptions.resolver
+    const shouldRenderBaseOnError = React.useCallback(async (shouldSkipRender, name, error, fieldState, isValidFromResolver, isWatched) => {
+        const previousError = get(formStateRef.current.errors, name);
+        const isValid = readFormStateRef.current.isValid
+            ? resolver
                 ? isValidFromResolver
-                : await validateForm(_fields, true)
+                : await validateForm(fieldsRef.current, true)
             : false;
-        error
-            ? set(_formState.errors, name, error)
-            : unset(_formState.errors, name);
+        if (delayError && error) {
+            _delayCallback.current =
+                _delayCallback.current || debounce(updateErrorState, delayError);
+            _delayCallback.current(name, error);
+        }
+        else {
+            error
+                ? set(formStateRef.current.errors, name, error)
+                : unset(formStateRef.current.errors, name);
+        }
         if ((isWatched ||
             (error ? !deepEqual(previousError, error, true) : previousError) ||
             !isEmptyObject(fieldState) ||
-            _formState.isValid !== isValid) &&
+            formStateRef.current.isValid !== isValid) &&
             !shouldSkipRender) {
-            const updatedFormState = Object.assign(Object.assign({}, fieldState), { isValid: !!isValid, errors: _formState.errors, name });
-            _formState = Object.assign(Object.assign({}, _formState), updatedFormState);
-            _subjects.state.next(isWatched ? { name } : updatedFormState);
+            const updatedFormState = Object.assign(Object.assign({}, fieldState), { isValid: !!isValid, errors: formStateRef.current.errors, name });
+            formStateRef.current = Object.assign(Object.assign({}, formStateRef.current), updatedFormState);
+            subjectsRef.current.state.next(isWatched ? { name } : updatedFormState);
         }
-        _subjects.state.next({
+        subjectsRef.current.state.next({
             isValidating: false,
         });
-    };
-    const setFieldValue = (name, value, options = {}, shouldRender, shouldRegister) => {
+    }, []);
+    const setFieldValue = React.useCallback((name, rawValue, options = {}, shouldRender, shouldRegister) => {
         shouldRegister && register(name);
-        const field = get(_fields, name);
+        const field = get(fieldsRef.current, name);
         if (field) {
             const _f = field._f;
             if (_f) {
-                set(_formValues, name, getFieldValueAs(value, _f));
-                const fieldValue = isWeb && isHTMLElement(_f.ref) && isNullOrUndefined(value)
+                const value = isWeb && isHTMLElement(_f.ref) && isNullOrUndefined(rawValue)
                     ? ''
-                    : value;
-                if (isFileInput(_f.ref) && !isString(fieldValue)) {
-                    _f.ref.files = fieldValue;
+                    : rawValue;
+                _f.value = getFieldValueAs(rawValue, _f);
+                if (isRadioInput(_f.ref)) {
+                    (_f.refs || []).forEach((radioRef) => (radioRef.checked = radioRef.value === value));
+                }
+                else if (isFileInput(_f.ref) && !isString(value)) {
+                    _f.ref.files = value;
                 }
                 else if (isMultipleSelect(_f.ref)) {
-                    [..._f.ref.options].forEach((selectRef) => (selectRef.selected = fieldValue.includes(selectRef.value)));
+                    [..._f.ref.options].forEach((selectRef) => (selectRef.selected = value.includes(selectRef.value)));
                 }
-                else if (_f.refs) {
-                    if (isCheckBoxInput(_f.ref)) {
-                        _f.refs.length > 1
-                            ? _f.refs.forEach((checkboxRef) => (checkboxRef.checked = Array.isArray(fieldValue)
-                                ? !!fieldValue.find((data) => data === checkboxRef.value)
-                                : fieldValue === checkboxRef.value))
-                            : (_f.refs[0].checked = !!fieldValue);
-                    }
-                    else {
-                        _f.refs.forEach((radioRef) => (radioRef.checked = radioRef.value === fieldValue));
-                    }
+                else if (isCheckBoxInput(_f.ref) && _f.refs) {
+                    _f.refs.length > 1
+                        ? _f.refs.forEach((checkboxRef) => (checkboxRef.checked = Array.isArray(value)
+                            ? !!value.find((data) => data === checkboxRef.value)
+                            : value === checkboxRef.value))
+                        : (_f.refs[0].checked = !!value);
                 }
                 else {
-                    _f.ref.value = fieldValue;
+                    _f.ref.value = value;
                 }
                 if (shouldRender) {
-                    _subjects.control.next({
-                        values: getValues(),
+                    const values = getFieldsValues(fieldsRef);
+                    set(values, name, rawValue);
+                    subjectsRef.current.control.next({
+                        values: Object.assign(Object.assign({}, defaultValuesRef.current), values),
                         name,
                     });
                 }
                 (options.shouldDirty || options.shouldTouch) &&
-                    updateTouchAndDirtyState(name, fieldValue, options.shouldTouch);
+                    updateTouchAndDirtyState(name, value, options.shouldTouch);
                 options.shouldValidate && trigger(name);
             }
+            else {
+                field._f = {
+                    ref: {
+                        name,
+                        value: rawValue,
+                    },
+                    value: rawValue,
+                };
+            }
         }
-    };
-    const updateTouchAndDirtyState = (name, inputValue, isCurrentTouched, shouldRender = true) => {
+    }, []);
+    const getIsDirty = React.useCallback((name, data) => {
+        const formValues = getFieldsValues(fieldsRef);
+        name && data && set(formValues, name, data);
+        return !deepEqual(formValues, defaultValuesRef.current);
+    }, []);
+    const updateTouchAndDirtyState = React.useCallback((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;
+        if (readFormStateRef.current.isDirty) {
+            const previousIsDirty = formStateRef.current.isDirty;
+            formStateRef.current.isDirty = getIsDirty();
+            state.isDirty = formStateRef.current.isDirty;
             isChanged = previousIsDirty !== state.isDirty;
         }
-        if (_proxyFormState.dirtyFields && !isCurrentTouched) {
-            const isPreviousFieldDirty = get(_formState.dirtyFields, name);
-            const isCurrentFieldDirty = !deepEqual(get(_defaultValues, name), inputValue);
+        if (readFormStateRef.current.dirtyFields && !isCurrentTouched) {
+            const isPreviousFieldDirty = get(formStateRef.current.dirtyFields, name);
+            const isCurrentFieldDirty = !deepEqual(get(defaultValuesRef.current, name), inputValue);
             isCurrentFieldDirty
-                ? set(_formState.dirtyFields, name, true)
-                : unset(_formState.dirtyFields, name);
-            state.dirtyFields = _formState.dirtyFields;
+                ? set(formStateRef.current.dirtyFields, name, true)
+                : unset(formStateRef.current.dirtyFields, name);
+            state.dirtyFields = formStateRef.current.dirtyFields;
             isChanged =
-                isChanged || isPreviousFieldDirty !== get(_formState.dirtyFields, name);
+                isChanged ||
+                    isPreviousFieldDirty !== get(formStateRef.current.dirtyFields, name);
         }
-        const isPreviousFieldTouched = get(_formState.touchedFields, name);
+        const isPreviousFieldTouched = get(formStateRef.current.touchedFields, name);
         if (isCurrentTouched && !isPreviousFieldTouched) {
-            set(_formState.touchedFields, name, isCurrentTouched);
-            state.touchedFields = _formState.touchedFields;
+            set(formStateRef.current.touchedFields, name, isCurrentTouched);
+            state.touchedFields = formStateRef.current.touchedFields;
             isChanged =
                 isChanged ||
-                    (_proxyFormState.touchedFields &&
+                    (readFormStateRef.current.touchedFields &&
                         isPreviousFieldTouched !== isCurrentTouched);
         }
-        isChanged && shouldRender && _subjects.state.next(state);
+        isChanged && shouldRender && subjectsRef.current.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 executeBuildinValidation = async (name, skipReRender) => {
-        const error = (await validateField(get(_fields, name), getValues(name), isValidateAllFieldCriteria, formOptions.shouldUseNativeValidation))[name];
+    }, []);
+    const executeInlineValidation = React.useCallback(async (name, skipReRender) => {
+        const error = (await validateField(get(fieldsRef.current, name), isValidateAllFieldCriteria, shouldUseNativeValidation))[name];
         await shouldRenderBaseOnError(skipReRender, name, error);
         return isUndefined(error);
-    };
-    const executeResolverValidation = async (names) => {
-        const { errors } = await executeResolver();
+    }, [isValidateAllFieldCriteria]);
+    const executeResolverValidation = React.useCallback(async (names) => {
+        const { errors } = await resolverRef.current(getFieldsValues(fieldsRef), contextRef.current, getResolverOptions(namesRef.current.mount, fieldsRef.current, criteriaMode, shouldUseNativeValidation));
         if (names) {
             for (const name of names) {
                 const error = get(errors, name);
                 error
-                    ? set(_formState.errors, name, error)
-                    : unset(_formState.errors, name);
+                    ? set(formStateRef.current.errors, name, error)
+                    : unset(formStateRef.current.errors, name);
             }
         }
         else {
-            _formState.errors = errors;
+            formStateRef.current.errors = errors;
         }
         return errors;
-    };
-    const validateForm = async (_fields, shouldCheckValid, context = {
+    }, [criteriaMode, shouldUseNativeValidation]);
+    const validateForm = async (fieldsRef, shouldCheckValid, context = {
         valid: true,
     }) => {
-        for (const name in _fields) {
-            const field = _fields[name];
+        for (const name in fieldsRef) {
+            const field = fieldsRef[name];
             if (field) {
                 const _f = field._f;
-                const val = omit(field, '_f');
+                const current = omit(field, '_f');
                 if (_f) {
-                    const fieldError = await validateField(field, get(_formValues, _f.name), isValidateAllFieldCriteria, formOptions.shouldUseNativeValidation);
+                    const fieldError = await validateField(field, isValidateAllFieldCriteria, shouldUseNativeValidation);
                     if (shouldCheckValid) {
                         if (fieldError[_f.name]) {
                             context.valid = false;
@@ -1119,254 +1226,185 @@ function createFormControl(props = {}) {
                     }
                     else {
                         fieldError[_f.name]
-                            ? set(_formState.errors, _f.name, fieldError[_f.name])
-                            : unset(_formState.errors, _f.name);
+                            ? set(formStateRef.current.errors, _f.name, fieldError[_f.name])
+                            : unset(formStateRef.current.errors, _f.name);
                     }
                 }
-                val && (await validateForm(val, shouldCheckValid, context));
+                current && (await validateForm(current, shouldCheckValid, context));
             }
         }
         return context.valid;
     };
-    const handleValidate = async (target, fieldState, isWatched, isBlurEvent) => {
-        let error;
+    const trigger = React.useCallback(async (name, options = {}) => {
+        const fieldNames = convertToArrayPayload(name);
         let isValid;
-        let name = target.name;
-        const field = get(_fields, name);
-        if (formOptions.resolver) {
-            const { errors } = await executeResolver([name]);
-            error = get(errors, name);
-            if (isCheckBoxInput(target) && !error) {
-                const parentNodeName = getNodeParentName(name);
-                const valError = get(errors, parentNodeName, {});
-                valError.type && valError.message && (error = valError);
-                if (valError || get(_formState.errors, parentNodeName)) {
-                    name = parentNodeName;
-                }
-            }
-            isValid = isEmptyObject(errors);
+        subjectsRef.current.state.next({
+            isValidating: true,
+        });
+        if (resolver) {
+            const schemaResult = await executeResolverValidation(isUndefined(name) ? name : fieldNames);
+            isValid = name
+                ? fieldNames.every((name) => !get(schemaResult, name))
+                : isEmptyObject(schemaResult);
         }
         else {
-            error = (await validateField(field, get(_formValues, name), isValidateAllFieldCriteria, formOptions.shouldUseNativeValidation))[name];
-        }
-        !isBlurEvent &&
-            _subjects.watch.next({
-                name,
-                type: target.type,
-            });
-        shouldRenderBaseOnError(false, name, error, fieldState, isValid, isWatched);
-    };
-    const handleChange = async ({ type, target, target: { value, name, type: inputType }, }) => {
-        const field = get(_fields, name);
-        if (field) {
-            let inputValue = inputType ? getFieldValue(field) : undefined;
-            inputValue = isUndefined(inputValue) ? value : inputValue;
-            const isBlurEvent = type === EVENTS.BLUR;
-            const { isOnBlur: isReValidateOnBlur, isOnChange: isReValidateOnChange } = getValidationModes(formOptions.reValidateMode);
-            const shouldSkipValidation = (!hasValidation(field._f, field._f.mount) &&
-                !formOptions.resolver &&
-                !get(_formState.errors, name)) ||
-                skipValidation(Object.assign({ isBlurEvent, isTouched: !!get(_formState.touchedFields, name), isSubmitted: _formState.isSubmitted, isReValidateOnBlur,
-                    isReValidateOnChange }, validationMode));
-            const isWatched = !isBlurEvent && isFieldWatched(name);
-            if (!isUndefined(inputValue)) {
-                set(_formValues, name, inputValue);
-            }
-            const fieldState = updateTouchAndDirtyState(name, inputValue, isBlurEvent, false);
-            const shouldRender = !isEmptyObject(fieldState) || isWatched;
-            if (shouldSkipValidation) {
-                !isBlurEvent &&
-                    _subjects.watch.next({
-                        name,
-                        type,
-                    });
-                return (shouldRender &&
-                    _subjects.state.next(isWatched ? { name } : Object.assign(Object.assign({}, fieldState), { name })));
-            }
-            _subjects.state.next({
-                isValidating: true,
-            });
-            if (get(_formState.errors, name) || !formOptions.delayError) {
-                handleValidate(target, fieldState, isWatched, isBlurEvent);
+            if (name) {
+                isValid = (await Promise.all(fieldNames
+                    .filter((fieldName) => get(fieldsRef.current, fieldName, {})._f)
+                    .map(async (fieldName) => await executeInlineValidation(fieldName, true)))).every(Boolean);
             }
             else {
-                _delayCallback =
-                    _delayCallback || debounce(handleValidate, formOptions.delayError);
-                _delayCallback(target, fieldState, isWatched, isBlurEvent);
-                isWatched && _subjects.state.next({ name });
+                await validateForm(fieldsRef.current);
+                isValid = isEmptyObject(formStateRef.current.errors);
             }
         }
-    };
-    const _updateValidAndInputValue = (name, ref) => {
-        const field = get(_fields, name);
+        subjectsRef.current.state.next(Object.assign(Object.assign({}, (isString(name) ? { name } : {})), { errors: formStateRef.current.errors, isValidating: false }));
+        if (options.shouldFocus && !isValid) {
+            focusFieldBy(fieldsRef.current, (key) => get(formStateRef.current.errors, key), name ? fieldNames : namesRef.current.mount);
+        }
+        readFormStateRef.current.isValid && updateIsValid();
+        return isValid;
+    }, [executeResolverValidation, executeInlineValidation]);
+    const updateIsValidAndInputValue = (name, ref, shouldSkipValueAs) => {
+        const field = get(fieldsRef.current, name);
         if (field) {
-            const fieldValue = get(_formValues, name);
-            const isValueUndefined = isUndefined(fieldValue);
+            const isValueUndefined = isUndefined(field._f.value);
             const defaultValue = isValueUndefined
-                ? get(_defaultValues, name)
-                : fieldValue;
-            if (isUndefined(defaultValue) ||
-                (ref && ref.defaultChecked)) {
-                set(_formValues, name, getFieldValue(field));
+                ? isUndefined(get(fieldArrayDefaultValuesRef.current, name))
+                    ? get(defaultValuesRef.current, name)
+                    : get(fieldArrayDefaultValuesRef.current, name)
+                : field._f.value;
+            if (!isUndefined(defaultValue)) {
+                if (ref && ref.defaultChecked) {
+                    field._f.value = getFieldValue(field);
+                }
+                else if (shouldSkipValueAs) {
+                    field._f.value = defaultValue;
+                }
+                else {
+                    setFieldValue(name, defaultValue);
+                }
             }
-            else {
-                setFieldValue(name, defaultValue);
+            else if (isValueUndefined) {
+                field._f.value = getFieldValue(field);
             }
         }
-        _isMounted && _proxyFormState.isValid && _updateValid();
-    };
-    const _getIsDirty = (name, data) => {
-        name && data && set(_formValues, name, data);
-        return !deepEqual(Object.assign({}, getValues()), _defaultValues);
+        isMountedRef.current && readFormStateRef.current.isValid && updateIsValid();
     };
-    const _updateValid = async () => {
-        const isValid = formOptions.resolver
-            ? isEmptyObject((await executeResolver()).errors)
-            : await validateForm(_fields, true);
-        if (isValid !== _formState.isValid) {
-            _formState.isValid = isValid;
-            _subjects.state.next({
+    const updateIsValid = React.useCallback(async (values = {}) => {
+        const isValid = resolver
+            ? isEmptyObject((await resolverRef.current(Object.assign(Object.assign({}, getFieldsValues(fieldsRef)), values), contextRef.current, getResolverOptions(namesRef.current.mount, fieldsRef.current, criteriaMode, shouldUseNativeValidation))).errors)
+            : await validateForm(fieldsRef.current, true);
+        if (isValid !== formStateRef.current.isValid) {
+            formStateRef.current.isValid = isValid;
+            subjectsRef.current.state.next({
                 isValid,
             });
         }
-    };
-    const _setValues = (name, value, options) => Object.entries(value).forEach(([fieldKey, fieldValue]) => {
+    }, [criteriaMode, shouldUseNativeValidation]);
+    const setValues = React.useCallback((name, value, options) => Object.entries(value).forEach(([fieldKey, fieldValue]) => {
         const fieldName = `${name}.${fieldKey}`;
-        const field = get(_fields, fieldName);
-        const isFieldArray = _names.array.has(name);
+        const field = get(fieldsRef.current, fieldName);
+        const isFieldArray = namesRef.current.array.has(name);
         (isFieldArray || !isPrimitive(fieldValue) || (field && !field._f)) &&
             !isDateObject(fieldValue)
-            ? _setValues(fieldName, fieldValue, options)
+            ? setValues(fieldName, fieldValue, options)
             : setFieldValue(fieldName, fieldValue, options, true, !field);
-    });
-    const _getWatch = (fieldNames, defaultValue, isGlobal) => {
-        const fieldValues = Object.assign({}, (_isMounted
-            ? Object.assign({}, Object.assign(Object.assign({}, _defaultValues), _formValues)) : isUndefined(defaultValue)
-            ? _defaultValues
-            : 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
-            : isObject(result[0])
-                ? Object.assign({}, result[0]) : Array.isArray(result[0])
-                ? [...result[0]]
-                : result[0];
-    };
-    const _updateFormValues = (defaultValues, name = '') => {
-        for (const key in defaultValues) {
-            const value = defaultValues[key];
-            const fieldName = name + (name ? '.' : '') + key;
-            const field = get(_fields, fieldName);
-            if (!field || !field._f) {
-                if (isObject(value) || Array.isArray(value)) {
-                    _updateFormValues(value, fieldName);
-                }
-                else if (!field) {
-                    set(_formValues, fieldName, value);
-                }
-            }
-        }
-    };
-    const _bathFieldArrayUpdate = (keyName, name, method, args, updatedFieldArrayValues = [], shouldSet = true) => {
-        _isInAction = true;
-        if (get(_fields, name)) {
-            const output = method(get(_fields, name), args.argA, args.argB);
-            shouldSet && set(_fields, name, output);
-        }
-        set(_formValues, name, updatedFieldArrayValues);
-        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(updatedFieldArrayValues, keyName), get(_defaultValues, name, []), get(_formState.dirtyFields, name, [])));
-            updatedFieldArrayValues &&
-                set(_formState.dirtyFields, name, setFieldArrayDirtyFields(omitKey(updatedFieldArrayValues, keyName), get(_defaultValues, name, []), get(_formState.dirtyFields, name, [])));
-            unsetEmptyArray(_formState.dirtyFields, name);
-        }
-        _subjects.state.next({
-            isDirty: _getIsDirty(name, omitKey(updatedFieldArrayValues, keyName)),
-            dirtyFields: _formState.dirtyFields,
-            errors: _formState.errors,
-            isValid: _formState.isValid,
-        });
-    };
-    const _getFieldArrayValue = (name) => get(_isMounted ? _formValues : _defaultValues, name, []);
+    }), [trigger]);
     const setValue = (name, value, options = {}) => {
-        const field = get(_fields, name);
-        const isFieldArray = _names.array.has(name);
+        const field = get(fieldsRef.current, name);
+        const isFieldArray = namesRef.current.array.has(name);
         if (isFieldArray) {
-            _subjects.array.next({
+            subjectsRef.current.array.next({
                 values: value,
                 name,
                 isReset: true,
             });
-            if ((_proxyFormState.isDirty || _proxyFormState.dirtyFields) &&
+            if ((readFormStateRef.current.isDirty ||
+                readFormStateRef.current.dirtyFields) &&
                 options.shouldDirty) {
-                set(_formState.dirtyFields, name, setFieldArrayDirtyFields(value, get(_defaultValues, name, []), get(_formState.dirtyFields, name, [])));
-                _subjects.state.next({
+                set(formStateRef.current.dirtyFields, name, setFieldArrayDirtyFields(value, get(defaultValuesRef.current, name, []), get(formStateRef.current.dirtyFields, name, [])));
+                subjectsRef.current.state.next({
                     name,
-                    dirtyFields: _formState.dirtyFields,
-                    isDirty: _getIsDirty(name, value),
+                    dirtyFields: formStateRef.current.dirtyFields,
+                    isDirty: getIsDirty(name, value),
                 });
             }
-            !value.length && set(_formValues, name, []);
+            !value.length &&
+                set(fieldsRef.current, name, []) &&
+                set(fieldArrayDefaultValuesRef.current, name, []);
         }
-        set(_formValues, name, value);
         ((field && !field._f) || isFieldArray) && !isNullOrUndefined(value)
-            ? _setValues(name, value, isFieldArray ? {} : options)
+            ? setValues(name, value, isFieldArray ? {} : options)
             : setFieldValue(name, value, options, true, !field);
-        isFieldWatched(name) && _subjects.state.next({});
-        _subjects.watch.next({
-            name,
-        });
+        isFieldWatched(name) && subjectsRef.current.state.next({});
+        subjectsRef.current.watch.next({ name, values: getValues() });
     };
-    const trigger = async (name, options = {}) => {
-        const fieldNames = convertToArrayPayload(name);
+    const handleValidate = async (target, fieldState, isWatched, isBlurEvent) => {
+        let error;
         let isValid;
-        _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);
+        let name = target.name;
+        const field = get(fieldsRef.current, name);
+        if (resolver) {
+            const { errors } = await resolverRef.current(getFieldsValues(fieldsRef), contextRef.current, getResolverOptions([name], fieldsRef.current, criteriaMode, shouldUseNativeValidation));
+            error = get(errors, name);
+            if (isCheckBoxInput(target) && !error) {
+                const parentNodeName = getNodeParentName(name);
+                const currentError = get(errors, parentNodeName, {});
+                currentError.type && currentError.message && (error = currentError);
+                if (currentError || get(formStateRef.current.errors, parentNodeName)) {
+                    name = parentNodeName;
+                }
+            }
+            isValid = isEmptyObject(errors);
         }
         else {
-            if (name) {
-                isValid = (await Promise.all(fieldNames
-                    .filter((fieldName) => get(_fields, fieldName, {})._f)
-                    .map(async (fieldName) => await executeBuildinValidation(fieldName, true)))).every(Boolean);
+            error = (await validateField(field, isValidateAllFieldCriteria, shouldUseNativeValidation))[name];
+        }
+        !isBlurEvent &&
+            subjectsRef.current.watch.next({
+                name,
+                type: target.type,
+                values: getValues(),
+            });
+        shouldRenderBaseOnError(false, name, error, fieldState, isValid, isWatched);
+    };
+    const handleChange = React.useCallback(async ({ type, target, target: { value, name, type: inputType } }) => {
+        const field = get(fieldsRef.current, name);
+        if (field) {
+            let inputValue = inputType ? getFieldValue(field) : undefined;
+            inputValue = isUndefined(inputValue) ? value : inputValue;
+            const isBlurEvent = type === EVENTS.BLUR;
+            const { isOnBlur: isReValidateOnBlur, isOnChange: isReValidateOnChange, } = getValidationModes(reValidateMode);
+            const shouldSkipValidation = (!hasValidation(field._f, field._f.mount) &&
+                !resolver &&
+                !get(formStateRef.current.errors, name)) ||
+                skipValidation(Object.assign({ isBlurEvent, isTouched: !!get(formStateRef.current.touchedFields, name), isSubmitted: formStateRef.current.isSubmitted, isReValidateOnBlur,
+                    isReValidateOnChange }, validationMode));
+            const isWatched = !isBlurEvent && isFieldWatched(name);
+            if (!isUndefined(inputValue)) {
+                field._f.value = inputValue;
             }
-            else {
-                await validateForm(_fields);
-                isValid = isEmptyObject(_formState.errors);
+            const fieldState = updateTouchAndDirtyState(name, field._f.value, isBlurEvent, false);
+            const shouldRender = !isEmptyObject(fieldState) || isWatched;
+            if (shouldSkipValidation) {
+                !isBlurEvent &&
+                    subjectsRef.current.watch.next({
+                        name,
+                        type,
+                        values: getValues(),
+                    });
+                return (shouldRender &&
+                    subjectsRef.current.state.next(isWatched ? { name } : Object.assign(Object.assign({}, fieldState), { name })));
             }
+            subjectsRef.current.state.next({
+                isValidating: true,
+            });
+            handleValidate(target, fieldState, isWatched, isBlurEvent);
         }
-        _subjects.state.next(Object.assign(Object.assign({}, (isString(name) ? { name } : {})), { errors: _formState.errors, isValidating: false }));
-        if (options.shouldFocus && !isValid) {
-            focusFieldBy(_fields, (key) => get(_formState.errors, key), name ? fieldNames : _names.mount);
-        }
-        _proxyFormState.isValid && _updateValid();
-        return isValid;
-    };
+    }, []);
     const getValues = (fieldNames) => {
-        const values = Object.assign(Object.assign({}, _defaultValues), _formValues);
+        const values = Object.assign(Object.assign({}, defaultValuesRef.current), getFieldsValues(fieldsRef));
         return isUndefined(fieldNames)
             ? values
             : isString(fieldNames)
@@ -1375,51 +1413,73 @@ function createFormControl(props = {}) {
     };
     const clearErrors = (name) => {
         name
-            ? convertToArrayPayload(name).forEach((inputName) => unset(_formState.errors, inputName))
-            : (_formState.errors = {});
-        _subjects.state.next({
-            errors: _formState.errors,
+            ? convertToArrayPayload(name).forEach((inputName) => unset(formStateRef.current.errors, inputName))
+            : (formStateRef.current.errors = {});
+        subjectsRef.current.state.next({
+            errors: formStateRef.current.errors,
         });
     };
     const setError = (name, error, options) => {
-        const ref = ((get(_fields, name) || { _f: {} })._f || {}).ref;
-        set(_formState.errors, name, Object.assign(Object.assign({}, error), { ref }));
-        _subjects.state.next({
+        const ref = ((get(fieldsRef.current, name) || { _f: {} })._f || {}).ref;
+        set(formStateRef.current.errors, name, Object.assign(Object.assign({}, error), { ref }));
+        subjectsRef.current.state.next({
             name,
-            errors: _formState.errors,
+            errors: formStateRef.current.errors,
             isValid: false,
         });
         options && options.shouldFocus && ref && ref.focus && ref.focus();
     };
+    const watchInternal = React.useCallback((fieldNames, defaultValue, isGlobal, formValues) => {
+        const isArrayNames = Array.isArray(fieldNames);
+        const fieldValues = formValues || isMountedRef.current
+            ? Object.assign(Object.assign({}, defaultValuesRef.current), (formValues || getFieldsValues(fieldsRef))) : isUndefined(defaultValue)
+            ? defaultValuesRef.current
+            : isArrayNames
+                ? defaultValue
+                : { [fieldNames]: defaultValue };
+        if (isUndefined(fieldNames)) {
+            isGlobal && (namesRef.current.watchAll = true);
+            return fieldValues;
+        }
+        const result = [];
+        for (const fieldName of convertToArrayPayload(fieldNames)) {
+            isGlobal && namesRef.current.watch.add(fieldName);
+            result.push(get(fieldValues, fieldName));
+        }
+        return isArrayNames ? result : result[0];
+    }, []);
     const watch = (fieldName, defaultValue) => isFunction(fieldName)
-        ? _subjects.watch.subscribe({
-            next: (info) => fieldName(_getWatch(undefined, defaultValue), info),
+        ? subjectsRef.current.watch.subscribe({
+            next: (info) => fieldName(watchInternal(undefined, defaultValue), info),
         })
-        : _getWatch(fieldName, defaultValue, true);
+        : watchInternal(fieldName, 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)) {
-                if (!options.keepValue) {
-                    unset(_fields, inputName);
-                    unset(_formValues, inputName);
-                }
-                !options.keepError && unset(_formState.errors, inputName);
-                !options.keepDirty && unset(_formState.dirtyFields, inputName);
-                !options.keepTouched && unset(_formState.touchedFields, inputName);
-                !formOptions.shouldUnregister &&
+        for (const inputName of name
+            ? convertToArrayPayload(name)
+            : namesRef.current.mount) {
+            namesRef.current.mount.delete(inputName);
+            namesRef.current.array.delete(inputName);
+            if (get(fieldsRef.current, inputName)) {
+                !options.keepError && unset(formStateRef.current.errors, inputName);
+                !options.keepValue && unset(fieldsRef.current, inputName);
+                !options.keepDirty &&
+                    unset(formStateRef.current.dirtyFields, inputName);
+                !options.keepTouched &&
+                    unset(formStateRef.current.touchedFields, inputName);
+                !shouldUnregister &&
                     !options.keepDefaultValue &&
-                    unset(_defaultValues, inputName);
+                    unset(defaultValuesRef.current, inputName);
             }
         }
-        _subjects.watch.next({});
-        _subjects.state.next(Object.assign(Object.assign({}, _formState), (!options.keepDirty ? {} : { isDirty: _getIsDirty() })));
-        !options.keepIsValid && _updateValid();
+        subjectsRef.current.watch.next({
+            values: getValues(),
+        });
+        subjectsRef.current.state.next(Object.assign(Object.assign({}, formStateRef.current), (!options.keepDirty ? {} : { isDirty: getIsDirty() })));
+        !options.keepIsValid && updateIsValid();
     };
     const registerFieldRef = (name, ref, options) => {
         register(name, options);
-        let field = get(_fields, name);
+        let field = get(fieldsRef.current, name);
         const isRadioOrCheckbox = isRadioOrCheckboxFunction(ref);
         if (ref === field._f.ref ||
             (isRadioOrCheckbox &&
@@ -1433,76 +1493,77 @@ function createFormControl(props = {}) {
                         ref,
                     ], ref: { type: ref.type, name } }) : Object.assign(Object.assign({}, field._f), { ref }),
         };
-        set(_fields, name, field);
-        _updateValidAndInputValue(name, ref);
+        set(fieldsRef.current, name, field);
+        updateIsValidAndInputValue(name, ref);
     };
-    const register = (name, options = {}) => {
-        const field = get(_fields, name);
-        set(_fields, name, {
+    const register = React.useCallback((name, options = {}) => {
+        const field = get(fieldsRef.current, name);
+        set(fieldsRef.current, name, {
             _f: Object.assign(Object.assign(Object.assign({}, (field && field._f ? field._f : { ref: { name } })), { name, mount: true }), options),
         });
-        if (options.value) {
-            set(_formValues, name, options.value);
-        }
-        if (!isUndefined(options.disabled) &&
-            field &&
-            field._f &&
-            field._f.ref.disabled !== options.disabled) {
-            set(_formValues, name, options.disabled ? undefined : field._f.ref.value);
-        }
-        _names.mount.add(name);
-        !field && _updateValidAndInputValue(name);
+        namesRef.current.mount.add(name);
+        !field && updateIsValidAndInputValue(name, undefined, true);
         return isWindowUndefined
             ? { name: name }
-            : Object.assign(Object.assign({ name }, (isUndefined(options.disabled)
-                ? {}
-                : { disabled: options.disabled })), { onChange: handleChange, onBlur: handleChange, ref: (ref) => {
+            : {
+                name,
+                onChange: handleChange,
+                onBlur: handleChange,
+                ref: (ref) => {
                     if (ref) {
                         registerFieldRef(name, ref, options);
                     }
                     else {
-                        const field = get(_fields, name, {});
-                        const _shouldUnregister = formOptions.shouldUnregister || options.shouldUnregister;
+                        const field = get(fieldsRef.current, name, {});
+                        const shouldUnmount = shouldUnregister || options.shouldUnregister;
                         if (field._f) {
                             field._f.mount = false;
+                            // If initial state of field element is disabled,
+                            // value is not set on first "register"
+                            // re-sync the value in when it switched to enabled
+                            if (isUndefined(field._f.value)) {
+                                field._f.value = field._f.ref.value;
+                            }
                         }
-                        _shouldUnregister &&
-                            !(isNameInFieldArray(_names.array, name) && _isInAction) &&
-                            _names.unMount.add(name);
+                        shouldUnmount &&
+                            !(isNameInFieldArray(namesRef.current.array, name) &&
+                                inFieldArrayActionRef.current) &&
+                            namesRef.current.unMount.add(name);
                     }
-                } });
-    };
-    const handleSubmit = (onValid, onInvalid) => async (e) => {
+                },
+            };
+    }, []);
+    const handleSubmit = React.useCallback((onValid, onInvalid) => async (e) => {
         if (e) {
             e.preventDefault && e.preventDefault();
             e.persist && e.persist();
         }
         let hasNoPromiseError = true;
-        let fieldValues = Object.assign({}, _formValues);
-        _subjects.state.next({
+        let fieldValues = getFieldsValues(fieldsRef);
+        subjectsRef.current.state.next({
             isSubmitting: true,
         });
         try {
-            if (formOptions.resolver) {
-                const { errors, values } = await executeResolver();
-                _formState.errors = errors;
+            if (resolver) {
+                const { errors, values } = await resolverRef.current(fieldValues, contextRef.current, getResolverOptions(namesRef.current.mount, fieldsRef.current, criteriaMode, shouldUseNativeValidation));
+                formStateRef.current.errors = errors;
                 fieldValues = values;
             }
             else {
-                await validateForm(_fields);
+                await validateForm(fieldsRef.current);
             }
-            if (isEmptyObject(_formState.errors) &&
-                Object.keys(_formState.errors).every((name) => get(fieldValues, name))) {
-                _subjects.state.next({
+            if (isEmptyObject(formStateRef.current.errors) &&
+                Object.keys(formStateRef.current.errors).every((name) => get(fieldValues, name))) {
+                subjectsRef.current.state.next({
                     errors: {},
                     isSubmitting: true,
                 });
                 await onValid(fieldValues, e);
             }
             else {
-                onInvalid && (await onInvalid(_formState.errors, e));
-                formOptions.shouldFocusError &&
-                    focusFieldBy(_fields, (key) => get(_formState.errors, key), _names.mount);
+                onInvalid && (await onInvalid(formStateRef.current.errors, e));
+                shouldFocusError &&
+                    focusFieldBy(fieldsRef.current, (key) => get(formStateRef.current.errors, key), namesRef.current.mount);
             }
         }
         catch (err) {
@@ -1510,21 +1571,41 @@ function createFormControl(props = {}) {
             throw err;
         }
         finally {
-            _formState.isSubmitted = true;
-            _subjects.state.next({
+            formStateRef.current.isSubmitted = true;
+            subjectsRef.current.state.next({
                 isSubmitted: true,
                 isSubmitting: false,
-                isSubmitSuccessful: isEmptyObject(_formState.errors) && hasNoPromiseError,
-                submitCount: _formState.submitCount + 1,
-                errors: _formState.errors,
+                isSubmitSuccessful: isEmptyObject(formStateRef.current.errors) && hasNoPromiseError,
+                submitCount: formStateRef.current.submitCount + 1,
+                errors: formStateRef.current.errors,
             });
         }
+    }, [
+        shouldFocusError,
+        isValidateAllFieldCriteria,
+        criteriaMode,
+        shouldUseNativeValidation,
+    ]);
+    const registerAbsentFields = (defaultValues, name = '') => {
+        for (const key in defaultValues) {
+            const value = defaultValues[key];
+            const fieldName = name + (name ? '.' : '') + key;
+            const field = get(fieldsRef.current, fieldName);
+            if (!field || !field._f) {
+                if (isObject(value) || Array.isArray(value)) {
+                    registerAbsentFields(value, fieldName);
+                }
+                else if (!field) {
+                    register(fieldName, { value });
+                }
+            }
+        }
     };
     const reset = (values, keepStateOptions = {}) => {
-        const updatedValues = values || _defaultValues;
+        const updatedValues = values || defaultValuesRef.current;
         if (isWeb && !keepStateOptions.keepValues) {
-            for (const name of _names.mount) {
-                const field = get(_fields, name);
+            for (const name of namesRef.current.mount) {
+                const field = get(fieldsRef.current, name);
                 if (field && field._f) {
                     const inputRef = Array.isArray(field._f.refs)
                         ? field._f.refs[0]
@@ -1538,160 +1619,71 @@ function createFormControl(props = {}) {
             }
         }
         if (!keepStateOptions.keepDefaultValues) {
-            _defaultValues = Object.assign({}, updatedValues);
-            _formValues = Object.assign({}, updatedValues);
+            defaultValuesRef.current = Object.assign({}, updatedValues);
+            fieldArrayDefaultValuesRef.current = Object.assign({}, updatedValues);
         }
         if (!keepStateOptions.keepValues) {
-            _fields = {};
-            _formValues = {};
-            _subjects.control.next({
+            fieldsRef.current = {};
+            subjectsRef.current.control.next({
                 values: keepStateOptions.keepDefaultValues
-                    ? _defaultValues
+                    ? defaultValuesRef.current
                     : Object.assign({}, updatedValues),
             });
-            _subjects.watch.next({});
-            _subjects.array.next({
+            subjectsRef.current.watch.next({
+                values: Object.assign({}, updatedValues),
+            });
+            subjectsRef.current.array.next({
                 values: Object.assign({}, updatedValues),
                 isReset: true,
             });
         }
-        _names = {
+        namesRef.current = {
             mount: new Set(),
             unMount: new Set(),
             array: new Set(),
             watch: new Set(),
             watchAll: false,
         };
-        _subjects.state.next({
+        subjectsRef.current.state.next({
             submitCount: keepStateOptions.keepSubmitCount
-                ? _formState.submitCount
+                ? formStateRef.current.submitCount
                 : 0,
             isDirty: keepStateOptions.keepDirty
-                ? _formState.isDirty
+                ? formStateRef.current.isDirty
                 : keepStateOptions.keepDefaultValues
-                    ? deepEqual(values, _defaultValues)
+                    ? deepEqual(values, defaultValuesRef.current)
                     : false,
             isSubmitted: keepStateOptions.keepIsSubmitted
-                ? _formState.isSubmitted
+                ? formStateRef.current.isSubmitted
                 : false,
-            dirtyFields: keepStateOptions.keepDirty ? _formState.dirtyFields : {},
+            dirtyFields: keepStateOptions.keepDirty
+                ? formStateRef.current.dirtyFields
+                : {},
             touchedFields: keepStateOptions.keepTouched
-                ? _formState.touchedFields
+                ? formStateRef.current.touchedFields
                 : {},
-            errors: keepStateOptions.keepErrors ? _formState.errors : {},
+            errors: keepStateOptions.keepErrors ? formStateRef.current.errors : {},
             isSubmitting: false,
             isSubmitSuccessful: false,
         });
-        _isMounted = !!keepStateOptions.keepIsValid;
+        isMountedRef.current = !!keepStateOptions.keepIsValid;
     };
-    const setFocus = (name) => get(_fields, name)._f.ref.focus();
-    return {
-        control: {
-            register,
-            unregister,
-            _setValues,
-            _getIsDirty,
-            _getWatch,
-            _updateValid,
-            _updateFormValues,
-            _bathFieldArrayUpdate,
-            _getFieldArrayValue,
-            _subjects,
-            _shouldUnregister: formOptions.shouldUnregister,
-            _fields,
-            _proxyFormState,
-            get _formValues() {
-                return _formValues;
-            },
-            set _formValues(value) {
-                _formValues = value;
-            },
-            get _isMounted() {
-                return _isMounted;
-            },
-            set _isMounted(value) {
-                _isMounted = value;
-            },
-            get _defaultValues() {
-                return _defaultValues;
-            },
-            set _defaultValues(value) {
-                _defaultValues = value;
-            },
-            get _names() {
-                return _names;
-            },
-            set _names(value) {
-                _names = value;
-            },
-            _isInAction: {
-                get val() {
-                    return _isInAction;
-                },
-                set val(value) {
-                    _isInAction = value;
-                },
-            },
-            _formState: {
-                get val() {
-                    return _formState;
-                },
-                set val(value) {
-                    _formState = value;
-                },
-            },
-            _updateProps: (options) => {
-                formOptions = Object.assign(Object.assign({}, defaultOptions), options);
-            },
-        },
-        trigger,
-        register,
-        handleSubmit,
-        watch,
-        setValue,
-        getValues,
-        reset,
-        clearErrors,
-        unregister,
-        setError,
-        setFocus,
-    };
-}
-
-var live = (ref) => !isHTMLElement(ref) || !document.contains(ref);
-
-function useForm(props = {}) {
-    const _formControl = React.useRef();
-    const [formState, updateFormState] = React.useState({
-        isDirty: false,
-        isValidating: false,
-        dirtyFields: {},
-        isSubmitted: false,
-        submitCount: 0,
-        touchedFields: {},
-        isSubmitting: false,
-        isSubmitSuccessful: false,
-        isValid: false,
-        errors: {},
-    });
-    _formControl.current
-        ? _formControl.current.control._updateProps(props)
-        : (_formControl.current = createFormControl(props));
-    const control = _formControl.current.control;
+    const setFocus = (name) => get(fieldsRef.current, name)._f.ref.focus();
     React.useEffect(() => {
-        const formStateSubscription = control._subjects.state.subscribe({
+        const formStateSubscription = subjectsRef.current.state.subscribe({
             next(formState) {
-                if (shouldRenderFormState(formState, control._proxyFormState, true)) {
-                    control._formState.val = Object.assign(Object.assign({}, control._formState.val), formState);
-                    updateFormState(Object.assign({}, control._formState.val));
+                if (shouldRenderFormState(formState, readFormStateRef.current, true)) {
+                    formStateRef.current = Object.assign(Object.assign({}, formStateRef.current), formState);
+                    updateFormState(formStateRef.current);
                 }
             },
         });
-        const useFieldArraySubscription = control._subjects.array.subscribe({
+        const useFieldArraySubscription = subjectsRef.current.array.subscribe({
             next(state) {
-                if (state.values && state.name && control._proxyFormState.isValid) {
-                    set(control._formValues, state.name, state.values);
-                    control._updateValid();
+                if (state.values && state.name && readFormStateRef.current.isValid) {
+                    const values = getFieldsValues(fieldsRef);
+                    set(values, state.name, state.values);
+                    updateIsValid(values);
                 }
             },
         });
@@ -1699,49 +1691,82 @@ function useForm(props = {}) {
             formStateSubscription.unsubscribe();
             useFieldArraySubscription.unsubscribe();
         };
-    }, [control]);
+    }, []);
     React.useEffect(() => {
         const unregisterFieldNames = [];
-        if (!control._isMounted) {
-            control._isMounted = true;
-            control._proxyFormState.isValid && control._updateValid();
-            !props.shouldUnregister &&
-                control._updateFormValues(control._defaultValues);
-        }
-        for (const name of control._names.unMount) {
-            const field = get(control._fields, name);
+        const isLiveInDom = (ref) => !isHTMLElement(ref) || !document.contains(ref);
+        if (!isMountedRef.current) {
+            isMountedRef.current = true;
+            readFormStateRef.current.isValid && updateIsValid();
+            !shouldUnregister && registerAbsentFields(defaultValuesRef.current);
+        }
+        for (const name of namesRef.current.unMount) {
+            const field = get(fieldsRef.current, name);
             field &&
-                (field._f.refs ? field._f.refs.every(live) : live(field._f.ref)) &&
+                (field._f.refs
+                    ? field._f.refs.every(isLiveInDom)
+                    : isLiveInDom(field._f.ref)) &&
                 unregisterFieldNames.push(name);
         }
         unregisterFieldNames.length &&
-            _formControl.current.unregister(unregisterFieldNames);
-        control._names.unMount = new Set();
+            unregister(unregisterFieldNames);
+        namesRef.current.unMount = new Set();
     });
-    return Object.assign(Object.assign({}, _formControl.current), { formState: getProxyFormState(formState, control._proxyFormState) });
+    return {
+        control: React.useMemo(() => ({
+            register,
+            inFieldArrayActionRef,
+            getIsDirty,
+            subjectsRef,
+            watchInternal,
+            fieldsRef,
+            updateIsValid,
+            namesRef,
+            readFormStateRef,
+            formStateRef,
+            defaultValuesRef,
+            fieldArrayDefaultValuesRef,
+            setValues,
+            unregister,
+            shouldUnmount: shouldUnregister,
+        }), []),
+        formState: getProxyFormState(isProxyEnabled, formState, readFormStateRef),
+        trigger,
+        register,
+        handleSubmit,
+        watch: React.useCallback(watch, []),
+        setValue: React.useCallback(setValue, [setValues]),
+        getValues: React.useCallback(getValues, []),
+        reset: React.useCallback(reset, []),
+        clearErrors: React.useCallback(clearErrors, []),
+        unregister: React.useCallback(unregister, []),
+        setError: React.useCallback(setError, []),
+        setFocus: React.useCallback(setFocus, []),
+    };
 }
 
 function useWatch(props) {
+    const { control, name, defaultValue } = props || {};
     const methods = useFormContext();
-    const { control = methods.control, name, defaultValue, disabled, } = props || {};
-    const _name = React.useRef(name);
-    _name.current = name;
+    const nameRef = React.useRef(name);
+    nameRef.current = name;
+    const { watchInternal, subjectsRef } = control || methods.control;
     const [value, updateValue] = React.useState(isUndefined(defaultValue)
-        ? control._getWatch(name)
+        ? watchInternal(name)
         : defaultValue);
     React.useEffect(() => {
-        const watchSubscription = control._subjects.watch.subscribe({
-            next: ({ name }) => (!_name.current ||
-                !name ||
-                convertToArrayPayload(_name.current).some((fieldName) => name &&
+        watchInternal(name);
+        const watchSubscription = subjectsRef.current.watch.subscribe({
+            next: ({ name: inputName, values }) => (!nameRef.current ||
+                !inputName ||
+                convertToArrayPayload(nameRef.current).some((fieldName) => inputName &&
                     fieldName &&
-                    (fieldName.startsWith(name) ||
-                        name.startsWith(fieldName)))) &&
-                updateValue(control._getWatch(_name.current, defaultValue)),
+                    (fieldName.startsWith(inputName) ||
+                        inputName.startsWith(fieldName)))) &&
+                updateValue(watchInternal(nameRef.current, defaultValue, false, values)),
         });
-        disabled && watchSubscription.unsubscribe();
         return () => watchSubscription.unsubscribe();
-    }, [disabled, control, defaultValue]);
+    }, []);
     return value;
 }