fixed some performance issues

.eslintrc

@@ -10,7 +10,7 @@
     "prettier"
   ],
   "rules": {
-    "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/no-explicit-any": "warn"
   },
   "ignorePatterns": ["dist", "**/*.js", "**/*.json", "node_modules"]

src/app/nostr/channels/[id]/page.tsx

@@ -46,7 +46,7 @@ export default function Page({ params }: { params: { id: string } }) {
         },
       ],
       FULL_RELAYS,
-      (event: any) => {
+      (event: { kind: number; tags: string[][]; pubkey: string; id: string }) => {
         if (event.kind === 44) {
           muted.current = muted.current.add(event.tags[0][1]);
         } else if (event.kind === 43) {

src/app/nostr/chats/[pubkey]/page.tsx

@@ -10,7 +10,7 @@ import { FULL_RELAYS } from '@stores/constants';
 import useLocalStorage from '@rehooks/local-storage';
 import { useSetAtom } from 'jotai';
 import { useResetAtom } from 'jotai/utils';
-import { Suspense, useCallback, useContext, useEffect, useRef } from 'react';
+import { useContext, useEffect } from 'react';
 
 export default function Page({ params }: { params: { pubkey: string } }) {
   const [pool]: any = useContext(RelayContext);
@@ -19,10 +19,11 @@ export default function Page({ params }: { params: { pubkey: string } }) {
   const setChatMessages = useSetAtom(chatMessagesAtom);
   const resetChatMessages = useResetAtom(chatMessagesAtom);
 
-  const unsubscribe = useRef(null);
-
-  const fetchMessages = useCallback(() => {
-    unsubscribe.current = pool.subscribe(
+  useEffect(() => {
+    // reset stored messages
+    resetChatMessages();
+    // fetch messages from relays
+    const unsubscribe = pool.subscribe(
       [
         {
           kinds: [4],
@@ -40,26 +41,15 @@ export default function Page({ params }: { params: { pubkey: string } }) {
         setChatMessages((data) => [...data, event]);
       }
     );
-  }, [activeAccount.pubkey, params.pubkey, pool, setChatMessages]);
-
-  useEffect(() => {
-    // reset stored messages
-    resetChatMessages();
-    // fetch messages from relays
-    fetchMessages();
 
     return () => {
-      if (unsubscribe.current) {
-        unsubscribe.current();
-      }
+      unsubscribe();
     };
-  }, [fetchMessages, resetChatMessages]);
+  }, [params.pubkey, activeAccount.pubkey, setChatMessages, pool]);
 
   return (
     <div className="flex h-full w-full flex-col justify-between">
-      <Suspense fallback={<>Loading...</>}>
       <MessageList />
-      </Suspense>
       <div className="shrink-0 p-3">
         <FormChat receiverPubkey={params.pubkey} />
       </div>

src/app/nostr/newsfeed/following/page.tsx

@@ -70,7 +70,15 @@ export default function Page() {
   }, [setData, setHasNewerNote]);
 
   useEffect(() => {
+    let initPage = false;
+
+    if (!initPage) {
       initialData().catch(console.error);
+    }
+
+    return () => {
+      initPage = true;
+    };
   }, [initialData]);
 
   return (

src/app/onboarding/create/[...slug]/page.tsx

@@ -103,13 +103,21 @@ export default function Page({ params }: { params: { slug: string } }) {
   }, [pubkey, privkey, follows, pool, relays, router]);
 
   useEffect(() => {
+    let ignore = false;
+
     const fetchData = async () => {
       const { data } = await supabase.from('random_users').select('pubkey').limit(28);
       // update state
       setList((list: any) => [...list, ...data]);
     };
 
+    if (!ignore) {
       fetchData().catch(console.error);
+    }
+
+    return () => {
+      ignore = true;
+    };
   }, []);
 
   return (

src/app/onboarding/login/[privkey]/page.tsx

@@ -12,15 +12,16 @@ import { nip02ToArray } from '@utils/transform';
 import Image from 'next/image';
 import Link from 'next/link';
 import { getPublicKey } from 'nostr-tools';
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 
 export default function Page({ params }: { params: { privkey: string } }) {
   const [pool, relays]: any = useContext(RelayContext);
-  const pubkey = useMemo(() => (params.privkey ? getPublicKey(params.privkey) : null), [params.privkey]);
-  const timeout = useRef(null);
 
   const [profile, setProfile] = useState({ metadata: null });
   const [done, setDone] = useState(false);
+  const timeout = useRef(null);
+
+  const pubkey = getPublicKey(params.privkey);
 
   const createPlebs = useCallback(async (tags: string[]) => {
     for (const tag of tags) {
@@ -67,7 +68,7 @@ export default function Page({ params }: { params: { privkey: string } }) {
     );
 
     return () => {
-      unsubscribe;
+      unsubscribe();
       clearTimeout(timeout.current);
     };
   }, [pool, relays, pubkey, params.privkey, createPlebs]);

src/app/page.tsx

@@ -28,17 +28,17 @@ export default function Page() {
 
   const now = useRef(new Date());
   const timeout = useRef(null);
-  const unsubscribe = useRef(null);
 
   const fetchData = useCallback(
     async (account: { id: number; pubkey: string; chats: string[] }, tags: any) => {
       const lastLogin = await getLastLogin();
       const notes = await countTotalNotes();
       const channels = await countTotalChannels();
+
       const chats = account.chats?.length || 0;
       const follows = JSON.parse(tags);
-
       const query = [];
+
       let since: number;
 
       // kind 1 (notes) query
@@ -75,7 +75,7 @@ export default function Page() {
         });
       }
       // subscribe relays
-      unsubscribe.current = pool.subscribe(
+      const unsubscribe = pool.subscribe(
         query,
         relays,
         (event: { kind: number; tags: string[]; id: string; pubkey: string; content: string; created_at: number }) => {
@@ -132,14 +132,20 @@ export default function Page() {
           logAllEvents: false,
         }
       );
+
+      return () => {
+        unsubscribe();
+      };
     },
     [router, pool, relays]
   );
 
   useEffect(() => {
+    let ignore = false;
+
     getPlebs()
       .then((res) => {
-        if (res) {
+        if (res && !ignore) {
           writeStorage('plebs', res);
         }
       })
@@ -147,7 +153,7 @@ export default function Page() {
 
     getActiveAccount()
       .then((res: any) => {
-        if (res) {
+        if (res && !ignore) {
           const account = res;
           // update local storage
           writeStorage('account', account);
@@ -160,9 +166,7 @@ export default function Page() {
       .catch(console.error);
 
     return () => {
-      if (unsubscribe.current) {
-        unsubscribe.current();
-      }
+      ignore = true;
       clearTimeout(timeout.current);
     };
   }, [fetchData, router]);

src/components/channels/browseChannelItem.tsx

@@ -4,20 +4,9 @@ import { DEFAULT_AVATAR, DEFAULT_CHANNEL_BANNER } from '@stores/constants';
 
 import { useChannelMetadata } from '@utils/hooks/useChannelMetadata';
 
-import { useRouter } from 'next/navigation';
-import { useCallback } from 'react';
-
 export const BrowseChannelItem = ({ data }: { data: any }) => {
-  const router = useRouter();
   const channel = useChannelMetadata(data.event_id, data.metadata);
 
-  const openChannel = useCallback(
-    (id: string) => {
-      router.push(`/nostr/channels/${id}`);
-    },
-    [router]
-  );
-
   return (
     <div className="h-64 w-full rounded-md bg-zinc-900">
       <div className="relative h-24">

src/components/eventCollector.tsx

@@ -23,7 +23,7 @@ export default function EventCollector() {
   const now = useRef(new Date());
 
   const subscribe = useCallback(async () => {
-    pool.subscribe(
+    const unsubscribe = pool.subscribe(
       [
         {
           kinds: [1, 6],
@@ -101,7 +101,11 @@ export default function EventCollector() {
         }
       }
     );
-  }, [activeAccount.follows, activeAccount.pubkey, activeAccount.id, pool, relays, setHasNewerNote]);
+
+    return () => {
+      unsubscribe();
+    };
+  }, [activeAccount.pubkey, activeAccount.id, follows, pool, relays, setHasNewerNote]);
 
   useEffect(() => {
     subscribe();

src/components/form/channel.tsx

@@ -15,7 +15,7 @@ import { getEventHash, signEvent } from 'nostr-tools';
 import { useCallback, useContext } from 'react';
 
 export const FormChannel = ({ eventId }: { eventId: string | string[] }) => {
-  const [pool, relays]: any = useContext(RelayContext);
+  const [pool]: any = useContext(RelayContext);
   const [activeAccount]: any = useLocalStorage('account', {});
 
   const [value, setValue] = useAtom(channelContentAtom);
@@ -61,8 +61,8 @@ export const FormChannel = ({ eventId }: { eventId: string | string[] }) => {
     activeAccount.privkey,
     eventId,
     resetChannelReply,
+    resetValue,
     pool,
-    relays,
   ]);
 
   const handleEnterPress = (e) => {

src/components/form/chat.tsx

@@ -13,7 +13,7 @@ import { getEventHash, nip04, signEvent } from 'nostr-tools';
 import { useCallback, useContext } from 'react';
 
 export default function FormChat({ receiverPubkey }: { receiverPubkey: string }) {
-  const [pool, relays]: any = useContext(RelayContext);
+  const [pool]: any = useContext(RelayContext);
   const [activeAccount]: any = useLocalStorage('account', {});
 
   const [value, setValue] = useAtom(chatContentAtom);
@@ -44,7 +44,7 @@ export default function FormChat({ receiverPubkey }: { receiverPubkey: string })
         resetValue();
       })
       .catch(console.error);
-  }, [encryptMessage, activeAccount.privkey, activeAccount.pubkey, receiverPubkey, pool]);
+  }, [encryptMessage, activeAccount.privkey, activeAccount.pubkey, receiverPubkey, resetValue, pool]);
 
   const handleEnterPress = (e) => {
     if (e.key === 'Enter' && !e.shiftKey) {

src/utils/hooks/useChannelMetadata.tsx

@@ -32,9 +32,12 @@ export const useChannelMetadata = (id: string, fallback: string) => {
         logAllEvents: false,
       }
     );
-  }, []);
+  }, [id, pool, relays]);
 
   useEffect(() => {
+    let ignore = false;
+
+    if (!ignore) {
       if (typeof fallback === 'object') {
         setMetadata(fallback);
       } else {
@@ -44,13 +47,15 @@ export const useChannelMetadata = (id: string, fallback: string) => {
 
       // fetch kind 41
       fetchMetadata();
+    }
 
     return () => {
+      ignore = true;
       if (unsubscribe.current) {
         unsubscribe.current();
       }
     };
-  }, [fetchMetadata]);
+  }, [fetchMetadata, fallback]);
 
   return metadata;
 };