Add use memo in country filter

IFRCGo · Apr 15, 2024 · 3c7f9a8 · 3c7f9a8
1 parent 8fcfe6d
commit 3c7f9a8
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -35,7 +35,7 @@ function Navbar(props: Props) {
                 <div className={styles.brand}>
                     <Link
                         className={styles.alertHubTitle}
-                        to="home"
+                        to="/"
                     >
                         <img
                             className={styles.goIcon}

diff --git a/src/views/Home/AlertsView/index.tsx b/src/views/Home/AlertsView/index.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import {
     gql,
@@ -18,6 +19,7 @@ import AlertsMap from './AlertsMap';
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
+// NOTE: alertFilters is related with filteredAlertCount
 const COUNTRIES_LIST = gql`
 query CountryList {
   public {
@@ -54,9 +56,9 @@ function AlertsView(props: Props) {
         COUNTRIES_LIST,
     );
 
-    const countriesWithAlert = countryResponse?.public.allCountries.filter(
+    const countriesWithAlert = useMemo(() => countryResponse?.public.allCountries.filter(
         (country) => (country?.filteredAlertCount ?? 0) > 0,
-    );
+    ), [countryResponse?.public.allCountries]);
 
     return (
         <Container