memoize PlantCard (reduces re-rendering when filtering)

calblueprint · Dec 2, 2024 · 1953c46 · 1953c46
1 parent 73027ce
commit 1953c46
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 25 deletions.
diff --git a/app/view-plants/page.tsx b/app/view-plants/page.tsx
@@ -156,7 +156,7 @@ export default function Page() {
   }
   function handleAddPlants() {
     //TODO: route to add details with proper information
-    router.push('/add-details');
+    router.push('/add-details'); // use CONFIG later
   }
 
   function handleCancelAddMode() {
@@ -241,20 +241,18 @@ export default function Page() {
       {viewingOption === 'myPlants' && (
         <div>
           {filteredUserPlantList.length ? (
-            <div>
-              <PlantGridContainer>
-                <PlantGridView>
-                  {filteredUserPlantList.map(ownedPlant => (
-                    <PlantCard
-                      key={ownedPlant.userPlantId}
-                      plant={ownedPlant.plant}
-                      canSelect={false}
-                      onClick={() => handleUserPlantCardClick(ownedPlant)}
-                    />
-                  ))}
-                </PlantGridView>
-              </PlantGridContainer>
-            </div>
+            <PlantGridContainer>
+              <PlantGridView>
+                {filteredUserPlantList.map(ownedPlant => (
+                  <PlantCard
+                    key={ownedPlant.userPlantId}
+                    plant={ownedPlant.plant}
+                    canSelect={false}
+                    onClick={() => handleUserPlantCardClick(ownedPlant)}
+                  />
+                ))}
+              </PlantGridView>
+            </PlantGridContainer>
           ) : (
             <div>
               <button onClick={() => setViewingOption('all')}>
@@ -279,16 +277,15 @@ export default function Page() {
               ))}
             </PlantGridView>
           </PlantGridContainer>
-          {inAddMode && selectedPlants.length ? (
+          {inAddMode && (
             <AddButton
-              $backgroundColor={COLORS.shrub}
+              $backgroundColor={
+                selectedPlants.length ? COLORS.shrub : COLORS.midgray
+              }
               onClick={handleAddPlants}
+              disabled={!selectedPlants.length}
             >
-              Add to My Garden
-            </AddButton>
-          ) : (
-            <AddButton $backgroundColor={COLORS.midgray}>
-              Select Plants
+              {selectedPlants.length ? 'Add to My Garden' : 'Select Plants'}
             </AddButton>
           )}
         </>

diff --git a/components/PlantCard/index.tsx b/components/PlantCard/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { Plant } from '@/types/schema';
 import { mapMonthToSeason, useTitleCase } from '@/utils/helpers';
 import DifficultyLevelBar from '../DifficultyLevelBar';
@@ -17,7 +17,7 @@ import {
   TopRight,
 } from './styles';
 
-export default function PlantCard({
+const PlantCard = memo(function PlantCard({
   plant,
   canSelect,
   isSelected = false,
@@ -73,4 +73,6 @@ export default function PlantCard({
       </CardContent>
     </Card>
   );
-}
+});
+
+export default PlantCard;
diff --git a/components/PlantCard/styles.ts b/components/PlantCard/styles.ts
@@ -93,26 +93,30 @@ export const TopRight = styled.div`
   right: 0;
   padding: 10px 10px;
 `;
+
 export const PlantName = styled(H2)`
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
 `;
+
 export const AttributeContent = styled.p`
   font-size: 10px;
   font-style: normal;
   font-weight: 300;
   line-height: normal;
   margin: 0;
 `;
+
 export const PlantHeader = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   width: 136px;
 `;
+
 export const PlantImage = styled.img`
   width: 60px;
   height: 60px;