Fix too many updates issue with useFavorites + ui changes

2 files changed, 24 insertions, 20 deletions

diff --git a/src/hooks/useFavorites.ts b/src/hooks/useFavorites.ts
index 54d77fd..619817c 100644
--- a/src/hooks/useFavorites.ts
+++ b/src/hooks/useFavorites.ts
@@ -1,11 +1,12 @@
-import {useCallback, useEffect, useState} from 'react';
+import {useEffect, useState} from 'react';
 import {useAsyncStorage} from '@react-native-async-storage/async-storage';
+import {useStableCallback} from './useStableCallback';
 
 export const useFavorites = () => {
   const favoritesStorage = useAsyncStorage('favorites');
   const [favoriteAppNames, setFavoriteAppNames] = useState<string[]>([]);
 
-  const getFavoriteAppNames = useCallback(async (): Promise<string[]> => {
+  const getFavoriteAppNames = useStableCallback(async (): Promise<string[]> => {
     try {
       const result = await favoritesStorage.getItem();
       const apps = result ? JSON.parse(result) : [];
@@ -15,28 +16,22 @@ export const useFavorites = () => {
       console.error(err);
       return [];
     }
-  }, [favoritesStorage]);
+  });
 
-  const refreshFavorites = useCallback(async () => {
+  const refreshFavorites = useStableCallback(async () => {
     getFavoriteAppNames().then(setFavoriteAppNames);
-  }, [getFavoriteAppNames]);
+  });
 
-  const setFavorites = useCallback(
-    async (names: string[]) => {
-      const newNames = [...new Set(names)];
-      setFavoriteAppNames(newNames);
-      await favoritesStorage.setItem(JSON.stringify(newNames));
-    },
-    [favoritesStorage],
-  );
+  const setFavorites = useStableCallback(async (names: string[]) => {
+    const newNames = [...new Set(names)];
+    setFavoriteAppNames(newNames);
+    await favoritesStorage.setItem(JSON.stringify(newNames));
+  });
 
-  const addToFavorites = useCallback(
-    async (packageName: string) => {
-      const names = await getFavoriteAppNames();
-      setFavorites([...names, packageName]);
-    },
-    [getFavoriteAppNames, setFavorites],
-  );
+  const addToFavorites = useStableCallback(async (packageName: string) => {
+    const names = await getFavoriteAppNames();
+    setFavorites([...names, packageName]);
+  });
 
   useEffect(() => {
     refreshFavorites();
diff --git a/src/hooks/useStableCallback.ts b/src/hooks/useStableCallback.ts
new file mode 100644
index 0000000..98e6c0d
--- /dev/null
+++ b/src/hooks/useStableCallback.ts
@@ -0,0 +1,9 @@
+import {useCallback, useRef} from 'react';
+
+export const useStableCallback = <Args extends any[], Ret>(
+  callback: (...a: Args) => Ret,
+): ((...a: Args) => Ret) => {
+  const cb = useRef(callback);
+  cb.current = callback;
+  return useCallback((...args: Args) => cb.current(...args), [cb]);
+};