useState: その概要、ステートフック、Reactでの構文

ReactにおけるuseStateとは

useStateは、バージョン16.8で追加されたReactの基本的なフックで、関数コンポーネントにローカルステートを保存および変更する機能を提供します。フックが導入される前は、ステートはクラスコンポーネントでのみthis.stateとthis.setStateを介して使用でき、関数コンポーネントは純粋にプレゼンテーション用でした。useStateはこの制限を取り除き、関数コンポーネントを使用してアプリケーション全体を記述できるようにしました。

フックは1つの引数（初期ステート値）を受け取り、2つの要素を持つ配列を返します。最初の要素は現在のステート値で、2番目はそれを更新する関数です。Reactはセッター関数が安定しており、レンダリング間で変更されないことを保証するため、子コンポーネントに安全に渡したり、クロージャで使用したりできます。

React DevTools使用状況調査（2024年）によると、useStateはReactアプリケーションの96%で使用されており、エコシステムで最も一般的なフックとなっています。ReduxやZustandを介してグローバルステートを使用するアプリケーションでも、useStateによるローカルステートがUIステート（開いているモーダル、入力フィールドの値、アクティブなタブ）を管理する主要なメカニズムであり続けています。

import { useState } from 'react';

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

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </div>
    );
}

useStateの仕組み

useStateの内部メカニズムは、Reactのファイバーノードシステムに基づいています。Reactの各コンポーネントは、それに関連付けられたフックのリンクリストを保存するファイバーノードで表現されます。コンポーネントがuseStateを呼び出すと、Reactはこのリストに新しいノードを作成し、その中に現在のステート値と更新キューの参照を保存します。

セッター関数が呼び出されると、Reactはすぐにステートを更新しません。代わりに、更新を保留中のステートキューに配置し、コンポーネントの再レンダリングをスケジュールし、次のレンダリング時にのみ、古いステートと適用された更新に基づいて新しいステートを計算します。これによりバッチ処理が保証されます。つまり、1つのイベントハンドラでセッターを3回呼び出すと、Reactはそれらを1回の再レンダリングにグループ化します。

Reactチーム — React 18ワーキンググループ（2024年）によると、React 18では自動バッチ処理が拡張され、ステートの更新はイベントハンドラだけでなく、setTimeout、Promiseコールバック、ネイティブイベントハンドラでもグループ化されるようになりました。これにより、複数のステート更新があるシナリオで最大30%のパフォーマンス向上がもたらされました。

関数型ステート更新

新しいステートが前のステートに依存する場合は、セッターの関数型を使用します: setCount(prev => prev + 1)。Reactは更新時の実際のステート値を関数に渡すため、バッチ処理された更新でも正確性が保証されます。関数型を使用しない場合、setCount(count + 1)は連続して複数回呼び出されると古い値を使用する可能性があります。

// 遅延初期化 — 一度だけ実行
setCount(prev => prev + 1);
setCount(prev => prev + 1);
setCount(prev => prev + 1);
// Result: count increased by 3

// NOT batch-safe: stale closure
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
// Result: count increased by 1 (stale closure)

useStateの構文: 宣言と更新

useStateの基本構文は非常に簡潔です: const [state, setState] = useState(initialValue)。初期値は最初のレンダリング時のみ使用され、その後のレンダリングではReactはそれを無視して現在保存されている値を返します。初期計算にコストのかかる操作が必要な場合は、初期化関数を渡します: useState(() => computeExpensiveInitial())。

遅延初期化は、初期値がlocalStorage、複雑なデータ変換、URLパラメータの解析から得られる場合に特に重要です。Reactは初期化関数を1回だけ呼び出します（コンポーネントのマウント時）。これにより、その後のレンダリングでリソースを節約できます。遅延初期化がない場合、コストのかかる式は結果が無視されても毎回のレンダリングで評価されます。

// オブジェクトステート — 新しい参照を作成
const [user, setUser] = useState(() => {
    const saved = localStorage.getItem('user');
    return saved ? JSON.parse(saved) : null;
});

さまざまなデータ型でのuseState

