Sometimes you want to implement keyboard shortcuts. This is a sample for React Hooks.
useEffect(() => {
// handler object
const handleEvent = (ev: KeyboardEvent) => {
console.log(`your key is ${ev.code}!`);
};
// register handler
// do not use lambda here because to unsubscribe later
window.addEventListener('keyup', handleEvent);
// unregister handler
return () => {
window.removeEventListener('keyup', handleEvent);
};
}, [/* any deps */]);
Then, handleEvent handles your keyevent.
Top comments (4)
What is the purpose of removing the listener in the return statement?
Simple example: on one route u have 1 component with hook specified above. U change route. Then go back. What will happen on specified keydown? Assume SPA with react router. This is simple example. There are tons more complicated ones. It's even that case when we have no deps and adding event on mount, useEffect is MUCH more flexible.
As the event handler is bound to the
window, even after the component is unmounted, the handler is still active.As a general rule, cleaning up when unused would save memory and other possible issues.
Sung and e1cb4's answer has explained all my opinion 👏
these are purpose:
the function at return statement is called when the component is unmounted, so event handler is keeped active during the component is being mounted.