perf: (transaction-row): Don't create new element for each render

pancakeswap · Jul 7, 2023 · ddeafa6 · ddeafa6
1 parent 09be4f1
commit ddeafa6
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 20 deletions.
diff --git a/apps/web/src/components/Menu/UserMenu/TransactionRow.tsx b/apps/web/src/components/Menu/UserMenu/TransactionRow.tsx
@@ -6,6 +6,7 @@ import { TransactionDetails } from 'state/transactions/reducer'
 import { pickFarmTransactionTx } from 'state/global/actions'
 import { TransactionType, FarmTransactionStatus } from 'state/transactions/actions'
 import { getBlockExploreLink } from 'utils'
+import { useCallback, useMemo } from 'react'
 
 interface TransactionRowProps {
   txn: TransactionDetails
@@ -38,41 +39,40 @@ const TxnLink = styled.div`
   }
 `
 
-const renderIcon = (txn: TransactionDetails) => {
-  const { receipt, nonBscFarm } = txn
-  if (!txn.receipt || nonBscFarm?.status === FarmTransactionStatus.PENDING) {
-    return <RefreshIcon spin width="24px" />
-  }
-
-  const isFarmStatusSuccess = nonBscFarm ? nonBscFarm.status === FarmTransactionStatus.SUCCESS : true
-  return (receipt?.status === 1 && isFarmStatusSuccess) || typeof receipt?.status === 'undefined' ? (
-    <CheckmarkCircleIcon color="success" width="24px" />
-  ) : (
-    <BlockIcon color="failure" width="24px" />
-  )
-}
-
 const TransactionRow: React.FC<React.PropsWithChildren<TransactionRowProps>> = ({ txn, chainId, type, onDismiss }) => {
   const { t } = useTranslation()
   const dispatch = useAppDispatch()
+  const { receipt, nonBscFarm } = txn || {}
+  const isFarmStatusSuccess = useMemo(
+    () => (nonBscFarm ? nonBscFarm.status === FarmTransactionStatus.SUCCESS : true),
+    [nonBscFarm],
+  )
 
-  const onClickTransaction = () => {
+  const onClickTransaction = useCallback(() => {
     if (type === 'non-bsc-farm') {
       onDismiss()
       dispatch(pickFarmTransactionTx({ tx: txn.hash, chainId }))
     } else {
       const url = getBlockExploreLink(txn.hash, 'transaction', chainId)
       window.open(url, '_blank', 'noopener noreferrer')
     }
-  }
+  }, [chainId, dispatch, onDismiss, txn?.hash, type])
 
   if (!txn) {
     return null
   }
 
   return (
     <TxnLink onClick={onClickTransaction}>
-      <TxnIcon>{renderIcon(txn)}</TxnIcon>
+      <TxnIcon>
+        {!txn.receipt || nonBscFarm?.status === FarmTransactionStatus.PENDING ? (
+          <RefreshIcon spin width="24px" />
+        ) : (receipt?.status === 1 && isFarmStatusSuccess) || typeof receipt?.status === 'undefined' ? (
+          <CheckmarkCircleIcon color="success" width="24px" />
+        ) : (
+          <BlockIcon color="failure" width="24px" />
+        )}
+      </TxnIcon>
       <Summary>
         {txn.translatableSummary
           ? t(txn.translatableSummary.text, txn.translatableSummary.data)

diff --git a/apps/web/src/components/Menu/UserMenu/WalletTransactions.tsx b/apps/web/src/components/Menu/UserMenu/WalletTransactions.tsx
@@ -1,12 +1,13 @@
+import { useCallback } from 'react'
 import styled from 'styled-components'
+import { chains } from 'utils/wagmi'
 import { Box, Button, Flex, Text } from '@pancakeswap/uikit'
 import { useAppDispatch } from 'state'
 import { useAllSortedRecentTransactions } from 'state/transactions/hooks'
 import { useTranslation } from '@pancakeswap/localization'
 import { clearAllTransactions } from 'state/transactions/actions'
 import isEmpty from 'lodash/isEmpty'
 import TransactionRow from './TransactionRow'
-import { chains } from '../../../utils/wagmi'
 
 const TransactionsContainer = styled(Box)`
   max-height: 300px;
@@ -24,9 +25,9 @@ const WalletTransactions: React.FC<React.PropsWithChildren<WalletTransactionsPro
 
   const hasTransactions = !isEmpty(sortedTransactions)
 
-  const handleClearAll = () => {
+  const handleClearAll = useCallback(() => {
     dispatch(clearAllTransactions())
-  }
+  }, [dispatch])
 
   return (
     <Box minHeight="120px">