Interesting take, but I find it much more insightful to think about how you’d simply implement a hook (not any of the React specific ones). MobX uses similar mechanism.

user declares foo with a call to “useState”

  function useState(…) {
    useStateCalls.push(…)
  }

  useStateCalls = []
  foo()
  // do something with useStateCalls

It’s a neat syntax sugar, it explains why they can’t be called conditionally, it allows for a clean api. If every component received a “hooks” argument, like this:

  function BazComponent(props, hooks) {
    hooks.useState(…)

It would be less magic, more boilerplate (especially with custom hooks). That’s it really.