usecallbacks on fcns

components/governance/ListToken/ListToken.tsx

@@ -1,7 +1,7 @@
 import Input from '@components/forms/Input'
 import Label from '@components/forms/Label'
 import Button, { IconButton } from '@components/shared/Button'
-import { ChangeEvent, useEffect, useState } from 'react'
+import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react'
 import mangoStore, { CLUSTER } from '@store/mangoStore'
 import { Token } from 'types/jupiter'
 import { handleGetRoutes } from '@components/swap/useQuoteRoutes'
@@ -102,10 +102,14 @@ const ListToken = ({ goBack }: { goBack: () => void }) => {
   const [proposalPk, setProposalPk] = useState<string | null>(null)
   const [mint, setMint] = useState('')
   const [creatingProposal, setCreatingProposal] = useState(false)
-  const minVoterWeight = governances
+  const minVoterWeight = useMemo(
+    () =>
+      governances
         ? governances[MANGO_DAO_WALLET_GOVERNANCE.toBase58()].account.config
             .minCommunityTokensToCreateProposal
-    : new BN(0)
+        : new BN(0),
+    [governances]
+  )
   const mintVoterWeightNumber = governances
     ? fmtTokenAmount(minVoterWeight, MANGO_MINT_DECIMALS)
     : 0
@@ -137,7 +141,7 @@ const ListToken = ({ goBack }: { goBack: () => void }) => {
     }
   }
 
-  const getTokenList = async () => {
+  const getTokenList = useCallback(async () => {
     try {
       const url =
         CLUSTER === 'devnet' ? JUPITER_API_DEVNET : JUPITER_API_MAINNET
@@ -152,9 +156,10 @@ const ListToken = ({ goBack }: { goBack: () => void }) => {
       })
       return []
     }
-  }
+  }, [t])
 
-  const getListingParams = async (tokenInfo: Token) => {
+  const getListingParams = useCallback(
+    async (tokenInfo: Token) => {
       setLoadingListingParams(true)
       const [oraclePk, marketPk] = await Promise.all([
         getOracle({
@@ -199,9 +204,12 @@ const ListToken = ({ goBack }: { goBack: () => void }) => {
         proposalTitle: `List ${tokenInfo.symbol} on Mango-v4`,
       })
       setLoadingListingParams(false)
-  }
+    },
+    [advForm, client.programId, connection, group, mint, proposals]
+  )
 
-  const handleLiqudityCheck = async (tokenMint: PublicKey) => {
+  const handleLiqudityCheck = useCallback(
+    async (tokenMint: PublicKey) => {
       try {
         //we check price impact on token for 10k USDC
         const USDC_AMOUNT = 10000000000
@@ -225,7 +233,9 @@ const ListToken = ({ goBack }: { goBack: () => void }) => {
           type: 'error',
         })
       }
-  }
+    },
+    [t, wallet.publicKey]
+  )
 
   const cancel = () => {
     setCurrentTokenInfo(null)
@@ -234,7 +244,47 @@ const ListToken = ({ goBack }: { goBack: () => void }) => {
     setProposalPk(null)
   }
 
-  const propose = async () => {
+  const isFormValid = useCallback(
+    (advForm: TokenListForm) => {
+      const invalidFields: FormErrors = {}
+      setFormErrors({})
+      const pubkeyFields: (keyof TokenListForm)[] = [
+        'openBookProgram',
+        'quoteBankPk',
+        'baseBankPk',
+        'openBookMarketExternalPk',
+        'oraclePk',
+      ]
+      const numberFields: (keyof TokenListForm)[] = ['tokenIndex']
+      const textFields: (keyof TokenListForm)[] = [
+        'marketName',
+        'proposalTitle',
+      ]
+
+      for (const key of pubkeyFields) {
+        if (!tryGetPubKey(advForm[key] as string)) {
+          invalidFields[key] = t('invalid-pk')
+        }
+      }
+      for (const key of numberFields) {
+        if (isNaN(advForm[key] as number) || advForm[key] === '') {
+          invalidFields[key] = t('invalid-num')
+        }
+      }
+      for (const key of textFields) {
+        if (!advForm[key]) {
+          invalidFields[key] = t('field-req')
+        }
+      }
+      if (Object.keys(invalidFields).length) {
+        setFormErrors(invalidFields)
+      }
+      return invalidFields
+    },
+    [t]
+  )
+
+  const propose = useCallback(async () => {
     const invalidFields = isFormValid(advForm)
     if (Object.keys(invalidFields).length) {
       return
@@ -305,45 +355,26 @@ const ListToken = ({ goBack }: { goBack: () => void }) => {
     }
 
     setCreatingProposal(false)
-  }
-
-  const isFormValid = (advForm: TokenListForm) => {
-    const invalidFields: FormErrors = {}
-    setFormErrors({})
-    const pubkeyFields: (keyof TokenListForm)[] = [
-      'openBookProgram',
-      'quoteBankPk',
-      'baseBankPk',
-      'openBookMarketExternalPk',
-      'oraclePk',
-    ]
-    const numberFields: (keyof TokenListForm)[] = ['tokenIndex']
-    const textFields: (keyof TokenListForm)[] = ['marketName', 'proposalTitle']
-
-    for (const key of pubkeyFields) {
-      if (!tryGetPubKey(advForm[key] as string)) {
-        invalidFields[key] = t('invalid-pk')
-      }
-    }
-    for (const key of numberFields) {
-      if (isNaN(advForm[key] as number) || advForm[key] === '') {
-        invalidFields[key] = t('invalid-num')
-      }
-    }
-    for (const key of textFields) {
-      if (!advForm[key]) {
-        invalidFields[key] = t('field-req')
-      }
-    }
-    if (Object.keys(invalidFields).length) {
-      setFormErrors(invalidFields)
-    }
-    return invalidFields
-  }
+  }, [
+    advForm,
+    client,
+    connection,
+    connectionContext,
+    getCurrentVotingPower,
+    group,
+    isFormValid,
+    minVoterWeight,
+    mintVoterWeightNumber,
+    t,
+    voter.tokenOwnerRecord,
+    voter.voteWeight,
+    vsrClient,
+    wallet,
+  ])
 
   useEffect(() => {
     setTokenList([])
-  }, [CLUSTER])
+  }, [])
 
   return (
     <div>