From cb50e1df05ff9effa534550dd0399ce481a64e40 Mon Sep 17 00:00:00 2001
From: Aleix Soler <aleixsoler64@gmail.com>
Date: Wed, 16 Jul 2025 18:22:44 +0200
Subject: [PATCH] chore: optimize expensive calculations with useMemo

---
 .../useKeyboardNavigation.tsx                  | 18 ++++++++++++------
 .../GroupedStatusView/GroupedStatusView.tsx    | 12 +++++++++---
 .../StatusDistributionChart.tsx                | 10 ++++++++--
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/components/ChangeStatusModal/useKeyboardNavigation.tsx b/components/ChangeStatusModal/useKeyboardNavigation.tsx
index 8ca7cec..109acd7 100644
--- a/components/ChangeStatusModal/useKeyboardNavigation.tsx
+++ b/components/ChangeStatusModal/useKeyboardNavigation.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useMemo } from "react";
 import { NoteStatus } from "@/types/noteStatus";
 
 interface UseKeyboardNavigationProps {
@@ -19,11 +19,17 @@ export const useKeyboardNavigation = ({
 	const containerRef = useRef<HTMLDivElement>(null);
 	const searchRef = useRef<HTMLInputElement>(null);
 
-	const filteredStatuses = searchFilter
-		? availableStatuses.filter((status) =>
-				status.name.toLowerCase().includes(searchFilter.toLowerCase()),
-			)
-		: availableStatuses;
+	const filteredStatuses = useMemo(
+		() =>
+			searchFilter
+				? availableStatuses.filter((status) =>
+						status.name
+							.toLowerCase()
+							.includes(searchFilter.toLowerCase()),
+					)
+				: availableStatuses,
+		[searchFilter, availableStatuses],
+	);
 
 	const handleKeyDown = (e: React.KeyboardEvent) => {
 		switch (e.key) {
diff --git a/components/GroupedStatusView/GroupedStatusView.tsx b/components/GroupedStatusView/GroupedStatusView.tsx
index c6b1a71..071f604 100644
--- a/components/GroupedStatusView/GroupedStatusView.tsx
+++ b/components/GroupedStatusView/GroupedStatusView.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useMemo } from "react";
 import { FilterSection } from "./components/FilterSection";
 import { TagSection } from "./components/TagSection";
 import { LoadingSpinner } from "./components/LoadingSpinner";
@@ -57,8 +57,14 @@ const GroupedStatusViewContent = () => {
 		[onFileClick],
 	);
 
-	const availableStatuses = getAvailableStatuses();
-	const statusMap = new Map(availableStatuses.map((s) => [s.name, s]));
+	const availableStatuses = useMemo(
+		() => getAvailableStatuses(),
+		[getAvailableStatuses],
+	);
+	const statusMap = useMemo(
+		() => new Map(availableStatuses.map((s) => [s.name, s])),
+		[availableStatuses],
+	);
 
 	if (isLoading) {
 		return <LoadingSpinner />;
diff --git a/components/StatusDashboard/StatusDistributionChart.tsx b/components/StatusDashboard/StatusDistributionChart.tsx
index 608248f..cacb71d 100644
--- a/components/StatusDashboard/StatusDistributionChart.tsx
+++ b/components/StatusDashboard/StatusDistributionChart.tsx
@@ -27,8 +27,14 @@ export const StatusDistributionChart = ({
 			.sort((a, b) => b.count - a.count);
 	}, [vaultStats.statusDistribution]);
 
-	const availableStatuses = BaseNoteStatusService.getAllAvailableStatuses();
-	const statusMap = new Map(availableStatuses.map((s) => [s.name, s]));
+	const availableStatuses = useMemo(
+		() => BaseNoteStatusService.getAllAvailableStatuses(),
+		[],
+	);
+	const statusMap = useMemo(
+		() => new Map(availableStatuses.map((s) => [s.name, s])),
+		[availableStatuses],
+	);
 
 	return (
 		<div className="status-dashboard-section">