add useCallback optimizations

This commit is contained in:
Andrew Davis 2025-04-03 23:29:02 +10:00
parent 0651cb8256
commit 8a056960bf
No known key found for this signature in database
GPG Key ID: 30AB5B89A109D044
1 changed files with 34 additions and 29 deletions

View File

@ -1,4 +1,4 @@
import { useEffect, Fragment, useMemo, useState } from "react"; import { useEffect, Fragment, useMemo, useState, useCallback } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { LuPenLine, LuLoader, LuCopy, LuMoveRight, LuCornerDownRight, LuArrowUp, LuArrowDown } from "react-icons/lu"; import { LuPenLine, LuLoader, LuCopy, LuMoveRight, LuCornerDownRight, LuArrowUp, LuArrowDown } from "react-icons/lu";
@ -35,7 +35,7 @@ export default function SettingsMacrosRoute() {
} }
}, [initialized, loadMacros]); }, [initialized, loadMacros]);
const handleDuplicateMacro = async (macro: KeySequence) => { const handleDuplicateMacro = useCallback(async (macro: KeySequence) => {
if (!macro?.id || !macro?.name) { if (!macro?.id || !macro?.name) {
notifications.error("Invalid macro data"); notifications.error("Invalid macro data");
return; return;
@ -67,9 +67,9 @@ export default function SettingsMacrosRoute() {
} finally { } finally {
setActionLoadingId(null); setActionLoadingId(null);
} }
}; }, [isMaxMacrosReached, macros, saveMacros, setActionLoadingId]);
const handleMoveMacro = async (index: number, direction: 'up' | 'down', macroId: string) => { const handleMoveMacro = useCallback(async (index: number, direction: 'up' | 'down', macroId: string) => {
if (!Array.isArray(macros) || macros.length === 0) { if (!Array.isArray(macros) || macros.length === 0) {
notifications.error("No macros available"); notifications.error("No macros available");
return; return;
@ -96,7 +96,7 @@ export default function SettingsMacrosRoute() {
} finally { } finally {
setActionLoadingId(null); setActionLoadingId(null);
} }
}; }, [macros, saveMacros, setActionLoadingId]);
const MacroList = useMemo(() => ( const MacroList = useMemo(() => (
<div className="space-y-2"> <div className="space-y-2">
@ -203,6 +203,8 @@ export default function SettingsMacrosRoute() {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
{macros.length > 0 && (
<>
<SettingsPageHeader <SettingsPageHeader
title="Keyboard Macros" title="Keyboard Macros"
description="Create and manage keyboard macros for quick actions" description="Create and manage keyboard macros for quick actions"
@ -226,6 +228,8 @@ export default function SettingsMacrosRoute() {
)} )}
</SettingsItem> </SettingsItem>
</div> </div>
</>
)}
<div className="space-y-4"> <div className="space-y-4">
{loading && macros.length === 0 ? ( {loading && macros.length === 0 ? (
@ -238,7 +242,8 @@ export default function SettingsMacrosRoute() {
/> />
) : macros.length === 0 ? ( ) : macros.length === 0 ? (
<EmptyCard <EmptyCard
headline="No macros created yet" headline="No macros yet"
description="Create keyboard macros for quick actions"
BtnElm={ BtnElm={
<Button <Button
size="SM" size="SM"