memoize Timeline subject

packages/app/src/Pages/HashTagsPage.tsx

@@ -17,6 +17,7 @@ import { formatShort } from "@/Utils/Number";
 const HashTagsPage = () => {
   const params = useParams();
   const tag = (params.tag ?? "").toLowerCase();
+  const subject = useMemo(() => ({ type: "hashtag", items: [tag], discriminator: tag }), [tag]);
 
   return (
     <>
@@ -25,7 +26,7 @@ const HashTagsPage = () => {
       </div>
       <Timeline
         key={tag}
-        subject={{ type: "hashtag", items: [tag], discriminator: tag }}
+        subject={subject}
         postsOnly={false}
         method={"TIME_RANGE"}
       />

packages/app/src/Pages/ListFeedPage.tsx

@@ -7,11 +7,17 @@ import { useParams } from "react-router-dom";
 import Timeline from "@/Components/Feed/Timeline";
 import PageSpinner from "@/Components/PageSpinner";
 import { Hour } from "@/Utils/Const";
+import {useMemo} from "react";
 
 export function ListFeedPage() {
   const { id } = useParams();
   const link = parseNostrLink(unwrap(id));
   const { data } = useEventFeed(link);
+  const subject = useMemo(() => ({
+    type: "pubkey",
+    items: pubkeys,
+    discriminator: "list-feed",
+  }), [pubkeys]);
 
   if (!data) return <PageSpinner />;
   if (data.kind !== EventKind.ContactList && data.kind !== EventKind.FollowSet) {
@@ -24,11 +30,7 @@ export function ListFeedPage() {
   const pubkeys = dedupe(data.tags.filter(a => a[0] === "p").map(a => a[1]));
   return (
     <Timeline
-      subject={{
-        type: "pubkey",
-        items: pubkeys,
-        discriminator: "list-feed",
-      }}
+      subject={subject}
       postsOnly={true}
       method="TIME_RANGE"
       window={Hour * 12}

packages/app/src/Pages/Profile/ProfileTabComponents.tsx

@@ -52,8 +52,18 @@ export function BookMarksTab({ id }: { id: HexKey }) {
 }
 
 export function ProfileNotesTab({ id, relays, isMe }: { id: HexKey; relays?: Array<string>; isMe: boolean }) {
+  console.count("ProfileNotesTab");
   const pinned = usePinList(id);
   const options = useMemo(() => ({ showTime: false, showPinned: true, canUnpin: isMe }), [isMe]);
+  const subject = useMemo(
+    () => ({
+      type: "pubkey",
+      items: [id],
+      discriminator: id.slice(0, 12),
+      relay: relays,
+    }),
+    [id, relays],
+  );
   return (
     <>
       {pinned
@@ -63,12 +73,7 @@ export function ProfileNotesTab({ id, relays, isMe }: { id: HexKey; relays?: Arr
         })}
       <Timeline
         key={id}
-        subject={{
-          type: "pubkey",
-          items: [id],
-          discriminator: id.slice(0, 12),
-          relay: relays,
-        }}
+        subject={subject}
         postsOnly={false}
         method={"LIMIT_UNTIL"}
         loadMore={false}

packages/app/src/Pages/Root/GlobalTab.tsx

@@ -1,6 +1,6 @@
 import { unixNow } from "@snort/shared";
 import { SnortContext } from "@snort/system-react";
-import { useContext, useEffect, useState } from "react";
+import {useContext, useEffect, useMemo, useState} from "react";
 import { FormattedMessage } from "react-intl";
 
 import Timeline from "@/Components/Feed/Timeline";
@@ -79,17 +79,19 @@ export const GlobalTab = () => {
     });
   }, [relays, relay]);
 
+  const subject = useMemo(() => ({
+    type: "global",
+    items: [],
+    relay: [relay.url],
+    discriminator: `all-${sha256(relay.url)}`,
+  }), [relay.url]);
+
   return (
     <>
       {globalRelaySelector()}
       {relay && (
         <Timeline
-          subject={{
-            type: "global",
-            items: [],
-            relay: [relay.url],
-            discriminator: `all-${sha256(relay.url)}`,
-          }}
+          subject={subject}
           postsOnly={false}
           method={"TIME_RANGE"}
           window={600}

packages/app/src/Pages/Root/TagsTab.tsx

@@ -2,16 +2,17 @@ import { useParams } from "react-router-dom";
 
 import Timeline from "@/Components/Feed/Timeline";
 import { TimelineSubject } from "@/Feed/TimelineFeed";
+import {useMemo} from "react";
 
 export const TagsTab = (params: { tag?: string }) => {
   const { tag } = useParams();
   const t = params.tag ?? tag ?? "";
-  const subject: TimelineSubject = {
+  const subject: TimelineSubject = useMemo(() => ({
     type: "hashtag",
     items: [t],
     discriminator: `tags-${t}`,
     streams: true,
-  };
+  }), [t]);
 
   return <Timeline subject={subject} postsOnly={false} method={"TIME_RANGE"} />;
 };

packages/app/src/Pages/SearchPage.tsx

@@ -53,6 +53,12 @@ const SearchPage = () => {
     return debounce(500, () => setKeyword(search));
   }, [search]);
 
+  const subject = useMemo(() => ({
+    type: "post_keyword",
+    items: [keyword + (sortPopular ? " sort:popular" : "")],
+    discriminator: keyword,
+  }), [keyword, sortPopular]);
+
   function tabContent() {
     if (tab.value === PROFILES) {
       return <Profiles keyword={search} />;
@@ -67,11 +73,7 @@ const SearchPage = () => {
         {sortOptions()}
         <Timeline
           key={keyword}
-          subject={{
-            type: "post_keyword",
-            items: [keyword + (sortPopular ? " sort:popular" : "")],
-            discriminator: keyword,
-          }}
+          subject={subject}
           postsOnly={false}
           method={"LIMIT_UNTIL"}
           loadMore={false}

packages/app/src/Pages/TopicsPage.tsx

@@ -1,16 +1,18 @@
 import Timeline from "@/Components/Feed/Timeline";
 import useLogin from "@/Hooks/useLogin";
+import {useMemo} from "react";
 
 export function TopicsPage() {
   const { tags, pubKey } = useLogin(s => ({ tags: s.tags.item, pubKey: s.publicKey }));
+  const subject = useMemo(() => ({
+    type: "hashtag",
+    items: tags,
+    discriminator: pubKey ?? "",
+  }), [tags, pubKey]);
 
   return (
     <Timeline
-      subject={{
-        type: "hashtag",
-        items: tags,
-        discriminator: pubKey ?? "",
-      }}
+      subject={subject}
       postsOnly={true}
       method="TIME_RANGE"
       loadMore={true}