perf(app-board): add callback memo to panel tools

eficode · Jan 27, 2021 · ad90a6d · ad90a6d
1 parent 85bac8d
commit ad90a6d
Showing 1 changed file with 26 additions and 8 deletions.
diff --git a/packages/game-app/src/gameView/components/DeckPanel/DeckPanel.tsx b/packages/game-app/src/gameView/components/DeckPanel/DeckPanel.tsx
@@ -1,13 +1,12 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import DraggableCard from '../DraggableCard';
-import { AnimatedGrid, Box, IconButton, Input } from '@pipeline/components';
+import { AnimatedGrid, IconButton, Input } from '@pipeline/components';
 import { ReactComponent as StackedIcon } from '@assets/icons/stacked-view.svg';
 import { ReactComponent as TwoColumnsIcon } from '@assets/icons/two-column-view.svg';
 import DroppablePanelArea from '../DroppablePanelArea';
 import { PANEL_CARD_SIZE, PANEL_ONE_COLUMNS_WIDTH, PANEL_TWO_COLUMNS_WIDTH } from '../../../dimensions';
 import { AnimatedChild, DeckPanelContent, PanelButtons, PanelTools } from './DeckPanel.styled';
-import { ReactComponent as SearchIcon } from '@assets/icons/zoom.svg';
-import { ReactComponent as ClearIcon } from '@assets/icons/zoom.svg';
+import { ReactComponent as SearchIcon, ReactComponent as ClearIcon } from '@assets/icons/zoom.svg';
 import useDeckState from '../../hooks/useDeckState';
 
 export type PanelMode = 'stacked' | 'tow-columns';
@@ -24,6 +23,25 @@ const DeckPanel: React.FC<Props> = ({ panelModeRef }) => {
     panelModeRef.current = panelMode;
   }, [panelMode, panelModeRef]);
 
+  const clearText = useCallback(() => {
+    setSearchedText('');
+  }, [setSearchedText]);
+
+  const changeSearchedText = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSearchedText(e.target.value);
+    },
+    [setSearchedText],
+  );
+
+  const setStacked = useCallback(() => {
+    setPanelMode('stacked');
+  }, []);
+
+  const setTowColumns = useCallback(() => {
+    setPanelMode('tow-columns');
+  }, []);
+
   const content = useMemo(
     () => (
       <AnimatedGrid
@@ -51,20 +69,20 @@ const DeckPanel: React.FC<Props> = ({ panelModeRef }) => {
           variant="clearRound"
           value={searchedText}
           iconLeft={<SearchIcon />}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchedText(e.target.value)}
+          onChange={changeSearchedText}
           iconRight={
             searchedText && (
-              <IconButton variant="clearSmall" onClick={() => setSearchedText('')}>
+              <IconButton variant="clearSmall" onClick={clearText}>
                 <ClearIcon />
               </IconButton>
             )
           }
         />
         <PanelButtons>
-          <IconButton active={panelMode === 'stacked'} onClick={() => setPanelMode('stacked')}>
+          <IconButton active={panelMode === 'stacked'} onClick={setStacked}>
             <StackedIcon />
           </IconButton>
-          <IconButton active={panelMode === 'tow-columns'} onClick={() => setPanelMode('tow-columns')}>
+          <IconButton active={panelMode === 'tow-columns'} onClick={setTowColumns}>
             <TwoColumnsIcon />
           </IconButton>
         </PanelButtons>