状態管理でよくみる「prev」について解説してほしいです

[Good luck with React]

useStateで setCount(prev => prev + 1) みたいな書き方をよく見るんですが、
普通に setCount(count + 1) と書くのと何が違うんですか？

[Rookie Dev]

同じ関数の中では変数が更新されない
↓
React があとで最新値を入れて実行する

そもそも状態管理はset～という関数で更新します
const [count, setCount] = useState(0);

• count → state（今の値）
• setCount → state を更新するための 関数

prevを使用した記述はアロー関数の省略形です
prev => prev + 1
↓

(prev) => {
  return prev + 1;
}

↓

function(prev) {
  return prev + 1;
}

ということで、prevはただの引数名で自由にかえてもいいです。
慣習的に prev がよく使われます

import { useState } from "react";

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

  // prev を使わない（間違い例）
  const bad = () => {
    setCount(count + 1);
    setCount(count + 1);
  };

  // prev を使う（正しい例）
  const good = () => {
    setCount(prev => prev + 1);
    setCount(prev => prev + 1);
  };

  return (
    <div>
      <p>count: {count}</p>
      <button onClick={bad}>悪い例</button>
      <button onClick={good}>良い例</button>
    </div>
  );
}

悪い例 ボタンをクリック → count は +1 にしかならない
良い例 ボタンをクリック → count は +2 になる

いいね 133

[投稿者]

投稿