bytelyst/learning_ai_notes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): stabilize useKeyboardShortcuts with ref-based callback

Browse Source 
- Use useRef to hold shortcuts array, read from ref inside event handler
- Event listener registered once on mount (empty deps), avoids re-subscription
  when callers forget to memoize the shortcuts array
- Prevents subtle memory leak from rapid add/remove of keydown listeners
This commit is contained in:
saravanakumardb1 2026-03-10 19:54:50 -07:00
parent c2202e9e52
commit 420945e081
1 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/lib/use-keyboard-shortcuts.ts
View File

@ -1,6 +1,6 @@
"use client"; "use client";
import { useEffect } from "react"; import { useEffect, useRef } from "react";
export interface KeyboardShortcut { export interface KeyboardShortcut {
key: string; key: string;
@ -12,6 +12,9 @@ export interface KeyboardShortcut {
} }
export function useKeyboardShortcuts(shortcuts: KeyboardShortcut[]) { export function useKeyboardShortcuts(shortcuts: KeyboardShortcut[]) {
const shortcutsRef = useRef(shortcuts);
shortcutsRef.current = shortcuts;
useEffect(() => { useEffect(() => {
function handleKeyDown(event: KeyboardEvent) { function handleKeyDown(event: KeyboardEvent) {
const target = event.target as HTMLElement; const target = event.target as HTMLElement;
@ -21,7 +24,7 @@ export function useKeyboardShortcuts(shortcuts: KeyboardShortcut[]) {
target.tagName === "SELECT" || target.tagName === "SELECT" ||
target.isContentEditable; target.isContentEditable;
for (const shortcut of shortcuts) { for (const shortcut of shortcutsRef.current) {
const metaMatch = shortcut.meta ? event.metaKey || event.ctrlKey : !event.metaKey && !event.ctrlKey; const metaMatch = shortcut.meta ? event.metaKey || event.ctrlKey : !event.metaKey && !event.ctrlKey;
const shiftMatch = shortcut.shift ? event.shiftKey : !event.shiftKey; const shiftMatch = shortcut.shift ? event.shiftKey : !event.shiftKey;
const altMatch = shortcut.alt ? event.altKey : !event.altKey; const altMatch = shortcut.alt ? event.altKey : !event.altKey;
@ -39,5 +42,5 @@ export function useKeyboardShortcuts(shortcuts: KeyboardShortcut[]) {
window.addEventListener("keydown", handleKeyDown); window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown);
}, [shortcuts]); }, []);
} }