[今さら始める React マスター #3] useStateで画面を動かす

Stateとは？

Stateは、画面の状態を表すデータです。たとえばカウンターの数、入力フォームの値、開いているメニューなどがStateになります。

Reactでは useState を使ってStateを管理します。

useStateの基本

import { useState } from "react";

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

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

count は現在の値、setCount は値を更新する関数です。useState(0) の 0 は初期値です。

なぜ直接変更しないのか

Reactでは、Stateを直接書き換えず、更新関数を使います。

setCount(count + 1);

こうすることで、Reactは状態が変わったことを検知し、画面を再描画できます。

入力フォームの例

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

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

入力値もStateとして管理できます。

学習のポイント

useState はReactの基礎中の基礎です。「ユーザー操作で変わる値はStateにする」と考えると理解しやすくなります。