useState

// 型推論が効く場合
const [count, setCount] = useState(0);         // number
const [name, setName] = useState('');           // string
// 明示的に型指定
const [user, setUser] = useState<User | null>(null);

import { useState } from 'react';

// ── 数値の state（最もシンプルな例）──────────────────
function Counter() {
  // useState(0) → 初期値0のカウンター
  // count: 現在の値、setCount: 値を変更する関数
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>カウント: {count}</p>
      {/* setCount に新しい値を直接渡す */}
      <button onClick={() => setCount(count + 1)}>+1</button>
      {/* 関数型更新: 前の値(prev)を使って確実に計算 */}
      <button onClick={() => setCount(prev => prev - 1)}>-1</button>
      {/* 0 に戻す */}
      <button onClick={() => setCount(0)}>リセット</button>
    </div>
  );
}

// ── 文字列の state（入力フォーム）──────────────────
function NameInput() {
  const [name, setName] = useState(''); // 初期値は空文字

  return (
    <div>
      {/* input の値を state と同期させる（Controlled Component）*/}
      <input
        value={name}
        onChange={e => setName(e.target.value)} // 入力のたびに更新
        placeholder="名前を入力..."
      />
      <p>こんにちは、{name || 'ゲスト'}さん！</p>
    </div>
  );
}

// ── オブジェクトの state ─────────────────────────────
function ProfileForm() {
  const [profile, setProfile] = useState({ name: '', age: 0 });

  const updateName = (name: string) => {
    // ⚠️ オブジェクトは必ずスプレッド構文でコピーしてから更新
    setProfile(prev => ({ ...prev, name }));
  };

  return <input value={profile.name} onChange={e => updateName(e.target.value)} />;
}