再レンダリングの直感 — stateと画面が同期する感覚

再レンダリング=「state更新 → 部品を作り直す」

Reactの心臓部を一言でいうと「stateが変わったら、その部品(コンポーネント)をもう一度実行して画面を作り直す」です。この作り直しを再レンダリング(再描画)と呼びます。コンポーネントは関数なので、stateが変わるたびにその関数がもう一度呼ばれ、新しいstateを使って新しい見た目を返す、という流れになります。

流れを追ってみる:カウンターの例

ボタンを押すとsetCountが呼ばれ、countが変わります。するとReactがこのコンポーネント関数をもう一度実行し、新しいcountを使って画面を作り直します。だから表示の数字が増える。「setter → state更新 → 再実行 → 画面更新」という一本道を覚えると、動きが読めるようになります。

function Counter() {
  const [count, setCount] = useState(0);
  // ↓ ここは count が変わるたびに毎回実行される
  return (
    <div>
      <p>今の値: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

トグルの例:true と false を切り替える

「開いている / 閉じている」のような2状態の切り替え(トグル)も同じ理屈です。booleanのstateを反転させると再レンダリングが起き、表示が切り替わります。stateと画面がぴったり同期している感覚をつかんでください。

function Toggle() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(!open)}>
        {open ? "閉じる" : "開く"}
      </button>
      {open && <p>中身が見えています</p>}
    </div>
  );
}

<button onClick={() => count++}>+1</button>

<button onClick={() => setCount(count + 1)}>+1</button>

• 再レンダリング=stateが変わると、その部品が再実行され画面が更新される
• 流れは「setter → state更新 → 再実行 → 画面更新」の一本道
• 私たちは『今のstateならこう表示』だけを書けばよい
• stateを直接書き換えると再レンダリングされない。必ずsetterを使う