prevって何？なんで直接setCount(count + 1)じゃダメなの？

はじめに

Reactでカウンターなどの状態を管理していると、こんなコードを見かけることがあります。

setCount((prev) => prev + 1);

「prevって何？」「なんで直接setCount(count + 1)じゃダメなの？」と疑問に思った方も多いのではないでしょうか。

この記事では、prevの正体とその重要性を、シンプルなカウンターの例を使ってわかりやすく解説します！

prevの意味とは？

prevとは、**「前の状態（previous state）」**のことです。

ReactのuseStateで定義した状態更新関数（例：setCount）には、関数を引数として渡すことができます。

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

// 関数を渡す方法
setCount((prev) => prev + 1);

このとき、Reactは自動的に関数の引数に最新の状態（= prev）を渡してくれるのです。

なぜ直接setCount(count + 1)ではダメなの？

複数回連続で状態を更新する場合、古い状態に基づいてしまうことがあるからです。

❌ NGな例

const handleClick = () => {
  setCount(count + 1)
  setCount(count + 1)
}

この関数が呼ばれた瞬間、今のcountの値が確定しており、それ以降は変わらないのです。

• countはこの関数内では「ただの変数」として扱われる
• setCount(count + 1)を2回呼んでも、どちらも「古いcount + 1」で計算される
• それぞれのsetCountは同じ値を次の状態としてReactに渡す

const handleClick = () => {
  // コールされるときcount = 1の場合
  setCount(0 + 1)
  setCount(0 + 1)
}

✅ OKな例（prevを使う）

const handleClick = () => {
  setCount((prev) => prev + 1);
  setCount((prev) => prev + 1);
}

この書き方なら、Reactは1回目の更新後の最新の値をprevに渡してくれるので、正しく2回加算されます（+2）。

👀 prevを使うべきパターン

状況	書き方	説明
1回だけ更新	setCount(count + 1)	状態に依存していないならOK
状態に依存して複数回更新	setCount((prev) => prev + 1)	このパターンでprevが必要！

まとめ

• prevは 「直前の状態」 を意味する
• setState((prev) => …) という形で使う
• 特に、状態に依存した更新を複数回行うときに必須
• Reactが 最新の状態を保証して渡してくれる ので安心！

✍️ おまけ：サンプルコード全体

import { useState } from "react";

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

  const handleDoubleIncrement = () => {
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
  };

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={handleDoubleIncrement}>+2する</button>
    </div>
  );
}

このように、prevを使えば**「意図した通りの更新」**を安全に行うことができます。Reactで状態管理を行う上でとても大事なポイントなので、ぜひ覚えておきましょう！