React useState Hook — 完全ガイドと例

useStateの理解

useStateは最も基本的なReact Hookです。関数コンポーネントに状態を追加でき、クラスコンポーネントのthis.stateとthis.setStateの必要性を置き換えます。

基本構文

const [state, setState] = useState(initialValue);

Hookはタプルを返します：現在の状態値とセッター関数です。Reactは各コンポーネント内のHook呼び出しの順序を追跡することで、再レンダリング間で状態を保持します。

関数型更新

新しい状態が前の状態に依存する場合、setStateの関数型を使用します：

setCount(prevCount => prevCount + 1);

これにより古いクロージャのバグを回避し、常に最新の値で作業できます。特に状態を参照するイベントハンドラやエフェクトで重要です。

遅延初期化

初期状態の計算が高コストな場合、値の代わりに関数を渡します：

const [data, setData] = useState(() => {
  return JSON.parse(localStorage.getItem("data") || "{}");
});

関数は最初のレンダリング時にのみ実行され、以降のレンダリングでの不要な計算を回避します。

オブジェクトと配列

クラスコンポーネントのsetStateとは異なり、useStateのセッターはオブジェクトをマージしません。手動でスプレッドする必要があります：

const [user, setUser] = useState({ name: "", age: 0 });
setUser(prev => ({ ...prev, name: "Alice" }));

複数のuseState呼び出しを使うタイミング

状態が論理的に独立している場合、複数のuseState呼び出しに分割します。常に一緒に変更される場合は、単一のオブジェクトにまとめるかuseReducerの使用を検討してください。