I’ve written a lot of comments on this the last few days, so please forgive my brevity. But the “magic” of hooks is that they’re not functions (though they look like it), and their use transforms components into not functions, again even though they look like it. Where a functional component is props in -> data structure out, a hooks component is a closure over state and its return value is something like a constructor or factory resembling the data structure you define. The component is no longer referentially transparent, even though it has all of the telltale signs that it should be.

All of that makes not only that component hard to reason about, but makes every function component suspect. And there goes the simplicity of “it’s just JavaScript”.