chore: optimize expensive calculations with useMemo

This commit is contained in:
Aleix Soler 2025-07-16 18:22:44 +02:00
parent 811a971be4
commit cb50e1df05
3 changed files with 29 additions and 11 deletions

View file

@ -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) {

View file

@ -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 />;

View file

@ -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">