react-hook-form 7.55.0-next.9 → 7.56.0-next.0

package/dist/index.esm.mjs

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
 
@@ -216,6 +216,48 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
     return result;
 };
 
+var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
+
+function deepEqual(object1, object2) {
+    if (isPrimitive(object1) || isPrimitive(object2)) {
+        return object1 === object2;
+    }
+    if (isDateObject(object1) && isDateObject(object2)) {
+        return object1.getTime() === object2.getTime();
+    }
+    const keys1 = Object.keys(object1);
+    const keys2 = Object.keys(object2);
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    for (const key of keys1) {
+        const val1 = object1[key];
+        if (!keys2.includes(key)) {
+            return false;
+        }
+        if (key !== 'ref') {
+            const val2 = object2[key];
+            if ((isDateObject(val1) && isDateObject(val2)) ||
+                (isObject(val1) && isObject(val2)) ||
+                (Array.isArray(val1) && Array.isArray(val2))
+                ? !deepEqual(val1, val2)
+                : val1 !== val2) {
+                return false;
+            }
+        }
+    }
+    return true;
+}
+
+const useDeepEqualEffect = (effect, deps) => {
+    const ref = useRef(deps);
+    if (!deepEqual(deps, ref.current)) {
+        ref.current = deps;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(effect, ref.current);
+};
+
 /**
  * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
  *
@@ -260,10 +302,8 @@ function useFormState(props) {
         isValid: false,
         errors: false,
     });
-    const _name = React.useRef(name);
-    _name.current = name;
-    React.useEffect(() => control._subscribe({
-        name: _name.current,
+    useDeepEqualEffect(() => control._subscribe({
+        name: name,
         formState: _localProxyFormState.current,
         exact,
         callback: (formState) => {
@@ -273,7 +313,7 @@ function useFormState(props) {
                     ...formState,
                 });
         },
-    }), [control, disabled, exact]);
+    }), [name, disabled, exact]);
     React.useEffect(() => {
         _localProxyFormState.current.isValid && control._setValid(true);
     }, [control]);
@@ -313,19 +353,16 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
 function useWatch(props) {
     const methods = useFormContext();
     const { control = methods.control, name, defaultValue, disabled, exact, } = props || {};
-    const _name = React.useRef(name);
-    const _defaultValue = React.useRef(defaultValue);
-    _name.current = name;
-    React.useEffect(() => control._subscribe({
-        name: _name.current,
+    const [value, updateValue] = React.useState(control._getWatch(name, defaultValue));
+    useDeepEqualEffect(() => control._subscribe({
+        name: name,
         formState: {
             values: true,
         },
         exact,
         callback: (formState) => !disabled &&
-            updateValue(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, _defaultValue.current)),
-    }), [control, disabled, exact]);
-    const [value, updateValue] = React.useState(control._getWatch(name, defaultValue));
+            updateValue(generateWatchOutput(name, control._names, formState.values || control._formValues, false, defaultValue)),
+    }), [name, defaultValue, disabled, exact]);
     React.useEffect(() => control._removeUnmounted());
     return value;
 }
@@ -675,39 +712,6 @@ var createSubject = () => {
     };
 };
 
-var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
-
-function deepEqual(object1, object2) {
-    if (isPrimitive(object1) || isPrimitive(object2)) {
-        return object1 === object2;
-    }
-    if (isDateObject(object1) && isDateObject(object2)) {
-        return object1.getTime() === object2.getTime();
-    }
-    const keys1 = Object.keys(object1);
-    const keys2 = Object.keys(object2);
-    if (keys1.length !== keys2.length) {
-        return false;
-    }
-    for (const key of keys1) {
-        const val1 = object1[key];
-        if (!keys2.includes(key)) {
-            return false;
-        }
-        if (key !== 'ref') {
-            const val2 = object2[key];
-            if ((isDateObject(val1) && isDateObject(val2)) ||
-                (isObject(val1) && isObject(val2)) ||
-                (Array.isArray(val1) && Array.isArray(val2))
-                ? !deepEqual(val1, val2)
-                : val1 !== val2) {
-                return false;
-            }
-        }
-    }
-    return true;
-}
-
 var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
 
 var isFileInput = (element) => element.type === 'file';
@@ -1256,6 +1260,7 @@ function createFormControl(props = {}) {
     let _formState = {
         submitCount: 0,
         isDirty: false,
+        isReady: false,
         isLoading: isFunction(_options.defaultValues),
         isValidating: false,
         isSubmitted: false,
@@ -2581,6 +2586,7 @@ function useFieldArray(props) {
     };
 }
 
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 /**
  * Custom hook to manage the entire form.
  *
@@ -2627,6 +2633,7 @@ function useForm(props = {}) {
         validatingFields: {},
         errors: props.errors || {},
         disabled: props.disabled || false,
+        isReady: false,
         defaultValues: isFunction(props.defaultValues)
             ? undefined
             : props.defaultValues,
@@ -2644,12 +2651,36 @@ function useForm(props = {}) {
     }
     const control = _formControl.current.control;
     control._options = props;
-    React.useLayoutEffect(() => control._subscribe({
-        formState: control._proxyFormState,
-        callback: () => updateFormState({ ...control._formState }),
-        reRenderRoot: true,
-    }), [control]);
+    useIsomorphicLayoutEffect(() => {
+        const sub = control._subscribe({
+            formState: control._proxyFormState,
+            callback: () => updateFormState({ ...control._formState }),
+            reRenderRoot: true,
+        });
+        updateFormState((data) => ({
+            ...data,
+            isReady: true,
+        }));
+        return sub;
+    }, [control]);
     React.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
+    React.useEffect(() => {
+        if (props.mode) {
+            control._options.mode = props.mode;
+        }
+        if (props.reValidateMode) {
+            control._options.reValidateMode = props.reValidateMode;
+        }
+        if (props.errors && !isEmptyObject(props.errors)) {
+            control._setErrors(props.errors);
+        }
+    }, [control, props.errors, props.mode, props.reValidateMode]);
+    React.useEffect(() => {
+        props.shouldUnregister &&
+            control._subjects.state.next({
+                values: control._getWatch(),
+            });
+    }, [control, props.shouldUnregister]);
     React.useEffect(() => {
         if (control._proxyFormState.isDirty) {
             const isDirty = control._getDirty();
@@ -2669,12 +2700,7 @@ function useForm(props = {}) {
         else {
             control._resetDefaultValues();
         }
-    }, [props.values, control]);
-    React.useEffect(() => {
-        if (props.errors && !isEmptyObject(props.errors)) {
-            control._setErrors(props.errors);
-        }
-    }, [props.errors, control]);
+    }, [control, props.values]);
     React.useEffect(() => {
         if (!control._state.mount) {
             control._setValid();
@@ -2686,12 +2712,6 @@ function useForm(props = {}) {
         }
         control._removeUnmounted();
     });
-    React.useEffect(() => {
-        props.shouldUnregister &&
-            control._subjects.state.next({
-                values: control._getWatch(),
-            });
-    }, [props.shouldUnregister, control]);
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
 }