钩子 usKeyPress 和 useEventListener 之间的性能差异

Question

The useEventListener hook and the useKeyPress seem to have a slightly different implementation, but I'm trying to figure out which is a better tool to use for my specific use case.

I have a custom dropdown select menu, and I want to listen to the arrow down, up and enter keys. My problem, or rather question, about the useKeyPress hook, is that there are two renders that happen + I'm not really sure why there is an intermediate useState.

For instance, using the useKeyPress hook, if a user click on a down arrow, the event listeners fire off twice, one would return true, and immediately return false onKeyUp:

  useEffect(() => {
    window.addEventListener('keydown', downHandler);
    window.addEventListener('keyup', upHandler);
    return () => {
      window.removeEventListener('keydown', downHandler);
      window.removeEventListener('keyup', upHandler);
    };
  }, []);

Also, I'm not sure why it's doing,

const [keyPressed, setKeyPressed] = useState(false);

I'm just looking for some clarification on the difference between these two, and which one to use for my use case.

Answer 1

Performance shouldn't be your primary concern as both are fast enough for nearly every use case they cover.

useKeyPress is probably not well suited for your use case as it only gives you information of when a key is pressed. It doesn't let you call a handler. It internally keeps track of the pressed state itself. But you likely want to call a handler, eg to change the currently selected item in your dropdown list.

Also, I'm not sure why it's doing,

const [keyPressed, setKeyPressed] = useState(false);

That's simply the use case. It keeps track of the pressed state of a button.

useEventListener is a more generic tool that lets you do the updating and state management yourself. It lets you decide what to update based on the subscribed events. You could in fact rewrite useKeyPress to internally use useEventListener .

Answer 2

React works by updating state. If the useKeyPress hook didn't update some internal state then it would be incapable of returning an updated value reference and trigger a component rerender. useKeyPress listens for the keyDown event to toggle state to true, then listens for the keyUp event to clear that state (you don't want it stuck true.

The useEventListener is certainly a heavier tool; it's capable of monitoring many more events. It doesn't use internal state though, but rather requires callback handlers to be passed to it to be invoked when registered event occurs.

For a lightweight utility the onKeyPress is useful if you just need to trigger an effect callback in a component, but for larger projects or where you want more than to know a keyPress occurred, useEventListener can handle it.