Reack hooks はどんな仕組みなのか ただの配列です
React hooks はコンポーネントからロジックを切り出すとても便利な機能ですが、一体どのような仕組みなのか。
やはり、実際のReactの開発者の記事が一番正確でわかりやすいと思います。
https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e
答えはタイトルに書いてある通り、hooks は配列である、ということらしいです。
英語の文章ですが図を見るだけでもなんとなく理解できると思います。
要はuseStateを実行すると、値とその値をセットするための関数がそれぞれ別の配列にセットで入ります。
そして、さらにuseStateが実行されると、配列のカーソルが1増えて、配列の二番目に値とセットする関数が入ります。
という感じで、値とそのセッターをセットで別の配列に保持しているだけですね。
コンポーネントがレンダーされると、配列のカーソルが0に戻って、先ほどと同じことをします。
この動作から分かるように、あるコンポーネント内で、useStateの実行順序はレンダーごとに変化してはならないのです。
もし、実行順序が変わったり、特定の条件だけuseStateされる、という状況になると、配列のカーソルがおかしなことになり、想定していない配列の要素を参照してしまいます。
これがhooksを使うときのルールだある、useStateはトップレベルで実行してね、ということみたいです。