なぜReactのフックはトップレベルで呼び出さないといけないのか？

Reactのコードを書いていると、一度はタイトルのような趣旨のエラーに遭遇したことがあるのではないでしょうか？

実務の中でエラーに遭遇したときは、「へー、そうなんだ」と思ってコードを言われた通りに直すだけになってしまったのですが、ふと「なぜだ？？」と思ったので調べてみました。

結論：Reactは呼び出し順でフックを認識するから

新しいドキュメントには記載が無くなっていたのですが、古いドキュメントには以下のように解説されています。

では React は、どの useState の呼び出しがどの state に対応するのか、どうやって知るのでしょうか？ その答えは「React はフックが呼ばれる順番に依存している」です。我々の例が動作するのは、フックの呼び出しの順序が毎回のレンダーごとに同じだからです。

要するに、Reactはフックを名前ではなく順番で覚えているということです。
※そのようになっている理由が明記されている箇所は公式ドキュメントから見つけられませんでしたが、、、

銀行のATMから現金を引き出すことに例えてみます。
通常、以下のような流れを踏んで現金の引き出しは行われます。

1. キャッシュカードを挿入する
2. 暗証番号を入力する
3. 金額を入力する

ところが、暗証番号を入力するステップがスキップされて金額が入力された場合はどうなるでしょうか？
まともなシステムであれば、例外としてエラーになるはずです。
※不正利用がまかり通るようなATMの場合は現金が引き出せますが、、、

順番が守られないとエラーになるというのは、上記のようなイメージだと考えます。