[Address suppressed ESLint errors] Fix exhaustive deps errors in FinancesApp.tsx

eslint.config.mjs

@@ -715,7 +715,6 @@ export default [
       'packages/desktop-client/src/components/accounts/Account.jsx',
       'packages/desktop-client/src/components/accounts/MobileAccount.jsx',
       'packages/desktop-client/src/components/accounts/MobileAccounts.jsx',
-      'packages/desktop-client/src/components/App.tsx',
       'packages/desktop-client/src/components/budget/BudgetCategories.jsx',
       'packages/desktop-client/src/components/budget/BudgetSummaries.tsx',
       'packages/desktop-client/src/components/budget/DynamicBudgetTable.tsx',
@@ -724,7 +723,6 @@ export default [
       'packages/desktop-client/src/components/budget/envelope/HoldMenu.tsx',
       'packages/desktop-client/src/components/budget/envelope/TransferMenu.tsx',
       'packages/desktop-client/src/components/common/Menu.tsx',
-      'packages/desktop-client/src/components/FinancesApp.tsx',
       'packages/desktop-client/src/components/GlobalKeys.ts',
       'packages/desktop-client/src/components/LoggedInUser.tsx',
       'packages/desktop-client/src/components/manager/ManagementApp.jsx',

packages/desktop-client/src/components/App.tsx

@@ -53,74 +53,78 @@ function AppInner() {
   const userData = useSelector(state => state.user.data);
   const { signOut, addNotification } = useActions();
 
-  const maybeUpdate = async <T,>(cb?: () => T): Promise<T> => {
-    if (global.Actual.isUpdateReadyForDownload()) {
-      dispatch(
-        setAppState({
-          loadingText: t('Downloading and applying update...'),
-        }),
-      );
-      await global.Actual.applyAppUpdate();
-    }
-    return cb?.();
-  };
-
-  async function init() {
-    const socketName = await maybeUpdate(() => global.Actual.getServerSocket());
-
-    dispatch(
-      setAppState({
-        loadingText: t('Initializing the connection to the local database...'),
-      }),
-    );
-    await initConnection(socketName);
-
-    // Load any global prefs
-    dispatch(
-      setAppState({
-        loadingText: t('Loading global preferences...'),
-      }),
-    );
-    await dispatch(loadGlobalPrefs());
-
-    // Open the last opened budget, if any
-    dispatch(
-      setAppState({
-        loadingText: t('Opening last budget...'),
-      }),
-    );
-    const budgetId = await send('get-last-opened-backup');
-    if (budgetId) {
-      await dispatch(loadBudget(budgetId));
-
-      // Check to see if this file has been remotely deleted (but
-      // don't block on this in case they are offline or something)
-      dispatch(
-        setAppState({
-          loadingText: t('Retrieving remote files...'),
-        }),
-      );
-
-      const files = await send('get-remote-files');
-      if (files) {
-        const remoteFile = files.find(f => f.fileId === cloudFileId);
-        if (remoteFile && remoteFile.deleted) {
-          dispatch(closeBudget());
-        }
-      }
-
-      await maybeUpdate();
-    }
-  }
-
   useEffect(() => {
+    const maybeUpdate = async <T,>(cb?: () => T): Promise<T> => {
+      if (global.Actual.isUpdateReadyForDownload()) {
+        dispatch(
+          setAppState({
+            loadingText: t('Downloading and applying update...'),
+          }),
+        );
+        await global.Actual.applyAppUpdate();
+      }
+      return cb?.();
+    };
+
+    async function init() {
+      const socketName = await maybeUpdate(() =>
+        global.Actual.getServerSocket(),
+      );
+
+      dispatch(
+        setAppState({
+          loadingText: t(
+            'Initializing the connection to the local database...',
+          ),
+        }),
+      );
+      await initConnection(socketName);
+
+      // Load any global prefs
+      dispatch(
+        setAppState({
+          loadingText: t('Loading global preferences...'),
+        }),
+      );
+      await dispatch(loadGlobalPrefs());
+
+      // Open the last opened budget, if any
+      dispatch(
+        setAppState({
+          loadingText: t('Opening last budget...'),
+        }),
+      );
+      const budgetId = await send('get-last-opened-backup');
+      if (budgetId) {
+        await dispatch(loadBudget(budgetId));
+
+        // Check to see if this file has been remotely deleted (but
+        // don't block on this in case they are offline or something)
+        dispatch(
+          setAppState({
+            loadingText: t('Retrieving remote files...'),
+          }),
+        );
+
+        const files = await send('get-remote-files');
+        if (files) {
+          const remoteFile = files.find(f => f.fileId === cloudFileId);
+          if (remoteFile && remoteFile.deleted) {
+            dispatch(closeBudget());
+          }
+        }
+
+        await maybeUpdate();
+      }
+    }
+
     async function initAll() {
       await Promise.all([installPolyfills(), init()]);
       dispatch(setAppState({ loadingText: null }));
     }
 
     initAll().catch(showErrorBoundary);
-  }, []);
+  }, [cloudFileId, dispatch, showErrorBoundary, t]);
 
   useEffect(() => {
     global.Actual.updateAppMenu(budgetId);
@@ -140,7 +144,7 @@ function AppInner() {
         },
       });
     }
-  }, [userData, userData?.tokenExpired]);
+  }, [addNotification, signOut, t, userData?.tokenExpired]);
 
   return budgetId ? <FinancesApp /> : <ManagementApp />;
 }
@@ -185,7 +189,7 @@ export function App() {
       window.removeEventListener('focus', checkScrollbars);
       window.removeEventListener('visibilitychange', onVisibilityChange);
     };
-  }, [dispatch]);
+  }, [dispatch, hiddenScrollbars]);
 
   const [theme] = useTheme();
 

packages/desktop-client/src/components/FinancesApp.tsx

@@ -103,7 +103,7 @@ export function FinancesApp() {
     setTimeout(async () => {
       await dispatch(sync());
     }, 100);
-  }, []);
+  }, [dispatch]);
 
   useEffect(() => {
     async function run() {
@@ -126,7 +126,7 @@ export function FinancesApp() {
     }
 
     run();
-  }, []);
+  }, [dispatch, t]);
 
   useEffect(() => {
     async function run() {
@@ -159,7 +159,7 @@ export function FinancesApp() {
     }
 
     run();
-  }, [lastUsedVersion, setLastUsedVersion]);
+  }, [dispatch, lastUsedVersion, setLastUsedVersion, t]);
 
   const scrollableRef = useRef<HTMLDivElement>(null);
 

upcoming-release-notes/4124.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+[Address suppressed ESLint errors] Fix exhaustive deps errors in App.tsx