Add useEffect

actualbudget · Feb 8, 2024 · 77d264b · 77d264b
1 parent 437c34f
commit 77d264b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/packages/desktop-client/src/hooks/useAccounts.ts b/packages/desktop-client/src/hooks/useAccounts.ts
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { getAccounts } from 'loot-core/client/actions';
@@ -6,9 +7,11 @@ export function useAccounts() {
   const dispatch = useDispatch();
   const accountLoaded = useSelector(state => state.queries.accountsLoaded);
 
-  if (!accountLoaded) {
-    dispatch(getAccounts());
-  }
+  useEffect(() => {
+    if (!accountLoaded) {
+      dispatch(getAccounts());
+    }
+  }, []);
 
   return useSelector(state => state.queries.accounts);
 }
diff --git a/packages/desktop-client/src/hooks/useCategories.ts b/packages/desktop-client/src/hooks/useCategories.ts
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { getCategories } from 'loot-core/client/actions';
@@ -6,9 +7,11 @@ export function useCategories() {
   const dispatch = useDispatch();
   const categoriesLoaded = useSelector(state => state.queries.categoriesLoaded);
 
-  if (!categoriesLoaded) {
-    dispatch(getCategories());
-  }
+  useEffect(() => {
+    if (!categoriesLoaded) {
+      dispatch(getCategories());
+    }
+  }, []);
 
   return useSelector<State, QueriesState['categories']>(
     state => state.queries.categories,

diff --git a/packages/desktop-client/src/hooks/usePayees.ts b/packages/desktop-client/src/hooks/usePayees.ts
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { getPayees } from 'loot-core/client/actions';
@@ -6,9 +7,11 @@ export function usePayees() {
   const dispatch = useDispatch();
   const payeesLoaded = useSelector(state => state.queries.payeesLoaded);
 
-  if (!payeesLoaded) {
-    dispatch(getPayees());
-  }
+  useEffect(() => {
+    if (!payeesLoaded) {
+      dispatch(getPayees());
+    }
+  }, []);
 
   return useSelector(state => state.queries.payees);
 }