はじめに

こんにちは。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という書き方。これはスプレッド構文と呼ばれる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だけになります。

ReactのuseStateでオブジェクトを更新する場合、部分更新は自動では行われません。 そのため、「上書きしたい項目以外」もすべて保持するように明示する必要があります。

setForm(prev => ({
  ...prev,
  email: "test@example.com"
}));

この書き方を覚えておけば、フォームの値や設定などの一部だけを変更するのにとても便利です。

おわりに
初心者がReactの状態管理でつまずきやすい「prev」と「...prev」。 意味を理解すると、複雑なUIでも安心して状態を更新できるようになります。