Improve breadcrumb memoization

DISSINET · Dec 15, 2024 · 43e088c · 43e088c
1 parent ca29d07
commit 43e088c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 18 deletions.
diff --git a/...t/src/pages/Main/containers/StatementsListBox/StatementListHeader/StatementListHeader.tsx b/...t/src/pages/Main/containers/StatementsListBox/StatementListHeader/StatementListHeader.tsx
@@ -24,7 +24,7 @@ import Dropdown, {
   TerritoryActionModal,
 } from "components/advanced";
 import { useSearchParams } from "hooks";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { FaHighlighter, FaList, FaTrash } from "react-icons/fa";
 import {
   MdOutlineCheckBox,
@@ -367,6 +367,23 @@ export const StatementListHeader: React.FC<StatementListHeader> = ({
     useState<HTMLSpanElement | null>(null);
   const [showSubmit, setShowSubmit] = useState(false);
 
+  const BreadcrumbItems = useMemo(() => {
+    return (
+      <React.Fragment>
+        {selectedTerritoryPath?.map((territoryId: string, key: number) => {
+          return (
+            <React.Fragment key={key}>
+              <BreadcrumbItem territoryId={territoryId} />
+            </React.Fragment>
+          );
+        })}
+        <React.Fragment key="this-territory">
+          <BreadcrumbItem territoryId={territoryId} territoryData={territory} />
+        </React.Fragment>
+      </React.Fragment>
+    );
+  }, [selectedTerritoryPath.join(",")]);
+
   return (
     <>
       <Tooltip
@@ -376,22 +393,7 @@ export const StatementListHeader: React.FC<StatementListHeader> = ({
       />
 
       <StyledHeader>
-        <StyledHeaderBreadcrumbRow>
-          {selectedTerritoryPath &&
-            selectedTerritoryPath.map((territoryId: string, key: number) => {
-              return (
-                <React.Fragment key={key}>
-                  <BreadcrumbItem territoryId={territoryId} />
-                </React.Fragment>
-              );
-            })}
-          <React.Fragment key="this-territory">
-            <BreadcrumbItem
-              territoryId={territoryId}
-              territoryData={territory}
-            />
-          </React.Fragment>
-        </StyledHeaderBreadcrumbRow>
+        <StyledHeaderBreadcrumbRow>{BreadcrumbItems}</StyledHeaderBreadcrumbRow>
 
         <StyledHeaderRow>
           <span style={{ display: "grid", gridTemplateColumns: "auto auto" }}>

diff --git a/...in/containers/StatementsListBox/StatementListTextAnnotator/StatementListTextAnnotator.tsx b/...in/containers/StatementsListBox/StatementListTextAnnotator/StatementListTextAnnotator.tsx
@@ -94,7 +94,7 @@ export const StatementListTextAnnotator: React.FC<
     );
 
     if (newSelectedOccurence) {
-      annotator?.selectSearchOccurence(newSelectedOccurence);
+      annotator?.selectSearchOccurrence(newSelectedOccurence);
     }
   }, [searchActiveOccurence, searchOccurences]);