The first time the component renders, each individual call to `useState` results in a new unique-to-that-component state value being stored behind the scenes. React builds a linked list of all hooks attached to that function component the first time you run it, and then reads from that linked list in future re-renders. So, when you run it again, and `useState()` call #1 occurs, it reads the value and the setter function off the first linked list node, and returns those.

This is so much more complicated than the class approach.

What's saved in lines of code is lost in expressiveness.

Feels like a step toward Ruby-like magic.

I feel exactly the opposite is the case. Hooks can improve expressiveness a lot by helping developers to separate concerns and keeping logic that belongs together in a separate place.

While I understand the argument that hooks encourage to make dumb components stateful this is already the case with class based components. At the end of the day a developer is responsible for separating concerns of his application and he can fail to do so with class based components and hooks the same way.

While I see why you might feel this way, I wrote an article about this and would appreciate if you give it a read. https://medium.com/@dan_abramov/making-sense-of-react-hooks-...