fixed memory leak and high cpu pike

src/components/note/meta/comment.tsx

@@ -11,6 +11,7 @@ import CommentIcon from '@assets/icons/comment';
 
 import * as Dialog from '@radix-ui/react-dialog';
 import { SizeIcon } from '@radix-ui/react-icons';
+import destr from 'destr';
 import { useAtom, useAtomValue } from 'jotai';
 import { useRouter } from 'next/router';
 import { getEventHash, signEvent } from 'nostr-tools';
@@ -38,7 +39,7 @@ export const NoteComment = memo(function NoteComment({
   const [open, setOpen] = useState(false);
   const [value, setValue] = useState('');
 
-  const profile = JSON.parse(activeAccount.metadata);
+  const profile = destr(activeAccount.metadata);
 
   const openThread = () => {
     router.push(`/newsfeed/${eventID}`);

src/components/note/metadata.tsx

@@ -4,6 +4,7 @@ import { RelayContext } from '@components/relaysProvider';
 
 import { relaysAtom } from '@stores/relays';
 
+import { dateToUnix } from '@utils/getDate';
 import { createCacheCommentNote } from '@utils/storage';
 
 import { useAtomValue } from 'jotai';
@@ -17,7 +18,7 @@ export default function NoteMetadata({
 }: {
   eventID: string;
   eventPubkey: string;
-  eventTime: string;
+  eventTime: any;
   eventContent: any;
 }) {
   const pool: any = useContext(RelayContext);
@@ -26,13 +27,15 @@ export default function NoteMetadata({
   const [likes, setLikes] = useState(0);
   const [comments, setComments] = useState(0);
 
+  /*
   useEffect(() => {
     const unsubscribe = pool.subscribe(
       [
         {
           '#e': [eventID],
-          since: 0,
+          since: parseInt(eventTime),
           kinds: [1, 7],
+          limit: 50,
         },
       ],
       relays,
@@ -53,7 +56,7 @@ export default function NoteMetadata({
             break;
         }
       },
-      undefined,
+      1000,
       undefined,
       {
         unsubscribeOnEose: true,
@@ -61,9 +64,10 @@ export default function NoteMetadata({
     );
 
     return () => {
-      unsubscribe();
+      unsubscribe;
     };
-  }, [eventID, pool, relays]);
+  }, [eventID, eventTime, pool, relays]);
+  */
 
   return (
     <div className="relative z-10 -ml-1 flex items-center gap-8">

src/components/note/parent.tsx

@@ -12,7 +12,7 @@ import { createCacheNote, getNoteByID } from '@utils/storage';
 
 import destr from 'destr';
 import { useAtomValue } from 'jotai';
-import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import ReactPlayer from 'react-player';
 import reactStringReplace from 'react-string-replace';
 
@@ -21,9 +21,10 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
 
   const relays = useAtomValue(relaysAtom);
   const [event, setEvent] = useState(null);
+  const unsubscribe = useRef(null);
 
   const fetchEvent = useCallback(() => {
-    pool.subscribe(
+    unsubscribe.current = pool.subscribe(
       [
         {
           ids: [id],
@@ -53,6 +54,10 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
         fetchEvent();
       }
     });
+
+    return () => {
+      unsubscribe.current;
+    };
   }, [fetchEvent, id]);
 
   const content = useMemo(() => {

src/components/note/repost.tsx

@@ -8,7 +8,7 @@ import { createCacheNote, getNoteByID } from '@utils/storage';
 
 import destr from 'destr';
 import { useAtomValue } from 'jotai';
-import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import reactStringReplace from 'react-string-replace';
 
 export const NoteRepost = memo(function NoteRepost({ id }: { id: string }) {
@@ -16,9 +16,10 @@ export const NoteRepost = memo(function NoteRepost({ id }: { id: string }) {
 
   const relays = useAtomValue(relaysAtom);
   const [event, setEvent] = useState(null);
+  const unsubscribe = useRef(null);
 
   const fetchEvent = useCallback(() => {
-    pool.subscribe(
+    unsubscribe.current = pool.subscribe(
       [
         {
           ids: [id],
@@ -48,6 +49,10 @@ export const NoteRepost = memo(function NoteRepost({ id }: { id: string }) {
         fetchEvent();
       }
     });
+
+    return () => {
+      unsubscribe.current;
+    };
   }, [fetchEvent, id]);
 
   const content = useMemo(() => {
@@ -100,22 +105,6 @@ export const NoteRepost = memo(function NoteRepost({ id }: { id: string }) {
       </div>
     );
   } else {
-    return (
-      <div className="relative z-10 flex h-min animate-pulse select-text flex-col pb-5">
-        <div className="flex items-start gap-2">
-          <div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />
-          <div className="flex w-full flex-1 items-start justify-between">
-            <div className="flex w-full items-center justify-between">
-              <div className="flex items-center gap-2 text-sm">
-                <div className="h-4 w-16 rounded bg-zinc-700" />
-                <span className="text-zinc-500">·</span>
-                <div className="h-4 w-12 rounded bg-zinc-700" />
-              </div>
-              <div className="h-3 w-3 rounded-full bg-zinc-700" />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
+    return <div className="mt-2 h-6 animate-pulse select-text flex-col rounded bg-zinc-700 pb-5"></div>;
   }
 });