react-hook-form 7.22.4 → 7.23.0

package/dist/index.esm.mjs

@@ -2,7 +2,7 @@ import React from 'react';
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
-var isDateObject = (data) => data instanceof Date;
+var isDateObject = (value) => value instanceof Date;
 
 var isNullOrUndefined = (value) => value == null;
 
@@ -22,20 +22,20 @@ var getNodeParentName = (name) => name.substring(0, name.search(/.\d/)) || name;
 
 var isNameInFieldArray = (names, name) => [...names].some((current) => getNodeParentName(name) === current);
 
-var compact = (value) => (value || []).filter(Boolean);
+var compact = (value) => value.filter(Boolean);
 
 var isUndefined = (val) => val === undefined;
 
 var get = (obj, path, defaultValue) => {
-    if (isObject(obj) && path) {
-        const result = compact(path.split(/[,[\].]+?/)).reduce((result, key) => (isNullOrUndefined(result) ? result : result[key]), obj);
-        return isUndefined(result) || result === obj
-            ? isUndefined(obj[path])
-                ? defaultValue
-                : obj[path]
-            : result;
+    if (!path || !isObject(obj)) {
+        return defaultValue;
     }
-    return undefined;
+    const result = compact(path.split(/[,[\].]+?/)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], obj);
+    return isUndefined(result) || result === obj
+        ? isUndefined(obj[path])
+            ? defaultValue
+            : obj[path]
+        : result;
 };
 
 const EVENTS = {
@@ -142,14 +142,20 @@ function useFormState(props) {
         errors: false,
     });
     const _name = React.useRef(name);
+    const _mounted = React.useRef(true);
     _name.current = name;
+    const callback = React.useCallback((value) => _mounted.current &&
+        shouldSubscribeByName(_name.current, value.name, exact) &&
+        shouldRenderFormState(value, _localProxyFormState.current) &&
+        updateFormState(Object.assign(Object.assign({}, control._formState), value)), [control, exact]);
     useSubscribe({
         disabled,
-        callback: (value) => shouldSubscribeByName(_name.current, value.name, exact) &&
-            shouldRenderFormState(value, _localProxyFormState.current) &&
-            updateFormState(Object.assign(Object.assign({}, control._formState), value)),
+        callback,
         subject: control._subjects.state,
     });
+    React.useEffect(() => () => {
+        _mounted.current = false;
+    }, []);
     return getProxyFormState(formState, control._proxyFormState, _localProxyFormState.current, false);
 }
 
