Skip to content

fix(react-hotkeys): set hotkey options after ui commit #113 #141

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
IanWorley wants to merge 1 commit into from
Closed

fix(react-hotkeys): set hotkey options after ui commit #113 #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/tangy-clubs-divide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@tanstack/react-hotkeys': patch
---

Fixed `useHotkey` updating registration options during the render phase. Options are now synced in an effect after the UI commits, so store subscribers (like `useHotkeyRegistrations`) are no longer notified mid-render, which could trigger React warnings and inconsistent state. Fixes #113.
11 changes: 9 additions & 2 deletions packages/react-hotkeys/src/useHotkey.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,10 +178,17 @@ export function useHotkey(
}
}, [hotkeyString])

// Sync callback and options on EVERY render (outside useEffect)
// Sync callback on EVERY render (outside useEffect)
// This avoids stale closures - the callback always has access to latest state
if (registrationRef.current?.isActive) {
registrationRef.current.callback = callback
registrationRef.current.setOptions(optionsWithoutTarget)
}

// Sync options after the UI commits so store subscribers aren't
// notified during the render phase
useEffect(() => {
if (registrationRef.current?.isActive) {
registrationRef.current.setOptions(optionsWithoutTarget)
}
})
Comment on lines +181 to +193

@coderabbitai coderabbitai Bot Jul 19, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🩺 Stability & Availability | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Description: Verify if HotkeyRegistrationHandle.setOptions handles deep/shallow equality internally.

ast-grep run --pattern $'class HotkeyRegistrationHandle {
  $$$
  setOptions($_) {
    $$$
  }
  $$$  
}' --lang typescript packages/hotkeys/src/hotkey-manager.ts

Repository: TanStack/hotkeys

Length of output: 154

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Map the relevant files and locate the registration/update logic.
git ls-files 'packages/react-hotkeys/src/*' 'packages/hotkeys/src/*' | sed 's#^`#FILE` #'
printf '\n--- setOptions references ---\n'
rg -n "setOptions|callback = callback|isActive|useEffect|useLayoutEffect" packages/react-hotkeys/src packages/hotkeys/src

printf '\n--- outline: useHotkey.ts ---\n'
ast-grep outline packages/react-hotkeys/src/useHotkey.ts --view expanded

printf '\n--- outline: hotkey-manager.ts ---\n'
ast-grep outline packages/hotkeys/src/hotkey-manager.ts --view expanded

Repository: TanStack/hotkeys

Length of output: 10133

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n--- packages/hotkeys/src/hotkey-manager.ts (setOptions region) ---\n'
sed -n '360,420p' packages/hotkeys/src/hotkey-manager.ts

printf '\n--- packages/react-hotkeys/src/useHotkey.ts (relevant region) ---\n'
sed -n '150,210p' packages/react-hotkeys/src/useHotkey.ts

printf '\n--- packages/react-hotkeys/src/useHotkeySequence.ts (similar pattern) ---\n'
sed -n '160,190p' packages/react-hotkeys/src/useHotkeySequence.ts

printf '\n--- packages/react-hotkeys/src/useHotkeys.ts (similar pattern) ---\n'
sed -n '170,210p' packages/react-hotkeys/src/useHotkeys.ts

Repository: TanStack/hotkeys

Length of output: 5254

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n--- Store implementation ---\n'
rg -n "class Store|setState\\(|state =" packages/hotkeys/src packages/react-hotkeys/src

printf '\n--- likely store file(s) ---\n'
fd -a "store" packages/hotkeys/src packages/react-hotkeys/src || true
fd -a "state" packages/hotkeys/src packages/react-hotkeys/src || true

printf '\n--- hotkey-manager around registrations store setup ---\n'
sed -n '200,260p' packages/hotkeys/src/hotkey-manager.ts

Repository: TanStack/hotkeys

Length of output: 4277

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n--- Store class definition ---\n'
sed -n '1,220p' packages/hotkeys/src/key-state-tracker.ts

printf '\n--- hotkey-manager registration handle section ---\n'
sed -n '330,395p' packages/hotkeys/src/hotkey-manager.ts

Repository: TanStack/hotkeys

Length of output: 8174

🏁 Script executed:

#!/bin/bash
set -euo pipefail

sed -n '1,220p' packages/react-hotkeys/src/useHotkey.ts

Repository: TanStack/hotkeys

Length of output: 6244

Move the callback sync into the commit phase. registrationRef.current.callback = callback mutates the hotkey manager during render, which can leak an aborted concurrent render into the active registration. The useEffect here also runs after every render, and setOptions always publishes a new registration map, so this still churns subscribers even when the options are unchanged. Fold both updates into the post-commit sync and skip setOptions when nothing actually changed.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/react-hotkeys/src/useHotkey.ts` around lines 181 - 193, Move the
callback assignment from the render path into the existing post-commit useEffect
alongside setOptions, so aborted renders cannot mutate the active registration.
In that effect, update the callback and call registrationRef.current.setOptions
only when optionsWithoutTarget differ from the previously committed options,
preserving subscriber stability when options are unchanged.

}
28 changes: 28 additions & 0 deletions packages/react-hotkeys/tests/useHotkey.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,3 +257,31 @@ describe('useHotkey', () => {
})
})
})

describe('options sync timing', () => {
it('should notify store subscribers after commit, not during render', () => {
const manager = HotkeyManager.getInstance()
const timeline: Array<string> = []

const { rerender } = renderHook(
({ enabled }: { enabled: boolean }) => {
timeline.push('render-start')
useHotkey('Mod+S', () => {}, { platform: 'mac', enabled })
timeline.push('render-end')
},
{ initialProps: { enabled: true } },
)

const subscribe = manager.registrations.subscribe(() => {
timeline.push('store-notified')
})

timeline.length = 0;
rerender({ enabled: false })

expect(timeline).toEqual(['render-start', 'render-end', 'store-notified'])

subscribe.unsubscribe();
});
});

Comment thread
coderabbitai[bot] marked this conversation as resolved.