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

refactor: memoize functional components in Layout, ThreadBody, List, TipMenu, Navbar, and WhoToFollow for improved performance

yoginth.com d4e85d0f 1c463a8d

verified
+17 -16
+2 -2
apps/web/src/components/Common/Layout.tsx
··· 2 2 import { BANNER_IDS } from "@hey/data/constants"; 3 3 import { useMeQuery } from "@hey/indexer"; 4 4 import { useIsClient } from "@uidotdev/usehooks"; 5 - import { useEffect } from "react"; 5 + import { memo, useEffect } from "react"; 6 6 import { Outlet, useLocation } from "react-router"; 7 7 import { Toaster, type ToasterProps } from "sonner"; 8 8 import FullPageLoader from "@/components/Shared/FullPageLoader"; ··· 83 83 ); 84 84 }; 85 85 86 - export default Layout; 86 + export default memo(Layout);
+2 -1
apps/web/src/components/Post/ThreadBody.tsx
··· 1 1 import type { PostFragment } from "@hey/indexer"; 2 + import { memo } from "react"; 2 3 import PostWrapper from "@/components/Shared/Post/PostWrapper"; 3 4 import PostActions from "./Actions"; 4 5 import HiddenPost from "./HiddenPost"; ··· 32 33 ); 33 34 }; 34 35 35 - export default ThreadBody; 36 + export default memo(ThreadBody);
+2 -2
apps/web/src/components/Settings/Sessions/List.tsx
··· 7 7 } from "@hey/indexer"; 8 8 import type { ApolloClientError } from "@hey/types/errors"; 9 9 import { format } from "date-fns"; 10 - import { useCallback, useState } from "react"; 10 + import { memo, useCallback, useState } from "react"; 11 11 import { toast } from "sonner"; 12 12 import { WindowVirtualizer } from "virtua"; 13 13 import Loader from "@/components/Shared/Loader"; ··· 160 160 ); 161 161 }; 162 162 163 - export default List; 163 + export default memo(List);
+6 -6
apps/web/src/components/Shared/Navbar/index.tsx
··· 14 14 UserGroupIcon as UserGroupSolid 15 15 } from "@heroicons/react/24/solid"; 16 16 import { STATIC_IMAGES_URL } from "@hey/data/constants"; 17 - import { type MouseEvent, type ReactNode, useCallback } from "react"; 17 + import { type MouseEvent, memo, type ReactNode, useCallback } from "react"; 18 18 import { Link, useLocation } from "react-router"; 19 19 import Pro from "@/components/Shared/Navbar/NavItems/Pro"; 20 20 import { Image, Tooltip } from "@/components/Shared/UI"; ··· 51 51 } 52 52 }; 53 53 54 - const NavItem = ({ url, icon }: { url: string; icon: ReactNode }) => ( 54 + const NavItem = memo(({ url, icon }: { url: string; icon: ReactNode }) => ( 55 55 <Tooltip content={navigationItems[url as keyof typeof navigationItems].title}> 56 56 <Link to={url}>{icon}</Link> 57 57 </Tooltip> 58 - ); 58 + )); 59 59 60 - const NavItems = ({ isLoggedIn }: { isLoggedIn: boolean }) => { 60 + const NavItems = memo(({ isLoggedIn }: { isLoggedIn: boolean }) => { 61 61 const { pathname } = useLocation(); 62 62 const routes = [ 63 63 "/", ··· 80 80 ))} 81 81 </> 82 82 ); 83 - }; 83 + }); 84 84 85 85 const Navbar = () => { 86 86 const { pathname } = useLocation(); ··· 130 130 ); 131 131 }; 132 132 133 - export default Navbar; 133 + export default memo(Navbar);
+3 -3
apps/web/src/components/Shared/Sidebar/WhoToFollow.tsx
··· 4 4 PageSize, 5 5 useAccountRecommendationsQuery 6 6 } from "@hey/indexer"; 7 - import { useState } from "react"; 7 + import { memo, useState } from "react"; 8 8 import Suggested from "@/components/Home/Suggested"; 9 9 import DismissRecommendedAccount from "@/components/Shared/Account/DismissRecommendedAccount"; 10 10 import SingleAccount from "@/components/Shared/Account/SingleAccount"; ··· 13 13 import { Card, ErrorMessage, H5, Modal } from "@/components/Shared/UI"; 14 14 import { useAccountStore } from "@/store/persisted/useAccountStore"; 15 15 16 - const Title = () => <H5>Who to Follow</H5>; 16 + const Title = memo(() => <H5>Who to Follow</H5>); 17 17 18 18 const WhoToFollow = () => { 19 19 const { currentAccount } = useAccountStore(); ··· 106 106 ); 107 107 }; 108 108 109 - export default WhoToFollow; 109 + export default memo(WhoToFollow);
+2 -2
apps/web/src/components/Shared/TipMenu.tsx
··· 10 10 } from "@hey/indexer"; 11 11 import type { ApolloClientError } from "@hey/types/errors"; 12 12 import type { ChangeEvent, RefObject } from "react"; 13 - import { useRef, useState } from "react"; 13 + import { memo, useRef, useState } from "react"; 14 14 import { toast } from "sonner"; 15 15 import TopUpButton from "@/components/Shared/Account/TopUp/Button"; 16 16 import LoginButton from "@/components/Shared/LoginButton"; ··· 249 249 ); 250 250 }; 251 251 252 - export default TipMenu; 252 + export default memo(TipMenu);