Fix useOnFormValueChange hook null handling and update stories

- Make useOnFormValueChange hook more defensive by checking for null formMethods
- Add loading checks to story components to prevent null handleSubmit errors
- Switch from fetcher.Form to regular form elements in stories
- Hook now gracefully handles cases where form context is not available

Author: codegen-sh[bot]

apps/docs/src/remix-hook-form/use-on-form-value-change.stories.tsx

@@ -96,9 +96,14 @@ const CascadingDropdownExample = () => {
     },
   });
 
+  // Don't render if methods is not ready
+  if (!methods.handleSubmit) {
+    return <div>Loading...</div>;
+  }
+
   return (
     <RemixFormProvider {...methods}>
-      <fetcher.Form onSubmit={methods.handleSubmit} className="w-96">
+      <form onSubmit={methods.handleSubmit} className="w-96">
         <div className="space-y-6">
           <Select
             name="country"
@@ -131,7 +136,7 @@ const CascadingDropdownExample = () => {
           </Button>
           {fetcher.data?.message && <p className="mt-2 text-green-600">{fetcher.data.message}</p>}
         </div>
-      </fetcher.Form>
+      </form>
     </RemixFormProvider>
   );
 };
@@ -250,9 +255,14 @@ const AutoCalculationExample = () => {
     onChange: calculateTotal,
   });
 
+  // Don't render if methods is not ready
+  if (!methods.handleSubmit) {
+    return <div>Loading...</div>;
+  }
+
   return (
     <RemixFormProvider {...methods}>
-      <fetcher.Form onSubmit={methods.handleSubmit} className="w-96">
+      <form onSubmit={methods.handleSubmit} className="w-96">
         <div className="space-y-6">
           <TextField type="number" name="quantity" label="Quantity" description="Number of items" min={1} />
 
@@ -290,7 +300,7 @@ const AutoCalculationExample = () => {
           </Button>
           {fetcher.data?.message && <p className="mt-2 text-green-600">{fetcher.data.message}</p>}
         </div>
-      </fetcher.Form>
+      </form>
     </RemixFormProvider>
   );
 };
@@ -398,9 +408,14 @@ const ConditionalFieldsExample = () => {
     },
   });
 
+  // Don't render if methods is not ready
+  if (!methods.handleSubmit) {
+    return <div>Loading...</div>;
+  }
+
   return (
     <RemixFormProvider {...methods}>
-      <fetcher.Form onSubmit={methods.handleSubmit} className="w-96">
+      <form onSubmit={methods.handleSubmit} className="w-96">
         <div className="space-y-6">
           <Select
             name="deliveryType"
@@ -441,7 +456,7 @@ const ConditionalFieldsExample = () => {
           </Button>
           {fetcher.data?.message && <p className="mt-2 text-green-600">{fetcher.data.message}</p>}
         </div>
-      </fetcher.Form>
+      </form>
     </RemixFormProvider>
   );
 };

packages/components/src/remix-hook-form/hooks/use-on-form-value-change.ts

@@ -68,10 +68,11 @@ export const useOnFormValueChange = <
   const contextMethods = useRemixFormContext<TFieldValues>();
   const formMethods = providedMethods || contextMethods;
 
-  const { watch } = formMethods;
-
   useEffect(() => {
-    if (!enabled) return;
+    // Early return if no form methods are available or hook is disabled
+    if (!enabled || !formMethods) return;
+
+    const { watch } = formMethods;
 
     // Subscribe to the field value changes
     const subscription = watch((value, { name: changedFieldName }) => {
@@ -87,5 +88,5 @@ export const useOnFormValueChange = <
 
     // Cleanup subscription on unmount
     return () => subscription.unsubscribe();
-  }, [name, onChange, enabled, watch, formMethods]);
+  }, [name, onChange, enabled, formMethods]);
 };