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(null); const searchRef = useRef(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 ; 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 (