useStateで状態を管理する

コンポーネント内部で状態（state）を持ちたい場合、ReactのuseStateフックを使うことで、変化するデータを簡潔に管理できます。ここでは文字列・数値・オブジェクト・配列など、さまざまな値をuseStateで管理する方法を紹介します。

1. 基本的な使い方（文字列などのプリミティブ型）

import { useState } from "react";

const App = () => {
  const [message, setMessage] = useState("こんにちは");

  return (

<div>

<p>{message}</p>
      <button onClick={() => setMessage("こんばんは")}>変更</button>
    </div>
  );
};

• useState(初期値) で状態を定義
• [現在の値, 更新関数] の形式で返される

2. 数値を更新する（カウンター）

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

  return (

<div>

<p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

3. オブジェクトを状態として扱う

type User = {
  name: string;
  age: number;
};

const UserCard = () => {
  const [user, setUser] = useState
<User>({ name: "Taro", age: 20 });

  const incrementAge = () => {
    setUser((prev) => ({ ...prev, age: prev.age + 1 }));
  };

  return (

<div>

<p>{user.name}（{user.age}歳）</p>
      <button onClick={incrementAge}>年齢+1</button>
    </div>
  );
};

4. 配列を扱う

const List = () => {
  const [items, setItems] = useState<string[]>([]);

  const addItem = () => {
    setItems((prev) => [...prev, `Item ${prev.length + 1}`]);
  };

  return (
    <>

<ul>
        {items.map((item, i) => (
          <li key={i}>{item}</li>
        ))}
      </ul>
      <button onClick={addItem}>追加</button>
    </>
  );
};

5. 状態更新が非同期であることに注意

const Example = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    setCount(count + 1); // 実際には +1 しかされない
  };

  return <button onClick={handleClick}>クリック</button>;
};

// 解決方法（前の値を使う関数形式）
setCount((prev) => prev + 1);
setCount((prev) => prev + 1); // 正しく2増える

6. 型注釈の省略と明示

const [name, setName] = useState("Taro"); // string型に推論される

const [value, setValue] = useState<string | null>(null); // 明示が必要