React クイックスタート メモ

https://ja.react.dev/learn のメモ

<MyButton /> が大文字で始まっていることに注意してください。こうすることで、React のコンポーネントであるということを示しています。React のコンポーネント名は常に大文字で始める必要があり、HTML タグは小文字でなければなりません。

コンパクトなコードをお望みの場合は、条件 ? 演算子を使用できます。if とは異なり、JSX の中で動作します。

Q. JSX 内で if 文が使えない理由は？

A. JSXがJavaScriptの式を拡張したものだから。（if 文は式ではなく文であるため使えない）

フックには通常の関数より多くの制限があります。フックはコンポーネントのトップレベル（または他のフック内）でのみ呼び出すことができます。条件分岐やループの中で useState を使いたい場合は、新しいコンポーネントを抽出してそこに配置します。

Q. フックがコンポーネントのトップレベルでしか使えない理由は？

A. フックは呼び出される順序に依存しているため。

もしフックが条件分岐やループの中で呼び出されると、その呼び出し順序が保証できなくなり、Reactはフックの状態を正しく追跡できなくなる。

https://js.legacy.reactjs.org/docs/hooks-rules.html

では React は、どの useState の呼び出しがどの state に対応するのか、どうやって知るのでしょうか？ その答えは「React はフックが呼ばれる順番に依存している」です。