Fix react-hooks/exhaustive-deps in ImportTransactionsModal

packages/desktop-client/src/components/modals/ImportTransactionsModal/ImportTransactionsModal.tsx

@@ -2,6 +2,7 @@
 import React, {
   useCallback,
   useEffect,
+  useEffectEvent,
   useState,
   type ComponentProps,
 } from 'react';
@@ -718,7 +719,7 @@ export function ImportTransactionsModal({
     close();
   }
 
-  const runImportPreview = useCallback(async () => {
+  const onImportPreview = useEffectEvent(async () => {
     // always start from the original parsed transactions, not the previewed ones to ensure rules run
     const transactionPreview = await getImportPreview(
       parsedTransactions,
@@ -732,39 +733,15 @@ export function ImportTransactionsModal({
       multiplierAmount,
     );
     setTransactions(transactionPreview);
-  }, [
-    getImportPreview,
-    parsedTransactions,
-    filetype,
-    flipAmount,
-    fieldMappings,
-    splitMode,
-    parseDateFormat,
-    inOutMode,
-    outValue,
-    multiplierAmount,
-  ]);
+  });
 
   useEffect(() => {
     if (parsedTransactions.length === 0 || loadingState === 'parsing') {
       return;
     }
 
-    runImportPreview();
-    // intentionally exclude runImportPreview from dependencies to avoid infinite rerenders
-    // oxlint-disable-next-line react/exhaustive-deps
-  }, [
-    filetype,
-    flipAmount,
-    fieldMappings,
-    splitMode,
-    parseDateFormat,
-    inOutMode,
-    outValue,
-    multiplierAmount,
-    loadingState,
-    parsedTransactions.length,
-  ]);
+    onImportPreview();
+  }, [loadingState, parsedTransactions.length]);
 
   const headers: ComponentProps<typeof TableHeader>['headers'] = [
     { name: t('Date'), width: 200 },

upcoming-release-notes/6868.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Fix react-hooks/exhaustive-deps in ImportTransactionsModal