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

Configure Feed

Select the types of activity you want to include in your feed.

refactor: memoize functional components in NotificationAccountAvatar, NotificationAccountName, HiddenPost, Comment, Accounts, New, Bookmarks, Groups, and Settings for improved performance

yoginth.com 1c463a8d 1db1a1f1

verified
+58 -50
+44 -43
apps/web/src/components/Notification/Account.tsx
··· 2 2 import getAccount from "@hey/helpers/getAccount"; 3 3 import getAvatar from "@hey/helpers/getAvatar"; 4 4 import type { AccountFragment } from "@hey/indexer"; 5 + import { memo } from "react"; 5 6 import AccountLink from "@/components/Shared/Account/AccountLink"; 6 7 import AccountPreview from "@/components/Shared/Account/AccountPreview"; 7 8 import { Image } from "@/components/Shared/UI"; ··· 11 12 account: AccountFragment; 12 13 } 13 14 14 - export const NotificationAccountAvatar = ({ 15 - account 16 - }: NotificationAccountProps) => { 17 - return ( 18 - <AccountPreview 19 - address={account.address} 20 - username={account.username?.localName} 21 - > 22 - <AccountLink 23 - account={account} 24 - className="rounded-full outline-offset-2" 25 - onClick={stopEventPropagation} 15 + export const NotificationAccountAvatar = memo( 16 + ({ account }: NotificationAccountProps) => { 17 + return ( 18 + <AccountPreview 19 + address={account.address} 20 + username={account.username?.localName} 26 21 > 27 - <Image 28 - alt={account.address} 29 - className="size-7 rounded-full border border-gray-200 bg-gray-200 sm:size-8 dark:border-gray-700" 30 - height={32} 31 - src={getAvatar(account)} 32 - width={32} 33 - /> 34 - </AccountLink> 35 - </AccountPreview> 36 - ); 37 - }; 22 + <AccountLink 23 + account={account} 24 + className="rounded-full outline-offset-2" 25 + onClick={stopEventPropagation} 26 + > 27 + <Image 28 + alt={account.address} 29 + className="size-7 rounded-full border border-gray-200 bg-gray-200 sm:size-8 dark:border-gray-700" 30 + height={32} 31 + src={getAvatar(account)} 32 + width={32} 33 + /> 34 + </AccountLink> 35 + </AccountPreview> 36 + ); 37 + } 38 + ); 38 39 39 - export const NotificationAccountName = ({ 40 - account 41 - }: NotificationAccountProps) => { 42 - return ( 43 - <AccountPreview 44 - address={account.address} 45 - username={account.username?.localName} 46 - > 47 - <AccountLink 48 - account={account} 49 - className="inline-flex items-center gap-1 font-bold outline-hidden hover:underline focus:underline" 50 - onClick={stopEventPropagation} 40 + export const NotificationAccountName = memo( 41 + ({ account }: NotificationAccountProps) => { 42 + return ( 43 + <AccountPreview 44 + address={account.address} 45 + username={account.username?.localName} 51 46 > 52 - <span>{getAccount(account).name}</span> 53 - {account.hasSubscribed && ( 54 - <CheckBadgeIcon className="size-4 text-brand-500" /> 55 - )} 56 - </AccountLink> 57 - </AccountPreview> 58 - ); 59 - }; 47 + <AccountLink 48 + account={account} 49 + className="inline-flex items-center gap-1 font-bold outline-hidden hover:underline focus:underline" 50 + onClick={stopEventPropagation} 51 + > 52 + <span>{getAccount(account).name}</span> 53 + {account.hasSubscribed && ( 54 + <CheckBadgeIcon className="size-4 text-brand-500" /> 55 + )} 56 + </AccountLink> 57 + </AccountPreview> 58 + ); 59 + } 60 + );
+2 -1
apps/web/src/components/Post/Actions/Comment.tsx
··· 1 1 import { ChatBubbleLeftIcon } from "@heroicons/react/24/outline"; 2 2 import type { PostFragment } from "@hey/indexer"; 3 3 import { AnimateNumber } from "motion-plus-react"; 4 + import { memo } from "react"; 4 5 import { useNavigate } from "react-router"; 5 6 import { Tooltip } from "@/components/Shared/UI"; 6 7 import humanize from "@/helpers/humanize"; ··· 47 48 ); 48 49 }; 49 50 50 - export default Comment; 51 + export default memo(Comment);
+2 -1
apps/web/src/components/Post/HiddenPost.tsx
··· 1 + import { memo } from "react"; 1 2 import { Card } from "@/components/Shared/UI"; 2 3 3 4 interface HiddenPostProps { ··· 12 13 ); 13 14 }; 14 15 15 - export default HiddenPost; 16 + export default memo(HiddenPost);
+2 -1
apps/web/src/components/Shared/Account/Accounts.tsx
··· 1 1 import type { AccountFragment } from "@hey/indexer"; 2 2 import type { ReactNode } from "react"; 3 + import { memo } from "react"; 3 4 import FallbackAccountName from "@/components/Shared/FallbackAccountName"; 4 5 5 6 interface AccountsProps { ··· 66 67 return null; 67 68 }; 68 69 69 - export default Accounts; 70 + export default memo(Accounts);
+2 -1
apps/web/src/components/Shared/Badges/New.tsx
··· 1 1 import { SparklesIcon } from "@heroicons/react/24/solid"; 2 + import { memo } from "react"; 2 3 import { Badge } from "@/components/Shared/UI"; 3 4 4 5 const New = () => { ··· 10 11 ); 11 12 }; 12 13 13 - export default New; 14 + export default memo(New);
+2 -1
apps/web/src/components/Shared/Navbar/NavItems/Bookmarks.tsx
··· 1 1 import { BookmarkIcon } from "@heroicons/react/24/outline"; 2 + import { memo } from "react"; 2 3 import cn from "@/helpers/cn"; 3 4 4 5 interface BookmarksProps { ··· 19 20 ); 20 21 }; 21 22 22 - export default Bookmarks; 23 + export default memo(Bookmarks);
+2 -1
apps/web/src/components/Shared/Navbar/NavItems/Groups.tsx
··· 1 1 import { UserGroupIcon } from "@heroicons/react/24/outline"; 2 + import { memo } from "react"; 2 3 import cn from "@/helpers/cn"; 3 4 4 5 interface GroupsProps { ··· 19 20 ); 20 21 }; 21 22 22 - export default Groups; 23 + export default memo(Groups);
+2 -1
apps/web/src/components/Shared/Navbar/NavItems/Settings.tsx
··· 1 1 import { Cog6ToothIcon } from "@heroicons/react/24/outline"; 2 + import { memo } from "react"; 2 3 import cn from "@/helpers/cn"; 3 4 4 5 interface SettingsProps { ··· 19 20 ); 20 21 }; 21 22 22 - export default Settings; 23 + export default memo(Settings);