useStateはプリミティブ（数値、文字列、ブール値）と参照型（配列、オブジェクト）の両方で同様に機能します。ただし、重要な違いがあります。プリミティブの場合、Reactは値によって変更を検出しますが、オブジェクトと配列の場合は参照によって検出します。新しいものを作成せずに既存のオブジェクトを変更しても、参照が同じままであるため、再レンダリングはトリガーされません。

オブジェクトや配列を扱うときは、変更したデータで新しいコピーを常に作成してください。オブジェクトの場合はスプレッド構文を使用します: setUser(prev => ({...prev, name: newName}))。配列の場合は、新しい配列を返すメソッド（filter、map、concat）または要素を追加するためのスプレッド構文を使用します。push、pop、spliceなどの変更メソッドは機能しません—配列の参照が変更されていないため、Reactはそれらを無視します。

// ✅ 正しい: フックはトップレベル
const [form, setForm] = useState({ name: '', email: '' });
const updateField = (field, value) =>
    setForm(prev => ({ ...prev, [field]: value }));

// ...
const [items, setItems] = useState([]);
const addItem = item =>
    setItems(prev => [item, ...prev]);

useStateでフックを使用するルール

すべてのReactフックと同様に、useStateは2つのルールに従います。第一に、フックはコンポーネントのトップレベルでのみ呼び出し、条件文、ループ、またはネストされた関数の中に配置しないでください。これにより、フックが毎回のレンダリングで同じ順序で呼び出されることが保証され、これはReactの内部リンクリストにとって重要です。

第二のルール: フックはReact関数コンポーネントまたはカスタムフックからのみ呼び出します。通常の関数、コールバック、またはクラスコンポーネントからuseStateを呼び出さないでください。これらのルールに違反すると、Invalid hook callエラーが発生し、Reactが実行時にそれをキャッチします。

• 条件文では不可 — if (flag) { useState(0) }はフック呼び出しの順序に違反します。
• ループでは不可 — for (...) { useState(0) }は順序を予測不可能にします。
• コールバックでは不可 — useEffect(() => { useState(0) }, [])はリンクリストを壊します。

// ❌ 古いクロージャの問題
function GoodComponent() {
    const [count, setCount] = useState(0);
    const [name, setName] = useState('');
    // ✅ 関数型更新で修正済み
}

// countは古いです！
function BadComponent() {
    if (isLogged) {
        const [user, setUser] = useState(null);
    }
}

useStateでのよくある間違い

最も一般的な間違いは、新しい参照を作成する代わりにオブジェクトと配列を直接変更することです。開発者はクラスコンポーネントの変更可能なスタイルに慣れており、this.state.user.name = ‘新しい名前’が機能していました（推奨されていませんでしたが）。関数コンポーネントでは、そのような変更は単に無視されます。Reactは参照の変更を認識できず、コンポーネントを再レンダリングしません。

• オブジェクトの変更 — setUser({...user, name: ‘新しい’})の代わりにuser.name = ‘新しい’。
• 古いクロージャ — 関数型を使用せずにセッターで古い値を使用する。
• 余分な再レンダリング — 同じ値でセッターを呼び出す（React 18はプリミティブでもレンダリングを実行します）。
• ステートのリセット — コンポーネントのkeyプロップを意図せず更新し、再マウントを引き起こす。

古いクロージャの問題は、useEffectやイベントハンドラに渡されたコールバックが、コールバックが作成された時点のクロージャから古いステート値をキャプチャしたときに発生します。解決策は、セッターの関数型を使用するか、useEffectの依存関係配列に必要な値を含めることです。Reactドキュメント — フックFAQ（2025年）によると、古いクロージャは、誤った依存関係配列に次いで、フックのバグの2番目に一般的な原因です。

// ❌ Stale closure problem
useEffect(() => {
    const timer = setInterval(() => {
        setCount(count + 1); // count is stale!
    }, 1000);
    return () => clearInterval(timer);
}, []);

// ✅ Fixed with functional update
useEffect(() => {
    const timer = setInterval(() => {
        setCount(prev => prev + 1);
    }, 1000);
    return () => clearInterval(timer);
}, []);