A question I had for a long time was: how do React hooks work?

Specifically, how do they associate a functional component with state, without requiring a stable identifier?

There are many high quality answers online. For me, they either focus to deeply on React internals (Fibers, render cycle, ReactFiberHooks), or they are too high level (“it’s just arrays”, closures, call order).

Here is an answer for me¹:

1. A JSX tag is transformed into a function call, passing in the tag name as a string, properties as an object, and its children as expressions (recursively transformed as well).
2. The children of a JSX element are transformed into positional function arguments² that have a stable order. This is stable even if they are conditionally rendered, since the conditional expression occupies the argument slot. List expressions need keys because JSX transforms them into a single argument.
3. Hooks use order within the JSX tree to index into which component state to load.
4. Hooks within the same component are distinguished by call order in that component. This is possible because of the Rules of Hooks.

References

• Build your own React (Rodrigo Pombo): this was helpful in understanding how JSX transforms into Javascript, which is the key that a lot of other resources missed or assumed. Very detailed!
• Getting Closure on React Hooks (swyx): this explains closure for hooks and derives the rules of hooks.
• Making Sense of React Hooks (Dan Abramov): introduces some benefits of hooks and talks about the implementation at a high level
  • Also, the linked pseudocode from @jamiebuilds
• Introducing JSX (legacy React docs): outdated (_jsx is now called instead of React.createElement) but useful context
• StackOverflow answer from Knight Industries: provided some intuition, not as useful on its own
• Asking questions to Claude was helpful in honing my understanding, especially for the conditional rendering question with JSX, which I verified with Babel.
• Hooks FAQ: How does React associate hook calls with components (legacy React docs): the is the former “official” answer, but it’s very high level.