useState 画面が「覚えて、変わる」

前の章で、クリックに反応できるようになりました。でも、できたのはalertを出すことだけ。押したら画面の表示そのものが変わる——「いいね 3件」が「いいね 4件」になる、あれをやるのがこの章です。ここがReactの心臓部。準備運動から積んできたものが、全部この章に合流します。

まず、失敗から見る

素直に考えると、こう書きたくなります。「変数を作って、クリックで増やして、表示すればいいのでは?」

const Counter = () => {
  let count = 0;

  const handleClick = () => {
    count = count + 1;
    console.log(count); // 中身は増えている……
  };

  return (
    <div>
      <p>{count}回</p>
      <button onClick={handleClick}>押す</button>
    </div>
  );
};

これ、動きません。押してもconsoleの数字は増えるのに、画面は「0回」のまま。

理由はReactの根本の仕組みにあります。Reactは、コンポーネント(関数)を実行した結果でしか画面を描きません。普通の変数をこっそり書き換えても、Reactは「描き直すタイミング」を知らされていないので、画面は古いまま。つまり必要なのは、「値が変わったよ、描き直して!」とReactに知らせる仕組みです。

useState——Reactに管理を任せる箱

その仕組みがuseStateです。