Sync

frontend/src/hooks/useDataService.ts

@@ -1,5 +1,4 @@
-
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { dataService } from '@/services/dataService';
 import { IndJob } from '@/lib/types';
 
@@ -9,42 +8,72 @@ export function useJobs() {
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
+    let mounted = true;
+    
     const loadJobs = async () => {
       try {
         setLoading(true);
-        await dataService.loadJobs();
-        setError(null);
+        const loadedJobs = await dataService.loadJobs();
+        if (mounted) {
+          setJobs(loadedJobs);
+          setError(null);
+        }
       } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load jobs');
+        if (mounted) {
+          setError(err instanceof Error ? err.message : 'Failed to load jobs');
+        }
       } finally {
-        setLoading(false);
+        if (mounted) {
+          setLoading(false);
+        }
       }
     };
 
     loadJobs();
 
+    // Set up subscription for updates
     const unsubscribe = dataService.subscribe(() => {
-      setJobs(dataService.getJobs());
+      if (mounted) {
+        const currentJobs = dataService.getJobs();
+        setJobs(prevJobs => {
+          // Only update if the jobs have actually changed
+          const prevJson = JSON.stringify(prevJobs);
+          const currentJson = JSON.stringify(currentJobs);
+          return prevJson !== currentJson ? currentJobs : prevJobs;
+        });
+      }
     });
 
     return () => {
+      mounted = false;
       unsubscribe();
     };
-  }, []);
+  }, []); // Empty dependency array ensures this only runs once on mount
+
+  // Memoize the methods to prevent unnecessary re-renders
+  const createJob = useCallback(dataService.createJob.bind(dataService), []);
+  const updateJob = useCallback(dataService.updateJob.bind(dataService), []);
+  const deleteJob = useCallback(dataService.deleteJob.bind(dataService), []);
+  const createTransaction = useCallback(dataService.createTransaction.bind(dataService), []);
+  const createMultipleTransactions = useCallback(dataService.createMultipleTransactions.bind(dataService), []);
+  const updateTransaction = useCallback(dataService.updateTransaction.bind(dataService), []);
+  const deleteTransaction = useCallback(dataService.deleteTransaction.bind(dataService), []);
+  const createBillItem = useCallback(dataService.createBillItem.bind(dataService), []);
+  const createMultipleBillItems = useCallback(dataService.createMultipleBillItems.bind(dataService), []);
 
   return {
     jobs,
     loading,
     error,
-    createJob: dataService.createJob.bind(dataService),
-    updateJob: dataService.updateJob.bind(dataService),
-    deleteJob: dataService.deleteJob.bind(dataService),
-    createTransaction: dataService.createTransaction.bind(dataService),
-    createMultipleTransactions: dataService.createMultipleTransactions.bind(dataService),
-    updateTransaction: dataService.updateTransaction.bind(dataService),
-    deleteTransaction: dataService.deleteTransaction.bind(dataService),
-    createBillItem: dataService.createBillItem.bind(dataService),
-    createMultipleBillItems: dataService.createMultipleBillItems.bind(dataService)
+    createJob,
+    updateJob,
+    deleteJob,
+    createTransaction,
+    createMultipleTransactions,
+    updateTransaction,
+    deleteTransaction,
+    createBillItem,
+    createMultipleBillItems
   };
 }