なぜ Hooks が必要なのか？

JavaScriptの通常の変数（let など）を書き換えても、Reactはその変更を検知できず、画面は更新されません。

// ❌ 動作しない例
const Component = () => {
  let value = "";
  const handleClick = () => {
    value = "あいうえお"; // 値は変わるが、画面はそのまま
  };
  return <button onClick={handleClick}>{value}</button>;
};

Hooks (useState) による解決

useState を使うことで、Reactに「この値は画面表示に影響する重要なデータ（状態）である」と教えることができます。値が変わると、Reactは自動的にコンポーネントを再実行し、画面を最新の状態に保ちます。

React Hooks の共通ルール

• トップレベルで呼び出す: if 文やループ（for）の中、あるいは入れ子になった関数の中で Hook を呼び出してはいけません。
• Reactの関数内でのみ呼び出す: Hook は「関数コンポーネント」または「カスタムフック」の中からのみ呼び出せます。通常の JavaScript 関数では使えません。

まとめ

Hooks は、関数コンポーネントに「状態管理」や「副作用の処理」などの強力な機能を追加するための特別な関数です。正しく使うことで、動的でインタラクティブな UI を簡単に構築できます。