fixed my buggy codes

src/components/user/extend.tsx

@@ -4,10 +4,11 @@ import { ImageWithFallback } from '@components/imageWithFallback';
 import { truncate } from '@utils/truncate';
 
 import { DotsHorizontalIcon } from '@radix-ui/react-icons';
+import { fetch } from '@tauri-apps/api/http';
 import Avatar from 'boring-avatars';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { memo, useCallback, useContext, useMemo, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
 
 dayjs.extend(relativeTime);
 
@@ -15,6 +16,19 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
   const { db }: any = useContext(DatabaseContext);
   const [profile, setProfile] = useState({ picture: null, name: null, username: null });
 
+  const fetchProfile = useCallback(async (id: string) => {
+    const res = await fetch(`https://rbr.bio/${id}/metadata.json`, {
+      method: 'GET',
+      timeout: 30,
+    });
+    return res.data;
+  }, []);
+
+  const getCacheProfile = useCallback(async () => {
+    const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
+    return result[0];
+  }, [db, pubkey]);
+
   const insertCacheProfile = useCallback(
     async (event) => {
       // insert to database
@@ -25,33 +39,19 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
     [db, pubkey]
   );
 
-  const getCacheProfile = useCallback(async () => {
-    const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
-    return result[0];
-  }, [db, pubkey]);
-
-  useMemo(() => {
+  useEffect(() => {
     getCacheProfile()
       .then((res) => {
         if (res !== undefined) {
           setProfile(JSON.parse(res.metadata));
         } else {
-          fetch(`https://rbr.bio/${pubkey}/metadata.json`, { redirect: 'follow' })
-            .then((response) => {
-              if (response.ok) {
-                return response.json();
-              } else if (response.status === 404) {
-                return Promise.reject('error 404');
-              } else {
-                return Promise.reject('some other error: ' + response.status);
-              }
-            })
-            .then((data) => insertCacheProfile(data))
-            .catch((error) => console.log('error is', error));
+          fetchProfile(pubkey)
+            .then((res) => insertCacheProfile(res))
+            .catch(console.error);
         }
       })
       .catch(console.error);
-  }, [getCacheProfile, insertCacheProfile, pubkey]);
+  }, [fetchProfile, getCacheProfile, insertCacheProfile, pubkey]);
 
   return (
     <div className="flex items-start gap-2">