Migrate all components to use hooks

Two things that need to do this:

• Migrate all components to hooks
• ESLint plugin: yarn add eslint-plugin-react-hooks --dev. ESlint extend the defaults ("plugin:react-hooks/recommended"). Update the config in erb’s eslint config.

[reZach]

@ivanjeremic They are supporting both, yes. I just want to echo a comment by a user in the HackerNews thread:

Hooks have unlocked so much power in React but still deserve critiquing. However I think the author only hinted at the major complaint I have about hooks, which is that it’s no longer Javascript. It’s not a function, it’s sort of like type system magic. Hooks can’t be nested, order matters, can’t be conditionally called, and you have to understand trickier memoization to avoid bugs. It also isn’t portable knowledge to other systems, like vanilla Javascript is. React is great because it’s vanilla Javascript, expressions all the way down, and lifecycle methods, which everyone is used to. Hooks are a new non-vanilla-javascript paradigm with special and sometimes tricky rules. Other than, there’s no reason to write React unless you’re using hooks, and I wonder what the next major paradigm shift will be. I look back on all our HOCs and function as children and shudder compared to how easy it is with hooks.

Not that you haven’t researched it yourself, I’m just thinking that these are subtle things the framework will need to understand for this template. Hooks in general can confuse beginners in general and are not transferable knowledge, but this is simply preference I just wanted to share in case you didn’t consider before.

[ivanjeremic]

@amilajack There was good discussion I read on here as well about using hooks: https://news.ycombinator.com/item?id=22995928. Just wanted to present both sides as using hooks doesn’t solve all problems.

It is the direction React moves, so I think it is smart to follow what the React team is doing.