refactor code to minimize renders and code exec

Author: pettinarip

src/components/FindWallet/MobileFiltersMenu.tsx

@@ -10,8 +10,6 @@ import {
   Flex,
 } from "@chakra-ui/react"
 
-import type { Wallet } from "@/lib/types"
-
 import { Button } from "@/components/Buttons"
 
 import OldHeading from "../OldHeading"
@@ -23,17 +21,15 @@ import WalletFilterSidebar, {
   WalletFilterSidebarProps,
 } from "./WalletFilterSidebar"
 
-import { useWalletTable } from "@/hooks/useWalletTable"
-
 type MobileFiltersMenuProps = WalletFilterSidebarProps & {
-  walletData: Wallet[]
   showMobileSidebar: boolean
   onOpen: () => void
   onClose: () => void
+  totalWallets: number
 }
 
 export const MobileFiltersMenu = ({
-  walletData,
+  totalWallets,
   filters,
   resetWalletFilter,
   resetFilters,
@@ -47,7 +43,6 @@ export const MobileFiltersMenu = ({
   onClose,
 }: MobileFiltersMenuProps) => {
   const { t } = useTranslation("page-wallets-find-wallet")
-  const { filteredWallets } = useWalletTable({ filters, t, walletData })
 
   return (
     <>
@@ -128,8 +123,7 @@ export const MobileFiltersMenu = ({
               </Box>
 
               <Button w="100%" flex={1} onClick={onClose}>
-                {t("page-find-wallet-see-wallets")}{" "}
-                {`(${filteredWallets.length})`}
+                {t("page-find-wallet-see-wallets")} {`(${totalWallets})`}
               </Button>
             </Flex>
           </DrawerBody>

src/components/FindWallet/WalletTable/index.tsx

@@ -16,7 +16,7 @@ import {
   Text,
 } from "@chakra-ui/react"
 
-import type { ChildOnlyProp, Wallet, WalletFilter } from "@/lib/types"
+import type { ChildOnlyProp, WalletFilter } from "@/lib/types"
 
 import { ButtonLink } from "@/components/Buttons"
 import { WalletMoreInfo } from "@/components/FindWallet/WalletTable/WalletMoreInfo"
@@ -196,28 +196,30 @@ const FlexInfoCenter = (props: { children: ReactNode; className?: string }) => (
   />
 )
 
+type UseWalletTable = ReturnType<typeof useWalletTable>
+
 export type WalletTableProps = {
   filters: WalletFilter
   resetFilters: () => void
   resetWalletFilter: React.MutableRefObject<() => void>
-  walletData: Wallet[]
+  filteredWallets: UseWalletTable["filteredWallets"]
+  totalWallets: number
+  updateMoreInfo: (key: string) => void
+  featureDropdownItems: UseWalletTable["featureDropdownItems"]
   onOpen: () => void
 }
 
 const WalletTable = ({
   filters,
   resetFilters,
   resetWalletFilter,
-  walletData,
+  filteredWallets,
+  totalWallets,
+  updateMoreInfo,
+  featureDropdownItems,
   onOpen,
 }: WalletTableProps) => {
   const { t } = useTranslation("page-wallets-find-wallet")
-  const {
-    featureDropdownItems,
-    filteredWallets,
-    updateMoreInfo,
-    walletCardData,
-  } = useWalletTable({ filters, t, walletData })
 
   // Context API
   const { supportedLanguage } = useContext(WalletSupportedLanguageContext)
@@ -232,6 +234,17 @@ const WalletTable = ({
     })
   }
 
+  const showMoreInfo = (wallet) => {
+    updateMoreInfo(wallet.key)
+    // Log "more info" event only on expanding
+    wallet.moreInfo &&
+      trackCustomEvent({
+        eventCategory: "WalletMoreInfo",
+        eventAction: `More info wallet`,
+        eventName: `More info ${wallet.name}`,
+      })
+  }
+
   return (
     <Container>
       <WalletContentHeader>
@@ -254,16 +267,16 @@ const WalletTable = ({
               })`}
             </Text>
 
-            {filteredWallets.length === walletCardData.length ? (
+            {filteredWallets.length === totalWallets ? (
               <Text ps={{ base: 2, md: 0 }} as="span">
                 {t("page-find-wallet-showing-all-wallets")} (
-                <strong>{walletCardData.length}</strong>)
+                <strong>{totalWallets}</strong>)
               </Text>
             ) : (
               <Text ps={{ base: 2, md: 0 }} as="span">
                 {t("page-find-wallet-showing")}{" "}
                 <strong>
-                  {filteredWallets.length} / {walletCardData.length}
+                  {filteredWallets.length} / {totalWallets}
                 </strong>{" "}
                 {t("page-find-wallet-wallets")}
               </Text>
@@ -296,17 +309,6 @@ const WalletTable = ({
           const hasDeviceLabels = deviceLabels.length > 0
           const hasAllLabels = hasPersonasLabels && hasDeviceLabels
 
-          const showMoreInfo = (wallet) => {
-            updateMoreInfo(wallet.key)
-            // Log "more info" event only on expanding
-            wallet.moreInfo &&
-              trackCustomEvent({
-                eventCategory: "WalletMoreInfo",
-                eventAction: `More info wallet`,
-                eventName: `More info ${wallet.name}`,
-              })
-          }
-
           return (
             <WalletContainer
               key={wallet.key}

src/hooks/useWalletTable.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react"
+import { useContext, useState } from "react"
 
 import type { DropdownOption, Wallet, WalletFilter } from "@/lib/types"
 
@@ -120,20 +120,12 @@ export const useWalletTable = ({
     },
   ]
 
-  const [walletCardData, setWalletData] = useState(
+  const [walletCardData, setWalletData] = useState(() =>
     walletData.map((wallet) => {
       return { ...wallet, moreInfo: false, key: wallet.name }
     })
   )
 
-  useEffect(() => {
-    setWalletData(
-      walletData.map((wallet) => {
-        return { ...wallet, moreInfo: false, key: wallet.name }
-      })
-    )
-  }, [walletData])
-
   // Context API for language filter
   const { supportedLanguage } = useContext(WalletSupportedLanguageContext)
 

src/pages/wallets/find-wallet.tsx

@@ -35,6 +35,7 @@ import {
 } from "@/lib/constants"
 
 import { WalletSupportedLanguageContext } from "@/contexts/WalletSupportedLanguageContext"
+import { useWalletTable } from "@/hooks/useWalletTable"
 import HeroImage from "@/public/wallets/wallet-hero.png"
 
 const Subtitle = ({ children }: ChildOnlyProp) => (
@@ -98,6 +99,13 @@ const FindWalletPage = ({
 
   const { isOpen: showMobileSidebar, onOpen, onClose } = useDisclosure()
 
+  const {
+    featureDropdownItems,
+    filteredWallets,
+    updateMoreInfo,
+    walletCardData,
+  } = useWalletTable({ filters, t, walletData: wallets })
+
   const updateFilterOption = (key) => {
     const updatedFilters = { ...filters }
     updatedFilters[key] = !updatedFilters[key]
@@ -197,7 +205,7 @@ const FindWalletPage = ({
         {/* Mobile filters menu */}
         <Box hideFrom="lg">
           <MobileFiltersMenu
-            walletData={wallets}
+            totalWallets={filteredWallets.length}
             filters={filters}
             resetWalletFilter={resetWalletFilter}
             updateFilterOption={updateFilterOption}
@@ -236,7 +244,10 @@ const FindWalletPage = ({
                 filters={filters}
                 resetFilters={resetFilters}
                 resetWalletFilter={resetWalletFilter}
-                walletData={wallets}
+                filteredWallets={filteredWallets}
+                totalWallets={walletCardData.length}
+                updateMoreInfo={updateMoreInfo}
+                featureDropdownItems={featureDropdownItems}
                 onOpen={onOpen}
               />
             </Box>