fix: Memoize currency search modal config

pancakeswap · Jun 29, 2023 · b376da2 · b376da2
1 parent 094c5ac
commit b376da2
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 23 deletions.
diff --git a/apps/aptos/components/SearchModal/CurrencySearchModal.tsx b/apps/aptos/components/SearchModal/CurrencySearchModal.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState, useRef, useEffect } from 'react'
+import { useCallback, useState, useRef, useEffect, useMemo } from 'react'
 import { Currency, Token } from '@pancakeswap/aptos-swap-sdk'
 import {
   ModalContainer,
@@ -89,16 +89,19 @@ export default function CurrencySearchModal({
 
   const { t } = useTranslation()
 
-  const config = {
-    [CurrencyModalView.search]: { title: t('Select a Token'), onBack: undefined },
-    [CurrencyModalView.manage]: { title: t('Manage'), onBack: () => setModalView(CurrencyModalView.search) },
-    [CurrencyModalView.importToken]: {
-      title: t('Import Tokens'),
-      onBack: () =>
-        setModalView(prevView && prevView !== CurrencyModalView.importToken ? prevView : CurrencyModalView.search),
-    },
-    [CurrencyModalView.importList]: { title: t('Import List'), onBack: () => setModalView(CurrencyModalView.search) },
-  }
+  const config = useMemo(
+    () => ({
+      [CurrencyModalView.search]: { title: t('Select a Token'), onBack: undefined },
+      [CurrencyModalView.manage]: { title: t('Manage'), onBack: () => setModalView(CurrencyModalView.search) },
+      [CurrencyModalView.importToken]: {
+        title: t('Import Tokens'),
+        onBack: () =>
+          setModalView(prevView && prevView !== CurrencyModalView.importToken ? prevView : CurrencyModalView.search),
+      },
+      [CurrencyModalView.importList]: { title: t('Import List'), onBack: () => setModalView(CurrencyModalView.search) },
+    }),
+    [t, prevView],
+  )
   const { isMobile } = useMatchBreakpoints()
   const wrapperRef = useRef<HTMLDivElement>(null)
   const [height, setHeight] = useState<number | undefined>(undefined)

diff --git a/apps/web/src/components/SearchModal/CurrencySearchModal.tsx b/apps/web/src/components/SearchModal/CurrencySearchModal.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState, useRef, useEffect } from 'react'
+import { useCallback, useState, useRef, useEffect, useMemo } from 'react'
 import { Currency, Token } from '@pancakeswap/sdk'
 import {
   ModalContainer,
@@ -120,16 +120,19 @@ export default function CurrencySearchModal({
       })
   }, [adding, dispatch, fetchList, listURL])
 
-  const config = {
-    [CurrencyModalView.search]: { title: t('Select a Token'), onBack: undefined },
-    [CurrencyModalView.manage]: { title: t('Manage'), onBack: () => setModalView(CurrencyModalView.search) },
-    [CurrencyModalView.importToken]: {
-      title: t('Import Tokens'),
-      onBack: () =>
-        setModalView(prevView && prevView !== CurrencyModalView.importToken ? prevView : CurrencyModalView.search),
-    },
-    [CurrencyModalView.importList]: { title: t('Import List'), onBack: () => setModalView(CurrencyModalView.search) },
-  }
+  const config = useMemo(
+    () => ({
+      [CurrencyModalView.search]: { title: t('Select a Token'), onBack: undefined },
+      [CurrencyModalView.manage]: { title: t('Manage'), onBack: () => setModalView(CurrencyModalView.search) },
+      [CurrencyModalView.importToken]: {
+        title: t('Import Tokens'),
+        onBack: () =>
+          setModalView(prevView && prevView !== CurrencyModalView.importToken ? prevView : CurrencyModalView.search),
+      },
+      [CurrencyModalView.importList]: { title: t('Import List'), onBack: () => setModalView(CurrencyModalView.search) },
+    }),
+    [t, prevView],
+  )
   const { isMobile } = useMatchBreakpoints()
   const wrapperRef = useRef<HTMLDivElement>(null)
   const [height, setHeight] = useState(undefined)

diff --git a/apps/web/src/views/Pools/components/LockedPool/hooks/useLockedPool.tsx b/apps/web/src/views/Pools/components/LockedPool/hooks/useLockedPool.tsx
@@ -50,7 +50,7 @@ export default function useLockedPool(hookArgs: HookArgs): HookReturn {
   const { t } = useTranslation()
   const { mutate } = useSWRConfig()
   const { toastSuccess } = useToast()
-  const [duration, setDuration] = useState(() => defaultDuration)
+  const [duration, setDuration] = useState(defaultDuration)
   const usdValueStaked = useBUSDCakeAmount(lockedAmount.toNumber())
 
   const handleDeposit = useCallback(