@@ -185,19 +191,22 @@ function useWatch(props) {
     const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
     const _name = React.useRef(name);
     _name.current = name;
+    const callback = React.useCallback((formState) => {
+        if (shouldSubscribeByName(_name.current, formState.name, exact)) {
+            const fieldValues = generateWatchOutput(_name.current, control._names, formState.values || control._formValues);
+            updateValue(isUndefined(_name.current) ||
+                (isObject(fieldValues) && !objectHasFunction(fieldValues))
+                ? Object.assign({}, fieldValues) : Array.isArray(fieldValues)
+                ? [...fieldValues]
+                : isUndefined(fieldValues)
+                    ? defaultValue
+                    : fieldValues);
+        }
+    }, [control, exact, defaultValue]);
     useSubscribe({
         disabled,
         subject: control._subjects.watch,
-        callback: (formState) => {
-            if (shouldSubscribeByName(_name.current, formState.name, exact)) {
-                const fieldValues = generateWatchOutput(_name.current, control._names, formState.values || control._formValues);
-                updateValue(isUndefined(_name.current) ||
-                    (isObject(fieldValues) && !objectHasFunction(fieldValues))
-                    ? Object.assign({}, fieldValues) : Array.isArray(fieldValues)
-                    ? [...fieldValues]
-                    : fieldValues);
-            }
-        },
+        callback,
     });
     const [value, updateValue] = React.useState(isUndefined(defaultValue)
         ? control._getWatch(name)
@@ -339,6 +348,14 @@ const focusFieldBy = (fields, callback, fieldsNames) => {
     }
 };
 
+var generateId = () => {
+    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 getFocusFieldName = (name, index, options = {}) => options.shouldFocus || isUndefined(options.shouldFocus)
     ? options.focusName ||
         `${name}.${isUndefined(options.focusIndex) ? index : options.focusIndex}.`
@@ -350,23 +367,8 @@ var isWatched = (name, _names, isBlurEvent) => !isBlurEvent &&
         [..._names.watch].some((watchName) => name.startsWith(watchName) &&
             /^\.\w+/.test(name.slice(watchName.length))));
 
-var mapCurrentIds = (values, _fieldIds, keyName) => values.map((value, index) => {
-    const output = _fieldIds.current[index];
-    return Object.assign(Object.assign({}, value), (output ? { [keyName]: output[keyName] } : {}));
-});
-
-var generateId = () => {
-    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 mapIds = (values = [], keyName) => values.map((value) => (Object.assign(Object.assign({}, (value[keyName] ? {} : { [keyName]: generateId() })), value)));
-
 function append(data, value) {
-    return [...convertToArrayPayload(data), ...convertToArrayPayload(value)];
+    return [...data, ...convertToArrayPayload(value)];
 }
 
 function cloneObject(data) {
@@ -405,18 +407,16 @@ function insert(data, index, value) {
 }
 
 var moveArrayAt = (data, from, to) => {
-    if (Array.isArray(data)) {
-        if (isUndefined(data[to])) {
-            data[to] = undefined;
-        }
-        data.splice(to, 0, data.splice(from, 1)[0]);
-        return data;
+    if (!Array.isArray(data)) {
+        return [];
+    }
+    if (isUndefined(data[to])) {
+        data[to] = undefined;
     }
-    return [];
+    data.splice(to, 0, data.splice(from, 1)[0]);
+    return data;
 };
 
-var omitKeys = (fields, keyName) => fields.map((field = {}) => omit(field, keyName));
-
 function prepend(data, value) {
     return [...convertToArrayPayload(value), ...convertToArrayPayload(data)];
 }
@@ -446,100 +446,110 @@ var updateAt = (fieldValues, index, value) => {
 const useFieldArray = (props) => {
     const methods = useFormContext();
     const { control = methods.control, name, keyName = 'id', shouldUnregister, } = props;
-    const [fields, setFields] = React.useState(mapIds(control._getFieldArray(name), keyName));
+    const [fields, setFields] = React.useState(control._getFieldArray(name));
+    const ids = React.useRef(control._getFieldArray(name).map(generateId));
     const _fieldIds = React.useRef(fields);
     const _name = React.useRef(name);
     const _actioned = React.useRef(false);
     _name.current = name;
     _fieldIds.current = fields;
     control._names.array.add(name);
+    const callback = React.useCallback(({ values, name: fieldArrayName }) => {
+        if (fieldArrayName === _name.current || !fieldArrayName) {
+            const fieldValues = get(values, _name.current, []);
+            setFields(fieldValues);
+            ids.current = fieldValues.map(generateId);
+        }
+    }, []);
     useSubscribe({
-        callback: ({ values, name: fieldArrayName }) => {
-            if (fieldArrayName === _name.current || !fieldArrayName) {
-                setFields(mapIds(get(values, _name.current), keyName));
-            }
-        },
+        callback,
         subject: control._subjects.array,
     });
-    const updateValues = React.useCallback((updatedFieldArrayValuesWithKey) => {
-        const updatedFieldArrayValues = omitKeys(updatedFieldArrayValuesWithKey, keyName);
+    const updateValues = React.useCallback((updatedFieldArrayValues) => {
         _actioned.current = true;
         set(control._formValues, name, updatedFieldArrayValues);
-        return updatedFieldArrayValues;
-    }, [control, name, keyName]);
+    }, [control, name]);
     const append$1 = (value, options) => {
         const appendValue = convertToArrayPayload(cloneObject(value));
-        const updatedFieldArrayValuesWithKey = append(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), mapIds(appendValue, keyName));
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
-        control._names.focus = getFocusFieldName(name, fieldArrayValues.length - 1, options);
-        setFields(updatedFieldArrayValuesWithKey);
+        const updatedFieldArrayValues = append(control._getFieldArray(name), appendValue);
+        control._names.focus = getFocusFieldName(name, updatedFieldArrayValues.length - 1, options);
+        ids.current = append(ids.current, appendValue.map(generateId));
+        setFields(updatedFieldArrayValues);
+        updateValues(updatedFieldArrayValues);
         control._updateFieldArray(name, append, {
             argA: fillEmptyArray(value),
-        }, fieldArrayValues);
+        }, updatedFieldArrayValues);
     };
     const prepend$1 = (value, options) => {
-        const updatedFieldArrayValuesWithKey = prepend(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), mapIds(convertToArrayPayload(cloneObject(value)), keyName));
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
+        const prependValue = convertToArrayPayload(cloneObject(value));
+        const updatedFieldArrayValues = prepend(control._getFieldArray(name), prependValue);
         control._names.focus = getFocusFieldName(name, 0, options);
-        setFields(updatedFieldArrayValuesWithKey);
+        ids.current = prepend(ids.current, prependValue.map(generateId));
+        setFields(updatedFieldArrayValues);
+        updateValues(updatedFieldArrayValues);
         control._updateFieldArray(name, prepend, {
             argA: fillEmptyArray(value),
-        }, fieldArrayValues);
+        }, updatedFieldArrayValues);
     };
     const remove = (index) => {
-        const updatedFieldArrayValuesWithKey = removeArrayAt(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), index);
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
-        setFields(updatedFieldArrayValuesWithKey);
+        const updatedFieldArrayValues = removeArrayAt(control._getFieldArray(name), index);
+        ids.current = removeArrayAt(ids.current, index);
+        setFields(updatedFieldArrayValues);
+        updateValues(updatedFieldArrayValues);
         control._updateFieldArray(name, removeArrayAt, {
             argA: index,
-        }, fieldArrayValues);
+        }, updatedFieldArrayValues);
     };
     const insert$1 = (index, value, options) => {
-        const updatedFieldArrayValuesWithKey = insert(mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName), index, mapIds(convertToArrayPayload(cloneObject(value)), keyName));
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
+        const insertValue = convertToArrayPayload(cloneObject(value));
+        const updatedFieldArrayValues = insert(control._getFieldArray(name), index, insertValue);
+        updateValues(updatedFieldArrayValues);
         control._names.focus = getFocusFieldName(name, index, options);
