Added useMemo to reduce calls to filterCount function

CodeForPhilly · Jun 10, 2024 · d49d889 · d49d889
1 parent 5b5c2db
commit d49d889
Showing 1 changed file with 13 additions and 13 deletions.
diff --git a/src/components/SidePanelControlBar.tsx b/src/components/SidePanelControlBar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { FC, useRef } from "react";
+import React, { FC, useMemo, useRef } from "react";
 import { BarClickOptions } from "@/app/find-properties/[[...opa_id]]/page";
 import { BookmarkSimple, DownloadSimple, Funnel } from "@phosphor-icons/react";
 import { ThemeButton } from "./ThemeButton";
@@ -32,20 +32,20 @@ const SearchBarComponent: FC<SidePanelControlBarProps> = ({
   const savedRef = useRef<HTMLButtonElement | null>(null);
   const { dispatch, appFilter } = useFilter();
 
-  const filterCount = () => {
+  const filterCount: number = useMemo(() => {
     let count = 0
     for (let property of Object.keys(appFilter)) {
-      if (property === "access_process") {
-        count = count + appFilter[property].values.length
-      } else {
-        count++
+        if (property === "access_process") {
+          count += appFilter[property].values.length
+        } else {
+          count++
+        }
+      }
+      if (shouldFilterSavedProperties) {
+        count--
       }
-    }
-    if (shouldFilterSavedProperties) {
-      count--
-    }
     return count
-  }
+  }, [appFilter])
 
   const onClickSavedButton = () => {
     let propertyIds = getPropertyIdsFromLocalStorage();
@@ -115,7 +115,7 @@ const SearchBarComponent: FC<SidePanelControlBarProps> = ({
             label={
               <div className="lg:space-x-1 body-md">
                 <span className="max-lg:hidden">Filter</span>
-                {filterCount() !== 0 && <span>({filterCount()})</span>}
+                {filterCount !== 0 && <span>({filterCount})</span>}
               </div>
             }
             onPress={() => {
@@ -125,7 +125,7 @@ const SearchBarComponent: FC<SidePanelControlBarProps> = ({
 
               updateCurrentView("filter");
             }}
-            isSelected={currentView === "filter" || filterCount() !== 0}
+            isSelected={currentView === "filter" || filterCount !== 0}
             startContent={<Funnel />}
             className="max-lg:min-w-[4rem]"
             data-hover={false}