useState とは

コンポーネント内で「変化するデータ（状態）」を扱うための関数（フック）です。値が変わると、Reactが自動的に画面を「再レンダリング（描き直し）」してくれます。

import { useState } from "react";

const Counter = () => {
  // [現在の値, 値を更新するための関数] = useState(初期値)
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

再レンダリングの仕組み

更新用関数（上記の例では setCount）を呼び出すと、Reactは以下のステップを踏みます。

1. 内部で保持している値を新しい値に書き換える。
2. コンポーネント関数をもう一度実行する（再レンダリング）。
3. 新しい値に基づいて、画面の表示を最新の状態に更新する。

[!IMPORTANT] 通常の変数を書き換えても画面は更新されません。見た目に反映させたいデータは必ず useState で管理する必要があります。

まとめ

• State: コンポーネントが「記憶」している動的なデータ。
• 宣言的UI: 「データを更新すれば、見た目は React が勝手に合わせてくれる」という考え方。
• 同期: 常にデータと表示がピッタリ一致した状態を保てます。