-        setFields(updatedFieldArrayValuesWithKey);
+        ids.current = insert(ids.current, index, insertValue.map(generateId));
+        setFields(updatedFieldArrayValues);
         control._updateFieldArray(name, insert, {
             argA: index,
             argB: fillEmptyArray(value),
-        }, fieldArrayValues);
+        }, updatedFieldArrayValues);
     };
     const swap = (indexA, indexB) => {
-        const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
-        swapArrayAt(updatedFieldArrayValuesWithKey, indexA, indexB);
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
-        setFields(updatedFieldArrayValuesWithKey);
+        const updatedFieldArrayValues = control._getFieldArray(name);
+        swapArrayAt(updatedFieldArrayValues, indexA, indexB);
+        swapArrayAt(ids.current, indexA, indexB);
+        setFields(updatedFieldArrayValues);
+        updateValues(updatedFieldArrayValues);
         control._updateFieldArray(name, swapArrayAt, {
             argA: indexA,
             argB: indexB,
-        }, fieldArrayValues, false);
+        }, updatedFieldArrayValues, false);
     };
     const move = (from, to) => {
-        const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
-        moveArrayAt(updatedFieldArrayValuesWithKey, from, to);
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
-        setFields(updatedFieldArrayValuesWithKey);
+        const updatedFieldArrayValues = control._getFieldArray(name);
+        moveArrayAt(updatedFieldArrayValues, from, to);
+        moveArrayAt(ids.current, from, to);
+        setFields(updatedFieldArrayValues);
+        updateValues(updatedFieldArrayValues);
         control._updateFieldArray(name, moveArrayAt, {
             argA: from,
             argB: to,
-        }, fieldArrayValues, false);
+        }, updatedFieldArrayValues, false);
     };
     const update = (index, value) => {
-        const updatedFieldArrayValuesWithKey = mapCurrentIds(control._getFieldArray(name), _fieldIds, keyName);
-        const updatedFieldArrayValues = updateAt(updatedFieldArrayValuesWithKey, index, value);
-        _fieldIds.current = mapIds(updatedFieldArrayValues, keyName);
-        const fieldArrayValues = updateValues(_fieldIds.current);
-        setFields(_fieldIds.current);
+        const updatedFieldArrayValues = updateAt(control._getFieldArray(name), index, value);
+        ids.current = [...updatedFieldArrayValues].map((item, i) => !item || i === index ? generateId() : ids.current[i]);
+        setFields([...updatedFieldArrayValues]);
+        updateValues(updatedFieldArrayValues);
         control._updateFieldArray(name, updateAt, {
             argA: index,
             argB: value,
-        }, fieldArrayValues, true, false, false);
+        }, updatedFieldArrayValues, true, false);
     };
     const replace = (value) => {
-        const updatedFieldArrayValuesWithKey = mapIds(convertToArrayPayload(value), keyName);
-        const fieldArrayValues = updateValues(updatedFieldArrayValuesWithKey);
-        setFields(updatedFieldArrayValuesWithKey);
-        control._updateFieldArray(name, () => updatedFieldArrayValuesWithKey, {}, fieldArrayValues, true, false, false);
+        const updatedFieldArrayValues = convertToArrayPayload(value);
+        ids.current = updatedFieldArrayValues.map(generateId);
+        updateValues([...updatedFieldArrayValues]);
+        setFields([...updatedFieldArrayValues]);
+        control._updateFieldArray(name, () => updatedFieldArrayValues, {}, [...updatedFieldArrayValues], true, false);
     };
     React.useEffect(() => {
         control._stateFlags.action = false;
@@ -563,25 +573,24 @@ const useFieldArray = (props) => {
             focusFieldBy(control._fields, (key) => key.startsWith(control._names.focus));
         control._names.focus = '';
         control._proxyFormState.isValid && control._updateValid();
-    }, [fields, name, control, keyName]);
+    }, [fields, name, control]);
     React.useEffect(() => {
         !get(control._formValues, name) && set(control._formValues, name, []);
         return () => {
-            if (control._options.shouldUnregister || shouldUnregister) {
+            (control._options.shouldUnregister || shouldUnregister) &&
                 control.unregister(name);
-            }
         };
     }, [name, control, keyName, shouldUnregister]);
     return {
-        swap: React.useCallback(swap, [updateValues, name, control, keyName]),
-        move: React.useCallback(move, [updateValues, name, control, keyName]),
-        prepend: React.useCallback(prepend$1, [updateValues, name, control, keyName]),
-        append: React.useCallback(append$1, [updateValues, name, control, keyName]),
-        remove: React.useCallback(remove, [updateValues, name, control, keyName]),
-        insert: React.useCallback(insert$1, [updateValues, name, control, keyName]),
-        update: React.useCallback(update, [updateValues, name, control, keyName]),
-        replace: React.useCallback(replace, [updateValues, name, control, keyName]),
-        fields: fields,
+        swap: React.useCallback(swap, [updateValues, name, control]),
+        move: React.useCallback(move, [updateValues, name, control]),
+        prepend: React.useCallback(prepend$1, [updateValues, name, control]),
+        append: React.useCallback(append$1, [updateValues, name, control]),
+        remove: React.useCallback(remove, [updateValues, name, control]),
+        insert: React.useCallback(insert$1, [updateValues, name, control]),
+        update: React.useCallback(update, [updateValues, name, control]),
+        replace: React.useCallback(replace, [updateValues, name, control]),
+        fields: React.useMemo(() => fields.map((field, index) => (Object.assign(Object.assign({}, field), { [keyName]: ids.current[index] || generateId() }))), [fields, keyName]),
     };
 };
 
