feat: memoize heavy computations

apps/web/src/components/Account/FollowersYouKnowOverview.tsx

@@ -2,7 +2,7 @@ import { TRANSFORMS } from "@hey/data/constants";
 import getAccount from "@hey/helpers/getAccount";
 import getAvatar from "@hey/helpers/getAvatar";
 import { type Follower, useFollowersYouKnowQuery } from "@hey/indexer";
-import { type ReactNode, useEffect, useState } from "react";
+import { type ReactNode, useEffect, useMemo, useState } from "react";
 import { useLocation } from "react-router";
 import FollowersYouKnow from "@/components/Shared/Modal/FollowersYouKnow";
 import FollowersYouKnowShimmer from "@/components/Shared/Shimmer/FollowersYouKnowShimmer";
@@ -37,7 +37,7 @@ const FollowersYouKnowOverview = ({
   const accounts =
     (data?.followersYouKnow?.items.slice(0, 4) as unknown as Follower[]) || [];
 
-  const renderAccountNames = () => {
+  const accountNames = useMemo(() => {
     const names = accounts.map(
       (account) => getAccount(account.follower as any).name
     );
@@ -50,7 +50,7 @@ const FollowersYouKnowOverview = ({
       return `${names[0]}, ${names[1]}${count === 0 ? " and " : ", "}${names[2]}${count ? ` and ${count} other${count === 1 ? "" : "s"}` : ""}`;
 
     return `${names[0]}, ${names[1]}, ${names[2]} and others`;
-  };
+  }, [accounts]);
 
   const Wrapper = ({ children }: { children: ReactNode }) => (
     <button
@@ -86,7 +86,7 @@ const FollowersYouKnowOverview = ({
     return null;
   }
 
-  return <Wrapper>{renderAccountNames()}</Wrapper>;
+  return <Wrapper>{accountNames}</Wrapper>;
 };
 
 export default FollowersYouKnowOverview;

apps/web/src/components/Home/Timeline/EventType/Combined.tsx

@@ -1,6 +1,6 @@
 import { SparklesIcon } from "@heroicons/react/24/outline";
 import type { TimelineItemFragment } from "@hey/indexer";
-import { Fragment } from "react";
+import { Fragment, useMemo } from "react";
 import Accounts from "@/components/Shared/Account/Accounts";
 
 interface CombinedProps {
@@ -12,14 +12,16 @@ const Combined = ({ timelineItem }: CombinedProps) => {
 
   const repostsLength = reposts.length;
 
-  const getAllAccounts = () => {
-    let accounts = reposts.map((event) => event.author);
-    accounts = accounts.filter(
-      (account, index, self) =>
-        index === self.findIndex((t) => t.address === account.address)
-    );
-    return accounts;
-  };
+  const accounts = useMemo(
+    () =>
+      reposts
+        .map((event) => event.author)
+        .filter(
+          (account, index, self) =>
+            index === self.findIndex((t) => t.address === account.address)
+        ),
+    [reposts]
+  );
 
   const actionArray = [];
   if (repostsLength) {
@@ -29,7 +31,7 @@ const Combined = ({ timelineItem }: CombinedProps) => {
   return (
     <div className="flex flex-wrap items-center space-x-1 pb-4 text-[13px] text-gray-500 leading-6 dark:text-gray-200">
       <SparklesIcon className="size-4" />
-      <Accounts accounts={getAllAccounts()} />
+      <Accounts accounts={accounts} />
       <div className="flex items-center space-x-1">
         {actionArray.map((action, index) => (
           <Fragment key={action}>

apps/web/src/components/Home/Timeline/EventType/Reposted.tsx

@@ -1,25 +1,28 @@
 import { ArrowsRightLeftIcon } from "@heroicons/react/24/outline";
 import type { RepostFragment } from "@hey/indexer";
+import { useMemo } from "react";
 import Accounts from "@/components/Shared/Account/Accounts";
 
 interface RepostedProps {
   reposts: RepostFragment[];
 }
 
 const Reposted = ({ reposts }: RepostedProps) => {
-  const getRepostedAccounts = () => {
-    let accounts = reposts.map((repost) => repost.author);
-    accounts = accounts.filter(
-      (account, index, self) =>
-        index === self.findIndex((t) => t.address === account.address)
-    );
-    return accounts;
-  };
+  const accounts = useMemo(
+    () =>
+      reposts
+        .map((repost) => repost.author)
+        .filter(
+          (account, index, self) =>
+            index === self.findIndex((t) => t.address === account.address)
+        ),
+    [reposts]
+  );
 
   return (
     <div className="mb-3 flex items-center space-x-1 text-[13px] text-gray-500 dark:text-gray-200">
       <ArrowsRightLeftIcon className="size-4" />
-      <Accounts accounts={getRepostedAccounts()} context="reposted" />
+      <Accounts accounts={accounts} context="reposted" />
     </div>
   );
 };