React useStateの使い方：例とよくある間違い

useState は、コンポーネントがレンダリングの間で何かを覚えておけるようにするフックです。カウント、入力欄のテキスト、メニューが開いているかどうか、などです。セッターを呼ぶたびに、Reactは新しい値でコンポーネントをもう一度レンダリングします。

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    return (
        <button onClick={() => setCount(count + 1)}>
            Clicked {count} times
        </button>
    );
}

ボタンをクリックしてから、エディタで useState(0) を useState(10) に変えてみてください。プレビューが再構築され、カウントは10から始まります。

構文

const [value, setValue] = useState(initialValue);

• initialValue は最初のレンダリングでだけ使われます。それ以降のレンダリングでは、Reactはこれを無視して保存している値を返します。
• value はこのレンダリングでの現在の値です。
• setValue は値を置き換え、新しいレンダリングを予約します。

名前は自由に付けられます。useState は要素が2つの配列を返し、角かっこがそれを取り出します。つまり [isOpen, setIsOpen] も [email, setEmail] も同じパターンです。

useState はコンポーネントのトップレベルで呼び出し、ループ、条件分岐、ネストした関数の中では呼ばないでください。Reactは呼び出しの順番で各呼び出しと保存した値を対応させるため、その順番はすべてのレンダリングで同じでなければなりません（フックのルールを参照）。

複数のstate

コンポーネントは必要なだけ useState を呼び出せます。呼び出しごとに独立した値になります。

import { useState } from 'react';

export default function App() {
    const [name, setName] = useState('');
    const [likesReact, setLikesReact] = useState(true);

    return (
        <div>
            <input
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Your name"
            />
            <label style={{ display: 'block', marginTop: 8 }}>
                <input
                    type="checkbox"
                    checked={likesReact}
                    onChange={(e) => setLikesReact(e.target.checked)}
                />
                I like React
            </label>
            <p>
                {name || 'Someone'} {likesReact ? 'likes' : 'does not like'} React.
            </p>
        </div>
    );
}

stateはスナップショット

セッターは、手元にある変数を変えません。次のレンダリングで値がどうなるべきかをReactに伝えるだけです。そのレンダリングが起きるまで、現在のレンダリングは古い値を見続けます。

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    function handleClick() {
        setCount(count + 1);
        console.log('count right after setCount:', count);
    }

    console.log('render with count =', count);

    return <button onClick={handleClick}>Add one ({count})</button>;
}

プレビューの下のコンソールを開き、1回クリックしてください。ハンドラは古い値の 0 を出力し、その後コンポーネントが 1 での新しいレンダリングを出力します。何も間違っていません。count はレンダリングの間ずっと定数で、次のレンダリングが新しい値を受け取るのです。

更新関数

スナップショットなので、count + 1 でセッターを3回呼んでも、増えるのは3ではなく1です。どの呼び出しも 0 + 1 を計算するからです。代わりに関数を渡すと、Reactは各呼び出しに前の呼び出しの結果を渡します。

import { useState } from 'react';

export default function App() {
    const [a, setA] = useState(0);
    const [b, setB] = useState(0);

    function addThreeWrong() {
        setA(a + 1);
        setA(a + 1);
        setA(a + 1);
    }

    function addThreeRight() {
        setB((n) => n + 1);
        setB((n) => n + 1);
        setB((n) => n + 1);
    }

    return (
        <div>
            <p>
                <button onClick={addThreeWrong}>a + 1 three times</button> a = {a}
            </p>
            <p>
                <button onClick={addThreeRight}>n =&gt; n + 1 three times</button> b = {b}
            </p>
        </div>
    );
}

次の値が前の値に依存し、その更新が最新のレンダリングから直接実行されるとは限らない場合は、更新関数の形を使ってください。1つのハンドラで複数回セットする場合、setInterval のコールバック、エフェクトなどです。

オブジェクトと配列のstate

Reactは古い値と新しい値を Object.is で比べて、もう一度レンダリングするかを決めます。オブジェクトをその場で変更して同じオブジェクトを渡し直すと、比較は「何も変わっていない」と判断し、画面はそのままです。必ず新しいオブジェクトや配列を渡してください。

import { useState } from 'react';

export default function App() {
    const [user, setUser] = useState({ name: 'Ada', age: 36 });
    const [tags, setTags] = useState(['math']);

    return (
        <div>
            <p>
                {user.name}, {user.age}
            </p>
            <button onClick={() => setUser({ ...user, age: user.age + 1 })}>
                Birthday
            </button>

            <p>Tags: {tags.join(', ')}</p>
            <button onClick={() => setTags([...tags, 'code'])}>Add tag</button>
            <button onClick={() => setTags(tags.filter((t) => t !== 'math'))}>
                Remove math
            </button>
        </div>
    );
}

{ ...user, age: user.age + 1 } はすべてのフィールドをコピーして1つを上書きします。[...tags, 'code'] は要素を追加し、filter は要素を取り除きます。どちらも新しい配列を返します。配列とオブジェクトの更新のページでは、ネストしたオブジェクト、リスト内の1項目の編集、途中への挿入を扱います。

遅延初期化

useState の引数は、Reactが最初の1回しか使わないにもかかわらず、レンダリングのたびに評価されます。計算が重い場合（localStorage の読み込み、大きな文字列のパースなど）は関数を渡してください。Reactは最初のレンダリングで1回だけそれを呼びます。

// Runs readSavedNotes() on every render, then throws the result away
const [notes, setNotes] = useState(readSavedNotes());

// Runs it once
const [notes, setNotes] = useState(readSavedNotes);
const [notes, setNotes] = useState(() => readSavedNotes());

keyでstateをリセットする

stateはツリー内のコンポーネントの位置に属しています。同じ場所に別の key をレンダリングすると、Reactはそれを新しいコンポーネントとして扱い、stateは最初からになります。編集対象が変わったときにフォームをリセットする、最もすっきりした方法です。

import { useState } from 'react';

function Draft({ to }) {
    const [text, setText] = useState('');
    return (
        <textarea
            value={text}
            onChange={(e) => setText(e.target.value)}
            placeholder={`Message to ${to}`}
            rows={3}
        />
    );
}

export default function App() {
    const [to, setTo] = useState('Ada');
    return (
        <div>
            <select value={to} onChange={(e) => setTo(e.target.value)}>
                <option>Ada</option>
                <option>Linus</option>
            </select>
            <div style={{ marginTop: 8 }}>
                <Draft key={to} to={to} />
            </div>
        </div>
    );
}

メッセージを入力してから宛先を切り替えると、下書きが消えます。key={to} を削除してもう一度試すと、テキストは残ります。Reactが同じ場所に同じ Draft があると見なすからです。

よくある間違い

セットした直後にstateをログに出す。上で見たとおり、古い値が表示されます。コンポーネント本体でログを出すか、先に次の値を変数に計算してそれを使ってください。

stateを直接変更する。user.age++; setUser(user) は同じオブジェクトを渡すので、何もレンダリングされません。先にコピーしてください。

レンダリング中にセッターを呼ぶ。<button onClick={setCount(count + 1)}> はレンダリング中に setCount を呼び、それがもう一度レンダリングを起こし、またそれを呼びます。Reactはこのループを「Too many re-renders」で止めます。関数を渡してください：onClick={() => setCount(count + 1)}。

計算できる値を保存する。fullName が常に first + ' ' + last なら、ずれる可能性のある3つ目のstateを持たず、レンダリング中に計算してください。