react-hotkeys-hook | React hook for using keyboard shortcuts in components | Frontend Utils library

useHotkeys internals use the useCallback and useEffect hooks, which need to know when some of its dependencies change. To make sure it works well with these hooks, useHotkeys offers to pass a deps array, like the other hooks mentioned, as its last parameter.

deps: any[] = []: The dependency array that gets appended to the memoization of the callback. Here you define the inner dependencies of your callback. If for example your callback actions depend on a referentially unstable value or a value that will change over time, you should add this value to your deps array. Since most of the time your callback won't depend on any unstable callbacks or changing values over time you can leave this value alone since it will be set to an empty array by default.

In your code, it would looks like this:

You can't have a dynamic call of hooks due to Rules of Hooks, the better approach is using composition.

Your Choice component should have a hotKey and callback props, the parent should dictate the number of choices.