Optimize Hooks and Component Performance

app/(dashboard)/(components)/stat/index.tsx

@@ -1,7 +1,7 @@
 import { Card } from "@/components/card"
 import { Heading } from "@/components/heading"
 import s from "./stat.module.scss"
-import { JSX } from "react"
+import { JSX, memo } from "react" // Import memo
 
 interface StatProps {
   icon: string
@@ -11,7 +11,7 @@ interface StatProps {
   right?: string
 }
 
-export const Stat = ({ icon, label, value, left, right }: StatProps) => {
+export const Stat = memo(({ icon, label, value, left, right }: StatProps) => {
   return (
     <Card className={s.stat}>
       <Heading icon={icon} />
@@ -25,4 +25,6 @@ export const Stat = ({ icon, label, value, left, right }: StatProps) => {
       </div>
     </Card>
   )
-}
+})
+
+Stat.displayName = "Stat"

app/(dashboard)/page.tsx

@@ -13,10 +13,16 @@ import { Validators } from "./(components)/validators"
 import s from "./page.module.scss"
 import { Weights } from "./(components)/weights"
 import { formatNumber } from "@/lib/utils/number"
+import { useMemo } from "react"
 
 export default function Page() {
   const { lastBlockNumber, blockTime, gasPriceUSD } = useBlockInfo()
 
+  const formattedBlockNumber = useMemo(
+    () => formatNumber(lastBlockNumber),
+    [lastBlockNumber]
+  )
+
   return (
     <>
       <Grid className={s.top}>
@@ -27,7 +33,7 @@ export default function Page() {
           <Stat
             icon="hugeicons:blockchain-02"
             label="Block Height"
-            value={formatNumber(lastBlockNumber)}
+            value={formattedBlockNumber}
             left="#"
           />
         </Area>
@@ -79,4 +85,4 @@ export default function Page() {
       </Grid>
     </>
   )
-}
+}

app/delegations/(components)/active/index.tsx

@@ -1,26 +1,27 @@
 import { Card } from "@/components/card"
 import { Heading } from "@/components/heading"
 import { Table, TableCell, TableRow } from "@/components/table"
-// import { TOKENS } from "@/config/tokens"
 import { ValidatorRow } from "@/types/faker"
-// import { TokenWithAmount } from "@/types/Tokens"
 import { Row } from "./row"
 import { useDelegationInfo } from "@/hooks/useDelegationInfo"
 import { Message } from "@/components/message"
+import { useMemo } from "react"
 
 export const Active = () => {
   const { delegationsByValidator } = useDelegationInfo()
 
-  const validators: ValidatorRow[] = delegationsByValidator.map(
-    (validator) => ({
-      address: validator.validatorAddress,
-      name: validator.moniker,
-      commission: validator.commission,
-      apy: validator.apr,
-      assets: validator.tokens,
-      rewards: validator.rewards,
-      rewardsPrice: validator.rewardsPrice
-    })
+  const validators: ValidatorRow[] = useMemo(
+    () =>
+      delegationsByValidator.map((validator) => ({
+        address: validator.validatorAddress,
+        name: validator.moniker,
+        commission: validator.commission,
+        apy: validator.apr,
+        assets: validator.tokens,
+        rewards: validator.rewards,
+        rewardsPrice: validator.rewardsPrice
+      })),
+    [delegationsByValidator]
   )
 
   return (
@@ -32,14 +33,12 @@ export const Active = () => {
             <TableCell>Validator</TableCell>
             <TableCell>Staked Assets</TableCell>
             <TableCell>APY</TableCell>
-            {/* <TableCell>Pending Rewards</TableCell>
-            <TableCell>Last Reward</TableCell> */}
             <TableCell align="right">Actions</TableCell>
           </TableRow>
         </thead>
         <tbody>
-          {validators.map((validator, index) => (
-            <Row key={index} {...validator} />
+          {validators.map((validator) => (
+            <Row key={validator.address} {...validator} />
           ))}
         </tbody>
       </Table>
@@ -50,4 +49,4 @@ export const Active = () => {
       )}
     </Card>
   )
-}
+}