useStateの引数について学んだ

Reactを最近触り始めました。
めちゃくちゃ初心者です🔰

カウントするならcount++っしょ

useStateの動きを確認するために、クリックするとカウントが+1ずつ増えていくコードを作りました。
しかし、なぜか2回に1回しかカウントが増えない…🤨

import { useState } from 'react';

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

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

  return (
    <>
      <h1>UseState</h1>
      <button onClick={handleClick}>+</button>
      <p>{count}</p>
    </>
  )
}

export default App;

おかしい理由

なぜなの！教えてGPT🥺

count の値がまず現在の値で評価され、その後にインクリメントされます。つまり、upCount(count++) の場合、upCount に渡されるのは現在の count の値であり、その後に count の値がインクリメントされます。

確かにコンソールに出してみると、同じ数字が2回ずつ表示されました。

以下に修正したところ、正常に動きました！

setCount(count + 1);

setCount(count + 1)でもダメだった

解決はしましたが、setCountについて調べていたらこんな記事が。

https://zenn.dev/stin/articles/use-appropriate-api

嘘やん、たったいまsetCount(count + 1)使いましたよー🙄

正しくは、こうしましょうね！？

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

理由

useStateでstateを更新する際、引数には以下2種類があります。

1. 新しい状態を直接指定する方法:

   setCount(count + 1);
   

   この方法では、現在の状態 (count) に対して直接新しい値を指定します。
   状態の更新は同期的に行われます。

2. 現在の状態を受け取り、新しい状態にする関数を指定する方法:

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

   この方法では、現在の状態 (prevCount) を受け取り、新しい状態を計算するための関数を指定します。
   この関数は現在の状態を正確に反映し、非同期に実行される場合があります。この方法を使用すると、前の状態に基づいて安全に状態を更新できます。

前者1はGPTさんが説明してくれた通りでした。

今回やりたいことは、「現在の状態の数字に+1をして、新しい状態にしたい」なので、後者が適切となります。

以下記事もわかりやすかったです。ありがとうございます。
https://qiita.com/im36-123/items/857c96ff60024c0d8a1c

おわり

学習に使った動画では引数の説明がなく、なんとなくcount++じゃだめなの？と試したところ、学びになりました。
予期せぬ動きになる場合もあることも知れたので、「動くからいい」ではなく、適切か判断して使いたいと思います。