useState prev

1つの関数で1つのreact-hookのusStateを複数回使用すると、結果が望ましくないという問題が発生する可能性があります.
以下、カウント値を順番に1、3、5、7上げて、最後にボタンを押して、16のコードを上げたいです.

import { useState } from "react";
export default function StatePrevPage() {
  const [count, setCount] = useState(0);
  const onClickCount = () => {
    setCount(count + 1);
    setCount(count + 3);
    setCount(count + 5);
    setCount(count + 7);
  };
  return (
    <div>
      <div>Count:{count}</div>
      <button onClick={onClickCount}>Count Up</button>
    </div>
  );
}

しかし実際に起動すると、16ではなく7です.
受信したcount値は+1,+3,+5の値ではなく,初期状態0から受信した値であるからである.
そこでこれを防ぐためにprevという機能を使いました.
下図のように、コードを使用して16が正常に上昇していることを確認します.

import { useState } from "react";
export default function StatePrevPage() {
  const [count, setCount] = useState(0);
  const onClickCount = () => {
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
    setCount((prev) => prev + 1);
  };
  return (
    <div>
      <div>Count:{count}</div>
      <button onClick={onClickCount}>Count Up</button>
    </div>
  );
}