Fix react-hooks/exhaustive-deps error on usePayees.ts (#4260)

* Fix react-hooks/exhaustive-deps error on usePayees.ts * Rename * Release notes
actualbudget · Feb 19, 2025 · aea6e79 · aea6e79
1 parent 81db739
commit aea6e79
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -800,7 +800,6 @@ export default [
       'packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx',
       'packages/desktop-client/src/hooks/useAccounts.ts',
       'packages/desktop-client/src/hooks/useCategories.ts',
-      'packages/desktop-client/src/hooks/usePayees.ts',
       'packages/desktop-client/src/hooks/useProperFocus.tsx',
     ],
 

diff --git a/packages/desktop-client/src/hooks/usePayees.ts b/packages/desktop-client/src/hooks/usePayees.ts
@@ -7,17 +7,21 @@ import {
 
 import { useSelector, useDispatch } from '../redux';
 
+import { useInitialMount } from './useInitialMount';
+
 export function useCommonPayees() {
   const dispatch = useDispatch();
   const commonPayeesLoaded = useSelector(
     state => state.queries.commonPayeesLoaded,
   );
 
+  const isInitialMount = useInitialMount();
+
   useEffect(() => {
-    if (!commonPayeesLoaded) {
+    if (isInitialMount && !commonPayeesLoaded) {
       dispatch(getCommonPayees());
     }
-  }, []);
+  }, [commonPayeesLoaded, dispatch, isInitialMount]);
 
   return useSelector(state => state.queries.commonPayees);
 }
@@ -26,11 +30,13 @@ export function usePayees() {
   const dispatch = useDispatch();
   const payeesLoaded = useSelector(state => state.queries.payeesLoaded);
 
+  const isInitialMount = useInitialMount();
+
   useEffect(() => {
-    if (!payeesLoaded) {
+    if (isInitialMount && !payeesLoaded) {
       dispatch(getPayees());
     }
-  }, []);
+  }, [dispatch, isInitialMount, payeesLoaded]);
 
   return useSelector(state => state.queries.payees);
 }
diff --git a/upcoming-release-notes/4260.md b/upcoming-release-notes/4260.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Fix react-hooks/exhaustive-deps error on usePayees.ts