コンポーネントにローカルな状態を追加する最も基本的なフック。状態が変わると再レンダーが発生する。
const [state, setState] = useState<S>(initialState)
// 型推論が効く場合
const [count, setCount] = useState(0); // number
const [name, setName] = useState(''); // string
// 明示的に型指定
const [user, setUser] = useState<User | null>(null);import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>カウント: {count}</p>
{/* 直接値を渡す */}
<button onClick={() => setCount(count + 1)}>+1</button>
{/* 関数型更新（前の状態を参照） */}
<button onClick={() => setCount(prev => prev - 1)}>-1</button>
<button onClick={() => setCount(0)}>リセット</button>
</div>
);
}初期値に計算コストの高い処理を渡す場合は、関数形式 useState(() => expensiveCalc()) を使うと初回レンダー時のみ実行される。
useStateはReactでローカル状態を管理する最も基本的なフックです。第1引数に初期値（または初期値を返す関数）を渡すと、[現在の状態, 更新関数]のタプルを返します。setState()を呼ぶとコンポーネントが再レンダーされます。オブジェクト・配列を状態にするときは、必ずスプレッド構文などで新しい参照を作って渡します（ミューテーションは検知されません）。重い計算の初期化には遅延初期化（()=> expensiveCalc()）を使うと初回だけ実行されます。