Hey is a decentralized and permissionless social media app built with Lens Protocol 🌿

feat: memoize heavy computations (#5841)

authored by yoginth.com and committed by

GitHub cb7c3e7d 72ee5b37

+28 -23
+4 -4
apps/web/src/components/Account/FollowersYouKnowOverview.tsx
··· 2 2 import getAccount from "@hey/helpers/getAccount"; 3 3 import getAvatar from "@hey/helpers/getAvatar"; 4 4 import { type Follower, useFollowersYouKnowQuery } from "@hey/indexer"; 5 - import { type ReactNode, useEffect, useState } from "react"; 5 + import { type ReactNode, useEffect, useMemo, useState } from "react"; 6 6 import { useLocation } from "react-router"; 7 7 import FollowersYouKnow from "@/components/Shared/Modal/FollowersYouKnow"; 8 8 import FollowersYouKnowShimmer from "@/components/Shared/Shimmer/FollowersYouKnowShimmer"; ··· 37 37 const accounts = 38 38 (data?.followersYouKnow?.items.slice(0, 4) as unknown as Follower[]) || []; 39 39 40 - const renderAccountNames = () => { 40 + const accountNames = useMemo(() => { 41 41 const names = accounts.map( 42 42 (account) => getAccount(account.follower as any).name 43 43 ); ··· 50 50 return `${names[0]}, ${names[1]}${count === 0 ? " and " : ", "}${names[2]}${count ? ` and ${count} other${count === 1 ? "" : "s"}` : ""}`; 51 51 52 52 return `${names[0]}, ${names[1]}, ${names[2]} and others`; 53 - }; 53 + }, [accounts]); 54 54 55 55 const Wrapper = ({ children }: { children: ReactNode }) => ( 56 56 <button ··· 86 86 return null; 87 87 } 88 88 89 - return <Wrapper>{renderAccountNames()}</Wrapper>; 89 + return <Wrapper>{accountNames}</Wrapper>; 90 90 }; 91 91 92 92 export default FollowersYouKnowOverview;
+12 -10
apps/web/src/components/Home/Timeline/EventType/Combined.tsx
··· 1 1 import { SparklesIcon } from "@heroicons/react/24/outline"; 2 2 import type { TimelineItemFragment } from "@hey/indexer"; 3 - import { Fragment } from "react"; 3 + import { Fragment, useMemo } from "react"; 4 4 import Accounts from "@/components/Shared/Account/Accounts"; 5 5 6 6 interface CombinedProps { ··· 12 12 13 13 const repostsLength = reposts.length; 14 14 15 - const getAllAccounts = () => { 16 - let accounts = reposts.map((event) => event.author); 17 - accounts = accounts.filter( 18 - (account, index, self) => 19 - index === self.findIndex((t) => t.address === account.address) 20 - ); 21 - return accounts; 22 - }; 15 + const accounts = useMemo( 16 + () => 17 + reposts 18 + .map((event) => event.author) 19 + .filter( 20 + (account, index, self) => 21 + index === self.findIndex((t) => t.address === account.address) 22 + ), 23 + [reposts] 24 + ); 23 25 24 26 const actionArray = []; 25 27 if (repostsLength) { ··· 29 31 return ( 30 32 <div className="flex flex-wrap items-center space-x-1 pb-4 text-[13px] text-gray-500 leading-6 dark:text-gray-200"> 31 33 <SparklesIcon className="size-4" /> 32 - <Accounts accounts={getAllAccounts()} /> 34 + <Accounts accounts={accounts} /> 33 35 <div className="flex items-center space-x-1"> 34 36 {actionArray.map((action, index) => ( 35 37 <Fragment key={action}>
+12 -9
apps/web/src/components/Home/Timeline/EventType/Reposted.tsx
··· 1 1 import { ArrowsRightLeftIcon } from "@heroicons/react/24/outline"; 2 2 import type { RepostFragment } from "@hey/indexer"; 3 + import { useMemo } from "react"; 3 4 import Accounts from "@/components/Shared/Account/Accounts"; 4 5 5 6 interface RepostedProps { ··· 7 8 } 8 9 9 10 const Reposted = ({ reposts }: RepostedProps) => { 10 - const getRepostedAccounts = () => { 11 - let accounts = reposts.map((repost) => repost.author); 12 - accounts = accounts.filter( 13 - (account, index, self) => 14 - index === self.findIndex((t) => t.address === account.address) 15 - ); 16 - return accounts; 17 - }; 11 + const accounts = useMemo( 12 + () => 13 + reposts 14 + .map((repost) => repost.author) 15 + .filter( 16 + (account, index, self) => 17 + index === self.findIndex((t) => t.address === account.address) 18 + ), 19 + [reposts] 20 + ); 18 21 19 22 return ( 20 23 <div className="mb-3 flex items-center space-x-1 text-[13px] text-gray-500 dark:text-gray-200"> 21 24 <ArrowsRightLeftIcon className="size-4" /> 22 - <Accounts accounts={getRepostedAccounts()} context="reposted" /> 25 + <Accounts accounts={accounts} context="reposted" /> 23 26 </div> 24 27 ); 25 28 };