react-hook-form 7.65.0 → 7.66.0

package/dist/index.esm.mjs

@@ -161,7 +161,7 @@ HookFormContext.displayName = 'HookFormContext';
  */
 const useFormContext = () => React.useContext(HookFormContext);
 /**
- * A provider component that propagates the `useForm` methods to all children components via [React Context](https://reactjs.org/docs/context.html) API. To be used with {@link useFormContext}.
+ * 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)
@@ -353,33 +353,68 @@ function useWatch(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;
-    const defaultValueMemo = React.useMemo(() => control._getWatch(name, _defaultValue.current), [control, name]);
-    const [value, updateValue] = React.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
-    useIsomorphicLayoutEffect(() => control._subscribe({
-        name,
-        formState: {
-            values: true,
-        },
-        exact,
-        callback: (formState) => {
-            if (!disabled) {
-                const formValues = generateWatchOutput(name, control._names, formState.values || control._formValues, false, _defaultValue.current);
-                if (_compute.current) {
-                    const computedFormValues = _compute.current(formValues);
-                    if (!deepEqual(computedFormValues, _computeFormValues.current)) {
-                        updateValue(computedFormValues);
-                        _computeFormValues.current = computedFormValues;
-                    }
-                }
-                else {
-                    updateValue(formValues);
+    const [value, updateValue] = React.useState(() => {
+        const defaultValue = control._getWatch(name, _defaultValue.current);
+        return _compute.current ? _compute.current(defaultValue) : defaultValue;
+    });
+    const getCurrentOutput = React.useCallback((values) => {
+        const formValues = generateWatchOutput(name, control._names, values || control._formValues, false, _defaultValue.current);
+        return _compute.current ? _compute.current(formValues) : formValues;
+    }, [control._formValues, control._names, name]);
+    const refreshValue = React.useCallback((values) => {
+        if (!disabled) {
+            const formValues = generateWatchOutput(name, control._names, values || control._formValues, false, _defaultValue.current);
+            if (_compute.current) {
+                const computedFormValues = _compute.current(formValues);
+                if (!deepEqual(computedFormValues, _computeFormValues.current)) {
+                    updateValue(computedFormValues);
+                    _computeFormValues.current = computedFormValues;
                 }
             }
-        },
-    }), [control, disabled, name, exact]);
+            else {
+                updateValue(formValues);
+            }
+        }
+    }, [control._formValues, control._names, disabled, name]);
+    useIsomorphicLayoutEffect(() => {
+        if (_prevControl.current !== control ||
+            !deepEqual(_prevName.current, name)) {
+            _prevControl.current = control;
+            _prevName.current = name;
+            refreshValue();
+        }
+        return control._subscribe({
+            name,
+            formState: {
+                values: true,
+            },
+            exact,
+            callback: (formState) => {
+                refreshValue(formState.values);
+            },
+        });
+    }, [control, exact, name, refreshValue]);
     React.useEffect(() => control._removeUnmounted());
-    return value;
+    // If name or control changed for this render, synchronously reflect the
+    // latest value so callers (like useController) see the correct value
+    // immediately on the same render.
+    // 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(() => {
+        if (disabled) {
+            return null;
+        }
+        const nameChanged = !controlChanged && !deepEqual(prevName, name);
+        const shouldReturnImmediate = controlChanged || nameChanged;
+        return shouldReturnImmediate ? getCurrentOutput() : null;
+    }, [disabled, controlChanged, name, prevName, getCurrentOutput]);
+    return computedOutput !== null ? computedOutput : value;
 }
 
 /**
@@ -2203,7 +2238,8 @@ function createFormControl(props = {}) {
         _state.mount =
             !_proxyFormState.isValid ||
                 !!keepStateOptions.keepIsValid ||
-                !!keepStateOptions.keepDirtyValues;
+                !!keepStateOptions.keepDirtyValues ||
+                (!_options.shouldUnregister && !isEmptyObject(values));
         _state.watch = !!_options.shouldUnregister;
         _subjects.state.next({
             submitCount: keepStateOptions.keepSubmitCount