はじめに
こんにちは。IT経験1年半の駆け出しです。
今回はReactの状態管理でよく見る
setState(prev => ({
...prev,
email: "test@example.com"
}));
というコードに出てくる「prev」「...prev」について、初心者の方向けにやさしく解説していきます。
なぜprevを使うのか？
Reactで状態（state）を更新する際、こんな書き方を見たことはありませんか？
setCount(prev => prev + 1);
「え、普通に setCount(count + 1) じゃダメなの？」と思う方もいるかもしれません。
実は、Reactの状態更新は非同期でまとめて処理されるため、countの値がすでに古くなっている可能性があります。
よくある間違い
setCount(count + 1);
setCount(count + 1); // → 実際は1しか増えない！
正しい書き方
setCount(prev => prev + 1);
setCount(prev => prev + 1); // → ちゃんと2増える！
prevは「直前の最新状態」を参照できる特別な書き方。これによって、正確な状態の積み重ねが可能になります。
...prevって何？
次によく出てくるのが、...prevという書き方。これはスプレッド構文と呼ばれるJavaScriptの機能で、オブジェクトの中身を展開・コピーするものです。
例：フォームの一部だけを更新したいとき
const [form, setForm] = useState({
name: "",
email: ""
});
setForm(prev => ({
...prev,
email: "test@example.com"
}));
このコードの意味を分解すると：
- prev は前回の form の状態（{ name: "", email: "" }）
- ...prev でその内容をまるごとコピー
- そのうえで email だけを "test＠example.com" に上書き
つまり、元の情報は保ちつつ、一部だけを更新するというやり方です。
...prevを使わないとどうなる？
setForm({ email: "test@example.com" });
これだと、name の情報が消えて、formの中身がemailだけになります。
なぜ...prevが必要？
ReactのuseStateでオブジェクトを更新する場合、部分更新は自動では行われません。 そのため、「上書きしたい項目以外」もすべて保持するように明示する必要があります。
setForm(prev => ({
...prev,
email: "test@example.com"
}));
この書き方を覚えておけば、フォームの値や設定などの一部だけを変更するのにとても便利です。
まとめ
| 用語 | 意味・役割 |
|---|---|
| prev | 前回の状態の値を受け取る引数 |
| ...prev | 前回の状態をスプレッド構文でまるごとコピー |
| prev => prev + 1 | 状態更新を確実に積み重ねるための書き方 |
| ...prev, email: "..." | オブジェクトの一部だけを更新する基本テク |
おわりに
初心者がReactの状態管理でつまずきやすい「prev」と「...prev」。
意味を理解すると、複雑なUIでも安心して状態を更新できるようになります。