Feature: keyboard scrolling with j and k

[frontendwizard]

This is my go on implementing this feature. Not much experience with TypeScript so any tips and reviews are welcome. I'll gladly refactor this to make it better. :)
Both the scrolling amount and the wait time for another scrolling are hardcoded. I'm gonna rename it to constants to make it more readable. So far, what do you all think? The functionality is implemented, you just need to select a column and press j and k to scroll it up and down. Multiple press don't really behave well, so that's why I mitigated this by putting a scrolling flag on event.

[brunolemos]

Thanks for your PR, I just tested it and it worked well!
The way you did it, it solves the problem of scrolling vertically with only the keyboard for each column.

To have full keyboard support, instead of scrolling a fixed amount, we'll need to scroll item by item, and be able to take actions for each item (e.g. press S to save/unsave, etc).

So one change to be made is, in addition to tracking which column is selected, we need to track which item is selected. Instead of using scrollToOffset we could use scrollToItem or maybe scrollToIndex.

Please check https://tweetdeck.twitter.com/, we could make the exact same behavior as them. Play with it by pressing H/J/K/L or the LEFT/UP/DOWN/RIGHT arrows. You'll notice a few things:

1. You can press the keyboard shortcut any time and it will work, no need to select the column with the number first
2. It highlights which item is selected
3. It only scrolls if the selected item is not visible in the screen (scrollToIndex or scrollToItem will probably handle this automatically)
4. When you press H/L or LEFT/RIGHT it changes column and selects the item that makes more sense, that is aligned in the same place at the screen (not sure how to handle this, maybe there's some method to get the item for a scroll offset)
5. Since it keeps track of the selected item, you can take action on them, e.g. by pressing F to like/unlike a tweet
6. It allows you to hold the J/K/etc keys and it will keep moving to the next item without a delay

About the code, there's some performance optimizations to be made.
For example: const [scrollOffsetY, setScrollOffsetY] = React.useState(0)
On every scroll it's calling setScrollOffsetY and triggering a re-render of the whole list component, which makes it slow.

One alternative could be to make useKeyboardScrolling return a method, for example: const { setScrollPosition} = useKeyboardScrolling(. And inside the useKeyboardScrolling hook, instead of using useState, use useRef, also to avoid re-rendering.

Let me know if you are willing to make these changes.
Any question I can help. Thanks!

[frontendwizard]

Awesome, thanks for the review. I'll work on these changes :)

[frontendwizard]

Ok. The functionality now is closer to what you specified. Now it's time for performance improvements. I'm using useState only to keep track of the current selected item on the column. How would I use useRef on this case to improve performance? Does this make sense? Legit question.
I removed the scroll tracking since now I'm using scrollToIndex and the functionality feels much better now.

[brunolemos]

It's pretty good now, thanks for your contribution! 🎉🎉🎉

I'll merge and play with it a little bit.

[frontendwizard]

🎉
you're welcome 😃