state と useState — コンポーネントが覚えておく値

state=「画面が覚えておく値」

ボタンを押した回数、入力欄に打った文字、メニューが開いているかどうか。こうした「今の画面の状態」を表す値をstate(状態)と呼びます。ページを操作するたびに変わっていく値、と考えるとイメージしやすいです。たとえば料理中のタイマー表示。残り時間という数字が刻々と変わり、そのたびに表示も変わる。あの「変わる数字」がまさにstateです。

useState の読み方

stateを作るにはuseStateを使います。次の1行がReactで最も出てくる形です。左辺の角かっこは「配列を2つに分ける書き方(分割代入)」で、1つ目が今の値、2つ目がその値を更新するための関数です。命名はcountとsetCountのように「値」と「setつきの更新関数」でそろえるのが定番です。

const [count, setCount] = useState(0);
// useState(0) の 0 は「最初の値(初期値)」
// count      … 今の値(最初は 0)
// setCount   … count を新しい値に更新する関数
return <button onClick={() => setCount(count + 1)}>{count}</button>;

useStateに渡した0は初期値です。一番最初に画面が表示されるときだけ使われ、以降はsetCountで更新された値が使われます。countをそのまま画面に{count}と埋め込めば、今の値がそのまま表示されます。

なぜ普通の変数ではダメなのか

「変わる値なら普通の変数(let count = 0)でいいのでは?」と思うかもしれません。ところがletの変数を書き換えても、Reactは画面を作り直しません。数字は裏で増えているのに、表示は0のまま固まる。値と画面がズレてしまうのです。stateにして初めて「値が変わったら描き直す」がつながります。

let count = 0;
function handleClick() {
  count = count + 1; // 裏では増えるが…
}
return <button onClick={handleClick}>{count}</button>;

const [count, setCount] = useState(0);
function handleClick() {
  setCount(count + 1); // 値も画面も更新される
}
return <button onClick={handleClick}>{count}</button>;

• stateは「画面が覚えておく、変わっていく値」
• const [値, set値] = useState(初期値) が基本形
• 1つ目が今の値、2つ目が更新用の関数
• 普通の変数を書き換えても画面は更新されない=stateにする理由