[Mobile] Fix preview running balances not displaying on toggle (#7041)

* refactor(usePreviewTransactions): Move running balances to useMemo

* docs(relnotes): Add note for mobile running balance fix

* refactor(hooks): Remove unnecessary options ref

packages/desktop-client/src/hooks/usePreviewTransactions.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import { send } from 'loot-core/platform/client/connection';
 import { computeSchedulePreviewTransactions } from 'loot-core/shared/schedules';
@@ -47,18 +47,9 @@ export function usePreviewTransactions({
   } = useCachedSchedules();
   const [isLoading, setIsLoading] = useState(isSchedulesLoading);
   const [error, setError] = useState<Error | undefined>(undefined);
-  const [runningBalances, setRunningBalances] = useState<
-    Map<TransactionEntity['id'], IntegerAmount>
-  >(new Map());
 
   const [upcomingLength] = useSyncedPref('upcomingScheduledTransactionLength');
 
-  // We don't want to re-render if options changes.
-  // Putting options in a ref will prevent that and
-  // allow us to use the latest options on next render.
-  const optionsRef = useRef(options);
-  optionsRef.current = options;
-
   const scheduleTransactions = useMemo(() => {
     if (isSchedulesLoading) {
       return [];
@@ -109,21 +100,6 @@ export function usePreviewTransactions({
           const ungroupedTransactions = ungroupTransactions(withDefaults);
           setPreviewTransactions(ungroupedTransactions);
 
-          if (optionsRef.current?.calculateRunningBalances) {
-            setRunningBalances(
-              // We always use the bottom up calculation for preview transactions
-              // because the hook controls the order of the transactions. We don't
-              // need to provide a custom way for consumers to calculate the running
-              // balances, at least as of writing.
-              calculateRunningBalancesBottomUp(
-                ungroupedTransactions,
-                // Preview transactions are behaves like 'all' splits
-                'all',
-                optionsRef.current?.startingBalance,
-              ),
-            );
-          }
-
           setIsLoading(false);
         }
       })
@@ -139,6 +115,24 @@ export function usePreviewTransactions({
     };
   }, [scheduleTransactions, schedules, statuses, upcomingLength]);
 
+  const runningBalances = useMemo(() => {
+    if (!options?.calculateRunningBalances) {
+      return new Map<TransactionEntity['id'], IntegerAmount>();
+    }
+
+    // We always use the bottom up calculation for preview transactions
+    // because the hook controls the order of the transactions.
+    return calculateRunningBalancesBottomUp(
+      previewTransactions,
+      'all',
+      options?.startingBalance,
+    );
+  }, [
+    previewTransactions,
+    options?.calculateRunningBalances,
+    options?.startingBalance,
+  ]);
+
   const returnError = error || scheduleQueryError;
   return {
     previewTransactions,

upcoming-release-notes/7041.md

@@ -0,0 +1,6 @@
+---
+category: Bugfixes
+authors: [LeviBorodenko]
+---
+
+[Mobile] Show running balance on upcoming transactions when respective setting is toggled