@depup/react-hook-form 7.84.0-depup.0 → 7.86.0-depup.0

package/dist/index.esm.mjs

@@ -26,16 +26,14 @@ var isNameInFieldArray = (names, name) => name
     .split('.')
     .some((part, index, arr) => !isNaN(Number(part)) && names.has(arr.slice(0, index).join('.')));
 
-var isPlainObject = (tempObject) => {
-    const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
-    return (isObject(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf'));
-};
-
 var isWeb = typeof window !== 'undefined' &&
     typeof window.HTMLElement !== 'undefined' &&
     typeof document !== 'undefined';
 
 function cloneObject(data) {
+    if (data === null || typeof data !== 'object') {
+        return data;
+    }
     if (data instanceof Date) {
         return new Date(data);
     }
@@ -44,7 +42,7 @@ function cloneObject(data) {
         return data;
     }
     const isArray = Array.isArray(data);
-    if (!isArray && !(isObject(data) && isPlainObject(data))) {
+    if (!isArray && data.constructor !== Object) {
         return data;
     }
     const copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
@@ -170,6 +168,87 @@ const useIsomorphicLayoutEffect = isWeb
     ? React.useLayoutEffect
     : React.useEffect;
 
+var isPlainObject = (tempObject) => {
+    const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
+    return (isObject(prototypeCopy) && prototypeCopy.hasOwnProperty('isPrototypeOf'));
+};
+
+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 +296,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 +342,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 +390,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
@@ -380,17 +430,17 @@ function useWatch(props) {
     // Optimize: Check control reference first before expensive deepEqual
     const controlChanged = _prevControl.current !== control;
     const prevName = _prevName.current;
-    // Cache the computed output to avoid duplicate calls within the same render
-    // We include shouldReturnImmediate in deps to ensure proper recomputation
-    const computedOutput = React.useMemo(() => {
+    // `null`/`undefined` are valid watched values, so a boolean flag (rather
+    // than a sentinel return value) decides whether to return the freshly
+    // computed output instead of the possibly-stale state value.
+    const shouldReturnImmediate = React.useMemo(() => {
         if (disabled) {
-            return null;
+            return false;
         }
         const nameChanged = !controlChanged && !deepEqual(prevName, name);
-        const shouldReturnImmediate = controlChanged || nameChanged;
-        return shouldReturnImmediate ? getCurrentOutput() : null;
-    }, [disabled, controlChanged, name, prevName, getCurrentOutput]);
-    return computedOutput !== null ? computedOutput : value;
+        return controlChanged || nameChanged;
+    }, [disabled, controlChanged, name, prevName]);
+    return shouldReturnImmediate ? getCurrentOutput() : value;
 }
 
 /**
@@ -606,16 +656,12 @@ function useController(props) {
  */
 const Controller = (props) => props.render(useController(props));
 
-var generateId = () => {
-    if (typeof crypto !== 'undefined' && crypto.randomUUID) {
-        return crypto.randomUUID();
-    }
-    const d = typeof performance === 'undefined' ? Date.now() : performance.now() * 1000;
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-        const r = ((Math.random() * 16 + d) % 16) | 0;
-        return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16);
+var generateId = () => typeof crypto !== 'undefined' && crypto.randomUUID
+    ? crypto.randomUUID()
+    : 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+        const r = (Math.random() * 16) | 0;
+        return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
     });
-};
 
 var getFocusFieldName = (name, index, options = {}) => options.shouldFocus || isUndefined(options.shouldFocus)
     ? options.focusName ||
@@ -712,23 +758,25 @@ const defaultResult = {
 };
 const validResult = { value: true, isValid: true };
 var getCheckboxValue = (options) => {
-    if (Array.isArray(options)) {
-        if (options.length > 1) {
-            const values = options
-                .filter((option) => option && option.checked && !option.disabled)
-                .map((option) => option.value);
-            return { value: values, isValid: !!values.length };
-        }
-        return options[0].checked && !options[0].disabled
-            ? // @ts-expect-error expected to work in the browser
-                options[0].attributes && !isUndefined(options[0].attributes.value)
-                    ? isUndefined(options[0].value) || options[0].value === ''
-                        ? validResult
-                        : { value: options[0].value, isValid: true }
-                    : validResult
-            : defaultResult;
-    }
-    return defaultResult;
+    if (!Array.isArray(options)) {
+        return defaultResult;
+    }
+    if (options.length > 1) {
+        const values = options
+            .filter((option) => option && option.checked && !option.disabled)
+            .map((option) => option.value);
+        return { value: values, isValid: !!values.length };
+    }
+    const option = options[0];
+    if (!option || !option.checked || option.disabled) {
+        return defaultResult;
+    }
+    if (!option.attributes || !('value' in option.attributes)) {
+        return validResult;
+    }
+    return isUndefined(option.value) || option.value === ''
+        ? validResult
+        : { value: option.value, isValid: true };
 };
 
 const defaultReturn = {
@@ -830,7 +878,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)) {
@@ -944,7 +994,8 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
             }
         }
     }
