perf: remove unnecessary rendering on cache detail views

koba04 · Aug 14, 2021 · a868d9e · a868d9e
1 parent 5c24056
commit a868d9e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 31 deletions.
diff --git a/packages/swr-devtools/src/components/CacheData.tsx b/packages/swr-devtools/src/components/CacheData.tsx
@@ -6,14 +6,21 @@ type Props = {
   data: SWRCacheData;
 };
 
-export const CacheData = ({ data }: Props) => (
-  <CacheDataWrapper>
-    <CacheDataView data={data.data} />
-    {data.error && <ErrorText>{data.error}</ErrorText>}
-  </CacheDataWrapper>
-);
-
-const CacheDataWrapper = styled.div`
+export const CacheData = React.memo(({ data }: Props) => (
+  <>
+    <Title>
+      {data.key}&nbsp;
+      <TimestampText>{data.timestampString}</TimestampText>
+    </Title>
+    <DataWrapper>
+      <CacheDataView data={data.data} />
+      {data.error && <ErrorText>{data.error}</ErrorText>}
+    </DataWrapper>
+  </>
+));
+CacheData.displayName = "CacheData";
+
+const DataWrapper = styled.div`
   border-bottom: solid 1px #ccc;
   font-size: 1rem;
   height: 100%;
@@ -38,3 +45,13 @@ const AsyncReactJson = ({ data }: Props) => {
 const ErrorText = styled.p`
   color: red;
 `;
+
+const Title = styled.h3`
+  margin: 0;
+  padding: 1rem 0.5rem;
+`;
+
+const TimestampText = styled.span`
+  font-size: 1rem;
+  font-weight: normal;
+`;
diff --git a/packages/swr-devtools/src/components/Panel.tsx b/packages/swr-devtools/src/components/Panel.tsx
@@ -43,17 +43,7 @@ export const Panel = ({
         </CacheItems>
       </PanelItem>
       <hr />
-      <PanelItem>
-        {currentData && (
-          <>
-            <PanelDataTitle>
-              {currentData.key}&nbsp;
-              <TimestampText>{currentData.timestampString}</TimestampText>
-            </PanelDataTitle>
-            <CacheData data={currentData} />
-          </>
-        )}
-      </PanelItem>
+      <PanelItem>{currentData && <CacheData data={currentData} />}</PanelItem>
     </PanelWrapper>
   );
 };
@@ -95,13 +85,3 @@ const CacheItemButton = styled.button`
   cursor: pointer;
   text-align: left;
 `;
-
-const PanelDataTitle = styled.h3`
-  margin: 0;
-  padding: 1rem 0.5rem;
-`;
-
-const TimestampText = styled.span`
-  font-size: 1rem;
-  font-weight: normal;
-`;
diff --git a/packages/swr-devtools/src/components/SWRDevTool.tsx b/packages/swr-devtools/src/components/SWRDevTool.tsx
@@ -72,7 +72,7 @@ const DevToolWindow = styled.div`
 const Header = styled.header`
   display: flex;
   /* TODO: stop using the fixed size */
-  height: 40px;
+  height: 36px;
 `;
 
 const HeaderTitle = styled.h3`

diff --git a/packages/swr-devtools/src/components/Tab.tsx b/packages/swr-devtools/src/components/Tab.tsx
@@ -31,7 +31,7 @@ const TabButton = styled.button.attrs({ type: "button" })<{
   width: 100%;
   height: 100%;
   border: 0;
-  padding: 0.5rem 1.5rem;
+  padding: 0.2rem 1.5rem;
   border-bottom: ${(props) => (props.isSelected ? "solid 2px #bbb" : "none")};
   background-color: ${(props) => (props.isSelected ? "#e6e0dd" : "#FFF")};
   cursor: pointer;