react-hook-form 7.87.0 → 7.88.0

package/dist/index.esm.mjs

@@ -55,8 +55,9 @@ function cloneObject(data) {
     if (data instanceof Date) {
         return new Date(data);
     }
+    const isBlobInstance = typeof Blob !== 'undefined' && data instanceof Blob;
     const isFileListInstance = typeof FileList !== 'undefined' && data instanceof FileList;
-    if (isWeb && (data instanceof Blob || isFileListInstance)) {
+    if (isWeb && (isBlobInstance || isFileListInstance)) {
         return data;
     }
     const isArray = Array.isArray(data);
@@ -274,33 +275,14 @@ function useResyncOnReconnect(getInitialValue) {
 }
 
 /**
- * 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.
+ * Subscribes to form state with re-renders isolated to this hook.
+ * Optionally scope to specific field names to minimize re-render surface.
  *
- * @remarks
- * [API](https://react-hook-form.com/docs/useformstate) • [Demo](https://codesandbox.io/s/useformstate-75xly)
- *
- * @param props - Include options to specify fields to subscribe to. {@link UseFormStateReturn}
+ * @see [API](https://react-hook-form.com/docs/useformstate)
  *
  * @example
  * ```tsx
- * function App() {
- *   const { register, handleSubmit, control } = useForm({
- *     defaultValues: {
- *     firstName: "firstName"
- *   }});
- *   const { dirtyFields } = useFormState({
- *     control
- *   });
- *   const onSubmit = (data) => console.log(data);
- *
- *   return (
- *     <form onSubmit={handleSubmit(onSubmit)}>
- *       <input {...register("firstName")} placeholder="First Name" />
- *       {dirtyFields.firstName && <p>Field is dirty.</p>}
- *       <input type="submit" />
- *     </form>
- *   );
- * }
+ * const { errors, isDirty } = useFormState({ control, name: "email" });
  * ```
  */
 function useFormState(props) {
@@ -341,7 +323,7 @@ function useFormState(props) {
             unsubscribe();
             snapshot(!disabled, getCurrentFormState);
         };
-    }, [name, disabled, exact, resyncIfNeeded, snapshot]);
+    }, [control, name, disabled, exact, resyncIfNeeded, snapshot]);
     React.useEffect(() => {
         _localProxyFormState.current.isValid && control._setValid(true);
     }, [control]);
