Debugging

frontend/src/features/fuel-logs/components/FuelLogForm.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState, useRef } from 'react';
+import React, { useEffect, useMemo, useState, useRef, memo } from 'react';
 import { useForm, Controller } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -30,7 +30,7 @@ const schema = z.object({
   message: 'Cannot specify both odometer reading and trip distance'
 });
 
-export const FuelLogForm: React.FC<{ onSuccess?: () => void; initial?: Partial<CreateFuelLogRequest> }> = ({ onSuccess, initial }) => {
+const FuelLogFormComponent: React.FC<{ onSuccess?: () => void; initial?: Partial<CreateFuelLogRequest> }> = ({ onSuccess, initial }) => {
   const { userSettings } = useUserSettings();
   const { createFuelLog, isLoading } = useFuelLogs();
   const [useOdometer, setUseOdometer] = useState(false);
@@ -46,13 +46,23 @@ export const FuelLogForm: React.FC<{ onSuccess?: () => void; initial?: Partial<C
     } as any
   });
 
+  // DEBUG: Log component renders and form state
+  console.log('[FuelLogForm] Render - formInitialized:', formInitialized.current, 'isLoading:', isLoading);
+
   // Prevent form reset after initial load
   useEffect(() => {
     if (!formInitialized.current) {
       formInitialized.current = true;
+      console.log('[FuelLogForm] Form initialized');
     }
   }, []);
 
+  // DEBUG: Watch for form value changes
+  const vehicleId = watch('vehicleId');
+  useEffect(() => {
+    console.log('[FuelLogForm] Vehicle ID changed:', vehicleId);
+  }, [vehicleId]);
+
   const watched = watch(['fuelUnits', 'costPerUnit']);
   const [fuelUnitsRaw, costPerUnitRaw] = watched as [string | number | undefined, string | number | undefined];
 
@@ -167,3 +177,5 @@ export const FuelLogForm: React.FC<{ onSuccess?: () => void; initial?: Partial<C
   );
 };
 
+export const FuelLogForm = memo(FuelLogFormComponent);
+