-    setCustomValidity(true);
+    const fieldError = error[name];
+    setCustomValidity(fieldError ? fieldError.message : true);
     return error;
 };
 
@@ -1223,8 +1274,8 @@ function useFieldArray(props) {
         setFields([...updatedFieldArrayValues]);
         control._setFieldArray(name, updatedFieldArrayValues, updateAt, {
             argA: index,
-            argB: updateValue,
-        }, true, false);
+            argB: fillEmptyArray(value),
+        });
     };
     const replace = (value) => {
         if (disabled) {
@@ -1238,9 +1289,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,
@@ -1282,10 +1335,7 @@ function useFieldArray(props) {
             }
             else {
                 const field = get(control._fields, name);
-                if (field &&
-                    field._f &&
-                    !(getValidationModes(control._options.reValidateMode).isOnSubmit &&
-                        getValidationModes(control._options.mode).isOnSubmit)) {
+                if (field && field._f) {
                     validateField(field, control._names.disabled, control._formValues, control._options.criteriaMode === VALIDATION_MODE.all, control._options.shouldUseNativeValidation, true).then((error) => !isEmptyObject(error) &&
                         control._subjects.state.next({
                             errors: updateFieldArrayRootError(control._formState.errors, error, name),
@@ -1320,6 +1370,7 @@ function useFieldArray(props) {
             !get(control._formValues, name) && control._setFieldArray(name);
         }
         return () => {
+            control._state.actionArrayLengths.delete(name);
             if (disabled) {
                 return;
             }
@@ -1402,12 +1453,15 @@ function useFieldArray(props) {
  */
 const FieldArray = (props) => props.render(useFieldArray(props));
 
+const isFileLike = (value) => (typeof Blob !== 'undefined' && value instanceof Blob) ||
+    (typeof File !== 'undefined' && value instanceof File);
 const flatten = (obj) => {
     const output = {};
     for (const key of Object.keys(obj)) {
         if (isObjectType(obj[key]) &&
             obj[key] !== null &&
-            !isDateObject(obj[key])) {
+            !isDateObject(obj[key]) &&
+            !isFileLike(obj[key])) {
             const nested = flatten(obj[key]);
             for (const nestedKey of Object.keys(nested)) {
                 output[`${key}.${nestedKey}`] = nested[nestedKey];
@@ -1503,10 +1557,11 @@ const useFormContext = () => React.useContext(HookFormContext);
  * }
  * ```
  */
-const FormProvider = ({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }) => {
+const FormProvider = ({ children, watch, getValues, getErrors, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }) => {
     const memoizedValue = React.useMemo(() => ({
         watch,
         getValues,
+        getErrors,
         getFieldState,
         setError,
         clearErrors,
@@ -1527,6 +1582,7 @@ const FormProvider = ({ children, watch, getValues, getFieldState, setError, cle
         clearErrors,
         control,
         formState,
+        getErrors,
         getFieldState,
         getValues,
         handleSubmit,
@@ -1714,6 +1770,24 @@ function extractFormValues(fieldsState, formValues) {
     return values;
 }
 
+const hasOwn = (value, key) => value !== null &&
+    isObjectType(value) &&
+    Object.prototype.hasOwnProperty.call(value, key);
+var has = (object, path) => {
+    if (!path) {
+        return false;
+    }
+    let result = object;
+    for (const key of isKey(path) ? [path] : stringToPath(path)) {
+        if (!hasOwn(result, key)) {
+            // `get` also resolves a path held as a single literal key, eg `{ 'a.b': 1 }`
+            return hasOwn(object, path);
+        }
+        result = result[key];
+    }
+    return true;
+};
+
 var isMultipleSelect = (element) => element.type === `select-multiple`;
 
 var isRadioOrCheckbox = (ref) => isRadioInput(ref) || isCheckBoxInput(ref);
@@ -1813,6 +1887,18 @@ function getDirtyFields(data, formValues, dirtyFieldsFromValues, fieldRefs) {
     return dirtyFieldsFromValues;
 }
 
+var getFieldArrayItemNames = (names, name) => {
+    const segments = name.split('.');
+    const matches = [];
+    let prefix = segments[0];
+    for (let i = 1; i < segments.length; prefix += '.' + segments[i++]) {
+        if (!isNaN(+segments[i]) && names.has(prefix)) {
+            matches.push(`${prefix}.${segments[i]}`);
+        }
+    }
+    return matches;
+};
+
 var getFieldValueAs = (value, { valueAsNumber, valueAsDate, setValueAs }) => isUndefined(value)
     ? value
     : valueAsNumber
@@ -1888,10 +1974,11 @@ var hasPromiseValidation = (fieldReference) => {
 
 var hasValidation = (options) => options.mount &&
     (options.required ||
-        options.min ||
-        options.max ||
-        options.maxLength ||
-        options.minLength ||
+        (!isUndefined(options.required) && options.required !== false) ||
+        !isUndefined(options.min) ||
+        !isUndefined(options.max) ||
+        !isUndefined(options.maxLength) ||
+        !isUndefined(options.minLength) ||
         options.pattern ||
         options.validate);
 
@@ -1964,7 +2051,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,
@@ -2013,6 +2105,7 @@ function createFormControl(props = {}) {
         : cloneObject(_defaultValues);
     let _state = {
         action: false,
+        actionArrayLengths: new Map(),
         mount: false,
         watch: false,
         keepIsValid: false,
@@ -2089,7 +2182,7 @@ function createFormControl(props = {}) {
                 _proxyFormState.validatingFields ||
                 _proxySubscribeFormState.isValidating ||
                 _proxySubscribeFormState.validatingFields)) {
-            (names || Array.from(_names.mount)).forEach((name) => {
+            (names || _names.mount).forEach((name) => {
                 if (name) {
                     isValidating
                         ? set(_formState.validatingFields, name, isValidating)
@@ -2108,21 +2201,30 @@ function createFormControl(props = {}) {
     const _setFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
         if (args && method && !_options.disabled) {
             _state.action = true;
-            if (shouldUpdateFieldsAndState && Array.isArray(get(_fields, name))) {
-                const fieldValues = method(get(_fields, name), args.argA, args.argB);
+            const fields = get(_fields, name);
+            if (!_state.actionArrayLengths.has(name)) {
+                _state.actionArrayLengths.set(name, Array.isArray(fields) ? fields.length : 0);
+            }
+            if (shouldUpdateFieldsAndState && Array.isArray(fields)) {
+                const fieldValues = method(fields, 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);
+            if (shouldUpdateFieldsAndState && Array.isArray(fieldArrayErrors)) {
+                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);
             }
+            const touchedFieldsArray = get(_formState.touchedFields, name);
             if ((_proxyFormState.touchedFields ||
                 _proxySubscribeFormState.touchedFields) &&
                 shouldUpdateFieldsAndState &&
-                Array.isArray(get(_formState.touchedFields, name))) {
-                const touchedFields = method(get(_formState.touchedFields, name), args.argA, args.argB);
+                Array.isArray(touchedFieldsArray)) {
+                const touchedFields = method(touchedFieldsArray, args.argA, args.argB);
                 shouldSetValues && set(_formState.touchedFields, name, touchedFields);
             }
             if (_proxyFormState.dirtyFields || _proxySubscribeFormState.dirtyFields) {
@@ -2170,10 +2272,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));
@@ -2278,10 +2410,6 @@ function createFormControl(props = {}) {
                 errors: _formState.errors,
                 name,
             };
-            _formState = {
-                ..._formState,
-                ...updatedFormState,
-            };
             _subjects.state.next(updatedFormState);
         }
     };
@@ -2421,14 +2549,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) {
@@ -2466,7 +2592,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),
@@ -2482,7 +2608,7 @@ 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,
@@ -2500,8 +2626,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) => {
@@ -2536,11 +2662,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) {
@@ -2551,6 +2678,11 @@ function createFormControl(props = {}) {
                 name: _state.mount || watched ? name : undefined,
                 values,
             });
+            if (!isFieldArray) {
+                for (const itemName of getFieldArrayItemNames(_names.array, name)) {
+                    _subjects.state.next({ name: itemName, values });
+                }
+            }
         }
     };
     const setValue = (name, value, options = {}) => _setValue(name, value, options, false);
@@ -2563,10 +2695,9 @@ function createFormControl(props = {}) {
                 ..._formValues,
                 ...updatedFormValues,
             };
-            const flattenedUpdates = flatten(updatedFormValues);
             for (const fieldName of _names.mount) {
-                if (fieldName in flattenedUpdates) {
-                    _setValue(fieldName, flattenedUpdates[fieldName], options, true, true);
+                if (has(updatedFormValues, fieldName)) {
+                    _setValue(fieldName, get(updatedFormValues, fieldName), options, true, true);
                 }
             }
             _subjects.state.next({
@@ -2766,13 +2897,22 @@ function createFormControl(props = {}) {
                 ? get(values, fieldNames)
                 : fieldNames.map((name) => get(values, name));
     };
-    const getFieldState = (name, formState) => ({
-        invalid: !!get((formState || _formState).errors, name),
-        isDirty: !!get((formState || _formState).dirtyFields, name),
-        error: get((formState || _formState).errors, name),
-        isValidating: !!get(_formState.validatingFields, name),
-        isTouched: !!get((formState || _formState).touchedFields, name),
-    });
+    const getErrors = (fieldNames) => isUndefined(fieldNames)
+        ? { ..._formState.errors }
+        : isString(fieldNames)
+            ? get(_formState.errors, fieldNames)
+            : fieldNames.map((name) => get(_formState.errors, name));
+    const getFieldState = (name, formState) => {
+        const targetFormState = formState || _formState;
+        const error = get(targetFormState.errors, name);
+        return {
+            invalid: !!error,
+            isDirty: !!get(targetFormState.dirtyFields, name),
+            error,
+            isValidating: !!get(_formState.validatingFields, name),
+            isTouched: !!get(targetFormState.touchedFields, name),
+        };
+    };
     const clearErrors = (name) => {
         const names = name ? convertToArrayPayload(name) : undefined;
         names === null || names === void 0 ? void 0 : names.forEach((inputName) => unset(_formState.errors, inputName));
@@ -2892,12 +3032,13 @@ function createFormControl(props = {}) {
                 !options.keepDefaultValue &&
                 unset(_defaultValues, fieldName);
         }
-        _subjects.state.next({
-            values: cloneObject(_formValues),
-        });
+        _valuesSubscriberCount &&
+            _subjects.state.next({
+                values: cloneObject(_formValues),
+            });
         _subjects.state.next({
             ..._formState,
-            ...(!options.keepDirty ? {} : { isDirty: _getDirty() }),
+            ...(options.keepDirty ? {} : { isDirty: _getDirty() }),
         });
         !options.keepIsValid && _setValid();
     };
@@ -3123,7 +3264,7 @@ function createFormControl(props = {}) {
                     ..._names.mount,
                     ...collectDirtyFieldNames(getDirtyFields(_defaultValues, _formValues, undefined, fieldRefs), _formState.dirtyFields),
                 ]);
-                for (const fieldName of Array.from(fieldsToCheck)) {
+                for (const fieldName of fieldsToCheck) {
                     const isDirty = get(_formState.dirtyFields, fieldName);
                     const existingValue = get(_formValues, fieldName);
                     const newValue = get(values, fieldName);
@@ -3202,6 +3343,7 @@ function createFormControl(props = {}) {
         _state.watch = !!_options.shouldUnregister;
         _state.keepIsValid = !!keepStateOptions.keepIsValid;
         _state.action = false;
+        _state.actionArrayLengths.clear();
         if (!keepStateOptions.keepErrors) {
             _formState.errors = {};
         }
@@ -3274,6 +3416,7 @@ function createFormControl(props = {}) {
             ...formState,
         };
     };
+    _subjects.state.subscribe({ next: _setFormState });
     const _resetDefaultValues = () => isFunction(_options.defaultValues) &&
         _options.defaultValues().then((values) => {
             reset(values, _options.resetOptions);
@@ -3364,6 +3507,7 @@ function createFormControl(props = {}) {
         setValue,
         setValues,
         getValues,
+        getErrors,
         reset,
         resetField,
         resetDefaultValues,
@@ -3443,8 +3587,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,
@@ -3457,8 +3607,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) {