[#41] Attempt to boost the performance

datagov-cz · Oct 20, 2021 · 0a0509d · 0a0509d
1 parent 43c2af5
commit 0a0509d
Showing 1 changed file with 42 additions and 26 deletions.
diff --git a/src/components/VocabularyTermsList.tsx b/src/components/VocabularyTermsList.tsx
@@ -1,10 +1,11 @@
-import { FixedSizeList as List } from "react-window";
+import { FixedSizeList as List, areEqual } from "react-window";
 import RouteLink from "./RouteLink";
-import React from "react";
+import React, { memo } from "react";
 import { DetailItemWrapper } from "./Hierarchy";
-import { Box } from "@material-ui/core";
+import { Box, Link } from "@material-ui/core";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { makeStyles } from "@material-ui/core/styles";
+import memoize from "memoize-one";
 
 const useStyles = makeStyles((theme) => ({
   wrapper: {
@@ -16,32 +17,46 @@ const useStyles = makeStyles((theme) => ({
 }));
 
 interface VocabularyTermsListProps {
-  terms: { uri: string; vocabulary: string; label: { cs?: string }; route:string}[];
+  terms: {
+    uri: string;
+    vocabulary: string;
+    label: { cs?: string };
+    route: string;
+  }[];
 }
 
-const VocabularyTermsList: React.FC<VocabularyTermsListProps> = (props) => {
+const Row = memo(({ data, index, style }: any) => {
   const classes = useStyles();
-  const Row = ({ index, style }: any) => {
-    const curr = props.terms[index];
-    return (
-      <div style={style}>
-        <Box borderBottom={2} className={classes.wrapper}>
-          <RouteLink
-            to={curr.route}
-            variant="h6"
-            style={{
-              display: "block",
-              whiteSpace: "nowrap",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-            }}
-          >
-            {curr.label.cs}
-          </RouteLink>
-        </Box>
-      </div>
-    );
-  };
+  const { items } = data;
+  const item = items[index];
+
+  return (
+    <div style={style}>
+      <Box borderBottom={2} className={classes.wrapper}>
+        <RouteLink
+          to={item.route}
+          variant="h6"
+          style={{
+            display: "block",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          }}
+        >
+          {item.label.cs}
+        </RouteLink>
+      </Box>
+    </div>
+  );
+}, areEqual);
+
+const createItemData = memoize((items) => ({
+  items,
+}));
+
+const VocabularyTermsList: React.FC<VocabularyTermsListProps> = (props) => {
+  const itemData = createItemData(props.terms);
+
   const customHeight = props.terms.length < 10 ? props.terms.length * 34 : 350;
   return (
     <DetailItemWrapper title={"Pojmy"}>
@@ -53,6 +68,7 @@ const VocabularyTermsList: React.FC<VocabularyTermsListProps> = (props) => {
               itemCount={props.terms.length}
               itemSize={34}
               width={width}
+              itemData={itemData}
               overscanCount={10}
             >
               {Row}