perf: Memoize toggle view (pancakeswap#4145)

cryptojoks · Jun 28, 2022 · aa568f0 · aa568f0
1 parent cf4cf34
commit aa568f0
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git a/src/components/ToggleView/ToggleView.tsx b/src/components/ToggleView/ToggleView.tsx
@@ -1,3 +1,4 @@
+import { useCallback } from 'react'
 import styled from 'styled-components'
 import { ListViewIcon, CardViewIcon, IconButton } from '@pancakeswap/uikit'
 import { ViewMode } from 'state/user/actions'
@@ -17,18 +18,24 @@ const Container = styled.div`
 `
 
 const ToggleView: React.FunctionComponent<ToggleViewProps> = ({ idPrefix, viewMode, onToggle }) => {
-  const handleToggle = (mode: ViewMode) => {
-    if (viewMode !== mode) {
-      onToggle(mode)
+  const handleToggleCard = useCallback(() => {
+    if (viewMode !== ViewMode.CARD) {
+      onToggle(ViewMode.CARD)
     }
-  }
+  }, [onToggle, viewMode])
+
+  const handleToggleTable = useCallback(() => {
+    if (viewMode !== ViewMode.TABLE) {
+      onToggle(ViewMode.TABLE)
+    }
+  }, [onToggle, viewMode])
 
   return (
     <Container>
-      <IconButton variant="text" scale="sm" id={`${idPrefix}CardView`} onClick={() => handleToggle(ViewMode.CARD)}>
+      <IconButton variant="text" scale="sm" id={`${idPrefix}CardView`} onClick={handleToggleCard}>
         <CardViewIcon color={viewMode === ViewMode.CARD ? 'primary' : 'textDisabled'} />
       </IconButton>
-      <IconButton variant="text" scale="sm" id={`${idPrefix}TableView`} onClick={() => handleToggle(ViewMode.TABLE)}>
+      <IconButton variant="text" scale="sm" id={`${idPrefix}TableView`} onClick={handleToggleTable}>
         <ListViewIcon color={viewMode === ViewMode.TABLE ? 'primary' : 'textDisabled'} />
       </IconButton>
     </Container>

diff --git a/src/views/Farms/Farms.tsx b/src/views/Farms/Farms.tsx
@@ -371,7 +371,7 @@ const Farms: React.FC = ({ children }) => {
       <Page>
         <ControlContainer>
           <ViewControls>
-            <ToggleView idPrefix="clickFarm" viewMode={viewMode} onToggle={(mode: ViewMode) => setViewMode(mode)} />
+            <ToggleView idPrefix="clickFarm" viewMode={viewMode} onToggle={setViewMode} />
             <ToggleWrapper>
               <Toggle
                 id="staked-only-farms"

diff --git a/src/views/Nft/market/Collections/index.tsx b/src/views/Nft/market/Collections/index.tsx
@@ -178,11 +178,7 @@ const Collectible = () => {
               pl={['4px', null, '0']}
               mb="8px"
             >
-              <ToggleView
-                idPrefix="clickCollection"
-                viewMode={viewMode}
-                onToggle={(mode: ViewMode) => setViewMode(mode)}
-              />
+              <ToggleView idPrefix="clickCollection" viewMode={viewMode} onToggle={setViewMode} />
               <Flex width="max-content" style={{ gap: '4px' }} flexDirection="column">
                 <Text fontSize="12px" textTransform="uppercase" color="textSubtle" fontWeight={600}>
                   {t('Sort By')}

diff --git a/src/views/Pools/components/PoolTabButtons.tsx b/src/views/Pools/components/PoolTabButtons.tsx
@@ -1,6 +1,5 @@
 import { NextLinkFromReactRouter } from 'components/NextLink'
 import ToggleView from 'components/ToggleView/ToggleView'
-import { ViewMode } from 'state/user/actions'
 import { useRouter } from 'next/router'
 import styled from 'styled-components'
 import { ButtonMenu, ButtonMenuItem, Toggle, Text, NotificationDot } from '@pancakeswap/uikit'
@@ -59,9 +58,7 @@ const PoolTabButtons = ({ stakedOnly, setStakedOnly, hasStakeInFinishedPools, vi
 
   const isExact = router.asPath === '/pools'
 
-  const viewModeToggle = (
-    <ToggleView idPrefix="clickPool" viewMode={viewMode} onToggle={(mode: ViewMode) => setViewMode(mode)} />
-  )
+  const viewModeToggle = <ToggleView idPrefix="clickPool" viewMode={viewMode} onToggle={setViewMode} />
 
   const liveOrFinishedSwitch = (
     <Wrapper>