Skip to content

useModifierKey

reference
1 min readUpdated

Kind: Function

Source: atloria-monorepo/apps/web/src/hooks/useModifierKey.ts

The ⌘/Ctrl label for a keyboard hint, decided AFTER mount.

Read during render this is a hydration bug, and a subtle one: the server has no navigator so it renders "Ctrl", a Mac browser renders "⌘", and React throws the whole subtree away and re-renders it client-side (#418). It never showed up in local development because the dev server and the browser were the same machine — it only appeared once the server was a Linux container and the reader was on a Mac, which is to say: in front of customers, on every page carrying the ⌘K search hint.

So the first client render deliberately agrees with the server ("Ctrl") and the real symbol arrives on the next tick. The cost is one frame showing the wrong modifier on a Mac; the alternative was discarding the server-rendered page.

Signature

ts
function useModifierKey(): '⌘' | 'Ctrl'

Returns: '⌘' | 'Ctrl'

Was this page helpful?

Download as PDF