react-hook-form 7.70.0 → 7.71.1

package/dist/index.esm.mjs

@@ -123,73 +123,16 @@ const INPUT_VALIDATION_RULES = {
     validate: 'validate',
 };
 
-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)
- *
- * @returns return all useForm methods
- *
- * @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")} />;
- * }
- * ```
+ * Separate context for `control` to prevent unnecessary rerenders.
+ * Internal hooks that only need control use this instead of full form context.
  */
-const useFormContext = () => React.useContext(HookFormContext);
+const HookFormControlContext = React.createContext(null);
+HookFormControlContext.displayName = 'HookFormControlContext';
 /**
- * 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)
- *
- * @param props - all useForm methods
- *
- * @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")} />;
- * }
- * ```
+ * @internal Internal hook to access only control from context.
  */
-const FormProvider = (props) => {
-    const { children, ...data } = props;
-    return (React.createElement(HookFormContext.Provider, { value: data }, children));
-};
+const useFormControlContext = () => React.useContext(HookFormControlContext);
 
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
     const result = {
@@ -243,8 +186,8 @@ const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayou
  * ```
  */
 function useFormState(props) {
-    const methods = useFormContext();
-    const { control = methods.control, disabled, name, exact } = props || {};
+    const formControl = useFormControlContext();
+    const { control = formControl, disabled, name, exact } = props || {};
     const [formState, updateFormState] = React.useState(control._formState);
     const _localProxyFormState = React.useRef({
         isDirty: false,
@@ -344,8 +287,8 @@ function deepEqual(object1, object2, _internal_visited = new WeakSet()) {
  * ```
  */
 function useWatch(props) {
-    const methods = useFormContext();
-    const { control = methods.control, name, defaultValue, disabled, exact, compute, } = props || {};
+    const formControl = useFormControlContext();
+    const { control = formControl, name, defaultValue, disabled, exact, compute, } = props || {};
     const _defaultValue = React.useRef(defaultValue);
     const _compute = React.useRef(compute);
     const _computeFormValues = React.useRef(undefined);
@@ -438,8 +381,8 @@ function useWatch(props) {
  * ```
  */
 function useController(props) {
-    const methods = useFormContext();
-    const { name, disabled, control = methods.control, shouldUnregister, defaultValue, exact = true, } = props;
+    const formControl = useFormControlContext();
+    const { name, disabled, control = formControl, shouldUnregister, defaultValue, exact = true, } = props;
     const isArrayField = isNameInFieldArray(control._names.array, name);
     const defaultValueMemo = React.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
     const value = useWatch({
@@ -627,6 +570,109 @@ const flatten = (obj) => {
     return output;
 };
 
+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)
+ *
+ * @returns return all useForm methods
+ *
+ * @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 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)
+ *
+ * @param props - all useForm methods
+ *
+ * @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 FormProvider = (props) => {
+    const { children, watch, getValues, getFieldState, setError, clearErrors, setValue, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe, } = props;
+    return (React.createElement(HookFormContext.Provider, { value: React.useMemo(() => ({
+            watch,
+            getValues,
+            getFieldState,
+            setError,
+            clearErrors,
+            setValue,
+            trigger,
+            formState,
+            resetField,
+            reset,
+            handleSubmit,
+            unregister,
+            control,
+            register,
+            setFocus,
+            subscribe,
+        }), [
+            clearErrors,
+            control,
+            formState,
+            getFieldState,
+            getValues,
+            handleSubmit,
+            register,
+            reset,
+            resetField,
+            setError,
+            setFocus,
+            setValue,
+            subscribe,
+            trigger,
+            unregister,
+            watch,
+        ]) },
+        React.createElement(HookFormControlContext.Provider, { value: control }, children)));
+};
+
 const POST_REQUEST = 'post';
 /**
  * Form component to manage submission.
@@ -2004,7 +2050,11 @@ function createFormControl(props = {}) {
         if ((isBoolean(disabled) && _state.mount) ||
             !!disabled ||
             _names.disabled.has(name)) {
+            const wasDisabled = _names.disabled.has(name);
+            const isDisabled = !!disabled;
+            const disabledStateChanged = wasDisabled !== isDisabled;
             disabled ? _names.disabled.add(name) : _names.disabled.delete(name);
+            disabledStateChanged && _state.mount && !_state.action && _setValid();
         }
     };
     const register = (name, options = {}) => {
@@ -2535,8 +2585,8 @@ var updateAt = (fieldValues, index, value) => {
  * ```
  */
 function useFieldArray(props) {
-    const methods = useFormContext();
-    const { control = methods.control, name, keyName = 'id', shouldUnregister, rules, } = props;
+    const formControl = useFormControlContext();
+    const { control = formControl, name, keyName = 'id', shouldUnregister, rules, } = props;
     const [fields, setFields] = React.useState(control._getFieldArray(name));
     const ids = React.useRef(control._getFieldArray(name).map(generateId));
     const _actioned = React.useRef(false);
@@ -2878,7 +2928,7 @@ function useForm(props = {}) {
         }
         control._removeUnmounted();
     });
-    _formControl.current.formState = getProxyFormState(formState, control);
+    _formControl.current.formState = React.useMemo(() => getProxyFormState(formState, control), [control, formState]);
     return _formControl.current;
 }