useKeyPress — JavaScript Challenge | FineFrontend

Practice workspaceSign in

JavaScript/useKeyPressmedium

00:00

Read here. Code on desktop. The coding workspace opens on screens 1024px and wider.

JavaScript interview question

useKeyPress

medium20 min

Implement a React hook that reports whether a particular keyboard key is currently held down, including resetting the state when the window loses focus.

The JavaScript and TypeScript variants share the same contract. Tests render real React components and exercise updates and lifecycle cleanup.

Requirements

Export useKeyPress(targetKey) as a named and default React hook. In TypeScript targetKey: string and return boolean. The initial return value is false.
Listen to window keydown and keyup. Match event.key exactly, including casing: use "Escape", "ArrowUp", or " " for a space. Do not compare event.code or deprecated keyCode.
A matching keydown returns true after React updates; a matching keyup returns false. Unrelated key events must not change the tracked state. Repeated keydown events keep true until release.
If targetKey changes, reset to false and track the new key. A later event for the old key must not affect the new key’s state.
On window blur, reset to false so losing focus cannot leave the key stuck. Listen globally, including events originating from inputs; do not preventDefault or stop propagation.
Remove all listeners on unmount, avoid duplicate listeners under Strict Mode, and support independent hook instances tracking different keys.
No browser API may run during server rendering; effects subscribe only in a browser. Modifier combinations, left/right modifier distinctions, IME composition, and recovering keys already held before mount are outside scope.

Examples

Example 1

Input: useKeyPress("Escape") before events
Output: Returns false.

Example 2

Input: keydown with key "Escape", then keyup with key "Escape"
Output: Returns true and then false.

Example 3

Input: Hold "a", then change targetKey to "b"
Output: Resets to false and waits for a new keydown with key "b".

Examples describe the current return value after the corresponding React render or event.

What the tests check

Starts with false
Matching keydown sets true
Matching keyup releases the key
Unrelated key events leave state unchanged
Repeated keydown keeps the key held
Matches key rather than code and preserves case
Handles the space key
Changing the target resets and tracks the new key
Blur prevents stuck pressed state
Handles input events without preventing defaults
Removes all three listeners on unmount
Instances remain independent under Strict Mode

References

React useEffect KeyboardEvent.key

React HooksKeyboard EventsStateKeyboard event stateCleanupChanging dependenciesWindow blur

Back

Preparing your workspace…