A hook is a function that tells the React engine to do something. A function component is still just a function at the end of the day, so no true magic can occur.
One of the key light bulb moment for me (and I don't have a link sorry) was that React has a very rigid structure and order in which it renders stuff. And everything about Hooks follows from that fact:
- React already knows exactly when it's calling your component function to render it. After it already manages the props and stuff for you behind the scene.
- When you call a hook such as useState and useEffect, it can remember the order they were called in. This is why it prohibits you from calling useState and useEffect in conditional expressions or loops - it wouldn't be able to keep track anymore. React is 100% blind to what's in your function, except the order of hook calls.
- Therefore, if on every render the order of useXXX calls is the same, well then React can start keeping track of those calls in its own internal engine. When you call your third useState and pass an initial value, React stores it in slot #3 for your component, and provides the initial value and a function to update it.
- Here's where the magic happens: if at some point you call setState(newValue), it knows exactly that this callback updates slot #3 in its internal memory. So on the next render, when you call useState(initialValue), it's gonna ignore that value and use one from the last setState call instead.
Voilà! You now have state in functions.