Use React.memo and useMemo to reduce rerender

icssc · Feb 11, 2024 · 8cd7a37 · 8cd7a37
1 parent 61ed6ea
commit 8cd7a37
Showing 1 changed file with 102 additions and 99 deletions.
diff --git a/src/components/ResultCard/ResultCard.jsx b/src/components/ResultCard/ResultCard.jsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React, { useMemo } from "react";
 import { useParams } from "react-router-dom";
 import {
   Card,
@@ -17,109 +17,112 @@ import InfoModal from "../InfoModal/InfoModal.jsx";
 import { formatDate } from "../../utils/DateUtils.js";
 import locate from "../../assets/logos/locate.svg";
 
-export default function ResultCard({
-  props,
-  setData,
-  onResultsBarClose,
-  setLeaderboard,
-}) {
-  const infoModalDisclosure = useDisclosure();
-  const { id } = useParams();
+const ResultCard = React.memo(
+  ({ props, setData, onResultsBarClose, setLeaderboard }) => {
+    const infoModalDisclosure = useDisclosure();
+    const { id } = useParams();
 
-  const formattedDate = formatDate(new Date(props.date));
+    const formattedDate = useMemo(
+      () => formatDate(new Date(props.date)),
+      [props.date]
+    );
 
-  // Define JSX for 'Lost' button on result card
-  const lostButton = (<Button
-    colorScheme="red"
-    ml="20%"
-    size="md"
-    w="40"
-    gap={1}
-    onClick={onResultsBarClose}
-    >
-      <Image src={locate} />
-      Lost
-    </Button>
-  )
+    // Define JSX for 'Lost' button on result card
+    const lostButton = (
+      <Button
+        colorScheme="red"
+        ml="20%"
+        size="md"
+        w="40"
+        gap={1}
+        onClick={onResultsBarClose}
+      >
+        <Image src={locate} />
+        Lost
+      </Button>
+    );
 
-  // Define JSX for 'Found' button on result card
-  const foundButton = (
-    <Button
-      colorScheme="green"
-      ml="20%"
-      size="md"
-      w="40"
-      gap={1}
-      onClick={onResultsBarClose}
-    >
-      <Image src={locate} />
-      Found
-    </Button>
-  )
-  return (
-    <>
-      <Card maxW="lg" align={"center"} mb="10px">
-        <CardBody>
-          <Flex justifyContent={"center"} alignItems={"center"}>
-            {props.isresolved && (
-              <Flex
-                backgroundColor={"rgba(255, 123, 0, 0.9)"}
-                position={"absolute"}
-                justifyContent={"center"}
-                alignItems={"center"}
-                marginTop={30}
-                flexDir={"column"}
-                w={450}
-              >
-                <Text fontSize={18} as="b" color={"white"}>
-                  RETURNED
+    // Define JSX for 'Found' button on result card
+    const foundButton = (
+      <Button
+        colorScheme="green"
+        ml="20%"
+        size="md"
+        w="40"
+        gap={1}
+        onClick={onResultsBarClose}
+      >
+        <Image src={locate} />
+        Found
+      </Button>
+    );
+    return (
+      <>
+        <Card maxW="lg" align={"center"} mb="10px">
+          <CardBody>
+            <Flex justifyContent={"center"} alignItems={"center"}>
+              {props.isresolved && (
+                <Flex
+                  backgroundColor={"rgba(255, 123, 0, 0.9)"}
+                  position={"absolute"}
+                  justifyContent={"center"}
+                  alignItems={"center"}
+                  marginTop={30}
+                  flexDir={"column"}
+                  w={450}
+                >
+                  <Text fontSize={18} as="b" color={"white"}>
+                    RETURNED
+                  </Text>
+                  <Text fontSize={15} color={"white"}>
+                    This item has been returned.
+                  </Text>
+                </Flex>
+              )}
+              <Image rounded={"lg"} src={props.image} loading="lazy" />
+            </Flex>
+            <Stack mt="6" spacing="3">
+              <Flex justifyContent={"space-between"}>
+                <Text color="blue.600" fontSize="md" fontWeight="bold">
+                  {props.name}
                 </Text>
-                <Text fontSize={15} color={"white"}>
-                  This item has been returned.
+                <Text color="blue.600" fontSize="sm">
+                  {formattedDate}
                 </Text>
               </Flex>
-            )}
-            <Image rounded={"lg"} src={props.image} />
-          </Flex>
-          <Stack mt="6" spacing="3">
+            </Stack>
+          </CardBody>
+          <Divider />
+          <CardFooter>
             <Flex justifyContent={"space-between"}>
-              <Text color="blue.600" fontSize="md" fontWeight="bold">
-                {props.name}
-              </Text>
-              <Text color="blue.600" fontSize="sm">
-                {formattedDate}
-              </Text>
+              <Button
+                variant="ghost"
+                colorScheme="blue"
+                leftIcon={<InfoIcon />}
+                size="md"
+                w="20"
+                onClick={infoModalDisclosure.onOpen}
+              >
+                View
+              </Button>
+              {props.islost ? lostButton : foundButton}
             </Flex>
-          </Stack>
-        </CardBody>
-        <Divider />
-        <CardFooter>
-          <Flex justifyContent={"space-between"}>
-            <Button
-              variant="ghost"
-              colorScheme="blue"
-              leftIcon={<InfoIcon />}
-              size="md"
-              w="20"
-              onClick={infoModalDisclosure.onOpen}
-            >
-              View
-            </Button>
-            {props.islost ? lostButton : foundButton}
-          </Flex>
-        </CardFooter>
-      </Card>
-      {(infoModalDisclosure.isOpen || id) && (
-        <InfoModal
-          props={props}
-          onClose={infoModalDisclosure.onClose}
-          isOpen={
-            id === props.id.toString() ? true : infoModalDisclosure.isOpen
-          }
-          setData={setData}
-          setLeaderboard={setLeaderboard}
-        />
-      )}
-    </>
-  );
-}
+          </CardFooter>
+        </Card>
+        {(infoModalDisclosure.isOpen || id) && (
+          <InfoModal
+            props={props}
+            onClose={infoModalDisclosure.onClose}
+            isOpen={
+              id === props.id.toString() ? true : infoModalDisclosure.isOpen
+            }
+            setData={setData}
+            setLeaderboard={setLeaderboard}
+          />
+        )}
+      </>
+    );
+  }
+);
+
+export default ResultCard;