useStateで状態を持つ ― カウンター

導入

「押した回数」のように、時間とともに変わる値は state にします。useState は現在の値と、それを更新する関数のペアを返します。

説明

定番のカウンターです。

function App() {
  const [count, setCount] = React.useState(0);
  return (
    <div style={{ textAlign: "center", fontFamily: "system-ui" }}>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(count - 1)}>-1</button>
      <button onClick={() => setCount(0)}>リセット</button>
    </div>
  );
}

• const [count, setCount] = React.useState(0) … count が現在の値（初期値 0）、setCount が値を更新する関数です。
• setCount(count + 1) … 値を更新すると、React がその部分を自動で再描画します。だから画面の数字が変わります。
• state を直接 count = count + 1 と書き換えてはいけません。必ず setCount を通します。

やってみよう

「+10」するボタンを追加してみましょう。また、useState(0) の初期値を 100 に変えると最初の表示がどうなるか確かめてください。