@@ -364,19 +346,15 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
 };
 
 /**
- * Custom hook to subscribe to field changes and isolate re-rendering at the component level.
+ * Subscribes to field value changes and isolates re-renders to the hook level.
  *
- * @remarks
- *
- * [API](https://react-hook-form.com/docs/usewatch) • [Demo](https://codesandbox.io/s/react-hook-form-v7-ts-usewatch-h9i5e)
+ * @see [API](https://react-hook-form.com/docs/usewatch)
  *
  * @example
  * ```tsx
- * const { control } = useForm();
- * const values = useWatch({
- *   name: "fieldName",
- *   control,
- * })
+ * const email = useWatch({ control, name: "email" });
+ * const all   = useWatch({ control });
+ * const adult = useWatch({ control, name: "age", compute: (v) => v >= 18 });
  * ```
  */
 function useWatch(props) {
@@ -384,7 +362,6 @@ function useWatch(props) {
     const { control = formControl, name, defaultValue, disabled, exact, compute, } = props || {};
     const _defaultValue = React.useRef(defaultValue);
     const _compute = React.useRef(compute);
-    const _computeFormValues = React.useRef(undefined);
     const _prevControl = React.useRef(control);
     const _prevName = React.useRef(name);
     _compute.current = compute;
@@ -393,6 +370,7 @@ function useWatch(props) {
         return _compute.current ? _compute.current(defaultValue) : defaultValue;
     };
     const [value, updateValue] = React.useState(getInitialOutput);
+    const _computeFormValues = React.useRef(value);
     const getCurrentOutput = React.useCallback((values) => {
         const formValues = generateWatchOutput(name, control._names, values || control._formValues, false, _defaultValue.current);
         return _compute.current ? _compute.current(formValues) : formValues;
@@ -466,27 +444,15 @@ function useWatch(props) {
 }
 
 /**
- * Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.
- *
- * @remarks
- * [API](https://react-hook-form.com/docs/usecontroller) • [Demo](https://codesandbox.io/s/usecontroller-0o8px)
+ * Hook for controlled inputs. Returns `field`, `fieldState`, and `formState`.
+ * Re-renders are isolated to the hook level.
  *
- * @param props - the path name to the form field value, and validation rules.
- *
- * @returns field properties, field and form state. {@link UseControllerReturn}
+ * @see [API](https://react-hook-form.com/docs/usecontroller)
  *
  * @example
  * ```tsx
- * function Input(props) {
- *   const { field, fieldState, formState } = useController(props);
- *   return (
- *     <div>
- *       <input {...field} placeholder={props.name} />
- *       <p>{fieldState.isTouched && "Touched"}</p>
- *       <p>{formState.isSubmitted ? "submitted" : ""}</p>
- *     </div>
- *   );
- * }
+ * const { field, fieldState } = useController({ control, name: "email" });
+ * return <input {...field} />;
  * ```
  */
 function useController(props) {
@@ -640,48 +606,50 @@ function useController(props) {
 }
 
 /**
- * Component based on `useController` hook to work with controlled component.
+ * Component wrapper around `useController` for controlled inputs.
  *
- * @remarks
- * [API](https://react-hook-form.com/docs/usecontroller/controller) • [Demo](https://codesandbox.io/s/react-hook-form-v6-controller-ts-jwyzw) • [Video](https://www.youtube.com/watch?v=N2UNk_UCVyA)
+ * @see [API](https://react-hook-form.com/docs/usecontroller/controller)
  *
- * @param props - the path name to the form field value, and validation rules.
+ * @example
+ * ```tsx
+ * <Controller
+ *   control={control}
+ *   name="test"
+ *   render={({ field, fieldState, formState }) => <input {...field} />}
+ * />
+ * ```
+ */
+const Controller = (props) => props.render(useController(props));
+
+/**
+ * Displays the validation error for a single field.
+ * Reads from `control` when provided, otherwise from the nearest `FormProvider`.
  *
- * @returns provide field handler functions, field and form state.
+ * @see [API](https://react-hook-form.com/docs/useformstate/errormessage)
  *
  * @example
  * ```tsx
- * function App() {
- *   const { control } = useForm<FormValues>({
- *     defaultValues: {
- *       test: ""
- *     }
- *   });
- *
- *   return (
- *     <form>
- *       <Controller
- *         control={control}
- *         name="test"
- *         render={({ field: { onChange, onBlur, value, ref }, formState, fieldState }) => (
- *           <>
- *             <input
- *               onChange={onChange} // send value to hook form
- *               onBlur={onBlur} // notify when input is touched
- *               value={value} // return updated value
- *               ref={ref} // set ref for focus management
- *             />
- *             <p>{formState.isSubmitted ? "submitted" : ""}</p>
- *             <p>{fieldState.isTouched ? "touched" : ""}</p>
- *           </>
- *         )}
- *       />
- *     </form>
- *   );
- * }
+ * <ErrorMessage control={control} name="email" as="p" />
+ * <ErrorMessage name="email" as="span" />
+ * <ErrorMessage control={control} name="email"
+ *   render={({ message }) => <Alert>{message}</Alert>} />
  * ```
  */
-const Controller = (props) => props.render(useController(props));
+const ErrorMessage = ({ as, control, name, render, }) => {
+    const { errors } = useFormState({
+        control,
+        name: name,
+    });
+    const error = get(errors, name);
+    if (!error) {
+        return null;
+    }
+    const message = error.message || '';
+    if (render) {
+        return render({ message, messages: error.types });
+    }
+    return React.createElement(as || React.Fragment, null, message);
+};
 
 var generateId = () => typeof crypto !== 'undefined' && crypto.randomUUID
     ? crypto.randomUUID()
@@ -715,7 +683,7 @@ var isWatched = (name, _names, isBlurEvent) => {
     return false;
 };
 
-const iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
+const iterateFieldsByAction = (fields, action, fieldsNames) => {
     for (const key of fieldsNames || Object.keys(fields)) {
         if (key === '_f') {
             continue;
@@ -724,21 +692,21 @@ const iterateFieldsByAction = (fields, action, fieldsNames, abortEarly) => {
         if (field) {
             const { _f } = field;
             if (_f) {
-                if (_f.refs && _f.refs[0] && action(_f.refs[0], key) && !abortEarly) {
+                if (_f.refs && _f.refs[0] && action(_f.refs[0], _f.name)) {
                     return true;
                 }
-                else if (_f.ref && action(_f.ref, _f.name) && !abortEarly) {
+                else if (_f.ref && action(_f.ref, _f.name)) {
                     return true;
                 }
                 else {
                     if (iterateFieldsByAction(field, action)) {
-                        break;
+                        return true;
                     }
                 }
             }
             else if (isObject(field) || Array.isArray(field)) {
                 if (iterateFieldsByAction(field, action)) {
-                    break;
+                    return true;
                 }
             }
         }
@@ -1004,7 +972,9 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
                         ...validateError,
                         ...appendErrorsCurry(key, validateError.message),
                     };
-                    setCustomValidity(validateError.message);
+                    if (!validateAllFieldCriteria) {
+                        setCustomValidity(validateError.message);
+                    }
                     if (validateAllFieldCriteria) {
                         error[name] = validationResult;
                     }
@@ -1132,48 +1102,27 @@ var updateAt = (fieldValues, index, value) => {
 };
 
 /**
- * A custom hook that exposes convenient methods to perform operations with a list of dynamic inputs that need to be appended, updated, removed etc. • [Demo](https://codesandbox.io/s/react-hook-form-usefieldarray-ssugn) • [Video](https://youtu.be/4MrbfGSFY2A)
- *
- * @remarks
- * [API](https://react-hook-form.com/docs/usefieldarray) • [Demo](https://codesandbox.io/s/react-hook-form-usefieldarray-ssugn)
- *
- * @param props - useFieldArray props
+ * Hook for dynamic field arrays. Provides `fields` and mutation methods:
+ * `append`, `prepend`, `remove`, `insert`, `swap`, `move`, `update`, `replace`.
  *
- * @returns methods - functions to manipulate with the Field Arrays (dynamic inputs) {@link UseFieldArrayReturn}
+ * @see [API](https://react-hook-form.com/docs/usefieldarray)
  *
  * @example
  * ```tsx
- * function App() {
- *   const { register, control, handleSubmit, reset, trigger, setError } = useForm({
- *     defaultValues: {
- *       test: []
- *     }
- *   });
- *   const { fields, append } = useFieldArray({
- *     control,
- *     name: "test"
- *   });
- *
- *   return (
- *     <form onSubmit={handleSubmit(data => console.log(data))}>
- *       {fields.map((item, index) => (
- *          <input key={item.id} {...register(`test.${index}.firstName`)}  />
- *       ))}
- *       <button type="button" onClick={() => append({ firstName: "bill" })}>
- *         append
- *       </button>
- *       <input type="submit" />
- *     </form>
- *   );
- * }
+ * const { fields, append } = useFieldArray({ control, name: "items" });
+ * return fields.map((f, i) => <input key={f.id} {...register(`items.${i}.name`)} />);
  * ```
  */
 function useFieldArray(props) {
     const formControl = useFormControlContext();
     const { control = formControl, name, keyName = 'id', disabled, shouldUnregister, rules, } = props;
-    const [fields, setFields] = React.useState(control._getFieldArray(name));
+    const getCurrentFieldArray = () => control._getFieldArray(name);
+    const [fields, setFields] = React.useState(getCurrentFieldArray);
     const ids = React.useRef(control._getFieldArray(name).map(generateId));
     const _actioned = React.useRef(false);
+    const { resyncIfNeeded, snapshot } = useResyncOnReconnect(getCurrentFieldArray);
+    const _prevControl = React.useRef(control);
+    const _prevName = React.useRef(name);
     if (!disabled) {
         control._names.array.add(name);
     }
@@ -1185,7 +1134,23 @@ function useFieldArray(props) {
         if (disabled) {
             return;
         }
-        return control._subjects.array.subscribe({
+        if (_prevControl.current === control && _prevName.current === name) {
+            resyncIfNeeded(true, getCurrentFieldArray, (fieldValues) => {
+                setFields(fieldValues);
+                ids.current = fieldValues.map(generateId);
+            });
+        }
+        else {
+            _prevControl.current = control;
+            _prevName.current = name;
+            const fieldValues = getCurrentFieldArray();
+            if (!deepEqual(fields, fieldValues)) {
+                setFields(fieldValues);
+                ids.current = fieldValues.map(generateId);
+            }
+            snapshot(true, getCurrentFieldArray);
+        }
+        const unsubscribe = control._subjects.array.subscribe({
             next: ({ values, name: fieldArrayName, }) => {
                 if (fieldArrayName === name || !fieldArrayName) {
                     const fieldValues = get(values, name);
@@ -1200,7 +1165,11 @@ function useFieldArray(props) {
                 }
             },
         }).unsubscribe;
-    }, [control, name, disabled]);
+        return () => {
+            unsubscribe();
+            snapshot(true, getCurrentFieldArray);
+        };
+    }, [control, name, disabled, resyncIfNeeded, snapshot]);
     const updateValues = React.useCallback((updatedFieldArrayValues) => {
         _actioned.current = true;
         control._setFieldArray(name, updatedFieldArrayValues);
@@ -1312,7 +1281,9 @@ function useFieldArray(props) {
         ids.current = updatedFieldArrayValues.map(generateId);
         updateValues([...updatedFieldArrayValues]);
         setFields([...updatedFieldArrayValues]);
-        control._setFieldArray(name, [...updatedFieldArrayValues], (data) => data, {}, true, false);
+        control._setFieldArray(name, [...updatedFieldArrayValues], (data) => Array.isArray(data)
+            ? data.slice(0, updatedFieldArrayValues.length)
+            : data, {});
     };
     React.useEffect(() => {
         if (disabled) {
@@ -1482,13 +1453,15 @@ const FieldArray = (props) => props.render(useFieldArray(props));
 
 const isFileLike = (value) => (typeof Blob !== 'undefined' && value instanceof Blob) ||
     (typeof File !== 'undefined' && value instanceof File);
+const isFileListLike = (value) => typeof FileList !== 'undefined' && value instanceof FileList;
 const flatten = (obj) => {
     const output = {};
     for (const key of Object.keys(obj)) {
         if (isObjectType(obj[key]) &&
             obj[key] !== null &&
             !isDateObject(obj[key]) &&
-            !isFileLike(obj[key])) {
+            !isFileLike(obj[key]) &&
+            !isFileListLike(obj[key])) {
             const nested = flatten(obj[key]);
             for (const nestedKey of Object.keys(nested)) {
                 output[`${key}.${nestedKey}`] = nested[nestedKey];
@@ -1505,7 +1478,18 @@ function jsonToFormData(json) {
     const result = new FormData();
     const flattenFormValues = flatten(json);
     for (const key in flattenFormValues) {
-        result.append(key, flattenFormValues[key]);
+        const value = flattenFormValues[key];
+        if (isUndefined(value)) {
+            continue;
+        }
+        if (typeof FileList !== 'undefined' && value instanceof FileList) {
+            for (let index = 0; index < value.length; index++) {
+                const file = value[index];
+                file && result.append(key, file);
+            }
+            continue;
+        }
+        result.append(key, value);
     }
     return result;
 }
@@ -1524,64 +1508,28 @@ function noop() { }
 const HookFormContext = React.createContext(null);
 HookFormContext.displayName = 'HookFormContext';
 /**
- * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.
- *
- * @remarks
- * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
+ * Retrieves all `useForm` methods from the nearest `FormProvider`.
+ * Use in deeply nested components to avoid prop-drilling.
  *
- * @returns return all useForm methods
+ * @see [API](https://react-hook-form.com/docs/useformcontext)
  *
  * @example
  * ```tsx
- * function App() {
- *   const methods = useForm();
- *   const onSubmit = data => console.log(data);
- *
- *   return (
- *     <FormProvider {...methods} >
- *       <form onSubmit={methods.handleSubmit(onSubmit)}>
- *         <NestedInput />
- *         <input type="submit" />
- *       </form>
- *     </FormProvider>
- *   );
- * }
- *
- *  function NestedInput() {
- *   const { register } = useFormContext(); // retrieve all hook methods
- *   return <input {...register("test")} />;
- * }
+ * const { register } = useFormContext<FormValues>();
  * ```
  */
 const useFormContext = () => React.useContext(HookFormContext);
 /**
- * A provider component that propagates the `useForm` methods to all children components via [React Context](https://react.dev/reference/react/useContext) API. To be used with {@link useFormContext}.
- *
- * @remarks
- * [API](https://react-hook-form.com/docs/useformcontext) • [Demo](https://codesandbox.io/s/react-hook-form-v7-form-context-ytudi)
+ * Provides all `useForm` methods to the component tree via React Context.
+ * Pair with `useFormContext` to consume them in any descendant.
  *
- * @param props - all useForm methods
+ * @see [API](https://react-hook-form.com/docs/useformcontext)
  *
  * @example
  * ```tsx
- * function App() {
- *   const methods = useForm();
- *   const onSubmit = data => console.log(data);
- *
- *   return (
- *     <FormProvider {...methods} >
- *       <form onSubmit={methods.handleSubmit(onSubmit)}>
- *         <NestedInput />
- *         <input type="submit" />
- *       </form>
- *     </FormProvider>
- *   );
- * }
- *
- *  function NestedInput() {
- *   const { register } = useFormContext(); // retrieve all hook methods
- *   return <input {...register("test")} />;
- * }
+ * <FormProvider {...methods}>
+ *   <form onSubmit={methods.handleSubmit(onSubmit)}>{children}</form>
+ * </FormProvider>
  * ```
  */
 const FormProvider = ({ children, watch, getValues, getErrors, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe, }) => {
@@ -1635,25 +1583,17 @@ function defaultValidateStatus(status) {
     return status >= 200 && status < 300;
 }
 /**
- * Form component to manage submission.
+ * Form component that handles submission, including optional `action` fetch and server error wiring.
  *
- * @param props - to setup submission detail. {@link FormProps}
- *
- * @returns form component or headless render prop.
+ * @see [API](https://react-hook-form.com/docs/useform/form)
  *
  * @example
  * ```tsx
- * function App() {
- *   const { control, formState: { errors } } = useForm();
- *
- *   return (
- *     <Form action="/api" control={control}>
- *       <input {...register("name")} />
- *       <p>{errors?.root?.server && 'Server error'}</p>
- *       <button>Submit</button>
- *     </Form>
- *   );
- * }
+ * <Form action="/api" control={control}>
+ *   <input {...register("name")} />
+ *   <p>{errors?.root?.server && 'Server error'}</p>
+ *   <button>Submit</button>
+ * </Form>
  * ```
  */
 function Form(props) {
@@ -2011,7 +1951,7 @@ var hasValidation = (options) => options.mount &&
 
 function schemaErrorLookup(errors, _fields, name) {
     const error = get(errors, name);
-    if (error || isKey(name)) {
+    if ((error === null || error === void 0 ? void 0 : error.type) || (error === null || error === void 0 ? void 0 : error.message) || Array.isArray(error)) {
         return {
             error,
             name,
@@ -2165,24 +2105,35 @@ function createFormControl(props = {}) {
     let _proxySubscribeFormState = {
         ..._proxyFormState,
     };
+    const _isTracked = (...keys) => keys.some((key) => _proxyFormState[key] || _proxySubscribeFormState[key]);
     const _subjects = {
         array: createSubject(),
         state: createSubject(),
     };
     let _setValidCallId = 0;
-    const shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
+    let _resetCallId = 0;
+    let shouldDisplayAllAssociatedErrors = _options.criteriaMode === VALIDATION_MODE.all;
     const debounce = (name, callback) => (wait) => {
         clearTimeout(timers[name]);
         timers[name] = setTimeout(callback, wait);
     };
+    const cancelDelayedError = (name) => {
+        clearTimeout(timers[name]);
+        delete timers[name];
+        delete delayErrorCallbacks[name];
+    };
+    const cancelDelayedErrorTree = (name) => {
+        cancelDelayedError(name);
+        const prefix = `${name}.`;
+        for (const key of Object.keys(delayErrorCallbacks)) {
+            key.startsWith(prefix) && cancelDelayedError(key);
+        }
+    };
     const _setValid = async (shouldUpdateValid) => {
         if (_state.keepIsValid) {
             return;
         }
-        if (!_options.disabled &&
-            (_proxyFormState.isValid ||
-                _proxySubscribeFormState.isValid ||
-                shouldUpdateValid)) {
+        if (!_options.disabled && (_isTracked('isValid') || shouldUpdateValid)) {
             const callId = ++_setValidCallId;
             let isValid;
             if (_options.resolver) {
@@ -2204,11 +2155,7 @@ function createFormControl(props = {}) {
         }
     };
     const _updateIsValidating = (names, isValidating) => {
-        if (!_options.disabled &&
-            (_proxyFormState.isValidating ||
-                _proxyFormState.validatingFields ||
-                _proxySubscribeFormState.isValidating ||
-                _proxySubscribeFormState.validatingFields)) {
+        if (!_options.disabled && _isTracked('isValidating', 'validatingFields')) {
             (names || _names.mount).forEach((name) => {
                 if (name) {
                     isValidating
@@ -2247,14 +2194,13 @@ function createFormControl(props = {}) {
                 unsetEmptyArray(_formState.errors, name);
             }
             const touchedFieldsArray = get(_formState.touchedFields, name);
-            if ((_proxyFormState.touchedFields ||
-                _proxySubscribeFormState.touchedFields) &&
+            if (_isTracked('touchedFields') &&
                 shouldUpdateFieldsAndState &&
                 Array.isArray(touchedFieldsArray)) {
                 const touchedFields = method(touchedFieldsArray, args.argA, args.argB);
                 shouldSetValues && set(_formState.touchedFields, name, touchedFields);
             }
-            if (_proxyFormState.dirtyFields || _proxySubscribeFormState.dirtyFields) {
+            if (_isTracked('dirtyFields')) {
                 _updateDirtyFields();
             }
             _subjects.state.next({
@@ -2277,6 +2223,7 @@ function createFormControl(props = {}) {
         });
     };
     const _setErrors = (errors) => {
+        Object.keys(delayErrorCallbacks).forEach(cancelDelayedError);
         _formState.errors = errors;
         _subjects.state.next({
             errors: _formState.errors,
@@ -2299,7 +2246,7 @@ function createFormControl(props = {}) {
         }
         return false;
     };
-    const isStaleArrayIndex = (name) => {
+    const isStaleArrayField = (name) => {
         if (!_state.actionArrayLengths.size) {
             return false;
         }
@@ -2326,13 +2273,19 @@ function createFormControl(props = {}) {
                 ownerPreActionLength = _state.actionArrayLengths.get(path);
             }
             node = node[key];
+            if (isUndefined(node) &&
+                ownerDepth !== -1 &&
+                i > ownerDepth &&
+                +segments[ownerDepth] < ownerPreActionLength) {
+                return true;
+            }
         }
         return false;
     };
     const updateValidAndValue = (name, shouldSkipSetValueAs, value, ref) => {
         const field = get(_fields, name);
         if (field) {
-            if (hasExplicitNullIntermediate(name) || isStaleArrayIndex(name)) {
+            if (hasExplicitNullIntermediate(name) || isStaleArrayField(name)) {
                 return;
             }
             const wasUnsetInFormValues = isUndefined(get(_formValues, name));
@@ -2346,7 +2299,7 @@ function createFormControl(props = {}) {
                 _setValid();
                 if (wasUnsetInFormValues &&
                     _formState.isDirty &&
-                    (_proxyFormState.isDirty || _proxySubscribeFormState.isDirty)) {
+                    _isTracked('isDirty')) {
                     const isDirty = _getDirty();
                     if (!isDirty) {
                         _formState.isDirty = false;
@@ -2373,7 +2326,7 @@ function createFormControl(props = {}) {
         if (!_options.disabled || shouldDirty === true) {
             if (!isBlurEvent || shouldDirty) {
                 const isCurrentFieldPristine = deepEqual(get(_defaultValues, name), fieldValue);
-                if (_proxyFormState.isDirty || _proxySubscribeFormState.isDirty) {
+                if (_isTracked('isDirty')) {
                     isPreviousDirty = _formState.isDirty;
                     _formState.isDirty = output.isDirty =
                         !isCurrentFieldPristine || _getDirty();
@@ -2391,8 +2344,7 @@ function createFormControl(props = {}) {
                 output.dirtyFields = _formState.dirtyFields;
                 shouldUpdateField =
                     shouldUpdateField ||
-                        ((_proxyFormState.dirtyFields ||
-                            _proxySubscribeFormState.dirtyFields) &&
+                        (_isTracked('dirtyFields') &&
                             isPreviousDirty !== !isCurrentFieldPristine);
             }
             if (isBlurEvent) {
@@ -2402,8 +2354,7 @@ function createFormControl(props = {}) {
                     output.touchedFields = _formState.touchedFields;
                     shouldUpdateField =
                         shouldUpdateField ||
-                            ((_proxyFormState.touchedFields ||
-                                _proxySubscribeFormState.touchedFields) &&
+                            (_isTracked('touchedFields') &&
                                 isPreviousFieldTouched !== isBlurEvent);
                 }
             }
@@ -2413,7 +2364,7 @@ function createFormControl(props = {}) {
     };
     const shouldRenderByError = (name, isValid, error, fieldState) => {
         const previousFieldError = get(_formState.errors, name);
-        const shouldUpdateValid = (_proxyFormState.isValid || _proxySubscribeFormState.isValid) &&
+        const shouldUpdateValid = _isTracked('isValid') &&
             isBoolean(isValid) &&
             _formState.isValid !== isValid;
         if (_options.delayError && error) {
@@ -2421,8 +2372,7 @@ function createFormControl(props = {}) {
             delayErrorCallbacks[name](_options.delayError);
         }
         else {
-            clearTimeout(timers[name]);
-            delete delayErrorCallbacks[name];
+            cancelDelayedError(name);
             error
                 ? set(_formState.errors, name, error)
                 : unset(_formState.errors, name);
@@ -2445,22 +2395,34 @@ function createFormControl(props = {}) {
         return await _options.resolver(_formValues, _options.context, getResolverOptions(name || _names.mount, _fields, _options.criteriaMode, _options.shouldUseNativeValidation));
     };
     const executeSchemaAndUpdateState = async (names) => {
+        const resetCallId = _resetCallId;
         const { errors } = await _runSchema(names);
+        if (resetCallId !== _resetCallId) {
+            return errors;
+        }
         _updateIsValidating(names);
         if (names) {
             for (const name of names) {
                 const error = get(errors, name);
-                error
-                    ? _names.array.has(name) &&
-                        isObject(error) &&
-                        !Object.keys(error).some((key) => !Number.isNaN(Number(key)))
-                        ? updateFieldArrayRootError(_formState.errors, { [name]: error }, name)
-                        : set(_formState.errors, name, error)
-                    : unset(_formState.errors, name);
+                cancelDelayedError(name);
+                const isFieldArrayRootError = _names.array.has(name) &&
+                    isObject(error) &&
+                    !Object.keys(error).some((key) => !Number.isNaN(Number(key)));
+                const field = get(_fields, name);
+                const hasNestedFields = isObject(field) && Object.keys(field).some((key) => key !== '_f');
+                isFieldArrayRootError
+                    ? updateFieldArrayRootError(_formState.errors, { [name]: error }, name)
+                    : (error === null || error === void 0 ? void 0 : error.type) ||
+                        (error === null || error === void 0 ? void 0 : error.message) ||
+                        Array.isArray(error) ||
+                        (isObject(error) && hasNestedFields)
+                        ? set(_formState.errors, name, error)
+                        : unset(_formState.errors, name);
             }
             _formState.errors = { ..._formState.errors };
         }
         else {
+            Object.keys(delayErrorCallbacks).forEach(cancelDelayedError);
             _formState.errors = errors;
         }
         return errors;
@@ -2521,10 +2483,7 @@ function createFormControl(props = {}) {
                 if (_f) {
                     const isFieldArrayRoot = _names.array.has(_f.name);
                     const isPromiseFunction = field._f && hasPromiseValidation(field._f);
-                    const shouldTrackIsValidatingState = _proxyFormState.validatingFields ||
-                        _proxyFormState.isValidating ||
-                        _proxySubscribeFormState.validatingFields ||
-                        _proxySubscribeFormState.isValidating;
+                    const shouldTrackIsValidatingState = _isTracked('isValidating', 'validatingFields');
                     if (isPromiseFunction && shouldTrackIsValidatingState) {
                         _updateIsValidating([_f.name], true);
                     }
@@ -2538,12 +2497,14 @@ function createFormControl(props = {}) {
                             break;
                         }
                     }
-                    !onlyCheckValid &&
-                        (get(fieldError, _f.name)
+                    if (!onlyCheckValid) {
+                        cancelDelayedError(_f.name);
+                        get(fieldError, _f.name)
                             ? isFieldArrayRoot
                                 ? updateFieldArrayRootError(_formState.errors, fieldError, _f.name)
                                 : set(_formState.errors, _f.name, fieldError[_f.name])
-                            : unset(_formState.errors, _f.name));
+                            : unset(_formState.errors, _f.name);
+                    }
                     if (props.shouldUseNativeValidation && fieldError[_f.name]) {
                         break;
                     }
@@ -2629,7 +2590,14 @@ function createFormControl(props = {}) {
             }
         }
         (options.shouldDirty || options.shouldTouch) &&
-            updateTouchAndDirty(name, fieldValue, options.shouldTouch, options.shouldDirty, !skipRender);
+            updateTouchAndDirty(name, field &&
+                field._f &&
+                !field._f.disabled &&
+                (field._f.valueAsNumber ||
+                    field._f.valueAsDate ||
+                    field._f.setValueAs)
+                ? getFieldValueAs(value, field._f)
+                : fieldValue, options.shouldTouch, options.shouldDirty, !skipRender);
         options.shouldValidate &&
             trigger(name, {
                 delayError: options.delayError,
@@ -2671,11 +2639,7 @@ function createFormControl(props = {}) {
                 name,
                 values: skipClone ? _formValues : cloneObject(_formValues),
             });
-            if ((_proxyFormState.isDirty ||
-                _proxyFormState.dirtyFields ||
-                _proxySubscribeFormState.isDirty ||
-                _proxySubscribeFormState.dirtyFields) &&
-                options.shouldDirty) {
+            if (_isTracked('isDirty', 'dirtyFields') && options.shouldDirty) {
                 _updateDirtyFields();
                 if (!skipStateEmit) {
                     _subjects.state.next({
@@ -2788,7 +2752,7 @@ function createFormControl(props = {}) {
                 });
             if (shouldSkipValidation) {
                 if ((!hasNoValidationEffect || !_formState.isValid) &&
-                    (_proxyFormState.isValid || _proxySubscribeFormState.isValid)) {
+                    _isTracked('isValid')) {
                     if (_options.mode === 'onBlur') {
                         if (isBlurEvent) {
                             _setValid();
@@ -2831,8 +2795,7 @@ function createFormControl(props = {}) {
                     if (error) {
                         isValid = false;
                     }
-                    else if (_proxyFormState.isValid ||
-                        _proxySubscribeFormState.isValid) {
+                    else if (_isTracked('isValid')) {
                         isValid = await executeBuiltInValidation({
                             fields: _fields,
                             onlyCheckValid: true,
@@ -2862,11 +2825,15 @@ function createFormControl(props = {}) {
         let validationResult;
         const fieldNames = convertToArrayPayload(name);
         if (_options.resolver) {
+            const resetCallId = _resetCallId;
             const errors = await executeSchemaAndUpdateState(isUndefined(name) ? name : fieldNames);
             isValid = isEmptyObject(errors);
             validationResult = name
                 ? !fieldNames.some((name) => get(errors, name))
                 : isValid;
+            if (resetCallId !== _resetCallId) {
+                return validationResult;
+            }
         }
         else if (name) {
             validationResult = (await Promise.all(fieldNames.map(async (fieldName) => {
@@ -2893,8 +2860,7 @@ function createFormControl(props = {}) {
                 delayErrorCallbacks[name](_options.delayError);
             }
             else {
-                clearTimeout(timers[name]);
-                delete delayErrorCallbacks[name];
+                cancelDelayedError(name);
             }
         }
         if (options.shouldTouch) {
@@ -2905,13 +2871,11 @@ function createFormControl(props = {}) {
         }
         _subjects.state.next({
             ...(!isString(name) ||
-                ((_proxyFormState.isValid || _proxySubscribeFormState.isValid) &&
-                    isValid !== _formState.isValid)
+                (_isTracked('isValid') && isValid !== _formState.isValid)
                 ? {}
                 : { name }),
             ...(_options.resolver || !name ? { isValid } : {}),
-            ...(options.shouldTouch &&
-                (_proxyFormState.touchedFields || _proxySubscribeFormState.touchedFields)
+            ...(options.shouldTouch && _isTracked('touchedFields')
                 ? { touchedFields: _formState.touchedFields }
                 : {}),
             errors: _formState.errors,
@@ -2946,15 +2910,16 @@ function createFormControl(props = {}) {
             invalid: !!error,
             isDirty: !!get(targetFormState.dirtyFields, name),
             error,
-            isValidating: !!get(_formState.validatingFields, name),
+            isValidating: !!get(targetFormState.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));
         if (names) {
             names.forEach((inputName) => {
+                cancelDelayedErrorTree(inputName);
+                unset(_formState.errors, inputName);
                 _subjects.state.next({
                     name: inputName,
                     errors: _formState.errors,
@@ -2962,6 +2927,7 @@ function createFormControl(props = {}) {
             });
         }
         else {
+            Object.keys(delayErrorCallbacks).forEach(cancelDelayedError);
             _formState.errors = {};
             _subjects.state.next({
                 errors: _formState.errors,
@@ -2969,9 +2935,10 @@ function createFormControl(props = {}) {
         }
     };
     const setError = (name, error, options) => {
+        cancelDelayedError(name);
         const ref = (get(_fields, name, { _f: {} })._f || {}).ref;
         const currentError = get(_formState.errors, name) || {};
-        const { ref: currentRef, message, type, ...restOfErrorTree } = currentError;
+        const { ref: currentRef, message, type, types, ...restOfErrorTree } = currentError;
         set(_formState.errors, name, {
             ...restOfErrorTree,
             ...error,
@@ -3056,11 +3023,15 @@ function createFormControl(props = {}) {
         for (const fieldName of name ? convertToArrayPayload(name) : _names.mount) {
             _names.mount.delete(fieldName);
             _names.array.delete(fieldName);
+            _names.disabled.delete(fieldName);
             if (!options.keepValue) {
                 unset(_fields, fieldName);
                 unset(_formValues, fieldName);
             }
-            !options.keepError && unset(_formState.errors, fieldName);
+            if (!options.keepError) {
+                cancelDelayedErrorTree(fieldName);
+                unset(_formState.errors, fieldName);
+            }
             !options.keepDirty && unset(_formState.dirtyFields, fieldName);
             !options.keepTouched && unset(_formState.touchedFields, fieldName);
             !options.keepIsValidating &&
@@ -3076,6 +3047,9 @@ function createFormControl(props = {}) {
         _subjects.state.next({
             ..._formState,
             ...(options.keepDirty ? {} : { isDirty: _getDirty() }),
+            ...(options.keepIsValidating
+                ? {}
+                : { isValidating: !isEmptyObject(_formState.validatingFields) }),
         });
         !options.keepIsValid && _setValid();
     };
@@ -3198,7 +3172,7 @@ function createFormControl(props = {}) {
                         });
                     }
                 }
-            }, 0, false);
+            }, 0);
         }
     };
     const handleSubmit = (onValid, onInvalid) => async (e) => {
@@ -3214,8 +3188,13 @@ function createFormControl(props = {}) {
             isSubmitting: true,
         });
         if (_options.resolver) {
+            const resetCallId = _resetCallId;
             const { errors, values } = await _runSchema();
+            if (resetCallId !== _resetCallId) {
+                return;
+            }
             _updateIsValidating();
+            Object.keys(delayErrorCallbacks).forEach(cancelDelayedError);
             _formState.errors = errors;
             fieldValues = cloneObject(values);
         }
@@ -3224,13 +3203,13 @@ function createFormControl(props = {}) {
                 fields: _fields,
                 eventType: EVENTS.SUBMIT,
             });
+            unset(_formState.errors, ROOT_ERROR_TYPE);
         }
         if (_names.disabled.size) {
             for (const name of _names.disabled) {
                 unset(fieldValues, name);
             }
         }
-        unset(_formState.errors, ROOT_ERROR_TYPE);
         if (isEmptyObject(_formState.errors)) {
             _subjects.state.next({
                 errors: {},
@@ -3263,6 +3242,7 @@ function createFormControl(props = {}) {
     };
     const resetField = (name, options = {}) => {
         if (get(_fields, name)) {
+            unset(_formState.validatingFields, name);
             if (isUndefined(options.defaultValue)) {
                 setValue(name, cloneObject(get(_defaultValues, name)));
             }
@@ -3280,18 +3260,24 @@ function createFormControl(props = {}) {
                     : _getDirty();
             }
             if (!options.keepError) {
+                cancelDelayedError(name);
                 unset(_formState.errors, name);
                 _setValid();
             }
-            _subjects.state.next({ ..._formState });
+            _subjects.state.next({
+                ..._formState,
+                isValidating: !isEmptyObject(_formState.validatingFields),
+            });
         }
     };
     const _reset = (formValues, keepStateOptions = {}) => {
+        _resetCallId++;
         const updatedValues = formValues ? cloneObject(formValues) : _defaultValues;
         const cloneUpdatedValues = cloneObject(updatedValues);
         const isEmptyResetValues = isEmptyObject(formValues);
         const values = cloneUpdatedValues;
         const fieldRefs = _fields;
+        Object.keys(delayErrorCallbacks).forEach(cancelDelayedError);
         if (!keepStateOptions.keepDefaultValues) {
             _defaultValues = updatedValues;
         }
@@ -3409,10 +3395,16 @@ function createFormControl(props = {}) {
                         ? getDirtyFields(_defaultValues, formValues, undefined, fieldRefs)
                         : keepStateOptions.keepDirty
                             ? _formState.dirtyFields
-                            : {},
+                            : keepStateOptions.keepValues
+                                ? getDirtyFields(_defaultValues, _formValues, undefined, fieldRefs)
+                                : {},
             touchedFields: keepStateOptions.keepTouched
                 ? _formState.touchedFields
                 : {},
+            ...(!keepStateOptions.keepIsValidating &&
+                (_formState.isValidating || !isEmptyObject(_formState.validatingFields))
+                ? { validatingFields: {}, isValidating: false }
+                : null),
             errors: keepStateOptions.keepErrors ? _formState.errors : {},
             isSubmitSuccessful: keepStateOptions.keepIsSubmitSuccessful
                 ? _formState.isSubmitSuccessful
@@ -3534,6 +3526,8 @@ function createFormControl(props = {}) {
                 };
                 _validationModeBeforeSubmit = getValidationModes(_options.mode);
                 _validationModeAfterSubmit = getValidationModes(_options.reValidateMode);
+                shouldDisplayAllAssociatedErrors =
+                    _options.criteriaMode === VALIDATION_MODE.all;
             },
         },
         subscribe,
@@ -3561,32 +3555,17 @@ function createFormControl(props = {}) {
 }
 
 /**
- * Custom hook to manage the entire form.
- *
- * @remarks
- * [API](https://react-hook-form.com/docs/useform) • [Demo](https://codesandbox.io/s/react-hook-form-get-started-ts-5ksmm) • [Video](https://www.youtube.com/watch?v=RkXv4AXXC_4)
+ * Core hook for managing a form. Returns all methods and state for
+ * registration, validation, and submission.
  *
- * @param props - form configuration and validation parameters.
- *
- * @returns methods - individual functions to manage the form state. {@link UseFormReturn}
+ * @see [API](https://react-hook-form.com/docs/useform)
  *
  * @example
  * ```tsx
- * function App() {
- *   const { register, handleSubmit, watch, formState: { errors } } = useForm();
- *   const onSubmit = data => console.log(data);
- *
- *   console.log(watch("example"));
- *
- *   return (
- *     <form onSubmit={handleSubmit(onSubmit)}>
- *       <input defaultValue="test" {...register("example")} />
- *       <input {...register("exampleRequired", { required: true })} />
- *       {errors.exampleRequired && <span>This field is required</span>}
- *       <button>Submit</button>
- *     </form>
- *   );
- * }
+ * const { register, handleSubmit, formState: { errors } } = useForm<FormValues>();
+ * <form onSubmit={handleSubmit(onSubmit)}>
+ *   <input {...register("email", { required: true })} />
+ * </form>
  * ```
  */
 function useForm(props = {}) {
@@ -3624,12 +3603,12 @@ function useForm(props = {}) {
     }
     const control = _formControl.current.control;
     control._options = props;
-    const { resyncIfNeeded, snapshot } = useResyncOnReconnect();
+    const getCurrentFormState = () => ({
+        ...control._formState,
+        defaultValues: control._defaultValues,
+    });
+    const { resyncIfNeeded, snapshot } = useResyncOnReconnect(getCurrentFormState);
     useIsomorphicLayoutEffect(() => {
-        const getCurrentFormState = () => ({
-            ...control._formState,
-            defaultValues: control._defaultValues,
-        });
         resyncIfNeeded(true, getCurrentFormState, updateFormState);
         const unsubscribe = control._subscribe({
             formState: control._proxyFormState,
@@ -3713,32 +3692,20 @@ function useForm(props = {}) {
 }
 
 /**
- * Watch component that subscribes to form field changes and re-renders when watched fields update.
+ * Component wrapper around `useWatch`. Re-renders only when watched fields change.
  *
- * @param control - The form control object from useForm
- * @param name - Can be field name, array of field names, or undefined to watch the entire form
- * @param disabled - Disable subscription
- * @param exact - Whether to watch exact field names or not
- * @param defaultValue - The default value to use if the field is not yet set
- * @param compute - Function to compute derived values from watched fields
- * @param render - The function that receives watched values and returns ReactNode
- * @returns The result of calling render function with watched values
+ * @see [API](https://react-hook-form.com/docs/usewatch)
  *
  * @example
- * The `Watch` component only re-render when the values of `foo`, `bar`, and `baz.qux` change.
- * The types of `foo`, `bar`, and `baz.qux` are precisely inferred.
- *
  * ```tsx
- * const { control } = useForm();
- *
  * <Watch
  *   control={control}
- *   names={['foo', 'bar', 'baz.qux']}
- *   render={([foo, bar, baz_qux]) => <div>{foo}{bar}{baz_qux}</div>}
+ *   names={["foo", "bar"]}
+ *   render={([foo, bar]) => <span>{foo} {bar}</span>}
  * />
  * ```
  */
 const Watch = (props) => props.render(useWatch({ name: props.names, ...props }));
 
-export { Controller, FieldArray, Form, FormProvider, FormState, FormStateSubscribe, Watch, appendErrors, createFormControl, get, set, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
+export { Controller, ErrorMessage, FieldArray, Form, FormProvider, FormState, FormStateSubscribe, Watch, appendErrors, createFormControl, get, set, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
 //# sourceMappingURL=index.esm.mjs.map