@depup/react-hook-form 7.83.0-depup.0 → 7.85.0-depup.0

package/dist/index.esm.mjs

@@ -170,6 +170,82 @@ const useIsomorphicLayoutEffect = isWeb
     ? React.useLayoutEffect
     : React.useEffect;
 
+var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
+
+const isEmptyObjectWithCustomPrototype = (object, keys) => keys.length === 0 && !Array.isArray(object) && !isPlainObject(object);
+function deepEqual(object1, object2, visited = new WeakMap()) {
+    if (object1 === object2) {
+        return true;
+    }
+    if (isPrimitive(object1) || isPrimitive(object2)) {
+        return Object.is(object1, object2);
+    }
+    if (isDateObject(object1) && isDateObject(object2)) {
+        return Object.is(object1.getTime(), object2.getTime());
+    }
+    const keys1 = Object.keys(object1);
+    const keys2 = Object.keys(object2);
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    if (isEmptyObjectWithCustomPrototype(object1, keys1) ||
+        isEmptyObjectWithCustomPrototype(object2, keys2)) {
+        return Object.is(object1, object2);
+    }
+    if (!keys1.length && Array.isArray(object1) !== Array.isArray(object2)) {
+        return false;
+    }
+    const visitedPairs = visited.get(object1);
+    if (visitedPairs && visitedPairs.has(object2)) {
+        return true;
+    }
+    if (visitedPairs) {
+        visitedPairs.add(object2);
+    }
+    else {
+        const ws = new WeakSet();
+        ws.add(object2);
+        visited.set(object1, ws);
+    }
+    for (const key of keys1) {
+        const val1 = object1[key];
+        if (!(key in object2)) {
+            return false;
+        }
+        if (key !== 'ref') {
+            const val2 = object2[key];
+            if ((isDateObject(val1) && isDateObject(val2)) ||
+                ((isObject(val1) || Array.isArray(val1)) &&
+                    (isObject(val2) || Array.isArray(val2)))
+                ? !deepEqual(val1, val2, visited)
+                : !Object.is(val1, val2)) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+function useResyncOnReconnect() {
+    const _connected = React.useRef(false);
+    const _prevValue = React.useRef(undefined);
+    const resyncIfNeeded = React.useCallback((enabled, getCurrentValue, setValue) => {
+        if (enabled && _connected.current) {
+            const currentValue = getCurrentValue();
+            if (!deepEqual(_prevValue.current, currentValue)) {
+                setValue(currentValue);
+            }
+        }
+        _connected.current = true;
+    }, []);
+    const snapshot = React.useCallback((enabled, getCurrentValue) => {
+        if (enabled) {
+            _prevValue.current = cloneObject(getCurrentValue());
+        }
+    }, []);
+    return { resyncIfNeeded, snapshot };
+}
+
 /**
  * Subscribes to each form state and isolates re-renders at the custom hook level. It has its own scope for form state subscriptions, so it will not affect other useFormState or useForm instances. Using this hook can reduce the re-render impact on large and complex form applications.
  *
@@ -217,19 +293,31 @@ function useFormState(props) {
         isValid: false,
         errors: false,
     });
-    useIsomorphicLayoutEffect(() => control._subscribe({
-        name,
-        formState: _localProxyFormState.current,
-        exact,
-        callback: (formState) => {
-            !disabled &&
-                updateFormState({
-                    ...control._formState,
-                    ...formState,
-                    defaultValues: control._defaultValues,
-                });
-        },
-    }), [name, disabled, exact]);
+    const { resyncIfNeeded, snapshot } = useResyncOnReconnect();
+    useIsomorphicLayoutEffect(() => {
+        const getCurrentFormState = () => ({
+            ...control._formState,
+            defaultValues: control._defaultValues,
+        });
+        resyncIfNeeded(!disabled, getCurrentFormState, updateFormState);
+        const unsubscribe = control._subscribe({
+            name,
+            formState: _localProxyFormState.current,
+            exact,
+            callback: (formState) => {
+                !disabled &&
+                    updateFormState({
+                        ...control._formState,
+                        ...formState,
+                        defaultValues: control._defaultValues,
+                    });
+            },
+        });
+        return () => {
+            unsubscribe();
+            snapshot(!disabled, getCurrentFormState);
+        };
+    }, [name, disabled, exact, resyncIfNeeded, snapshot]);
     React.useEffect(() => {
         _localProxyFormState.current.isValid && control._setValid(true);
     }, [control]);
@@ -251,62 +339,6 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
     return formValues;
 };
 
-var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
-
-const isEmptyObjectWithCustomPrototype = (object, keys) => keys.length === 0 && !Array.isArray(object) && !isPlainObject(object);
-function deepEqual(object1, object2, visited = new WeakMap()) {
-    if (object1 === object2) {
-        return true;
-    }
-    if (isPrimitive(object1) || isPrimitive(object2)) {
-        return Object.is(object1, object2);
-    }
-    if (isDateObject(object1) && isDateObject(object2)) {
-        return Object.is(object1.getTime(), object2.getTime());
-    }
-    const keys1 = Object.keys(object1);
-    const keys2 = Object.keys(object2);
-    if (keys1.length !== keys2.length) {
-        return false;
-    }
-    if (isEmptyObjectWithCustomPrototype(object1, keys1) ||
-        isEmptyObjectWithCustomPrototype(object2, keys2)) {
-        return Object.is(object1, object2);
-    }
-    if (!keys1.length && Array.isArray(object1) !== Array.isArray(object2)) {
-        return false;
-    }
-    const visitedPairs = visited.get(object1);
-    if (visitedPairs && visitedPairs.has(object2)) {
-        return true;
-    }
-    if (visitedPairs) {
-        visitedPairs.add(object2);
-    }
-    else {
-        const ws = new WeakSet();
-        ws.add(object2);
-        visited.set(object1, ws);
-    }
-    for (const key of keys1) {
-        const val1 = object1[key];
-        if (!(key in object2)) {
-            return false;
-        }
-        if (key !== 'ref') {
-            const val2 = object2[key];
-            if ((isDateObject(val1) && isDateObject(val2)) ||
-                ((isObject(val1) || Array.isArray(val1)) &&
-                    (isObject(val2) || Array.isArray(val2)))
-                ? !deepEqual(val1, val2, visited)
-                : !Object.is(val1, val2)) {
-                return false;
-            }
-        }
-    }
-    return true;
-}
-
 /**
  * Custom hook to subscribe to field changes and isolate re-rendering at the component level.
  *
@@ -355,24 +387,39 @@ function useWatch(props) {
             }
         }
     }, [control._formValues, control._names, disabled, name]);
+    const { resyncIfNeeded, snapshot } = useResyncOnReconnect();
+    const _refreshValue = React.useRef(refreshValue);
+    _refreshValue.current = refreshValue;
+    const _getCurrentOutput = React.useRef(getCurrentOutput);
+    _getCurrentOutput.current = getCurrentOutput;
     useIsomorphicLayoutEffect(() => {
         if (_prevControl.current !== control ||
             !deepEqual(_prevName.current, name)) {
             _prevControl.current = control;
             _prevName.current = name;
-            refreshValue();
+            _refreshValue.current();
+        }
+        else {
+            resyncIfNeeded(!disabled, () => _getCurrentOutput.current(), (currentValue) => {
+                updateValue(currentValue);
+                _computeFormValues.current = currentValue;
+            });
         }
-        return control._subscribe({
+        const unsubscribe = control._subscribe({
             name,
             formState: {
                 values: true,
             },
             exact,
             callback: (formState) => {
-                refreshValue(formState.values);
+                _refreshValue.current(formState.values);
             },
         });
-    }, [control, exact, name, refreshValue]);
+        return () => {
+            unsubscribe();
+            snapshot(!disabled, () => _getCurrentOutput.current());
+        };
+    }, [control, exact, name, disabled, resyncIfNeeded, snapshot]);
     React.useEffect(() => control._removeUnmounted());
     // If name or control changed for this render, synchronously reflect the
     // latest value so callers (like useController) see the correct value
@@ -644,9 +691,12 @@ var isWatched = (name, _names, isBlurEvent) => {
 
 const iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
     for (const key of fieldsNames || Object.keys(fields)) {
-        const field = get(fields, key);
+        if (key === '_f') {
+            continue;
+        }
+        const field = fieldsNames ? get(fields, key) : fields[key];
         if (field) {
-            const { _f, ...currentField } = field;
+            const { _f } = field;
             if (_f) {
                 if (_f.refs && _f.refs[0] && action(_f.refs[0], key) && !abortEarly) {
                     return true;
@@ -655,13 +705,13 @@ const iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
                     return true;
                 }
                 else {
-                    if (iterateFieldsByAction(currentField, action)) {
+                    if (iterateFieldsByAction(field, action)) {
                         break;
                     }
                 }
             }
-            else if (isObject(currentField)) {
-                if (iterateFieldsByAction(currentField, action)) {
+            else if (isObject(field) || Array.isArray(field)) {
+                if (iterateFieldsByAction(field, action)) {
                     break;
                 }
             }
@@ -827,7 +877,9 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
         let exceedMin;
         const maxOutput = getValueAndMessage(max);
         const minOutput = getValueAndMessage(min);
-        if (!isNullOrUndefined(inputValue) && !isNaN(inputValue)) {
+        if (!isNullOrUndefined(inputValue) &&
+            !isDateObject(inputValue) &&
+            !isNaN(inputValue)) {
             const valueNumber = ref.valueAsNumber ||
                 (inputValue ? +inputValue : inputValue);
             if (!isNullOrUndefined(maxOutput.value)) {
@@ -998,7 +1050,7 @@ var swapArrayAt = (data, indexA, indexB) => {
 };
 
 function baseGet(object, updatePath) {
-    const length = updatePath.slice(0, -1).length;
+    const length = updatePath.length - 1;
     let index = 0;
     while (index < length) {
         if (isNullOrUndefined(object)) {
@@ -1235,9 +1287,11 @@ function useFieldArray(props) {
     };
     React.useEffect(() => {
         if (disabled) {
+            control._state.actionArrayLengths.delete(name);
             return;
         }
         control._state.action = false;
+        control._state.actionArrayLengths.delete(name);
         isWatched(name, control._names) &&
             control._subjects.state.next({
                 ...control._formState,
@@ -1317,6 +1371,7 @@ function useFieldArray(props) {
             !get(control._formValues, name) && control._setFieldArray(name);
         }
         return () => {
+            control._state.actionArrayLengths.delete(name);
             if (disabled) {
                 return;
             }
@@ -1417,6 +1472,26 @@ const flatten = (obj) => {
     return output;
 };
 
+function jsonToFormData(json) {
+    const result = new FormData();
+    const flattenFormValues = flatten(json);
+    for (const key in flattenFormValues) {
+        result.append(key, flattenFormValues[key]);
+    }
+    return result;
+}
+
+function safeJSONStringify(value) {
+    try {
+        return JSON.stringify(value);
+    }
+    catch (_a) {
+        return '';
+    }
+}
+
+function noop() { }
+
 const HookFormContext = React.createContext(null);
 HookFormContext.displayName = 'HookFormContext';
 /**
@@ -1525,6 +1600,9 @@ const FormProvider = ({ children, watch, getValues, getFieldState, setError, cle
 };
 
 const POST_REQUEST = 'post';
+function defaultValidateStatus(status) {
+    return status >= 200 && status < 300;
+}
 /**
  * Form component to manage submission.
  *
@@ -1550,21 +1628,11 @@ const POST_REQUEST = 'post';
 function Form(props) {
     const methods = useFormContext();
     const [mounted, setMounted] = React.useState(false);
-    const { control = methods.control, onSubmit, children, action, method = POST_REQUEST, headers, encType, onError, render, onSuccess, validateStatus, ...rest } = props;
-    const submit = React.useCallback(async (event) => {
-        let hasError = false;
-        let type = '';
-        await control.handleSubmit(async (data) => {
-            const formData = new FormData();
-            let formDataJson = '';
-            try {
-                formDataJson = JSON.stringify(data);
-            }
-            catch (_a) { }
-            const flattenFormValues = flatten(data);
-            for (const key in flattenFormValues) {
-                formData.append(key, flattenFormValues[key]);
-            }
+    const { control = methods.control, onSubmit = noop, children, action, method = POST_REQUEST, headers, encType, onError = noop, render, onSuccess = noop, validateStatus = defaultValidateStatus, ...rest } = props;
+    const handleSubmit = React.useMemo(() => {
+        return control.handleSubmit(async (data, event) => {
+            const formData = jsonToFormData(data);
+            const formDataJson = safeJSONStringify(data);
             if (onSubmit) {
                 await onSubmit({
                     data,
@@ -1574,48 +1642,48 @@ function Form(props) {
                     formDataJson,
                 });
             }
-            if (action) {
+            if (isString(action)) {
                 try {
-                    const shouldStringifySubmissionData = [
-                        headers && headers['Content-Type'],
-                        encType,
-                    ].some((value) => value && value.includes('json'));
-                    const response = await fetch(String(action), {
+                    const shouldStringifySubmissionData = (headers &&
+                        headers['Content-Type'] &&
+                        headers['Content-Type'].includes('json')) ||
+                        (encType && encType.includes('json'));
+                    const response = await fetch(action, {
                         method,
                         headers: {
                             ...headers,
-                            ...(encType && encType !== 'multipart/form-data'
-                                ? { 'Content-Type': encType }
-                                : {}),
+                            ...(encType &&
+                                encType !== 'multipart/form-data' && {
+                                'Content-Type': encType,
+                            }),
                         },
                         body: shouldStringifySubmissionData ? formDataJson : formData,
                     });
-                    if (response &&
-                        (validateStatus
-                            ? !validateStatus(response.status)
-                            : response.status < 200 || response.status >= 300)) {
-                        hasError = true;
-                        onError && onError({ response });
-                        type = String(response.status);
+                    if (response && !validateStatus(response.status)) {
+                        onError({ response });
+                        return { type: String(response.status) };
                     }
                     else {
-                        onSuccess && onSuccess({ response });
+                        onSuccess({ response });
                     }
                 }
                 catch (error) {
-                    hasError = true;
-                    onError && onError({ error });
+                    onError({ error });
+                    return { type: '' };
                 }
             }
-        })(event);
-        if (hasError && control) {
-            control._subjects.state.next({
-                isSubmitSuccessful: false,
-            });
-            control.setError('root.server', {
-                type,
-            });
-        }
+            if (isFunction(action)) {
+                try {
+                    await action(formData);
+                }
+                catch (error) {
+                    onError({ error });
+                    return { type: '' };
+                }
+            }
+            // Return nothing when successful.
+            return;
+        });
     }, [
         control,
         onSubmit,
@@ -1627,15 +1695,28 @@ function Form(props) {
         onError,
         onSuccess,
     ]);
+    const submit = React.useCallback(async (event) => {
+        const err = await handleSubmit(event);
+        if (err && control) {
+            control._subjects.state.next({ isSubmitSuccessful: false });
+            control.setError('root.server', err);
+        }
+    }, [handleSubmit, control]);
     React.useEffect(() => {
         setMounted(true);
     }, []);
-    return render ? (React.createElement(React.Fragment, null, render({
-        submit,
-    }))) : (React.createElement("form", { noValidate: mounted, action: action, method: method, encType: encType, onSubmit: submit, ...rest }, children));
+    if (render) {
+        return render({ submit });
+    }
+    // React forbids passing `method`/`encType` alongside a function `action`
+    // (a Server-Action-style submission) -- it manages those itself and warns
+    // if they're present, so they're only rendered for string/URL actions.
+    return (React.createElement("form", { noValidate: mounted, action: action, ...(!isFunction(action) && { method, encType }), onSubmit: submit, ...rest }, children));
 }
 
-const FormStateSubscribe = ({ control, disabled, exact, name, render, }) => render(useFormState({ control, name, disabled, exact }));
+const FormState = ({ control, disabled, exact, name, render, }) => render(useFormState({ control, name, disabled, exact }));
+/** @deprecated Use `FormState` instead. Kept as an alias for backward compatibility. */
+const FormStateSubscribe = FormState;
 
 var createSubject = () => {
     let _observers = [];
@@ -1691,6 +1772,24 @@ var isRadioOrCheckbox = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
 
 var live = (ref) => isHTMLElement(ref) && ref.isConnected;
 
+function isDirtyContainer(value) {
+    return Array.isArray(value) || isObject(value);
+}
+function collectDirtyFieldNames(dirtyTree, cachedDirtyFields, prefix = '', names = []) {
+    for (const key in dirtyTree) {
+        const path = prefix ? `${prefix}.${key}` : key;
+        const value = dirtyTree[key];
+        if (isDirtyContainer(value) &&
+            isDirtyContainer(get(cachedDirtyFields, path))) {
+            collectDirtyFieldNames(value, cachedDirtyFields, path, names);
+        }
+        else {
+            names.push(path);
+        }
+    }
+    return names;
+}
+
 var objectHasFunction = (data) => {
     for (const key in data) {
         if (isFunction(data[key])) {
@@ -1794,7 +1893,7 @@ function getFieldValue(_f) {
     if (isCheckBoxInput(ref)) {
         return getCheckboxValue(_f.refs).value;
     }
-    return getFieldValueAs(isUndefined(ref.value) ? _f.ref.value : ref.value, _f);
+    return getFieldValueAs(ref.value, _f);
 }
 
 var getResolverOptions = (fieldsNames, _fields, criteriaMode, shouldUseNativeValidation) => {
@@ -1885,8 +1984,7 @@ function schemaErrorLookup(errors, _fields, name) {
 
 var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, isRoot) => {
     updateFormState(formStateData);
-    const { name, ...formState } = formStateData;
-    const keys = Object.keys(formState);
+    const keys = Object.keys(formStateData).filter((key) => key !== 'name');
     return (!keys.length ||
         (isRoot && keys.length >= Object.keys(_proxyFormState).length) ||
         keys.find((key) => _proxyFormState[key] ===
@@ -1918,7 +2016,12 @@ var skipValidation = (isBlurEvent, isTouched, isSubmitted, reValidateMode, mode)
     return true;
 };
 
-var unsetEmptyArray = (ref, name) => !compact(get(ref, name)).length && unset(ref, name);
+var unsetEmptyArray = (ref, name) => {
+    const array = get(ref, name);
+    !compact(array).length &&
+        !(array === null || array === void 0 ? void 0 : array.root) &&
+        unset(ref, name);
+};
 
 const defaultOptions = {
     mode: VALIDATION_MODE.onSubmit,
@@ -1967,6 +2070,7 @@ function createFormControl(props = {}) {
         : cloneObject(_defaultValues);
     let _state = {
         action: false,
+        actionArrayLengths: new Map(),
         mount: false,
         watch: false,
         keepIsValid: false,
@@ -2062,13 +2166,22 @@ function createFormControl(props = {}) {
     const _setFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
         if (args && method && !_options.disabled) {
             _state.action = true;
+            if (!_state.actionArrayLengths.has(name)) {
+                const preActionFields = get(_fields, name);
+                _state.actionArrayLengths.set(name, Array.isArray(preActionFields) ? preActionFields.length : 0);
+            }
             if (shouldUpdateFieldsAndState && Array.isArray(get(_fields, name))) {
                 const fieldValues = method(get(_fields, name), args.argA, args.argB);
                 shouldSetValues && set(_fields, name, fieldValues);
             }
             if (shouldUpdateFieldsAndState &&
                 Array.isArray(get(_formState.errors, name))) {
-                const errors = method(get(_formState.errors, name), args.argA, args.argB);
+                const fieldArrayErrors = get(_formState.errors, name);
+                const rootError = fieldArrayErrors.root;
+                const errors = method(fieldArrayErrors, args.argA, args.argB) || fieldArrayErrors;
+                if (rootError) {
+                    errors.root = rootError;
+                }
                 shouldSetValues && set(_formState.errors, name, errors);
                 unsetEmptyArray(_formState.errors, name);
             }
@@ -2124,10 +2237,40 @@ function createFormControl(props = {}) {
         }
         return false;
     };
+    const isStaleArrayIndex = (name) => {
+        if (!_state.actionArrayLengths.size) {
+            return false;
+        }
+        const segments = isKey(name) ? [name] : stringToPath(name);
+        let node = _formValues;
+        let path = '';
+        let ownerDepth = -1;
+        let ownerPreActionLength = 0;
+        for (let i = 0; i < segments.length; i++) {
+            if (isNullOrUndefined(node)) {
+                return false;
+            }
+            const key = segments[i];
+            path = path ? `${path}.${key}` : key;
+            if (Array.isArray(node) && +key >= node.length) {
+                return ownerDepth === -1
+                    ? false
+                    : i === ownerDepth
+                        ? +key < ownerPreActionLength
+                        : true;
+            }
+            if (_state.actionArrayLengths.has(path)) {
+                ownerDepth = i + 1;
+                ownerPreActionLength = _state.actionArrayLengths.get(path);
+            }
+            node = node[key];
+        }
+        return false;
+    };
     const updateValidAndValue = (name, shouldSkipSetValueAs, value, ref) => {
         const field = get(_fields, name);
         if (field) {
-            if (hasExplicitNullIntermediate(name)) {
+            if (hasExplicitNullIntermediate(name) || isStaleArrayIndex(name)) {
                 return;
             }
             const wasUnsetInFormValues = isUndefined(get(_formValues, name));
@@ -2375,14 +2518,12 @@ function createFormControl(props = {}) {
     const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
         ...(_state.mount
             ? _formValues
-            : isUndefined(defaultValue)
+            : isUndefined(defaultValue) || isString(names)
                 ? _defaultValues
-                : isString(names)
-                    ? { [names]: defaultValue }
-                    : defaultValue),
+                : defaultValue),
     }, isGlobal, defaultValue);
     const _getFieldArray = (name) => compact(get(_state.mount ? _formValues : _defaultValues, name, _options.shouldUnregister ? get(_defaultValues, name, []) : []));
-    const setFieldValue = (name, value, options = {}, skipClone = false, skipRender = false) => {
+    const setFieldValue = (name, value, options = {}, skipClone = false, skipRender = false, skipValueRender = false) => {
         const field = get(_fields, name);
         let fieldValue = value;
         if (field) {
@@ -2420,7 +2561,7 @@ function createFormControl(props = {}) {
                 }
                 else {
                     fieldReference.ref.value = fieldValue;
-                    if (!fieldReference.ref.type && !skipRender) {
+                    if (!fieldReference.ref.type && !skipRender && !skipValueRender) {
                         _subjects.state.next({
                             name,
                             values: skipClone ? _formValues : cloneObject(_formValues),
@@ -2436,7 +2577,13 @@ function createFormControl(props = {}) {
                 delayError: options.delayError,
             });
     };
-    const setFieldValues = (name, value, options, skipClone = false, skipRender = false) => {
+    const setFieldValues = (name, value, options, skipClone = false, skipRender = false, skipValueRender = false) => {
+        if (_names.array.has(name)) {
+            _subjects.array.next({
+                name,
+                values: skipClone ? _formValues : cloneObject(_formValues),
+            });
+        }
         for (const fieldKey in value) {
             if (!value.hasOwnProperty(fieldKey)) {
                 return;
@@ -2448,8 +2595,8 @@ function createFormControl(props = {}) {
                 isObject(fieldValue) ||
                 (field && !field._f)) &&
                 !isDateObject(fieldValue)
-                ? setFieldValues(fieldName, fieldValue, options, skipClone, skipRender)
-                : setFieldValue(fieldName, fieldValue, options, skipClone, skipRender);
+                ? setFieldValues(fieldName, fieldValue, options, skipClone, skipRender, skipValueRender)
+                : setFieldValue(fieldName, fieldValue, options, skipClone, skipRender, skipValueRender);
         }
     };
     const _setValue = (name, value, options, skipClone, skipStateEmit = false) => {
@@ -2484,11 +2631,12 @@ function createFormControl(props = {}) {
         else {
             const isEmpty = (Array.isArray(cloneValue) && !cloneValue.length) ||
                 isEmptyObject(cloneValue);
+            const skipValueRender = !isValueUnchanged && !skipStateEmit;
             if (!field || field._f || isNullOrUndefined(cloneValue) || isEmpty) {
-                setFieldValue(name, cloneValue, options, skipClone, skipStateEmit);
+                setFieldValue(name, cloneValue, options, skipClone, skipStateEmit, skipValueRender);
             }
             else {
-                setFieldValues(name, cloneValue, options, skipClone, skipStateEmit);
+                setFieldValues(name, cloneValue, options, skipClone, skipStateEmit, skipValueRender);
             }
         }
         if (!isValueUnchanged && !skipStateEmit) {
@@ -2972,6 +3120,7 @@ function createFormControl(props = {}) {
         }
     };
     const handleSubmit = (onValid, onInvalid) => async (e) => {
+        let result = undefined;
         let onValidError = undefined;
         if (e) {
             e.preventDefault && e.preventDefault();
@@ -3005,7 +3154,7 @@ function createFormControl(props = {}) {
                 errors: {},
             });
             try {
-                await onValid(fieldValues, e);
+                result = await onValid(fieldValues, e);
             }
             catch (error) {
                 onValidError = error;
@@ -3028,6 +3177,7 @@ function createFormControl(props = {}) {
         if (onValidError) {
             throw onValidError;
         }
+        return result;
     };
     const resetField = (name, options = {}) => {
         if (get(_fields, name)) {
@@ -3067,7 +3217,7 @@ function createFormControl(props = {}) {
             if (keepStateOptions.keepDirtyValues) {
                 const fieldsToCheck = new Set([
                     ..._names.mount,
-                    ...Object.keys(getDirtyFields(_defaultValues, _formValues, undefined, fieldRefs)),
+                    ...collectDirtyFieldNames(getDirtyFields(_defaultValues, _formValues, undefined, fieldRefs), _formState.dirtyFields),
                 ]);
                 for (const fieldName of Array.from(fieldsToCheck)) {
                     const isDirty = get(_formState.dirtyFields, fieldName);
@@ -3148,6 +3298,7 @@ function createFormControl(props = {}) {
         _state.watch = !!_options.shouldUnregister;
         _state.keepIsValid = !!keepStateOptions.keepIsValid;
         _state.action = false;
+        _state.actionArrayLengths.clear();
         if (!keepStateOptions.keepErrors) {
             _formState.errors = {};
         }
@@ -3220,6 +3371,7 @@ function createFormControl(props = {}) {
             ...formState,
         };
     };
+    _subjects.state.subscribe({ next: _setFormState });
     const _resetDefaultValues = () => isFunction(_options.defaultValues) &&
         _options.defaultValues().then((values) => {
             reset(values, _options.resetOptions);
@@ -3389,8 +3541,14 @@ function useForm(props = {}) {
     }
     const control = _formControl.current.control;
     control._options = props;
+    const { resyncIfNeeded, snapshot } = useResyncOnReconnect();
     useIsomorphicLayoutEffect(() => {
-        const sub = control._subscribe({
+        const getCurrentFormState = () => ({
+            ...control._formState,
+            defaultValues: control._defaultValues,
+        });
+        resyncIfNeeded(true, getCurrentFormState, updateFormState);
+        const unsubscribe = control._subscribe({
             formState: control._proxyFormState,
             callback: () => updateFormState({
                 ...control._formState,
@@ -3403,8 +3561,11 @@ function useForm(props = {}) {
             isReady: true,
         }));
         control._formState.isReady = true;
-        return sub;
-    }, [control]);
+        return () => {
+            unsubscribe();
+            snapshot(true, getCurrentFormState);
+        };
+    }, [control, resyncIfNeeded, snapshot]);
     React.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
     React.useEffect(() => {
         if (props.mode) {
@@ -3496,5 +3657,5 @@ function useForm(props = {}) {
  */
 const Watch = (props) => props.render(useWatch({ name: props.names, ...props }));
 
-export { Controller, FieldArray, Form, FormProvider, FormStateSubscribe, Watch, appendErrors, createFormControl, get, set, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
+export { Controller, FieldArray, Form, FormProvider, FormState, FormStateSubscribe, Watch, appendErrors, createFormControl, get, set, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
 //# sourceMappingURL=index.esm.mjs.map