Fix useOnFormValueChange hook context handling

- Add better null checks for form methods in hook
- Move hook calls after form methods validation in stories
- Pass methods explicitly to avoid context issues
- Ensure form is ready before calling hooks

Author: codegen-sh[bot]

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

@@ -84,9 +84,15 @@ const CascadingDropdownExample = () => {
     },
   });
 
+  // Don't render if methods is not ready
+  if (!methods || !methods.handleSubmit) {
+    return <div>Loading...</div>;
+  }
+
   // When country changes, update available states and reset state selection
   useOnFormValueChange({
     name: 'country',
+    methods,
     onChange: (value) => {
       const states = statesByCountry[value] || [];
       setAvailableStates(states);
@@ -96,11 +102,6 @@ const CascadingDropdownExample = () => {
     },
   });
 
-  // Don't render if methods is not ready
-  if (!methods.handleSubmit) {
-    return <div>Loading...</div>;
-  }
-
   return (
     <RemixFormProvider {...methods}>
       <form onSubmit={methods.handleSubmit} className="w-96">
@@ -237,29 +238,32 @@ const AutoCalculationExample = () => {
     methods.setValue('total', total.toFixed(2));
   };
 
+  // Don't render if methods is not ready
+  if (!methods || !methods.handleSubmit) {
+    return <div>Loading...</div>;
+  }
+
   // Recalculate when quantity changes
   useOnFormValueChange({
     name: 'quantity',
+    methods,
     onChange: calculateTotal,
   });
 
   // Recalculate when price changes
   useOnFormValueChange({
     name: 'pricePerUnit',
+    methods,
     onChange: calculateTotal,
   });
 
   // Recalculate when discount changes
   useOnFormValueChange({
     name: 'discount',
+    methods,
     onChange: calculateTotal,
   });
 
-  // Don't render if methods is not ready
-  if (!methods.handleSubmit) {
-    return <div>Loading...</div>;
-  }
-
   return (
     <RemixFormProvider {...methods}>
       <form onSubmit={methods.handleSubmit} className="w-96">
@@ -392,9 +396,15 @@ const ConditionalFieldsExample = () => {
     },
   });
 
+  // Don't render if methods is not ready
+  if (!methods || !methods.handleSubmit) {
+    return <div>Loading...</div>;
+  }
+
   // Show/hide fields based on delivery type
   useOnFormValueChange({
     name: 'deliveryType',
+    methods,
     onChange: (value) => {
       setShowShipping(value === 'delivery');
       setShowPickup(value === 'pickup');
@@ -408,11 +418,6 @@ const ConditionalFieldsExample = () => {
     },
   });
 
-  // Don't render if methods is not ready
-  if (!methods.handleSubmit) {
-    return <div>Loading...</div>;
-  }
-
   return (
     <RemixFormProvider {...methods}>
       <form onSubmit={methods.handleSubmit} className="w-96">

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

@@ -70,17 +70,17 @@ export const useOnFormValueChange = <
 
   useEffect(() => {
     // Early return if no form methods are available or hook is disabled
-    if (!enabled || !formMethods) return;
+    if (!enabled || !formMethods || !formMethods.watch || !formMethods.getValues) return;
 
-    const { watch } = formMethods;
+    const { watch, getValues } = formMethods;
 
     // Subscribe to the field value changes
     const subscription = watch((value, { name: changedFieldName }) => {
       // Only trigger onChange if the watched field changed
       if (changedFieldName === name) {
         const currentValue = value[name] as PathValue<TFieldValues, TName>;
         // Get previous value from the form state
-        const prevValue = formMethods.getValues(name);
+        const prevValue = getValues(name);
 
         onChange(currentValue, prevValue);
       }