useStateによるローカルなstate

useStateでコンポーネントに記憶を持たせ、ユーザーの操作に合わせて変化する値を表示できるようにしましょう。

8 分 · 3 問

いいねのカウンター、検索欄に入力されたテキスト、開いたり閉じたりするメニュー。これらの値はすべて、アプリを使っている間に 変化 します。普通の変数では足りません。なぜならReactは、変数が変わっても画面を更新し直さないからです。必要なのは state（状態） と呼ばれるもの、つまりコンポーネント自身が持つ記憶です。stateは useState で作ります。これは フック と呼ばれ、名前が use で始まる、Reactが提供する特別な関数です。

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

肝心な一行を分解してみましょう。const [count, setCount] = useState(0); です。useState(0) は初期値 0 を持つstateを作り、二つの要素からなる配列を返します。それを分割代入で受け取ります。count は 現在の値、setCount は 更新用の関数 で、その値を変更する唯一の許された手段です。ここでは、クリックのたびに onClick が setCount(count + 1) を発動します（イベントは次のレッスンで詳しく扱います）。

import { useState } from "react";

function NameInput() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>Hello, {name}!</p>
    </div>
  );
}

setName を呼ぶと、Reactは二つのことをします。まず新しい値を 保存 し、それからあなたのコンポーネント関数を 再実行 して出力を計算し直します。これを 再レンダリング と呼びます。だからこそ Hello, {name}! の段落は、一文字打つたびに自動的に更新されるのです。あなたは結果を記述するだけで、あとはReactが引き受けてくれます。

理解度チェック

このレッスンの要点をしっかり覚えているか確認しましょう。

1. useState(0) の呼び出しは何を返しますか？
   • stateの現在の値だけ
   • 現在の値とその更新用関数からなる配列
   • コンポーネントのすべてのstateを含むオブジェクト
2. カウンターを増やす正しい方法はどれですか？
   • count = count + 1
   • useState(count + 1)
   • setCount(count + 1)
3. stateの更新用関数を呼ぶと何が起こりますか？
   • Reactがコンポーネントを再実行して表示を更新する
   • ブラウザでページ全体が再読み込みされる
   • 何も起きず、自分で手動でページを更新する必要もある