react-hook-form 7.56.1 → 7.57.0-next.0

package/dist/index.esm.mjs

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default from 'react';
+import React__default, { useEffect } from 'react';
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
@@ -353,17 +353,34 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
  */
 function useWatch(props) {
     const methods = useFormContext();
-    const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
-    const [value, updateValue] = React__default.useState(control._getWatch(name, defaultValue));
+    const { control = methods.control, name, defaultValue, disabled, exact, compute, } = props || {};
+    const _compute = React__default.useRef(compute);
+    const _computeFormValues = React__default.useRef(undefined);
+    _compute.current = compute;
+    const defaultValueMemo = React__default.useMemo(() => control._getWatch(name, defaultValue), [control, name, defaultValue]);
+    const [value, updateValue] = React__default.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo);
     useDeepEqualEffect(() => control._subscribe({
         name: name,
         formState: {
             values: true,
         },
         exact,
-        callback: (formState) => !disabled &&
-            updateValue(generateWatchOutput(name, control._names, formState.values || control._formValues, false, defaultValue)),
-    }), [name, defaultValue, disabled, exact]);
+        callback: (formState) => {
+            if (!disabled) {
+                const formValues = generateWatchOutput(name, control._names, formState.values || control._formValues, false, defaultValue);
+                if (_compute.current) {
+                    const computedFormValues = _compute.current(formValues);
+                    if (!deepEqual(computedFormValues, _computeFormValues.current)) {
+                        updateValue(computedFormValues);
+                        _computeFormValues.current = computedFormValues;
+                    }
+                }
+                else {
+                    updateValue(formValues);
+                }
+            }
+        },
+    }), [defaultValue, disabled, name, exact]);
     React__default.useEffect(() => control._removeUnmounted());
     return value;
 }
@@ -394,12 +411,13 @@ function useWatch(props) {
  */
 function useController(props) {
     const methods = useFormContext();
-    const { name, disabled, control = methods.control, shouldUnregister } = props;
+    const { name, disabled, control = methods.control, shouldUnregister, defaultValue, } = props;
     const isArrayField = isNameInFieldArray(control._names.array, name);
+    const defaultValueMemo = React__default.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
     const value = useWatch({
         control,
         name,
-        defaultValue: get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)),
+        defaultValue: defaultValueMemo,
         exact: true,
     });
     const formState = useFormState({
@@ -413,6 +431,7 @@ function useController(props) {
         value,
         ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
     }));
+    _props.current = props;
     const fieldState = React__default.useMemo(() => Object.defineProperties({}, {
         invalid: {
             enumerable: true,
@@ -452,12 +471,7 @@ function useController(props) {
     const ref = React__default.useCallback((elm) => {
         const field = get(control._fields, name);
         if (field && elm) {
-            field._f.ref = {
-                focus: () => elm.focus(),
-                select: () => elm.select(),
-                setCustomValidity: (message) => elm.setCustomValidity(message),
-                reportValidity: () => elm.reportValidity(),
-            };
+            field._f.ref = elm;
         }
     }, [control._fields, name]);
     const field = React__default.useMemo(() => ({
@@ -2390,24 +2404,22 @@ function useFieldArray(props) {
     const [fields, setFields] = React__default.useState(control._getFieldArray(name));
     const ids = React__default.useRef(control._getFieldArray(name).map(generateId));
     const _fieldIds = React__default.useRef(fields);
-    const _name = React__default.useRef(name);
     const _actioned = React__default.useRef(false);
-    _name.current = name;
     _fieldIds.current = fields;
     control._names.array.add(name);
-    rules &&
-        control.register(name, rules);
-    React__default.useEffect(() => control._subjects.array.subscribe({
+    React__default.useMemo(() => rules &&
+        control.register(name, rules), [control, rules, name]);
+    useEffect(() => control._subjects.array.subscribe({
         next: ({ values, name: fieldArrayName, }) => {
-            if (fieldArrayName === _name.current || !fieldArrayName) {
-                const fieldValues = get(values, _name.current);
+            if (fieldArrayName === name || !fieldArrayName) {
+                const fieldValues = get(values, name);
                 if (Array.isArray(fieldValues)) {
                     setFields(fieldValues);
                     ids.current = fieldValues.map(generateId);
                 }
             }
         },
-    }).unsubscribe, [control]);
+    }).unsubscribe, [control, name]);
     const updateValues = React__default.useCallback((updatedFieldArrayValues) => {
         _actioned.current = true;
         control._setFieldArray(name, updatedFieldArrayValues);