[DangitBobby]

Yeah, this is a really annoying thing about how hooks work. For whatever reason (I'm sure they have a great reason) React can't do hook state book-keeping correctly without tying it to a function component lifecycle.

I think you actually can conditionally render a hook but that choice has to last for the entire rendered lifetime of the component. But that doesn't really help you when your user can switch between them.

[Izkata]

Hooks can call other hooks, and all the built-in hooks rely on setState at the bottom. setState is state for the individual component. It keeps track of state across multiple calls with an indexed array - the first call is index 0, second call is index 1, and so on - that's why no key is needed to identify which setState call is which.

All the oddness about hooks fall out of that implementation. They can only be used inside components because they rely on component state management, and having to be called at the top level is a simplification of "hooks must always be called in the same order the same number of times" (no conditionals or loops) because otherwise the setState index gets messed up and you're getting the wrong state back when it's called.