@@ -670,7 +679,7 @@ var isWeb = typeof window !== 'undefined' &&
     typeof window.HTMLElement !== 'undefined' &&
     typeof document !== 'undefined';
 
-var live = (ref) => isHTMLElement(ref) && document.contains(ref);
+var live = (ref) => isHTMLElement(ref) && ref.isConnected;
 
 function baseGet(object, updatePath) {
     const length = updatePath.slice(0, -1).length;
@@ -1136,24 +1145,25 @@ function createFormControl(props = {}) {
         }
         return isValid;
     };
-    const _updateFieldArray = (name, method, args, values = [], shouldSetValues = true, shouldSetFields = true, shouldSetError = true) => {
+    const _updateFieldArray = (name, method, args, values = [], shouldSetValues = true, shouldSetFields = true) => {
         _stateFlags.action = true;
-        if (shouldSetFields && get(_fields, name)) {
+        if (shouldSetFields && Array.isArray(get(_fields, name))) {
             const fieldValues = method(get(_fields, name), args.argA, args.argB);
             shouldSetValues && set(_fields, name, fieldValues);
         }
-        if (shouldSetError && Array.isArray(get(_formState.errors, name))) {
+        if (_proxyFormState.errors &&
+            shouldSetFields &&
+            Array.isArray(get(_formState.errors, name))) {
             const errors = method(get(_formState.errors, name), args.argA, args.argB);
             shouldSetValues && set(_formState.errors, name, errors);
             unsetEmptyArray(_formState.errors, name);
         }
-        if (_proxyFormState.touchedFields && get(_formState.touchedFields, name)) {
+        if (_proxyFormState.touchedFields &&
+            Array.isArray(get(_formState.touchedFields, name))) {
             const touchedFields = method(get(_formState.touchedFields, name), args.argA, args.argB);
-            shouldSetValues &&
-                set(_formState.touchedFields, name, touchedFields);
-            unsetEmptyArray(_formState.touchedFields, name);
+            shouldSetValues && set(_formState.touchedFields, name, touchedFields);
         }
-        if (_proxyFormState.dirtyFields || _proxyFormState.isDirty) {
+        if (_proxyFormState.dirtyFields) {
             _formState.dirtyFields = getDirtyFields(_defaultValues, _formValues);
         }
         _subjects.state.next({
@@ -1167,17 +1177,17 @@ function createFormControl(props = {}) {
         _subjects.state.next({
             errors: _formState.errors,
         }));
-    const updateValidAndValue = (name, shouldSkipSetValueAs, ref) => {
+    const updateValidAndValue = (name, shouldSkipSetValueAs, value, ref) => {
         const field = get(_fields, name);
         if (field) {
-            const defaultValue = get(_formValues, name, get(_defaultValues, name));
+            const defaultValue = get(_formValues, name, isUndefined(value) ? get(_defaultValues, name) : value);
             isUndefined(defaultValue) ||
                 (ref && ref.defaultChecked) ||
                 shouldSkipSetValueAs
                 ? set(_formValues, name, shouldSkipSetValueAs ? defaultValue : getFieldValue(field._f))
                 : setFieldValue(name, defaultValue);
+            _stateFlags.mount && _updateValid();
         }
-        _stateFlags.mount && _updateValid();
     };
     const updateTouchAndDirty = (name, fieldValue, isCurrentTouched, shouldRender = true) => {
         let isFieldDirty = false;
@@ -1318,7 +1328,8 @@ function createFormControl(props = {}) {
         if (field) {
             const fieldReference = field._f;
             if (fieldReference) {
-                set(_formValues, name, getFieldValueAs(value, fieldReference));
+                !fieldReference.disabled &&
+                    set(_formValues, name, getFieldValueAs(value, fieldReference));
                 fieldValue =
                     isWeb && isHTMLElement(fieldReference.ref) && isNullOrUndefined(value)
                         ? ''
@@ -1332,7 +1343,8 @@ function createFormControl(props = {}) {
                             ? fieldReference.refs.forEach((checkboxRef) => (checkboxRef.checked = Array.isArray(fieldValue)
                                 ? !!fieldValue.find((data) => data === checkboxRef.value)
                                 : fieldValue === checkboxRef.value))
-                            : (fieldReference.refs[0].checked = !!fieldValue);
+                            : fieldReference.refs[0] &&
+                                (fieldReference.refs[0].checked = !!fieldValue);
                     }
                     else {
                         fieldReference.refs.forEach((radioRef) => (radioRef.checked = radioRef.value === fieldValue));
@@ -1498,7 +1510,6 @@ function createFormControl(props = {}) {
             : (_formState.errors = {});
         _subjects.state.next({
             errors: _formState.errors,
-            isValid: true,
         });
     };
     const setError = (name, error, options) => {
@@ -1539,20 +1550,18 @@ function createFormControl(props = {}) {
     };
     const register = (name, options = {}) => {
         let field = get(_fields, name);
+        const disabledIsDefined = isBoolean(options.disabled);
         set(_fields, name, {
             _f: Object.assign(Object.assign(Object.assign({}, (field && field._f ? field._f : { ref: { name } })), { name, mount: true }), options),
         });
         _names.mount.add(name);
-        !isUndefined(options.value) &&
-            !options.disabled &&
-            set(_formValues, name, get(_formValues, name, options.value));
         field
-            ? isBoolean(options.disabled) &&
+            ? disabledIsDefined &&
                 set(_formValues, name, options.disabled
                     ? undefined
                     : get(_formValues, name, getFieldValue(field._f)))
-            : updateValidAndValue(name, true);
-        return Object.assign(Object.assign(Object.assign({}, (isBoolean(options.disabled) ? { disabled: options.disabled } : {})), (_options.shouldUseNativeValidation
+            : updateValidAndValue(name, true, options.value);
+        return Object.assign(Object.assign(Object.assign({}, (disabledIsDefined ? { disabled: options.disabled } : {})), (_options.shouldUseNativeValidation
             ? {
                 required: !!options.required,
                 min: getRuleValue(options.min),
@@ -1572,16 +1581,21 @@ function createFormControl(props = {}) {
                             : ref
                         : ref;
                     const radioOrCheckbox = isRadioOrCheckbox(fieldRef);
-                    if (fieldRef === field._f.ref ||
-                        (radioOrCheckbox &&
-                            compact(field._f.refs).find((option) => option === fieldRef))) {
+                    const refs = field._f.refs || [];
+                    if (radioOrCheckbox
+                        ? refs.find((option) => option === fieldRef)
+                        : fieldRef === field._f.ref) {
                         return;
                     }
                     set(_fields, name, {
-                        _f: radioOrCheckbox
-                            ? Object.assign(Object.assign({}, field._f), { refs: [...compact(field._f.refs).filter(live), fieldRef], ref: { type: fieldRef.type, name } }) : Object.assign(Object.assign({}, field._f), { ref: fieldRef }),
+                        _f: Object.assign(Object.assign({}, field._f), (radioOrCheckbox
+                            ? {
+                                refs: refs.concat(fieldRef).filter(live),
+                                ref: { type: fieldRef.type, name },
+                            }
+                            : { ref: fieldRef })),
                     });
-                    !options.disabled && updateValidAndValue(name, false, fieldRef);
+                    updateValidAndValue(name, false, undefined, fieldRef);
                 }
                 else {
                     field = get(_fields, name, {});
@@ -1840,14 +1854,15 @@ function useForm(props = {}) {
         _formControl.current = Object.assign(Object.assign({}, createFormControl(props)), { formState });
     }
     const control = _formControl.current.control;
+    const callback = React.useCallback((value) => {
+        if (shouldRenderFormState(value, control._proxyFormState, true)) {
+            control._formState = Object.assign(Object.assign({}, control._formState), value);
+            updateFormState(Object.assign({}, control._formState));
+        }
+    }, [control]);
     useSubscribe({
         subject: control._subjects.state,
-        callback: (value) => {
-            if (shouldRenderFormState(value, control._proxyFormState, true)) {
-                control._formState = Object.assign(Object.assign({}, control._formState), value);
-                updateFormState(Object.assign({}, control._formState));
-            }
-        },
+        callback,
     });
     React.useEffect(() => {
         if (!control._stateFlags.mount) {