useState
別名: useState フック / 状態フック
関数コンポーネントにローカルな状態変数を持たせ、その更新で再レンダリングを引き起こす React 標準フック。
#react#hooks#usestate#state
公開:
定義
useState は、関数コンポーネントに状態変数を追加する React フックです。const [state, setState] = useState(initial) の形で、現在値と更新関数のペアを返します。
詳細
setState を呼ぶと値が更新され、コンポーネントが再レンダリングされます。
更新はその場では即時反映されず、次のレンダリングで新しい値になります。
直前の状態をもとに更新するときは setState(prev => prev + 1) のように更新関数を渡します。
初期値は初回レンダリング時のみ使われ、重い計算なら useState(() => compute()) と遅延初期化できます。
よくある誤解
- 「
setState直後に変数へ反映される」：同じレンダリング内のstateは古いままで、更新は次のレンダリングに現れます。 - 「オブジェクトを直接書き換えればよい」：新しい参照を渡さないと、React は変化に気づかず再レンダリングしません。
関連
更新が反映されない症状は setState しても画面が更新されない、フックの呼び出し位置の規則は Invalid Hook Call を参照。